CSS盒子模型基础知识（上篇）

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

鱿年年

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

阅读量434

点赞数 10

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

本文链接：https://blog.csdn.net/m0_71172453/article/details/129372825

版权

WEB前端专栏收录该内容

18 篇文章 5 订阅

订阅专栏

😊博主页面：鱿年年

👉博主推荐专栏：《WEB前端》👈

💓博主格言：追风赶月莫停留，平芜尽处是春山❤️

前言

一、盒子模型

1.1 看透网页布局的本质

1.2 盒子模型（Box Model）组成

前言

我们学习这一章需要掌握的几项知识目标如下：

能够准确阐述盒子模型的4个组成部分

能够利用边框复合写法给元素添加边框

能够计算盒子的实际大小

能够使用盒子模型布局模块案例

能够给盒子设置圆角边框

能够给盒子添加阴影

能够给文字添加阴影

一、盒子模型

页面布局是要学习三大核心，盒子模型、浮动和定位，学习好盒子模型能非常好的帮助我们布局页面。

1.1 看透网页布局的本质

首先页面布局的过程：

1.先准备好相关的网页元素，页面元素的基本就是盒子Box。

2.利用CSS 设置好盒子样式，然后摆放到相应的位置上。

3.最后往盒子里面装内容的。

注意：网页布局的核心就是利用CSS摆盒子

1.2 盒子模型（Box Model）组成

我们看到的盒子模型概念：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的是HTML元素，它包括了：边框、外边距、内边距和实际内容。

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

1.3 边框（border）

border是可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。

写作语法：

border ：border-width | | border-style | | border-color

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

边框练习：（具体记住的边框粗细：solid 实线边框、dashed 虚线边框、dotted 点线边框）

<!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>边框</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border-style: solid;
            border-width: 10px;
            border-color: brown;
        }
    </style>
</head>
<body>
    <div>努力学前端</div>
</body>
</html>

边框的复合性写法：CSS的边框属性允许你指定一个元素的边框样式和颜色。

简写：

border：10px solid red; 没有顺序

边框分开写法：

border-top：10px solid red；/*之设定上边框，其余不变*/

注意：上边框（border-top）、下边框（border-bottom）、左边框（border-left）、右边框（border-right）

1.4 表格的细线边框

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

写法：

border-collapse：collapse；

注意：

collapse 单词的意思是合并

border-collapse：collapse；表示相邻边框合并在一起。

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

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候，不量边框。
如果测量的时候包含了边框，则需要width/height 减去边框宽度。

1.6 内边距(padding)

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

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

【内边距的复习写法】padding属性（简写属性值表）可以有一到四个值的。

值的个数	表达的意思
padding：5px;	1个值，代表上下左右都是5像素内边距
padding：5px 10px;	2个值，代表上下内边距是5像素左右内边距是10像素
padding：5px 10px 20px;	3个值，代表上内边距是5像素左右内边距是10像素下内边距是20像素
padding：5px 10px 20px 30px;	四个值，上是5像素左是10像素下是20像素右是30像素；按照顺时针来

重点：以上四种情况是在实际开发中经常遇见的。

还有就是当我们给盒子指定了一个padding值之后，会发生两件事：

1.内容和边框都有了距离，增加了内边距。

2.padding 影响了盒子的实际大小。

也就是说，如果盒子已经有了宽度和高度之后，此时再指定内边距的话，会撑大盒子的。

解决方案：

如果保证盒子跟效果图大小保持一致的话，则让width/height减去多出来的内边距大小即可。

存在特殊情况的padding

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

1.7 外边距（margin）

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

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

margin简写的方式和代表的意思是跟padding完全一致的。

外边距的典型应用案例知识：

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

1.盒子必须指定了高度的（width）

2.盒子左右外边距都设置为auto

.header{ width:99opx; margin:0 auto;}

常见的写法，有以下三种都可以的：

margin-left：auto； margin-right：auto；
margin：auto；
margin：0 auto；

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

1.8 外边距合并

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

主要有两种情况：

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

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

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

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

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

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

当出现此类问题时的解决方案：

可以为父元素定义上边框。

可以为父元素定义上内边距。

可以为父元素添加overflow:hidden

1.9 清楚外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。*（通配符选择器）

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

这是我们CSS的第一行代码。重重重！！！

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

鱿年年

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
6
评论
CSS盒子模型基础知识（上篇）

我们学习这一章需要掌握的几项知识目标如下：能够准确阐述盒子模型的4个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够使用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影。
复制链接

扫一扫