元素的展示类型：block/inline/inline-block/none;
块级元素：会占据一整行，可以设置宽高。Display:block;
行级元素：不会占据一整行，不可以设置宽高,根据内容的文字来占据空间的大小。Display:inline;
行块元素：不会占据一整行，但是可以设置宽高。Display:inline-block;
盒子常用的属性：
Width
Height
Padding内边距：边框到内容的距离
Border边框
margin外边距
Padding:Margin:Border:
Padding:内边距，上下左右边距都是可以自定义设置。
分别设定内边距：
/*padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;*/
统一设定：
Padding:top right bottom left;从top开始，沿着顺时针进行设定
如果少写了left,那么left就会跟right一致。
如果少写了left,bottom，那么left,bottom，就会跟right,top一致
如果少写了right,bottom,left,那么就会跟top一致。
Margin:外边距跟内边距的设置方式是一致的。本元素的边框跟其他元素的距离。元素的外边距会重叠。
外边距常用水平居中技巧：margin: 上下边距值 auto;
Border:设置元素边框的粗细，样式，颜色。
可以分别进行设置：
border-top: 50px solid purple;
border-bottom: 50px solid transparent;
border-left: 10px solid purple;
border-right: 10px solid transparent;
/*border-width: 50px;
border-style: dashed;
border-color: deeppink;*/
统一设定：
border: 20px dashed purple;
背景属性
Background:颜色，背景图片，可以同时设置颜色和背景。综合性的设定，尽量少用，因为会覆盖掉其他详细的设置。
Background-color:设定背景颜色
Background-image:设定背景图片
Background-size:设定背景图片尺寸
Background-position：设定背景图片的位置
Background-repeat:设定背景图片是否重复
注意：可以设定多张背景图，多张背景图的设定需要用逗号隔开。
/*设定背景图片尺寸的大小
background-size:背景图片的宽度 背景图片的高度
auto:会自动根据宽高，进行适度的拉伸和压缩，保证比例是按照正常的图片比例进行
可以使用百分比设定背景图片。
* \* */
background-size:400px auto,200px auto;
/*
设置背景图片是否重复
background-repeat: no-repeat;不重复
repeat-x:水平重复
repeat-y:垂直重复
* */
background-repeat: no-repeat;
/*背景图片的位置
字体属性
Font-size：字体大小；
Font-weight:字体粗细
Color:字体的颜色
Font-family:字体的名称
Line-height:字体行与行之间的距离，行距
Text-align:文字的排布
Text-shadow:文字的阴影
盒子模型
Box-sizing:
content-box;在元素上设置的宽高即为内容的宽高，如果增加内边距和外边距会使得整个元素增大。
border-box;在元素上设置的宽高即为内容加上内边距加上border的整个元素的宽高，如果增加内边距或者是边框，会导致内容的缩小。
根据是内容是固定还是整个元素固定大小，如果是内容固定大小那么请使用content-box，如果是元素固定大小，请使用border-box;
浮动解决的问题：
1/浮动解决了莫名其妙的间距问题。
2/将元素向左或者向右靠拢
3/可以将文字包拢图片
浮动的原理：浮动元素会脱离正常的文档流。会向父元素的最边缘或者是设定浮动的元素的边缘靠拢。
浮动的缺陷：父元素会高度塌陷。
解决方案：
1/设置父元素的高度。
2/使用清除浮动的方式解决。
来源：https://blog.csdn.net/v790873/article/details/100050730