HTML学习之初识CSS盒子模型

1. 什么是盒子模型

CSS 盒子模型是一个包含多个属性的容器，包括边框、边距、填充和内容本身。它用于创建网页的设计和布局。它可以用作自定义不同元素布局的工具包。Web 浏览器根据 CSS 框模型将每个元素渲染为矩形框。

CSS 中的盒子模型有多种属性，以下列出主要属性：

• content：即内容属性，它包含文本、图像或其他媒体形式的实际数据，并且可以使用 width 和 height 属性调整其大小。
• padding：填充或内边距属性，用于定义元素边框与元素内容之间的空间，可以同时设置上下左右四个方向的内边距。
• border：即边框属性，用于设置元素边框的样式、宽度和颜色。
• margin：即外边距属性，用于定义元素外面的空间，在border属性周围。

2. 标准盒子模型

从上图可以看出：

• 盒子的总宽度 = width + padding + border + margin
• 盒子的总高度 = height + padding + border + margin

此时的width/height只是content的宽度/高度，是不包含padding和border的值。

3. 怪异盒子模型

从上图可以看出：

• 盒子的总宽度 = width + margin
• 盒子的总高度 = height + margin

这里的width/height包含了padding和border的值。

4. 代码测试

定义一个div，其属性值如下：

div{
    margin: 20px;
    width: 100px;
    height: 100px; 
    padding: 5px; 
    border: 2px solid #000000;
}  

标准模式下：盒子的总宽度 = 盒子的总高度 = 154

怪异模式下：盒子的总宽度 = 盒子的总高度 = 140

5. 两种模式的转换

box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析模式，可以参考上面的代码案例。

• 当设置box-sizing: content-box时，采用标准模式进行计算，默认模式；
• 当设置box-sizing: border-box时，采用怪异模式进行计算。

本文题目：HTML学习之初识CSS盒子模型
分享URL：http://www.mswzjz.cn/qtweb/news44/325694.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能