display

display 属性规定元素应该生成的框的类型。

display: block
此元素将显示为块级元素，此元素前后会带有换行符。

display: flex
设置 flex 布局以后，子元素的 float 、clear 和 vertical-align 属性将失效。

display: table-cell
指让标签元素以表格单元格的形式呈现，类似于 td 标签。以其他一些 display 属性类似， table-cell 同样会被其它一些 css 属性破坏，例如 float， position: absolute ，所以，在使用display: table-cell 与 float: left 或是 position: absolute 属性尽量不要同用。
设置了 display: table-cell 的元素对宽度高度敏感，对 margin 值无反应，响应 padding 属性。

隐式改变 display 类型
不论之前是什么类型元素， display: none 除外，设置以下两个之一：

position: absolute
float: left 或 float: right

简单来说，只要 html 代码中出现以上两句之一，元素的 display 显示类型就会自动以 display: inline-block 的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

Position

static
默认情况，可以用 position: static 来还原元素定位的默认值。

absolute
绝对定位。通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。

fixed
相对于窗口的固定定位。

relative
相对定位。通过 left 、 right 、 top 、 bottom 属性确定元素在正常文档流中的偏移位置。

sticky
粘性定位，是相对定位和固定定位的混合。

常见布局

水平居中

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align: center; 来实现的。可以用在 inline , inline-block , inline-table , inline-flex , etc .

块状元素

定宽块状元素（块状元素的宽度 width 为固定值）

满足定宽和块状两个条件的元素是可以通过设置 “左右 margin” 值为 “auto” 来实现居中的。

margin: 0 auto;

不定宽度的块状元素（块状元素的宽度 width 不固定）
- 加入 table 标签：利用 table 标签的长度自适应型 —— 即不定义其长度也不默认父元素 body 的长度（ table 其长度根据其内文本长度决定），因此可以看作是一个顶宽度块元素，然后再利用定宽度块状居中的 margin 的方法，使其水平居中。
  - 为需要设置的居中元素外面加入一个 table 标签（包括 <tbody> 、<tr> 、<td>）。
  - 为这个 table 设置 “左右 margin 居中” （这个和定宽块状元素的方法一样）。
- 设置 display: inline ：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align: center; 来实现居中效果。
- 设置 position: relative; 和 left: 50%; ：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的。

垂直居中设置

父元素高度确定的单行文本

通过设置父元素的 height 和 line-height 高度一致来实现的。（height：该元素的高度，line-height：顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离）。
弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

父元素高度确定的多行文本
- 方法一：使用插入 table（包括 tbody 、tr 、td）标签，同时设置 vertical-middle 。
- 方法二：在 chrome 、firefox 以及 IE8 以上的浏览器就可以设置块级元素的 display 为 table-cell （设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式，兼容性比较差。

不知都自己高度和父容器高度的情况，利用绝对定位只需要以下三行：

parentElement {
position: relative;
}
childElement {
position: absolute;
top: 50%;
transform: translate(-50%);
}

若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement {
height: xxx;
}
childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}

不考虑兼容老式浏览器的话，用 flex 布局简单直观一劳永逸
```
parentElement {
display: flex;
align-item: center;
}
```
水平垂直居中
如果要居中的元素的宽/高是不变的或者说是确定的，比如 width/height = 100px; ，那么设置 absolute 的 top/left = 50% ，然后 margin-left/margin-top = -50px; 即可。
如果要居中的元素的宽/高是不确定的，这时 margin 负值就不能使用具体的 px 了，可以使用百分比。但由于 margin 的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用 absolute 的包裹性，在需要居中的元素外面套一个空的 <div> 元素即可。或者：
```
.parent {
positon: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```

flexbox

.parent {
display: flex;
justify-content: center;
align-items: center;
}

grid
```
body, html {
height: 100%;
display: grid;
}
span {
margin: auto;
}
```
三栏布局
绝对定位法
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右 margin 值撑开距离。
```
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
```
```
#left, #right {
position: absolute;
top: 0;
width: 200px;
height: 100%;
}
#left {
left: 0;
background: red;
}
#right {
right: 0;
background: blue;
}
#main {
margin: 0 210px;
background: yellow;
height: 100%;
}
```
缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器小到一定程度，会发生层重叠的情况，然而，在一般情况下，除非用户显示器分辨率宽度 >=1600 像素，否则用户不会把浏览器缩小到 1000 像素以下的。

margin负值
首先，中间的主体要使用双层标签。外层 div 宽度 100% 显示，并且浮动，内层 div 为真正的主体内容，含有左右 20 像素的 margin 值。左栏与右栏都是采用 margin 负值定位的，左栏左浮动， margin-left 为 -100% ，右侧栏也是左浮动，其 margin-left 也是负值，大小为其本身的宽度即 200 像素。

<div class="main">
  <div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

.left {
  margin-left: -100%;
  float: left;
  width: 200px;
  height: 100%;
  background: blue;
}
.right {
  float: left;
  margin-left: -200px;
  width: 200px;
  height: 100%;
  background: yellow;
}
.main {
  width: 100%;
  float: left;
}
.center {
  background: red;
  margin: 0 20px;
}

需要注意的是几个 div 的顺序，无论是左浮动还是右浮动，先是主体部分 div ，这是肯定的，至于左右两栏谁先谁后都无所谓。
缺点：相对比较难理解，上手不容易，代码相对复杂。

自身浮动法
左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

.main {
  height: 100%;
  margin: 0 20px;
  background: red;
}
.left {
  width: 200px;
  height: 100%;
  background: yellow;
  float: left;
}
.right {
  width: 200px;
  height: 100%;
  background: blue;
  float: right;
}

这里三个 div 标签的顺序的关键是要把主体 div 放在最后，左右两栏 div 顺序任意。

消除 span 上下空白的问题

令父元素 font-size: 0 即可。

清除浮动

方法一：
在容器的结束标签前添加一个空标签，在空标签上直接设置样式 clear: both; 。用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。

方法二：

overflow: auto; //要想支持IE6，加上 zoom:1
// 或者
overflow: hidden;

方法三：
clearfix 技巧：基于在父元素上使用 :before 和 :after 两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

给 li 设置 float: left 无法撑开 ul 的问题

在 html 代码里边给最后一个 li 后面加空元素清除浮动。例：<div style="clear: both"></div> 。
给 ul 设置固定高度。不过这样 ul 就不能随着 li 变化而变化了。
给 ul 设置 overflow:hidden 或者 overflow:auto 。
给 ul 加浮动属性， float:left 或者 float:right ，但是很有可能布局就会受到影响。

BFC

块格式化上下文（Block Formatting Context），决定了其子元素如何定位，以及和其他元素的关系和相互作用。可以把 BFC 看作是一个独立的容器，容器里面的元素在布局上不会影响到容器外面的元素。

下列方式会创建块格式化上下文：

根元素包含根元素的元素
浮动元素（元素的 **float** 不是 none ）
绝对定位元素（元素的 **position** 为 absolute 或 fixed ）
行内块元素（元素的 **display** 为 inline-block ）
表格单元格（元素的 **display** 为 table-cell ，HTML 表格单元格默认为该值）
表格标题（元素的 **display** 为 table-caption ，HTML 表格标题默认为该值）
匿名表格单元格元素（元素的 **display** 为 table 、 table-row 、 table-row-group 、 table-header-group 、 table-footer-group （分别是 HTML table 、 row 、 tbody 、 thead 、 tfoot 的默认属性）或 inline-table ）
**overflow** 值不为 visible 的块元素（hidden、auto、scroll）
**display** 值为 flow-root 的元素
**contain** 值为 layout 、 content 或 strict 的元素
弹性元素（ **display** 为 flex 或 inline-flex 元素的直接子元素）
网格元素（ **display** 为 grid 或 inlien-grid 元素的直接子元素）
多列元素（元素的 column-count 或 column-width 不为 auto ，包括 column-count 为 1 ）
column-span 为 all 的元素始终会创建一个新的 BFC ，即使该元素没有包裹在一个多列容器中

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。

浮动定位和清除浮动都只会应用于同一个BFC内的元素。浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间

BFC 的约束规则

内部的 box 会在垂直方向上一个接一个的放置
垂直方向的距离由 margin 决定（属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠，与方向无关）
每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC的作用：

同一个 BFC 下外边距会发生折叠
```
<head>
<style>
 div{
     width: 100px;
     height: 100px;
     background: lightblue;
     margin: 100px;
 }
</style>
</head>
<body>
 <div></div>
 <div></div>
</body>
```
因为两个 div 元素都处于同一个 BFC 容器下，所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px ，而不是 200px 。
如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
```
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div>
```
```
.container {
 overflow: hidden;
}
p {
 width: 100px;
 height: 100px;
 background: lightblue;
 margin: 100px;
}
```
这时候，两个盒子边距就变成了 200px 。
BFC 可以包含浮动的元素（清除浮动）

浮动的元素会脱离普通文档流

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果触发容器的 BFC ，那么容器将会包裹着浮动元素。添加 overflow: hidden 可以触发容器 BFC 。

<div style="border: 1px solid #000; overflow: hidden;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

BFC 可以阻止元素被浮动元素覆盖

<div class="aside"></div>
<div class="main"></div>

.aside {
 float: left;
 width: 100px;
 height: 100px;
 background-color: pink;
}  
.main {
 width: 200px;
 height: 200px;
 background-color: blue;
}

如果想避免元素被覆盖，可触发第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden 。

.aside {
 float: left;
 width: 100px;
 height: 100px;
 background-color: pink;
}  
.main {
 overflow: hidden;
 width: 200px;
 height: 200px;
 background-color: blue;
}

CSS关于换行or溢出

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。

值

normal ：只在允许的断字点换行（浏览器保持默认处理）。
break-word ：在长单词或URL地址内部进行换行。强制让文字换行。一般情况下当父级宽度不够的时候，不管英文单词自动换行是当一整个单词不够放时，整个单词一起换行到下一行。兼容所有浏览器。

word-break

word-break 指定了怎样在单词内断行

值

normal：使用默认的断行规则。
break-all：对于non-CJK（CJK指中文/日文/韩文）文本，可在任意字符间断行。只不兼容opera，其他浏览器都兼容。
keep-all：CJK文本不断行。Non-CJK文本表现同normal。

white-space

white-spaceCSS属性是用来设置如何处理元素中的空白

值

noraml：连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
nowrap：和normal一样，连续的空白符会被合并。但文本内的换行无效。
pre：连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap：连续的空白符会被保留。在遇到换行符

想要达到换行的效果，一般：word-wrap: break-word; word-break: break-all; 就可以了。

参考文章

新时代创意布局不完全指南

前端学习记录

CSS排版/CSS布局