CSS-3 css属性继承、属性层叠、HTML元素类型及修改、属性display的值、编写HTML时的注意事项；4种元素隐藏方法、盒子模型及content/padding/边框样式css样式不生效原因

龙猫呗

已于 2023-05-20 15:38:47 修改

阅读量326

点赞数

分类专栏： CSS 文章标签： css 笔记前端

于 2023-04-24 14:40:38 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/130340094

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1_CSS属性继承

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

若该属性有继承性, 该元素上设置后, 其后代元素都可以继承这个属性;
后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如果给某一个元素设置了某个CSS属性,而且这个属性具有继承性,那么该元素的所有子元素会默认继承属性 /
/ 一般和文本或者字体相关的很多属性都具备继承

一个属性是否具有继承性？

font-size/font-family/font-weight/line-height/color/text-align等都具有继承性。不用刻意去记, 用的多自然就记住了;
学会查阅文档, 文档中每个属性都有标明其继承性
- 继承过来的是计算值, 而不是设置值【尤其是em这种，相对于其父元素而言】
- 强制继承【少用】：本来没有该属性的继承，但是要求继承，则直接为该属性值设置Inherited
- 官方文档
  - https://www.w3.org/TR/?tag=css
  - https://caniuse.com/

2_CSS属性层叠

是什么？

一个元素的同一个属性我们可以通过不同的选择器给它进行多次设置；属性会被一层层覆盖上去，但是最终只有一个会生效

代码演示如下

<!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>
    div {
      color: red;
    }

    .box {
      color: blue;
    }

    .one {
      color: green;
    }

    .conten {
      color: purple;
    }

    .first {
      color: orange;
    }
  </style>
</head>
<body>

  <div class="box one first content">我是box</div>

</body>
</html>

运行代码截图如下。可以看出，最终只有一个会生效，即写在最后的css样式

多个样式属性覆盖哪个生效，两种判断方法

选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
先后顺序, 权重相同时, 后面设置的生效;

选择器的权重(数字越大权重越大)

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

代码演示如下

<!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>
    div.box {
      color: red !important; /* 10000 */
    }

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

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

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

    /* 通配选择器: 0 */
    * {
      color: yellow;
    }
  </style>
</head>
<body>
  
  <!-- 内联样式: 1000 -->
  <div id="main" class="box one two" style="color: blue;">我是div元素</div>

</body>
</html>

代码运行如下。可以看出只有权重最大的!important生效
css权重代码运行

3_HTML元素的类型

HTML定义元素类型的思路：

元素放到页面上时, 这个元素到底占据页面中一行多大的空间。只说一行, 因为垂直方向的高度通常是内容决定的
举例子：
- h1元素的标题，独占一行，其他的内容不应该和我的标题放在一起;
- p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起
- 类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行

HTML元素类型：

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

通过CSS修改元素类型 ：元素本质没有区别

div是块级元素, span是行内级元素;

div是块级元素仅仅是因为浏览器默认设置了display:bock;属性而已

4_CSS属性 - display

block：让元素显示为块级元素
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认由内容决定
inline：让元素显示为行内级元素
- 跟其他行内级元素在同一行显示;
- 不可以随意设置宽高;
- 宽高都由内容决定;
inline-block：让元素同时具备行内级、块级元素的特征
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 具体理解：对外来说，它是一个行内级元素; 对内来说，它是一个块级元素
none：隐藏元素

5_编写HTML时的注意事项

块级元素、inline-block元素

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

行内级元素：一般情况下，只能包含行内级元素（比如a、span、strong等）

6_元素隐藏方法

属性display设置为none ：元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
属性visibility设置为hidden :
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
属性clolor：rgba()设置颜色, 将a的值设置为0 :
- rgba(red,green,blue,alpha) ，括号内分别设置数值，前三个数值范围0-255，最后一个数值范围0-1
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
属性opacity设置透明度, 设置为0 ：设置整个元素的透明度, 会影响所有的子元素;

7_CSS样式不生效的原因

选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
- 元素不支持此CSS属性，比如span默认是不支持width和height的
- 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
- 被同类型的CSS属性覆盖，比如font覆盖font-size
建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

8_盒子模型(Box Model)

HTML中的每一个元素都可以看做是一个盒子

内容（content）：元素的内容width/height
内边距（padding）：元素和内容之间的间距
边框（border）：元素自己的边框
外边距（margin）：元素和其他元素之间的间距

盒子模型

盒子模型的四边：每个盒子有上下左右四边, 所以每个部分margin/padding/border都包括top/right/bottom/left四个边

盒子模型的四边

9_内容content – 宽度和高度

内容是通过宽度和高度设置的:

宽度设置: width
高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的! 比如p元素里面放div

其余常用属性：

min-width：最小宽度，无论内容多少，宽度都大于或等于min-width【浏览器界宽度被缩过小可用滚动条查看】
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度;

不常用两个属性：

min-height：最小高度，无论内容多少，高度都大于或等于min-height
max-height：最大高度，无论内容多少，高度都小于或等于max-height

10_内边距padding

用途：设置边框和内容之间的间距

四个方向有如下的属性值：

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

padding单独写是缩写属性（顺时针）

padding-top、padding-right、padding-bottom、padding-left的简写属性
举例 padding: 10px 20px 30px 40px;
- padding-top: 10px；
- padding-right: 20px；
- padding-bottom: 30px；
- padding-left: 40px;
padding缩写属性从零点钟方向开始, 沿顺时针转动, 即上右下左;

padding缩写的个数

3 个

padding: 10px 20px 30px; //已有上右下，缺少left, left使用right的值;

2 个

padding: 10px 20px; //已有上右，缺少left, 使用right的值，缺少bottom, 使用top的值;

1 个

padding: 10px;//已有上，缺右下左，所以top/right/bottom/left都使用top;

11_设置边框的方式

边框宽度

border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性

边框颜色:

border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性

边框样式:

border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
边框的样式有很多, 了解几个如下:
- groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
- ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

下面是边框多种样式展示图
边框样式值

boeder-top-style、border-right-style、border-bottom-style、border-left-style

border-style是上面4个属性的简写属性

龙猫呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS-3 css属性继承、属性层叠、HTML元素类型及修改、属性display的值、编写HTML时的注意事项；4种元素隐藏方法、盒子模型及content/padding/边框样式css样式不生效原因

css属性继承、属性层叠、HTML元素类型及修改、属性display的值、编写HTML时的注意事项；4种元素隐藏方法、盒子模型及content/padding/边框样式css样式不生效原因
复制链接

扫一扫