html：1盒子模型、2paddingbordermargin、3背景属性、4文字属性、5盒子模型、6浮动 回顾总结

元素的展示类型：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/使用清除浮动的方式解决。