前端开发学习——CSS盒子模型

先吃点再说

已于 2024-08-05 22:12:29 修改

阅读量382

点赞数 9

文章标签：学习 css 前端

于 2024-08-05 21:51:28 首次发布

本文链接：https://blog.csdn.net/2302_80311379/article/details/140934447

版权

一、优先级

1、基本测试

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

优先级公式（越精准优先级越高）：

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

注意点：

!important写在属性值后面，分号的前面
!important不能提升继承的优先级，继承优先级最低
实际开发中不建议使用!important

2、叠加计算

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

权重叠加计算公式：（每一级之间不存在进位）

比较规则：

从第一级开始比较，如果分出大小，之后的统统不看
如果最终多有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）

注意点：!important如果不是继承，则权重最高。

<head>
    <style>
        /* 行内样式 id 类 标签 */
        /* (0,1,0,1) */
        div #one{
            color: orange;
        }
        /* (0,0,2,0) */
        .father .son{
            color: skyblue;
        }
        /* (0,0,1,1) */
        .father p{
            color: purple;
        }
        /* (0,0,0,2) */
        div p{
            color: pink;
        }
    </style>
</head>
<body>
   <div class="father">
        <p class="son" id="one">我是一个标签</p>
   </div>
</body>

浏览器显示效果：

<head>
    <style>
        /* 行内样式 id 类 标签 */
        /* !important最高 */
        /* 继承:最低 */
        /* (0,2,0,0) 生效*/
       #father #son{
        color: blue;
       }
       /* (0,1,1,1) */
       #father p.c2{
        color: black;
       }
       /* (0,0,2,2) */
       div.c1 p.c2{
        color: red;
       }
       /* 继承:最低 */
       #father{
        color: green !important;
       }
       /* 继承:最低 */
       div#father.c1{
        color: yellow;
       }
    </style>
</head>
<body>
   <div class="c1" id="father">
        <p class="c2" id="son">这行文本是什么颜色</p>
   </div>
</body>

浏览器显示效果：

二、盒子模型

1、盒子模型的介绍

盒子的概念：

页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便地进行布局
浏览器在渲染网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象地称之为“盒子”

组成部分说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2、元素的高度和宽度

内容区域的大小由width和height属性默认设置是盒子内容区域的大小

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距) = 450px

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

注意：

在CSS3中，可以自动将border、padding的尺寸从盒子中减去，只需添加下面一行代码：

box-sizing:border-box;

3、边框（border）

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如：border: 10px solid red;
border: 像素(数字+px) 线条样式(solid-实线 dashed-虚线 dotted-点线) 线条颜色;

如果只给盒子的某个方向单独设置边框

属性名：border-方位名词

4、内边距（padding）

padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

填充- 单边内边距属性

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px

填充 - 简写属性

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

5、外边距（margin）

margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

Margin - 单边外边距属性同padding

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - 简写属性同padding

清除内外边距：

*{
  margin: 0;
  padding: 0;
}

6、margin问题

1.合并现象

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

结果：最终两者距离为margin的最大值

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

2.塌陷现象

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

结果：导致父元素一起往下移动

解决方法：

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

7、行内元素的内外边距问题

如果想要通过margin和padding改变行内元素的垂直位置，无法生效

解决方法：设置行高

先吃点再说

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端开发学习——CSS盒子模型

页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便地进行布局浏览器在渲染网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象地称之为“盒子”Margin(外边距) -清除边框外的区域，外边距是透明的。Border(边框) -围绕在内边距和内容外的边框。Padding(内边距) -清除内容周围的区域，内边距是透明的。Content(内容) -盒子的内容，显示文本和图像。
复制链接

扫一扫