定位/display
使用display属性可以改变框的类型
display:none使得元素没有框，不再显示不占用文档的空间
- 普通流（除非特殊指定，默认的）
- 浮动
- 绝对定位
对于inline元素，可以通过设置水平的边框内外边距调整水平间距 垂直内外边距变框不影响行内框的高度
设置width和height也没有用，不起作用但是可以设置line-height来改变行框的高度
- 修改inline的尺寸：改变水平(left/right) margin border padding 和line-height
- display:inline-block 使得内联元素虽然不能换行但是可以设置宽高，垂直方向的margin padding
默认状态下display属性值，块级元素display: block ，行内元素display: inline
不常用属性
display:table
像表格一样布局元素，大多数CSS都是相当普通的。 <form>, <div>, <label>和<input>被告知要分别显示表、表行和表单元
display:flex 布置一系列弹性等宽容器或者垂直居中内容
静态定位static
默认行为
相对定位relative
元素相对于他原来的（他在普通流中）位置移动，占据原来空间（无论是否移动）但可能会覆盖别的框。
相对于原属在文档流的初始位置
绝对定位absolute
元素的位置与文档流无关，不占空间，其他元素感知不到绝对定位元素存在，源顺序中位于后面的绝对定位元素会出现在先绝对定位元素的上面，使用z-index设置框的叠放层次
绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先位置（这个元素position：relative）
它坐在它自己的层独立于一切。这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 ——例如弹出信息框和控制菜单，翻转面板，可以在页面上的任何地方拖放的UI功能等。
top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0;这个绝对定位元素占满当前视窗的整个区域，覆盖本应该出现在视窗上的内容
p:nth-of-type(1)取得第一个p元素
相对于离他最近的已定位祖先元素（初始包含块）
相对定位的框设置width height
固定定位fixed
absolute的一种 包含块是viewport在窗口的固定位置展示浮动元素；
而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
浮动float
左右浮动是到他包含框的边界，或者是前一个浮动元素的边界
容器中所有元素都设置浮动之后容器没法被撑起来，要实现视觉上容器包围了浮动元素
- 最后添加一个空的div对其设置clear:both
- ：after伪类和内容声明在指定内容末尾添加新的内容：after{content："";height:0;visibility:hidden; display:block; clear:both;}