概念区分
元素展示
展示控制属性 display
- 块级元素
block：独占一行，可设置宽高 - 行内元素
inline：不单独成行，设置宽高无效。 - 行内块级元素
inline-block：不单独成行，可设置宽高。
元素排布规则
所有的标签元素的排布，默认下都是按照一个规则进行排布的，即：从上至下 top -> bottom；从左至右 left -> right .
而标题中的标准流、浮动流、定位流实际上就是对元素排布规则的一种划分。
标准流
默认下的排布规则就是标准流。
而浮动流与定位流的排布规则都是基于标准流的规则做变动的。
浮动流
控制属性 float，属性值 left, right .
通过设置 float 属性，可以使得元素脱离标准流的排布规则限制，也就是所谓的浮动脱标。这个元素看上去就像被从标准流中删除了一样，所以浮动元素是不区分 display 属性的。
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。
浮动元素排布规则
- 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面；
- 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动；
- 浮动元素浮动之后的位置，由浮动元素之前在标准流中的位置来确定。
浮动元素的字围现象
浮动元素不会挡住没有浮动元素中的文字，没有浮动的文字会自动给浮动的元素让位置，这个就是浮动元素字围现象
浮动元素的贴靠现象
- 如果父元素的宽度能够显示所有浮动元素，那么浮动的元素会并排显示；
- 如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前贴靠；
- 如果贴靠了前面所有浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边
定位流
控制属性 position
- 相对定位
relative： 相对定位就是相对于自己以前在标准流中的位置来移动 - 绝对定位
absolute：绝对定位是相对于设置了position属性的父元素来移动，默认下相对于body来移动。 - 固定定位
fixed：固定定位可以让某个盒子不随着滚动条的滚动而滚动。脱标，不区分display属性。 - 静态定位
static: 默认下即属于静态定位。
控制定位元素移动的属性：top right bottom left
相对定位注意点
- 相对定位是不脱离标准流的，会继续在标准流中占用一份空间的；
- 在相对定位中同一个方向上的定位属性只能使用一个；
- 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素；
- 由于相对定位是不脱硫标准流的，并且相对定位的元素会占用标准流中的位置，所有当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局。
绝对定位注意点
- 绝对定位是脱离标准流的；
- 所以绝对定位元素不区分块级元素/行内元素/行内块级元素。
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
- 一个绝对定位的元素会忽略祖先元素的padding
绝对定位的排布规则
- 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
- 只要是这个绝对定位元素的祖先元素都可以
- 指的定位流是指绝对定位/相对定位/固定定位
- 定位流中只有静态定位不行
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
如何让绝对定位的元素水平居中
- 只需要设置绝对定位元素的left:50%;
- 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
网友评论