1)CSS层叠性
是浏览器处理冲突的一个能力。如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 。CSS层叠性是根据CSS优先级来进行层叠的。
(2)CSS继承性
作用:子元素可以继承父元素的样式。 特殊性:
-
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
-
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
-
a标签的颜色和下划线的设置不能继承,必须对a标签本身进行设置。
-
h标签的字体大小不能修改,必须对h标签本身进行修改。
(3)CSS优先级
-
优先级判断
1、如果使用的是同类型的选择器,那么谁写在后面就听谁的。就近原则
2、如果使用的是不同类型的选择器,那么会按照选择器的优先级来层叠。
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性1、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。
-
优先级权重
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。
权重计算规则
(1)内联样式,如: style=””,权值为1,0,0,0。
(2)ID选择器,如:#content,权值为0,1,0,0。
(3)类,伪类和属性选择器,如.content E:link E[attr],权值为0,0,1,0。
(4)元素选择器和伪元素选择器,如div p ::before,权值为0,0,0,1。
(5)通配符、子选择器、相邻选择器等的。如*、>、+,权值为0,0,0,0。
(6)继承的样式没有权值。!important的权重最高
标签显示模式
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。
(1)块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置高度、宽度、对齐等属性,常用于网页布局和网页结构的搭建。
常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form>等,其中<div>标签是最典型的块元素。 div非常符合布局,所以通常叫CSS+div布局
块级元素的特点:
-
总是从新行开始
-
宽度、高度、外边距以及内边距都可以控制
-
宽度默认是容器的100%
-
可以容纳内联元素和其他块元素
2)行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。
行内元素的特点:
-
和相邻行内元素在一行上。
-
宽、高无效,但水平方向的padding和margin可以设置,垂直方向的无效。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或其他行内元素(a特殊)。
注意:
-
只有文字才能组成段落,因此p标签中不能放块级元素,示例:p标签中放div,查看源代码(有bug)
-
链接里面不能在放链接。
(3)块级元素和行内元素区别
块级元素的特点:
(1)总是从新行开始
(2)宽高、内外边距都可以控制
(3)宽度默认为容器的100%
(4)可以容纳内联元素和其他块元素 文字类的块级标签(p,h1~h6,dt)内部不能嵌套块级标签
行内元素的特点:
(1)和相邻行内元素在一行上
(2)宽高无效,可以设置水平方向的内外边距,垂直方向不可设置。
(3)默认宽度就是它本身内容的宽度
(4)行内元素只能容纳文本和其他行内元素
(4)行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />,可以对它们设置宽高和对齐属性,有些资料可能会把它们称为行内块元素。 行内块元素的特点: (1)和相邻行内元素(行内块)在一行上,但是之间会有空白间隙。 (2)默认宽度就是它本身内容的宽度。 (3)宽高、内外边距都可以控制。
(5)标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块:display:inline-block;