1.块级、行内、行内块元素的特点

1.1块级元素的特点1

1.独自占据一整行

2.可以设置宽高

3.如果没有设置宽度的块级盒子,那么宽度继承父盒子的宽度

常见的块级元素: div p h1-h6 table ul li........

注意：

- 只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div

- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

1.2行内元素的特点

1.一行可以显示多个

2.不能设置宽高---宽高由内容决定

常见的行内元素: span a strong em del ins

1.3行内块元素的特点

1.一行可以显示多个

2.可以设置宽高

常见行内块元素: img input

2.显示模式的转换

display: inline-block（行内块）、block（块级）、inline（行内）

3.背景颜色的设置

3.1、background-color:颜色值; 默认的值是 transparent 透明的（背景颜色的赋值与文本颜色一致）

3.2、半透明背景颜色（rgba）文字颜色不变

3.3、全局透明（opacity:控制背景颜色的半透明程度: 0-1）文字颜色跟着改变

3.4、背景颜色渐变

background: linear-gradient(to right, #fa5956, #f99b4d);从左到右渐变

效果图

4.如何设置背景图片

background-image : none（无背景图，默认的） | url (“路径”)

注意：盒子本身必须要有宽高

5.背景图片的属性

5.1、控制背景图片的平铺方式：background-repeat:no-repeat（不平铺）、repeat（平铺）

5.2、控制背景图片的位移：background-position:center;

5.3、控制背景图片的固定：background-attachment:fixed（背景固定）、scroll（默认滚动）

5.4、背景图片大小的控制（background-size）

如果要控制背景图片的大小,background-size

代码

原图

1.以px单位

background-size: 100px 200px;

先写宽再写高

background-size: 400px;

如果只有一个,控制的是宽,高会等比例缩放

background-size: 400px;

2.以百分比单位

background-size: 50% 50%;

先写宽,再写高

百分比参照当前的盒子宽高