CSS盒子模型

最新推荐文章于 2024-07-25 16:45:46 发布

NoFear1015

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量45

点赞数

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

本文链接：https://blog.csdn.net/weixin_44697506/article/details/130352086

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、CSS三大特性

1.1 继承性

可以控制文字的属性都能继承：color、font系列、text-indent、text-align、line-height等；但是超链接不能继承颜色属性，h系列标签不能继承font-size属性。

1.2 层叠性

同一个标签设置不同的样式：样式层叠叠加，共同作用在标签上；
同一个标签设置相同的样式：样式会层叠覆盖，最终写在最后的样式生效；
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

1.3 优先级

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

优先级排序：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important(总结：选择范围越小，优先级越高)

注意：

!important写在属性后面，分号前面；
!important不能提升继承的优先级，只要是继承优先级就最低；
实际开发不建议用!important。

<!--优先级:body<div<color1<one<style<!important -->
<html lang="en">
<head>
    <style>
        body{
            color: red;
        }
        div{
            color: pink !important;
        }
        .color1{
            color: blue;
        }
        #one{
            color: forestgreen;
        }
    </style>
</head>
<body>
    <div class="color1" id="one" style="color: fuchsia;">优先级测试</div>
</body>
</html>

复合选择器权重叠加：

计算公式(每级之间不进位)
(0, 0, 0, 0)——>(行内样式个数，ID选择器个数，类选择器个数，标签选择器个数)
从左到右分别为1~4级，先行内个数，若相同，则比较ID个数，依次类推

!important权重最高，继承权重最低

示例:

<html lang="en">
<head>
   <style>
    /* (0,1,0,1) */
    div #one{
           color: orange; 
        }
     /* (0,0,2,0) */
    .father .son{
        color: aqua;
    }
    /* (0,0,1,1) */
    .father p{
        color: blue;
    }
    /* (0,0,0.2) */
    div p{
        color: red;
    }
   </style>
</head>
<body>
    <div class="father">
        <p class="son" id="one">我有一个梦</p>  <!--文字颜色为orange-->
    </div>
</body>
</html>

二、盒子模型

页面中的标签都可以看成一个盒子。盒子模型包含以下几个部分：

内容区域(content：宽高width、heigh来确定)

外边距区域(margin)

边框区域(border)

内边距区域(padding)

内容区域：

.box {
  width: 100px;
  height: 100px;
}

边框区域：

/* 粗细 线条样式 颜色（不分先后顺序）*/
/* 默认4个方向都有*/
/*solid:实线 dashed:虚线 dotted:点线*/
border: 10px solid red;

/* 单个方向 */
border-top: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
border-right: 10px solid red;

/* 单个属性 */
border-width: 边框粗细
border-style: 边框样式
border-color: 边框颜色

内边距区域：(规律——值不够，看对面)

/* 可取 4 个值、3 个值、2 个值、1 个值 */
padding: 上 右 下 左;
padding: 上 左右 下;
padding: 上下 左右;
padding: 上下左右;

/* 单个方向 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

内减模式: box-sizing: border-box;

<html lang="en">
<head>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 20px;
            border: 10px solid #000;
						/* 自动计算实际内容的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        这是div标签
    </div>
</body>
</html>

**外边距区域：**和padding类似

/* 可取 4 个值、3 个值、2 个值、1 个值 */
margin: 上 右 下 左;
margin: 上 左右 下;
margin: 上下 左右;
margin: 上下左右;

/* 单个方向 */
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

补充：清除默认样式和版心居中

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 版心居中 */
标签名{
  margin:0 auto;
}

三、盒子模型外边距问题

3.1 合并现象

**场景：**垂直布局的块级元素，上下的margin会合并；最终的外边距为两者中的最大值

解决办法：只给其中一个盒子设置margin即可

3.2 塌陷现象

**场景：**互相嵌套的块级元素，子元素设置margin-top会作用在父元素上。最终导致父元素一起往下移动。

解决办法：

给父级元素设置border-top或者padding-top(不太靠谱的方法)；
给父级元素设置overflow:hidden(最靠谱);
将子元素转换成行内块元素；
设置浮动；

<html lang="en">
<head>
    <style>
        .one{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border-top: 1px solid #000; */
           /* overflow: hidden; */
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: black;
            margin-top: 30px; 
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">这是第二个div</div>
    </div>  
</body>
</html>

行内标签的margin/padding:

水平方向可以改变，垂直方向不生效，用line-height来实现。

NoFear1015

关注

0
点赞
踩
0

收藏

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

可以控制文字的属性都能继承：color、font系列、text-indent、text-align、line-height等；但是超链接不能继承颜色属性，h系列标签不能继承font-size属性。同一个标签设置不同的样式：样式层叠叠加，共同作用在标签上；同一个标签设置相同的样式：样式会层叠覆盖，最终写在最后的样式生效；当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。特点：不同选择器具有不同的优先级，优先级高的会覆盖优先级低的样式选择器。优先级排序：继承<通配符选择器<标签选择器<类选择器<i
复制链接

扫一扫

专栏目录