css 布局和定位样式 总结

目录

一、基础概念

1、文档流

2、脱离文档流

二、定位样式

1、position

2、float

三、布局样式

1、display

         2、margin、border、padding

四、文字排版

1、white-space：

---

 

一、基础概念

1、文档流

块元素占一行，既是从上到下排列。行内元素在一行之内按从左到右的顺序排列。每个元素占据自己的位置。

2、脱离文档流

元素不占用自己的位置，在正常的文档流中不会占用位置。

二、定位样式

1、position

属性	名称	脱离文档流	定位方式	说明
relative	相对定位	否	left,right,top,bottom	生成相对定位的元素，相对于其正常位置进行定位
absolute	绝对定位	是	left,right,top,bottom	相对于 static 定位以外的第一个父元素进行定位
fixed	固定定位	是	left,right,top,bottom	相对于浏览器窗口进行定位
static	没有定位	否	margin	默认值，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit	继承父节点position	-	-	-

 

 

 

 

2、float

属性	名称	脱离文档流	定位方式	说明
left	向左浮动	是，除了文字	left,right,top,bottom,margin
right	向右浮动	是，除了文字	left,right,top,bottom,margin

 

 

 

三、布局样式

1、display

红色部分是重点

值	描述
none	此元素不会被显示。
block	默认。此元素将显示为块级元素，此元素前后会带有换行符。
inline	此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
flex	弹性布局，结合justify-content、align-content、align-items，flex-wrap、flex-direction来布局 https://www.jianshu.com/p/d9373a86b748/
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。
box

2、margin、border、padding

 

四、文字排版

1、white-space：

属性设置如何处理元素内的空白。

备注  空白包括 空格，回车换行

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。自动换行，回车也可以换行
inherit	规定应该从父元素继承 white-space 属性的值。