1.元素显示模式
1.1什么是元素显示模式
元素显示模式就是元素标签以什么方式来进行显示,比如< div>自己占一行。
1.2 块元素
常见块元素有< h1>~< h6>,< p> ,< ul>等等其中**< div>**是最典型块元素,块元素标签都是自己独占一行,所有块元素都可以赋值高和宽。
特点
- 自己独占一行
- 可控制高度和宽度,内外边距
- 一个容器,内部可以放行内或者块元素
注意
- 文字类元素内部不能放块级元素
- p标签主要用于存放文字,因此不能放块级元素
1.3行内元素
常见的行内元素有< a>,< em>,< span> 等等。
特点
- 一行可以有多个行内元素,同时亦可以显示多个
- 无法设置高和宽
- 只能放置文本或者其他行内元素
注意
- a标签里面不能再放连接
- 在特殊情况下a标签可以通过转化为块级元素来实现里面放块元素
1.4 行内块元素
< img>,< input>, < td>同时具有块元素和行内元素的特点
1.5 显示模式的转换
可以通过CSS的转换来实现元素显示模式的转换,比如想增加a标签的连接触发范围就可以这么做,代码如下
<style>
a{
display: block;
}
<style>
2.背景
background-color设置背景颜色,特别的transparent为透明。background-img为背景图片。background-repeat为背景图片平铺,背景透明度background:rgba(0, 0, 0 , 0.3)其中0.3位透明度选择,在0~1之间
3.CSS三大特性
3.1 层叠性
当选择器名字相同时,会有一个选择器的样式被覆盖掉,也就是不显示,其中哪个样式离结构近,就显示哪个
div{
color: red
}
div{
color: blue
}
只会显示为蓝色
3.2 继承性
字标签会继承父标签的某些样式
div{
font-size: 20px;
}
<div>
<p>test</p>
</div>
其中test会显示为20px大小的字体
3.3 优先级
选择器 | 权值 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器或者伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style | 1,0,0,0 |
!imporant | 无穷大 |