CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)

荻风溪畔

已于 2022-06-11 16:09:40 修改

阅读量939

点赞数 1

分类专栏： web笔记文章标签： css css3 html

于 2022-05-31 22:10:22 首次发布

本文链接：https://blog.csdn.net/qq_44976531/article/details/125073481

版权

web笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的三大特性：层叠性、继承性和优先级，通过实例解析了如何处理样式冲突和继承。此外，还深入探讨了盒子模型，包括边框、内边距和外边距的影响及应用，特别提到了外边距合并和解决方法。最后，通过一个产品模块的案例展示了CSS在实际布局中的应用。

摘要由CSDN通过智能技术生成

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

层叠性

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

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

<style>
    div {
        color: pink;
        font-style: italic;
    }

    div {
        color: skyblue;
        font-style: normal;
    }
</style>

<body>
    <div>面对可抗的事情， 努力一下</div>
</body>

如下图文字的样式就近原则呈现蓝色。
请添加图片描述

请添加图片描述

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。（子承父业）

恰当的使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）
不是所有样式都会继承！！后面会学。

    <div>
        <p>面对不可抗的事情，笑一下</p>
    </div>

请添加图片描述
如下图，p标签的文字样式从div那里继承而来。

行高的继承

body {
color: rgb(26, 248, 6);
font: 12px/1.5 ‘Microsoft YaHei’;
/* 字体大小/行高字体系列 */
}

如果子元素div没有设置行高，则会继承父元素body的行高为1.5
此时子元素的行高是:当前子元素的font-size(文字大小)*1.5
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

优先级

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

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

请添加图片描述

权重有四组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推…
等级从左到右依次判断，数值相同，则比较下一位数。
简单记忆： 范围越小的选择器，权重更大，优先级更高
继承的权重是0！！，(比如给body的文本样式一个!important，但是子类虽然会继承，但会优先显示自己的选择器样式。)如果元素没有直接选中，不管父元素的选择器权重有多高，子元素得到的权重都是0.
选择器优先级示例1：

    <style>
        .test {
            color: red;
        }

        div {
            color: pink !important;
        }

        #demo {
            color: green;
        }
    </style>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>

最终还是粉色！
请添加图片描述
继承的权重示例1：
在这里插入图片描述

优先级权重的叠加

权重虽然会叠加，但是永远不会进位
请添加图片描述

    ul li  的权重是 0,0,0,1+0,0,0,1=0,0,0,2 =2
    li的权重是0,0,0,1 
    a：hover=0,0,0,1+0,0,1,0=0,0,1,1  hover属于伪类选择器。和类选择器同级

盒子模型：

页面布局三大核心：盒子模型，浮动，定位。

先准好相关的网页元素，网页元素基本都是盒子Box.
利用CSS设置好盒子样式，然后摆放到相应位置。网页布局的核心：利用CSS摆盒子
往盒子里面装内容。

边框（border）

border可以设置元素边框。边框主要有三部分组成：边框宽度（粗细）边框样式边框颜色
请添加图片描述
语法：

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

属性	作用
border-width	边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

border独立写法

    div {
        width: 300px;
        height: 200px;
        border-width: 5px;
        /* border-style (边框样式) solid:实线边框  dashed:虚线边框  dotted:点线边框 */
        border-style: dashed;
        border-color: red;
    }

border复合写法
边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red; 没有顺序（只设定上边框）
border-bottom: 5px dashed skyblue; 下边框
border-left: 5px solid blue; 左边框

表格的细线边框

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

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

    <style>
        table {
            width: 500px;
            height: 300px;
            text-align: center;
        }

        table,
        td,
        th {
            border: 1px solid skyblue;
            border-collapse: collapse;
        }
    </style>

结果：
请添加图片描述

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

如图:实际盒子的大小会加上border(边框)的大小。weight和height都变成210px(200+5*2)
请添加图片描述

内边距（padding）

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

padding的复合属性

值的个数	意义
padding:5px；	代表`上下左右`都有5px的内边距
padding:5px 10px；	代表`上下`内边距是5px，`左右`内边距都是10px
padding:5px 10px 20 px；	代表`上内边距`5px,`左右`内边距10px,`下内边距`20px
padding:5px 10px 20px 30px ；	代表`上`是5px,`右`是10px,`下`是20px,`左`是30px 顺时针

内边距(padding)也会影响盒子的大小

添加了内边距，内容和边框有了距离
也就是说，如果盒子已经有了宽度和高度，再指定内边距，会撑大盒子
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小（边距*2,因为是两边）即可

新浪导航栏案例

请添加图片描述

        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            font-size: 16px;
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            padding: 0px 20px;
        }

        .nav a:hover {
            color: #ff8500;
            background-color: rgb(238, 238, 238);
        }

在这里插入图片描述

内边距(padding)不影响盒子的情况

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }
        div p {
            padding: 30px;
            background-color: skyblue;
        }

这么写，div的子元素p不会超过div的大小。（加上width=100%试试）
请添加图片描述

外边距(margin) 其实和内边距使用方法很一样，不做过多描述

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

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距典型应用(水平居中)

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

盒子必须指定了宽度width
盒子左右的外边距都设置了auto.

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

常见块级元素水平居中的写法：

margin-left:auto; margin-right: auto;
margin: auto;
margin: 0 auto; (常见写法)
行内元素(span等)或者行内块(img等)元素水平居中给其父元素添加text-align:center即可

外边距合并

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

相邻元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
请添加图片描述
解决方法:
只给一个盒子添加margin值。

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。请添加图片描述
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。(这个方法不会改变盒子的大小）
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结
示例：

    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            /*  border: 200px solid transparent;*/
            /*  padding: 200px; */
            overflow: hidden;
       
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

如下图的结果
请添加图片描述

清除内外边距(外边距:不会影响盒子的大小,但会影响盒子的位置)

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
CSS第一行代码如下！！！！

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

注意：行内元素(span等)为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。(设置了也不起效果)但是转换为块级和行内块元素就可以了。

综合案例(产品模块)：

    <style>
      * {
          margin: 0;
          padding: 0;
      }
      body {
          background-color: #f5f5f5;
      }
      a {
          color: #333;
          text-decoration: none;
      }
      .box {
          width: 298px;
          height: 415px;
          background-color:#fff;
          /* 让块级的盒子水平居中对齐 */
          margin: 100px auto;
      }
      .box img {
          /* 图片的宽度和父亲一样宽 */
          width: 100%;
      }
      .review {
          height: 70px;
          font-size: 14px;
          /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
          padding: 0 28px;
          margin-top: 30px;
      }
      .appraise {
          font-size: 12px;
          color: #b0b0b0;
          margin-top: 20px;
          padding: 0 28px;
      }
      .info {
          font-size: 14px;
          margin-top: 15px;
          padding: 0 28px;
      }
      .info h4 {
          display: inline-block;
          font-weight: 400;
        
      }
      .info span {
          color: #ff6700;    
      }
      .info em {
          font-style: normal;
          color: #ebe4e0;
          margin: 0 6px 0 15px;
      }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
               <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
               <em>|</em>
               <span> 99.9元</span>
        </div>
    </div>
</body>