CSS和模型01

最新推荐文章于 2023-08-04 15:33:35 发布

dev_coding

最新推荐文章于 2023-08-04 15:33:35 发布

阅读量92

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_41033768/article/details/124312162

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、CSS属性的继承

CSS的某些属性具有继承性（inherited）
- 如果一个属性具有继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性
- 如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性（不管继承过来的属性权重有多高）
常见具有继承性的属性
- font-size/font-family/font-weight/line-height/color/text-align等

继承的是计算值，而不是设置值

<!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{
      /* 32px :将计算出的32px继承给p元素 */
      font-size: 2em;
    }
    /* p{
      font-size: 32px;
    } */
  </style>
</head>
<body>
  <div>
    div本身
    <p>
      p元素
    </p>
  </div>
</body>
</html>

强制继承

<!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; */
      /* 最后一位表示透明度 */
      color: #f008;
      border: 2px solid purple;
    }

    .box p{
      /* 强制继承 */
      border: inherit;
    }
  </style>
</head>
<body>
  <!-- 强制继承 -->
  <div class="box">
    <p>我是p元素</p>
    <h1>我是h1元素</h1>
  </div>
</body>
</html>

2、CSS属性的层叠

CSS层叠样式表
- 对于一个元素，相同属性可以通过不同选择器设置不同值，属性会被一层一层覆盖上去，最终只有一个会生效
判断生效属性
- 判断一：选择器的权重，权重大的生效，根据权重可以判断出优先级
  - color: red important; （权重最高，权值：10000）
  - 内联样式（权值：1000）
  - id选择器（权值：100）
  - 类选择器（权值：10）
  - 元素选择器（权值：1）
  - 通配符（权值：0）
- 判断二：先后顺序，权重相同时，后面设置的生效

3、CSS属性的类型

4、display属性

display属性
- inline
- block
- inline-block
  - 对外是行内元素
  - 对内是块级元素
- none
行内非替换元素不可以设置宽高（行内替换元素：img\video\input）
img：行内替换元素
- 可以设置宽度和高度
- 和其它行内元素在同一行显示
不要再p元素中放其它块级元素，例如div元素
不要在行内级元素中放块级元素
CSS样式不生效的原因
- 选择器优先级太低
- ’选择器没有选中对应元素
- CSS属性的形式不对
  - 元素不支持CSS属性
  - 浏览器不支持CSS属性
  - 被同类的CSS属性覆盖了

5、元素隐藏

方式一：display:none; (元素存在，不占据空间、不渲染)
方式二：visibility: hidden; （元素存在，占据空间、不可见）
方式三：rgba()设置颜色，设置透明度，不影响子元素
方式四：opacity（alpha：只设置当前color、bgc的透明度；opacity：设置元素以及其下都所有子元素的值）

6、overflow属性

overflow用于控制内容溢出
- 默认值：visible
- scorll：显示滚动条
- auto：内容不超出时不显示滚动条；内容超出时显示滚动条

dev_coding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS和模型01

1、CSS属性的继承CSS的某些属性具有继承性（inherited）如果一个属性具有继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性（不管继承过来的属性权重有多高）常见具有继承性的属性font-size/font-family/font-weight/line-height/color/text-align等继承的是计算值，而不是设置值<!DOCTYPE html><html lan
复制链接

扫一扫