This commit is contained in:
qianguyihao 2018-01-11 21:29:37 +08:00
parent 41c1ac6302
commit 7d7eadf3ff
4 changed files with 9 additions and 15 deletions

View File

@ -300,6 +300,8 @@ ul li{
## 定位属性(position,float,overflow,z-index)
> 这一段涉及到**浮动**的知识,我们在[浮动]()这篇文章中会专门讲解。本段只做简单介绍。
在讲之前,有个概念叫顺序流,需要强调一下。
<font color="#0000FF">**顺序流**</font>:所有的标签的初始排列顺序就称为顺序流。

View File

@ -15,8 +15,7 @@
一个盒子中主要的属性就5个width、height、padding、border、margin。如下
- width内容的宽度。CSS中 width 指的是内容的宽度,而不是盒子的宽度。
- height内容的高度。CSS中 height 指的是内容的高度,而不是盒子的高度。
- width和height内容的宽度、高度不是盒子的宽度、高度
- padding内边距。
- border边框。
- margin外边距。
@ -39,11 +38,6 @@
注意:**宽度和真实占有宽度,不是一个概念!**来看下面这例子。
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-29.jpg)
例如上图所示假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素就需要将内容的宽度设置为70像素。
### 标准盒子模型和IE盒子模型
> 我们目前所学习的知识中,以标准盒子模型为准。
@ -158,7 +152,6 @@ IE盒子模型
**如果想保持一个盒子的真实占有宽度不变那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的,这会把别的盒子挤下去。
PS小技巧在sublime text中为了快速输入`border:1px solid red;`这个属性,可以直接输入`bd`,然后选第二个后回车。
### 认识padding
@ -385,6 +378,8 @@ border:1px solid red;
就是把4个边框都设置为1px宽度、线型实线、red颜色。
PS小技巧在sublime text中为了快速输入`border:1px solid red;`这个属性,可以直接输入`bd`,然后选第二个后回车。
border属性是能够被拆开的有两大种拆开的方式
- 1按三要素拆开border-width、border-style、border-color。一个border属性是由三个小属性综合而成的
@ -462,7 +457,7 @@ border:10px solid red;
```
工作中到底用什么?很简答:什么简单用什么。举例如下:
工作中到底用什么?很简答:什么简单用什么。但要懂得,用小属性层叠大属性。举例如下:
![](http://img.smyhvae.com/20170728_1606.png)

View File

@ -13,9 +13,6 @@
### 标准文档流的特性
> 我们来看看标准流有哪些微观现象。
**1空白折叠现象**
无论多少个空格、换行、tab都会折叠为一个空格。
@ -73,7 +70,7 @@
**块级元素和行内元素的分类:**
**行内元素和块级元素的分类:**
在以前的HTML知识中我们已经将标签分过类当时分为了文本级、容器级。
@ -445,7 +442,7 @@ css中一共有三种手段使一个元素脱离标准文档流
<li>许嵩3</li>
<li>许嵩4</li>
</ul>
</div>
</div>
</body>
</html>
```

View File

@ -19,5 +19,5 @@
- [04-盒子模型](./02-CSS/04-盒子模型.md)
- [05-浮动](./02-CSS/04-浮动.md)
- [05-浮动](./02-CSS/05-浮动.md)