css第2天(块级、行内、行内块元素,背景颜色、背景图片属性)

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: 100px 200px;

先写宽再写高

background-size: 400px;

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

background-size: 400px;

2.以百分比单位

background-size: 50% 50%;

先写宽,再写高

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

background-size: 50% 50%;

3.以属性作为单位

background-size: contain;

 contain: 图片等比例放大,直到某一边到盒子的边框处停止

background-size: contain;

background-size: cover;

cover: 图片等比例放大,直到填满整个盒子

background-size: cover;

5.5、背景图片属性的连写:background: url("./images/3.jpg") no-repeat center skyblue;

注意:将多个属性用空格隔开,没有顺序要求

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容