目录
一、标准流
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像素时,此盒子会固定在当前位置,不再继续随着网页滑动)