CSS-继承-层叠-元素类型详解

Rsquo
181 阅读6分钟

1. CSS属性继承

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

    • 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性

    • 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)

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

    • 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性

    常见的继承属性.png

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

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      color: red;
      /* font-size: 30px; */
      /* 相对于自身字体(父元素的字体) */
      /* 浏览器 16px */
      font-size: 2em;/* 32px */
    }

    p {
      /* font-size: 2em; */  // 此处也是32px
    }
  </style>
</head>
<body>

  <div class="box">
    box本身的内容
    <p>我是p元素</p>
  </div>

</body>
</html>

    继承.png

    • inherit可以强制继承，如：border: inherit;

  • 多学会查阅文档, 文档中每个属性都有标明其继承性的:

文档.png

2. CSS属性层叠

  • CSS的翻译是层叠样式表, 什么是层叠呢?

    • 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置

    • 那么属性会被一层层覆盖上去，但是最终只有一个会生效

  • 多个样式属性覆盖上去, 哪一个会生效呢?

    • 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级

    • 判断二: 先后顺序, 权重相同时, 后面设置的生效

  • 为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

    • !important：10000
    • 内联样式：1000
    • id选择器：100
    • 类选择器、属性选择器、伪类：10
    • 元素选择器、伪元素：1
    • 通配符：0
选择器千位百位十位个位优先级
h100010001
h1 + p::first-letter00030003
li > a[href*="en-us" > .inline-warning]00220022
#identifier01000100
内联样式10001000

3. 元素的类型

  • HTML定义元素类型的思路:

    • HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;

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

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

    • 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和标题放在一起

    • 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和段落放在一起

    • 而类似于img/span/a/strong/i元素, 通常是对内容的某一个细节的特殊描述,没有必要独占一行

  • 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:

    • 块级元素（block-level elements）: 独占父元素的一行

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

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

    • block：让元素显示为块级元素

    • inline：让元素显示为行内级元素

    • inline-block：让元素同时具备行内级、块级元素的特征

      • 对外来说，它是一个行内级元素
      • 对内来说，它是一个块级元素

    • none：隐藏元素

  • display值的特性 元素类型的特点.png

4. 元素的隐藏方法

  • display设置为none

    • 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)

  • visibility设置为hidden

    • 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间
    • 默认为visible, 元素是可见的

  • rgba设置颜色, 将a的值设置为0（只能设置某个元素的属性，如color、background-color）

    • rgba的a设置的是alpha值, 可以设置透明度,** 不影响子元素**

      background-color: transparent; /* rgba(0,0,0,0) */

  • opacity设置透明度, 设置为0

    • 设置整个元素的透明度, 会影响所有的子元素

5. overflow

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

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

6. HTML嵌套的规范

  • 块级元素、inline-block元素

    • 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）

    • 特殊情况，p元素不能包含其他块级元素

  • 行内级元素（比如a、span、strong等）

    • 一般情况下，只能包含行内级元素，不能嵌套块级元素

7. CSS样式不生效排查技巧

为何有时候编写的CSS属性不好使，有可能是因为

  • 选择器的优先级太低

  • 选择器没选中对应的元素

  • CSS属性的使用形式不对

    ✓ 元素不支持此CSS属性，比如span默认是不支持width和height的

    ✓ 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性

    ✓ 被同类型的CSS属性覆盖，比如font覆盖font-size

建议

  • 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

8. 替换元素补充

<img /> 是行内元素还是块级元素？

  • <img /> 标签没有独占一行，所以是行内元素，这没啥问题

既然是行内元素为什么能够设置宽高呢？

  • <img /> 标签属于替换元素，具有内置的宽高属性，所以可以设置，具体解释看下面。

8.1 元素的定义

从元素本身的特点来讲，可以分为不可替换元素和替换元素; 元素相关的MDN解释

8.2 不可替换元素

  • (X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端(例如浏览器)
  • 如：<h1>我是标题</h1>

8.3 可替换元素

  • 浏览器根据元素的标签和属性，来决定元素的具体显示内容

  • 例如浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据 <input> 标签的type属性来决定是显示输入框，还是单选按钮等

  • (X)HTML中的 <img>、<input>、<textarea>、<select>、<object> 都是替换元素。这些元素往往没有实际的内容，即是一个空元素

  • 如：<img src="xxx.jpg"/>、<input type="submit" name="Submit" value="提交"/>

  • 可替换元素的性质同设置了display:inline-block的元素一致

8.4 特殊的可替换元素

  • <img>属于可替换元素

  • <img>同时具有行内元素，行内块，和块级元素的特性

  • 替换元素一般有内在尺寸，所以具有 width 和 height，可以设定

    • 如果不指定 <img> 的 width 和 height 时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度

  • 对于表单元素，浏览器也有默认的样式，包括宽度和高度

  • <img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

avatar
文章
阅读
粉丝