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

亦凉 2024-04-17 05:50 67阅读 0赞

### **元素的展示类型：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的整个元素的宽高，如果增加内边距或者是边框，会导致内容的缩小。