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;
如果只有一个,控制的是宽,高会等比例缩放
2.以百分比单位
background-size: 50% 50%;
先写宽,再写高
百分比参照当前的盒子宽高
3.以属性作为单位
background-size: contain;
contain: 图片等比例放大,直到某一边到盒子的边框处停止
background-size: cover;
cover: 图片等比例放大,直到填满整个盒子
5.5、背景图片属性的连写:background: url("./images/3.jpg") no-repeat center skyblue;
注意:将多个属性用空格隔开,没有顺序要求