CSS盒模型与定位

display 属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
flex	此元素作为弹性伸缩盒显示。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
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 Model）

属性	属性值	说明
width相关
width	设置元素的宽度。
min-width	设置元素的最小宽度。
max-width	设置元素的最大宽度。
height相关
height	设置元素的高度。
min-height	设置元素的最小高度。
max-height	设置元素的最大高度。
padding相关
padding	简写属性。作用是在一个声明中设置元素的所内边距属性,顺序是上右下左。	padding:010px 20px 30px
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。
border相关
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
margin相关
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。
box-sizing	属性值：content-box|border-box|inherit

定位属性

属性	属性值	说明
float	left	元素向左浮动。
	right	元素向右浮动。
	none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
	inherit	规定应该从父元素继承 float 属性的值。
clear
	left	在左侧不允许浮动元素
	right	在右侧不允许浮动元素
	both	在左右两侧均不允许浮动元素
	none	默认。允许浮动元素出现在两侧。
position	absolute	绝对定位
	relative	相对定位
top		元素距离定点纵坐标起点的距离top：10px
bottom		元素距离定点纵坐标终点的距离
left		元素距离定点横坐标起点的距离left：20px
right		元素距离定点横坐标终点的距离
z-index	·	决定层的先后顺序和覆盖关系 值高的覆盖值低的元素
Clip		剪裁绝对定位元素，常用于剪裁图片
	shape	设置元素的形状，唯一合法的形状值是：rect (top, right, bottom, left)
	auto	默认值。不应用任何剪裁。
overflow
	visible	显示超出元素范围的内容
	hidden	隐藏超出元素大小的内容
	scrol	不管内容是否超出元素的范围都添加滚动条
	auto	只在内容超出元素的范围时才显示滚动条
visibility (可见性)
	inherit	子层继承父层的可见性
	visible	无论父层可见与否子层都可见
	hidden	无论父层可见与否子层都隐藏

弹性盒属性

属性	属性值	说明
flex-direction	row	默认值设置子元素为x轴正向排列（默认）此时主轴为x轴从左往右排列，侧轴为y轴
	row-reverse	设置子元素为x轴从右往左排列 此时主轴为x轴，侧轴为y轴
	column	设置子元素为y 轴正向排列 ，当设置了这个属性后，主轴变成y轴，侧轴变成x轴
	column-reverse	设置子元素为y 轴反向排列 ，当设置了这个属性后，主轴变成y轴，侧轴变成x轴
justify-content	center	弹性项目居中紧挨着填充。
	flex-start	弹性项目在父元素的主轴头部紧挨着填充，默认值。
	flex-end	弹性项目在父元素的主轴尾部紧挨着填充。
	space-around	子元素平均分布于父元素的主轴上
	between-around	首位两个子元素贴着父元素的边，其余的子元素平均分布
align-items	center	子元素平均分布于父元素的侧轴上
	flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
	flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
	baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效
	stretch	默认值，会使项目的边距盒的尺寸尽可能接近所在行的尺寸
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
	nowrap	默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
	wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
	wrap-reverse	反转 wrap 排列。
align-content	stretch	默认。各行将会伸展以占用剩余的空间。
	flex-start	各行向弹性盒容器的起始位置堆叠。
	flex-end	各行向弹性盒容器的结束位置堆叠。
	center	各行向弹性盒容器的中间位置堆叠。
	space-between	各行在弹性盒容器中平均分布。
	space-around	各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
flex-flow		flex-direction 和 flex-wrap 的简写，flex-flow:row-reverse wrap;
align-self	auto	如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
	flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
	flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
	center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
	baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
	stretch	如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex		设置弹性盒子的子元素占用空间的比率。
order	数值	设置弹性盒子的子元素排列顺序。