CSS必备基础知识---CSS布局-盒子模型

最新推荐文章于 2024-07-26 08:00:00 发布

只昂张327

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量109

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_71171795/article/details/127938411

版权

1、`CSS` 三大特性

1.1.1 优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

问题1:优先级比较公式是怎样的？

答:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

问题2:!important能提升继承的优先级吗？

答:不能

问题3:继承的优先级是最高还是最低?

答:只要是继承优先级最低

案例:

 <style>
        body {
           color: yellow !important;
        }

        * {
            color: red;
        }
         
       div {
           color: aqua;
       }

       .box {
           color: blue;
       }

       #box {
           color: orange;
       }
    </style>


<div id="box">盒子里面到底显示什么文字了?</div>

1.1 .2 权重叠加计算

场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

问题1:复合选择器权重叠加计算的公式是怎样的？

问题2:权重叠加计算每一级之间会有进位问题吗?

1.1.3 小结

问题1:

问题2:

不会有进位问题.

1.1.4权重叠加计算案例

权重计算题解题步骤：

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
通过权重计算公式，判断谁权重最高

案例:

      .box p {  
          color: blue;         
      }
    
      .box #one {
       color: red;
      }
      
      .box p .two {
       color: rebeccapurple;
      }

      .box #one .two {
          color: pink;
      }

<div class="box">
    <p id="one">
      <span class="two">span标签显示的颜色</span>
    </p>
</div>

1.1.5Chrome调试工具差错流程

案例:

<!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 p span .box3{
            color:reds;
            font-size: 20px;
        }

        </style>
    </head>
    <body>
        <div class="box1">
            <p class="box2">
                <span class="box3">字体大小20px,颜色红色</span>
            </p>
        </div>
    </body>
</html>

2 、盒子模型

标签=元素=盒子

2.1.1 盒子模型的介绍

问题1：如何理解盒子？

答:网页中每一个标签都可以理解为盒子，通过盒子的视角来进行网页布局。

问题2：盒子模型一共有几个部分组成？分别是什么？

答:

四部分组成
内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

2.1.2 内容的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子 内容区域的大小

问题1：设置盒子模型内容区域大小可以通过什么属性设置？

宽度:width 高度:height

2.1.3 border相关属性介绍

作用：给设置边框粗细、边框样式、边框颜色效果

问题1:边框可以设置哪些样式?

答:

border-width:边框粗细，单位是 px
border-style:solid 实线 | dashed 虚线 |dotted 点线
border-color:边框颜色

问题2:边框连写属性名是什么?连写有顺序要求吗?

答:

border
没有顺序要求
如：border : 10px solid red

问题3:如何给盒子单独设置某个方向的边框?

答:

border-top: 1px solid #000; 设置上边框
border-right: 1px solid #000; 设置右边框
border-bottom: 1px solid #000; 设置下边框
border-left: 1px solid #000;设置左边框

案例:请给一个 300*300 的盒子，设置上边框为红色，其余边框为蓝色边框粗细5px

.box{
       width: 300px;
       height: 300px;
       border: solid 5px blue;
       border-top: 5px solid red;
}

2.1.4 盒子实际大小初级计算公式

问题1:盒子实际大小初级计算公式是如何进行计算的?

答:盒子宽度 = 左边框 + 内容宽度 + 右边框

问题2:边框会影响盒子实际大小吗? 如何解决?

答:

会影响盒子大小
手动在内容减去(手动内减)
测量盒子内容大小时,不测量边框.

2.1.5 内边距（padding）-介绍

问题1:padding的作用是什么?

答:设置边框与内容区域之间的距离

问题2:padding取值有几种,分别表示什么含义?

答:

四种
padding: 5px; 上下左右都是5px
padding: 5px 10px; 上下 5px 左右10px
padding: 5px 10px 20px; 上5px 左右10px 下 20px
padding: 5px 10px 20px 30px; 上右下左(顺时针)

问题3:padding可以单独设置某个方向的内边距吗?

答:

可以;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

2.1.6 盒子实际大小终极计算公式

问题1:盒子实际大小终极计算公式是如何进行计算的?

答:盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框

问题2 padding会影响盒子实际大小吗?如何解决?

答:盒子高度 = 上边框 + 上padding + 内容高度 + 下padding + 下边框

2.1.7 外边距（margin）- 介绍

问题1:margin的作用是什么?

答:设置盒子与盒子之间的距离

问题2:margin取值有几种,分别表示什么含义?

答:

四种
margin: 5px; 上下左右都是5px
margin: 5px 10px; 上下 5px 左右10px
margin: 5px 10px 20px; 上5px 左右10px 下 20px
margin: 5px 10px 20px 30px; 上右下左(顺时针)

问题3:margin可以单独设置某个方向的外边距吗?

答:

可以;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

2.1.8 margin单方向设置的应用

2.1.9 外边距折叠现象 – ① 合并现象

场景：垂直布局 的块级元素，上下的margin会合并

问题1:请描述垂直布局的块级元素合并现象? 解决方法是什么?

上面的盒子有 margin-bottom，下面的盒子有 margin-top，取最大值
解决方法:只给其中一个盒子设置margin即可

2.1.10 外边距折叠现象 – ② 塌陷现象

场景：互相嵌套 的块级元素，子元素的 margin-top 会作用在父元素上

问题1:请描述互相嵌套的块级元素塌陷现象?

答:互相嵌套的块级元素,子元素设置margin-top 会作用在父元素上

问题2:视频老师里介绍几种解决办法,分别是什么?,推荐使用哪种?

答:

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden(推荐使用)
转换成行内块元素
设置浮动

2.1.11 行内元素的margin和padding无效情况

水平方向:设置margin和padding布局中有效！(左右)

垂直方向:设置margin(上下)和padding(上)布局中无效！

如果想要行内元素垂直方向生效,转换为块级和行内块元素就可以啦,或者使用行高