update
This commit is contained in:
parent
41c1ac6302
commit
7d7eadf3ff
@ -300,6 +300,8 @@ ul li{
|
||||
|
||||
## 定位属性(position,float,overflow,z-index)
|
||||
|
||||
> 这一段涉及到**浮动**的知识,我们在[浮动]()这篇文章中会专门讲解。本段只做简单介绍。
|
||||
|
||||
在讲之前,有个概念叫顺序流,需要强调一下。
|
||||
|
||||
<font color="#0000FF">**顺序流**</font>:所有的标签的初始排列顺序就称为顺序流。
|
||||
|
@ -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)
|
||||
|
||||
|
@ -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>
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user