一、display
属性及其作用
| 属性值 | 作用 |
|---|---|
| none | 隐藏元素，并且会从文档流中移除 |
| block | 转化为块级元素，默认宽度为父元素的宽度，可设置宽高，换行显示 |
| inline | 转化为行内元素类型，默认宽度为内容的宽度，不可以设置宽高，同行显示 |
| inline-block | 默认宽度为内容的宽度，可以设置宽高，同行显示 |
| list-item | 像块类型元素一样显示，并添加到样式列表标记 |
| table | 作为块级表格显示 |
| inherit | 从父元素继承display属性的值 |
block、inline和inline-block的区别
- block：
块级元素，会独占一行，可以设置宽度、高度、外边距和内边距； - inline：
行内元素，不会独占一行，设置宽度和高度无效，但可以设置水平方向的margin和padding，不能设置垂直方向的margin和padding； - inline-block：
行内块元素，将对象设置为inline对象，但对象的内容会被作为block对象呈现，之后的内联对象会被排列在同一行内。
inline-block产生间隙的情况和解决办法
- 有空格时会有间隙，可以通过删除空格解决；
- margin为正值时有间隙，可以让margin的值为负值解决；
- 使用font-size时有间隙，可以设置font-size=0、letter-spacing、word-spacing解决。
二、float
浮动的工作原理
- 浮动的元素
脱离了文档流，在页面中不占据空间； - 浮动元素碰到包含它的边框或者其他浮动元素的边框停留；
浮动元素引起的问题
- 父元素的高度无法被撑开，影响父元素的同级元素；
- 与浮动元素的同级非浮动元素会跟随其后；
- 若浮动的不是第一个元素，那么该元素之前的元素也要浮动，否则影响页面的布局结构。
清除浮动（常用）
由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。因此在css中通常使用clear属性清楚浮动，他的本质是清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动，一旦父级盒子有了高度，就不会影响下面的内容。一般情况下使用为伪元素的方式来清除浮动：
.clear::after{
content:'';
display:block;
clear:both;
}
由于clear属性只有在块级元素中才有效果，而伪元素默认都是内联水平，所以需要设置display属性。
三、position
属性值和用法（常用）
| 属性值 | 概述 |
|---|---|
| absolute | 绝对定位，绝对定位是相对于元素最近的已定位的祖先元素（ 即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。 |
| relative | 相对定位，相对定位是相对于元素在文档中的初始位置，使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它元素。 |
| fixed | 固定定位，始终相对于整个文档进行定位 |
| inherit | 从父元素继承其position属性的值 |
使用方法
在css的布局中，常常需要通过使用定位来进行布局，在使用定位进行布局中，最常用的就是父盒子与子盒子之间的布局，这种情况下通常使用"子绝父相"即子盒子绝对定位，父盒子相对定位，设置子盒子的边偏移进行布局。
absolute 与 fixed 共同点与不同点
共同点：
- 改变行内元素的呈现方式，将 display 置为 inline-block；
- 使元素脱离普通文档流，不再占据文档物理空间；
- 覆盖非定位文档元素。 不同点：
- absolute 与 fixed的根元素不同，absolute 的根元素可以设置，fixed根元素是浏览器；
- 在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed固定在页面的具体位置。
三者之间的关系
- 如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生；
- 判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性失效，并且 display 的值应该被设置为 table 或者 block，具体转换需要看初始转换值；
- 如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display 的值则按上面的规则转换。注意，如果 position 的值为 relative 并且 float 属性的值存在，则 relative 相对于浮动后的最终位置定位；
- 如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性按照上面的规则转换，如果不是，则保持指定的 display 属性值不变。
【往期分享】：
