CSS学习-02

文章目录

• 1.元素显示模式
• 1.1什么是元素显示模式
• 1.2 块元素
• 1.3行内元素
• 1.4 行内块元素
• 1.5 显示模式的转换

• 3.1 层叠性
• 3.2 继承性
• 3.3 优先级

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 优先级