标准
display
- block:表示元素占据全部可用宽度的元素,并且在其前后都会换行,常见标签有div、h、p
- inline:表示元素在一行中水平布置,可以使用水平内边距、边框和外边距。但是,垂直内边距、边框和外边距不影响行内框的高度。行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
- inline-block:介于block和inline之间,在inline的基础上可以设置垂直内边距、边框和外边距。
浮动
设置浮动
float
- none:默认值,表示元素不进行浮动
- left:表示元素浮动,并其所在的块容器左侧
- right:表示元素浮动,并其所在的块容器右侧
- inline-start:表示元素浮动,并其所在的块容器开始一侧
- inline-end:表示元素浮动,并其所在的块容器结束一侧
注意事项
设置浮动和高度后,元素会在包含块中生成脱离标准文档的浮动流。
不要轻易用float,除了图文混排或者右浮动等情况。
清除浮动
clear
- none:默认值,表示元素不会清除之前的浮动。
- left:表示元素被向下移动,用于清除之前的左浮动
- right:表示元素被向下移动,用于清除之前的右浮动。
- both:表示元素被向下移动,用于清除之前的左右浮动。
- inline-start:表示该元素向下移动,用于清除其包含块的起始侧上的浮动。
- inline-end:表示该元素向下移动,用于清除其包含块的末端的浮动。
主要使用both进行浮动清除
.clearFix::after,
.clearFix::before {
content:’’;
line-height:0; //IE
display:block;
clear:both;
}
定位
Position
- static:默认值。
- relative:元素偏移原位置一定的距离。元素仍保持其定位前的形状,它原本所占的空间仍保留。相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
- absolute:元素从原文档流完全删除,相对于其包含块(最近已定位的元素)定位。元素原先在正常文档流中所占的空间会关闭,元素定位后生成一个块级框。
- fixed:元素框从原文档流完全删除,并相对视窗中定位。
- sticky:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
特定阈值属性
- top
- right
- left
- bottom
z-index属性
- auto:默认值
- 数值:最大值2147483647
参考
系列
CSS布局系列一:标准、浮动、定位_betty_grant的博客-CSDN博客
CSS布局系列二:table布局_betty_grant的博客-CSDN博客