CSS学习（三）

最新推荐文章于 2024-09-12 18:02:32 发布

GuTaiWEI

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量78

点赞数

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

本文链接：https://blog.csdn.net/qq_43826202/article/details/118480252

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS特性

CSS的三大特性：层叠性、继承性、优先级。

层叠性：相同选择器给设置相同的样式，此时后一个样式就会覆盖（层叠）前一个冲突的样式（就近原则）。层叠性主要用于解决样式冲突的问题。
继承性：子标签会继承父标签的某些样式，如文本颜色和字号。
优先级：当同一个元素指定多个选择器，就会产生优先级。选择器相同，执行层叠行。选择器不同，根据选择器权重执行。

权重的叠加：复合选择器会有权重的叠加问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重的叠加</title>
    <style>
       /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */
        ul li {
            color: green;
        }
        /* li 的权重是 0,0,0,1    1 */
        li {
            color: red;
        }
        /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */
        .nav li {
            color: pink;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>

注意：权重虽然会叠加，但是不会产生进位。

盒子模型

盒子模型的组成：CSS盒子模型本质上是一个盒子，封装周围的HTML元素。塔包括：边框（border）、外边距（margin）、内边距（padding）、实际内容（content）。

边框（border）：border可任意设置元素的边框。边框由三部分组成：边框宽度，边框样式，边框颜色。

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

border-collapse: collapse; 表示相邻边框合并在一起

注意：边框的宽度会撑大盒子的实际大小。

内边距（padding）：盒子的内容与边框之间的距离。内边距的宽度也会撑大盒子的实际大小。如果盒子本身没有指定with/height属性，则padding不会撑开盒子大小。

padding属性的简写模式：

外边距（margin）：margin属性用于设置外边距，即控制盒子与盒子之间的距离。

可以使用外边距来块级盒子水平居中。代码如下：

div {
    margin: 0 auto;
}

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

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

相邻块元素处置外边距的合并：

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加 margin 值。

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

1.为父元素定义上边框。

2.为父元素定义上内边距。

3.为父元素添加overflow:hidden。（最常用）

清除内外边距：