【CSS学习记录】1.0

目录

一、标准流

二、浮动 float

三、清除浮动

四、五种定位

---

一、标准流

1.行内元素

（1）一行内可以放置多个行内元素

（2）行内元素会按照顺序，从左到右顺序排序，碰到父元素边缘则自动换行

（3）不能调节长和宽

2.块级元素

（1）块级元素会独占一行，从上自下顺序排列。

（2）可以设置长和宽 

（3）常用元素有：div、hr、p、h1~h6、ul、ol、dl、form、table

3.行内块元素（结合了前两者的特点）

（1）一行内可以放置多个

（2）可以设置长和宽

二、浮动 float

1.浮动特性：

（1）浮动的元素会脱离标准流（脱标）（即：浮动的盒子不再保留原先的位置！！）

（2）浮动的元素可以在一行内显示且元素顶部对齐

（3）浮动的元素会具有行内块元素的特性

2.特别注意：

—— 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

—— 如果块级盒子没有设置宽度，默认宽度和父级一样宽；但是添加浮动后，它的大小根据内容来决定。

三、清除浮动

1.为什么要清除浮动？

—— 父盒子有时候不能确定子盒子的大小，因此不方便直接给父盒子一个具体高度，这时通常不给父盒子设置高度，让子盒子自己撑开父盒子到适合的高度。但是这导致一个问题：此盒子下面的盒子会因为它没有高度直接无视它而占用它的位置！此时就需要清除子盒子浮动造成的影响。

2.清除浮动的本质

—— 清除浮动的本质是清除浮动元素造成的影响（如果父盒子本身有高度，则不需要清除浮动）

3.清除浮动后的效果

—— 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

4.清除浮动的四种方法

（1） 额外标签法 （隔墙法）（不常用）

—— 就是再最后一个浮动的子元素后面添加一个额外无意义的标签，并添加 clear 清除浮动样式。

 （2）父级添加overflow

—— 给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

（3） after伪元素法

—— 方法（1）的升级版，但也是给父元素添加标签。

 （4）双伪元素法

—— 也是给父元素添加。

 四、五种定位

1.静态定位

（1）静态定位是默认定位方式，相当与无定位，可以看作标准流

（2）代码：

 2.相对定位

（1）参照自己原来的位置进行移动

（2）且移动后仍占有原先位置不会脱标

 3.绝对定位

（1）以最近一级有定位的祖先元素为定位

（2）没有父亲 或 父元素没有定位，则以当前浏览器网页为准定位

（3）移动后不再占有位置，会脱标

4.固定定位

（1）固定定位是把元素固定于浏览器可视区的位置（不随页面滚动）

（2）固定定位不占有原来的位置--脱标

（3）跟父元素没有任何关系

5.粘性定位

（1）粘性定位可以看作 相对定位 和 固定定位 的混合

（2）参照浏览器的可视窗口（固定定位特点）

（3）占有原先的位置--不脱标（相对定位特点）

（4）必须添加 top \ left \ right \ bottom 其中一个才有效

例：top: 50px; （这意味着当我滑动网页使此盒子距离浏览器可视窗口上方距离50像素时，此盒子会固定在当前位置，不再继续随着网页滑动）