初学前端开发——CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/lucasde/article/details/130603306

文章详细阐述了CSS的三大特性——层叠性、继承性和优先级，解释了样式冲突的解决方式和权重计算规则。此外，还介绍了盒模型的概念，包括边框、内边距和外边距对元素布局的影响，以及边框合并和外边距塌陷问题的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS的三大特性

1.1层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠式原则

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

1.2继承性

现实中的继承，我们继承了父亲的姓

CSS中继承：子标签会继承父标签的某些样式，如文本颜色和符号。

作用是可以简化代码，不需要复杂的代码一层一层指定。

子元素可以继承父元素的样式（text- 、font- 、line- 、这些元素开头的可以继承，以及color属性）

行高的继承

1.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

优先级注意点：

权重是有四组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
简单来说，作用范围越小，权重越大（!important除外)
继承权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：如果复合选择器，则会有权重叠加，需要计算权重。

2.盒子模型

2.1看透网页布局本质

网页布局过程

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后拜访带相应的位置。
在盒子里面装内容。

网页布局核心本质：利用CSS摆盒子。

2.2盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边框、内边距、和实际内容。

2.3边框（border)

border可以设置元素的边框，边框有三部分组成：边

框宽度（粗细）边框样式边框颜色

语法：

border: border-width || border-style || border-color

可以用简写写法border: width style color; 这种写法不分先后顺序。

边框分开写法：

border-top: 1px solid red;

2.4表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法

border-collapse: collapse

collapse单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起

2.5边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度

2.6内边距（padding）

padding属性用于设置内边距，即边距与内容之间的距离。

内边距简洁写法

用顺时针的方式记忆即可防止写错

当我们给盒子指定padding值之后，发生了两件事

内容和边框有了距离，添加了内边距
padding影响盒子实际大小

计算时减去内边距算出盒子大小即可。

小综合案例，新浪导航

<!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>
        .nav{
            height:41px;
            border-top:3px solid #ff8500;
            border-bottom:1px solid #edeef0;
            background-color:#fcfcfc;
            line-height: 41px;
        }
        .nav a{
            /* a属于行内元素，此时必须要转换 */
            display:inline-block;
            height:41px;
            padding: 0 20px;
            font-size:12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover{
            color:#ff8500;
            background-color:#eee;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>
</html>

2.7外边距（margin）

margin属性用于设置外边距，即控制盒子和盒子之间的距离

margin简写的方式跟padding一样。

2.8外边距典型应用

外边距可以让我块级盒子水平居中，但是必须满足两个条件：

黑子必须指定了宽度（width）
盒子左右的外边距都设置为auto。

.header
{
width: 96px; margin: 0 auto;
}

常见的写法，以下三种都可以：

margin-left: auto; margin-right:auto;
margin:auto;
margin: 0 auto;

注意以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加

text-align：center 即可。

2.8外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

2.嵌套块元素垂直外边距的塌陷

给定一段代码，想让子元素向下移动一段距离，但是给定之后父元素连同子元素一起向下挪动，这个问题叫做嵌套块元素外边距塌陷问题。

<!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>
        .father{
            width:400px;
            height: 400px;
            background-color: skyblue;
            margin-top:50px;
        }
        .son{
            width:200px;
            height:200px;
            background-color:yellow;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>