fix typos

This commit is contained in:
qianguyihao
2018-12-09 17:23:30 +08:00
parent 1523f7a7b3
commit aa76db8748
21 changed files with 30 additions and 63 deletions

View File

@@ -279,7 +279,7 @@ PSpadding的区域也是有背景图的。
### background 综合属性
background属性和border一样是一个综合属性可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到boder)
background属性和border一样是一个综合属性可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到border)
举例1:

View File

@@ -172,7 +172,7 @@ CSS盒模型和IE盒模型的区别
#### padding区域也有颜色
padding就是内边距。padding的区域有背景颜色css2.1前提下并且背景颜色一定和内容区域的相同。也就是说background-color将填充**所有boder以内的区域。**
padding就是内边距。padding的区域有背景颜色css2.1前提下并且背景颜色一定和内容区域的相同。也就是说background-color将填充**所有border以内的区域。**
效果如下:

View File

@@ -237,7 +237,7 @@ css中一共有三种手段使一个元素脱离标准文档流
![](http://img.smyhvae.com/20170801_1720.png)
上图中div本身是块级元素如果不设置widh它会单独霸占整行但是设置div浮动后它会收缩
上图中div本身是块级元素如果不设置width它会单独霸占整行但是设置div浮动后它会收缩
### 浮动的补充(做网站时注意)
@@ -816,39 +816,6 @@ _zoom:1;
如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的。
### 善于使用父亲的padding而不是儿子的margin
我们来看一个奇怪的现象。现在有下面这样一个结构div中放一个p
```
<div>
<p></p>
</div>
```
上面的结构中,我们尝试通过给儿子`p`一个`margin-top:50px;`的属性让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象
![](http://img.smyhvae.com/20170806_1537.png)
此时我们给父亲div加一个border属性就正常了
![](http://img.smyhvae.com/20170806_1544.png)
如果父亲没有border那么儿子的margin实际上踹的是“流”踹的是这“行”。所以父亲整体也掉下来了。
**margin这个属性本质上描述的是兄弟和兄弟之间的距离 最好不要用这个marign表达父子之间的距离。**
所以如果要表达父子之间的距离我们一定要善于使用父亲的padding而不是儿子的margin。
### 盒子居中`margin:0 auto;`
margin的值可以为auto表示自动。当left、right两个方向都是auto的时候盒子居中了

View File

@@ -13,7 +13,7 @@
这里我们要普及一个概念,叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。**
比如说网站左上角的logo设计图给出的左边距是143像素此时我们先玩不要以为logo的左边距真的是143像素。因为设计图只是一个版心而整个页面是处于浏览器的中间浏览器的宽度是可以随时调整的。
比如说网站左上角的logo设计图给出的左边距是143像素此时我们千万不要以为logo的左边距真的是143像素。因为设计图只是一个版心而整个页面是处于浏览器的中间浏览器的宽度是可以随时调整的。
我们量一下中间四个方形图的width是1000px所以网页版心的宽度是1000px。