【前端体系课】-- CSS属性的特性

继承

CSS 的某些属性具有继承性 (Inherited):

如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性 (不管继承过来的属性权重多高);

如何知道一个属性是否具有继承性呢?

常见的 font-size/font-family/font-weight/line-height/color/text-align 都具有继承性;
查阅文档, 文档中每个属性都有标明其继承性

注意:
继承过来的是计算值, 而不是设置值

常见的继承属性:

层叠

CSS 的翻译是层叠样式表

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
那么属性会被一层层覆盖上去, 但是最终只有一个会生效

哪一个会生效呢?
判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
判断二: 先后顺序, 权重相同时, 后面设置的生效;

权重:

! important： 10000
内联样式： 1000
id 选择器： 100
类选择器、属性选择器、伪类： 10
元素选择器、伪元素： 1
通配符： 0

  <style>
    div.box {
      color: red !important; /* 10000 */
    }

    /* id选择器: 100 */
    #main {
      color: orange;
    }

    /* 类选择器: 10 */
    .box {
      color: blue;
    }

    /* 元素选择器: 1 */
    div {
      color: purple;
    }

    /* 通配选择器: 0 */
    * {
      color: yellow;
    }
  </style>
--------------------------------------------------------------------

<body>
  
  <!-- 内联样式: 1000 -->
  <div id="main" class="box one two" style="color: blue;">我是div元素</div>

</body>

权重可以累加

元素类型

HTML 中有很多元素, h1/p/img/div/span/a …

当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?

为什么我们这里只说一行呢?
因为垂直方向的高度通常是内容决定的

比如一个 h1 元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
比如一个 p 元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
而类似于 img/span/a 元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;

为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML 将元素区分成了两类:

块级元素（block-level elements） : 独占父元素的一行
行内级元素（inline-level elements） : 多个行内级元素可以在父元素的同一行中显示

但是, 元素并没有本质上的区别!

之所以会有不同的显示, 只是浏览器对不同的元素添加了不同的属性而已

块级元素和行内级元素的区别就在于: 浏览器默认设置了不同的 display 属性值

display

CSS 中有个 display 属性，能修改元素的显示类型，有 4 个常用值:

block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none：隐藏元素

事实上 display 还有其他的值, 比如 flex

block

独占父元素的一行
可以随意设置宽高 (因为独占一行了)
高度默认由内容决定

inline

跟其他行内级元素在同一行显示;
不可以随意设置宽高;
宽高都由内容决定;

inline-block

跟其他行内级元素在同一行显示
可以随意设置宽高

可以这样理解:
对外来说，它是一个行内级元素
对内来说，它是一个块级元素

注意:
块级元素、 inline-block 元素
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、 inline-block 元素）
特殊情况， p元素不能包含其他块级元素
行内级元素（比如 a、 span、 strong 等）
一般情况下，只能包含行内级元素

overflow

用于控制内容溢出时的行为

常见的值:

visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、 height
auto：自动根据内容是否溢出来决定是否提供滚动机制

小技巧

元素隐藏方法:

方法一: display 设置为 none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间 (和不存在一样);
方法二: visibility 设置为 hidden
- 设置为 hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为 visible, 元素是可见的;
方法三: rgba 设置颜色, 将 a 的值设置为 0
- rgba 的 a 设置的是 alpha 值, 可以设置透明度, 不影响子元素;
方法四: opacity 设置透明度, 设置为 0
- 设置整个元素的透明度, 会影响所有的子元素;

CSS 样式不生效的可能性分析:

选择器的优先级太低
选择器没选中对应的元素
CSS 属性的使用形式不对
- 元素不支持此 CSS 属性，比如 span 默认是不支持 width 和 height的
- 浏览器不支持此 CSS 属性，比如旧版本的浏览器不支持一些 css module3 的某些属性
- 被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size

继承

层叠