整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS3中有关增强用户界面的属性中具备一个名为box-sizing的属性，该属性用于设置CSS3盒模型宽度和高度的计算方法。本篇文章小海前端（头条号）为大家来介绍该属性的取值以及具体的用法。
承接文章：CSS3对块级元素实现了阴影效果，类似于Photoshop中的图层样式
技术等级：中级 | 适合有一定的CSS基础的人士阅读。
CSS3所提供的增强用户界面的属性以及与此相关的属性比较多，小海前端（头条号）将分几次对其进行讲解。所包含的所有增强用户界面的属性包括：
box-shadow
box-sizing
overflow-x
overflow-y
resize
outline
outline-width
outline-style
outline-color
outline-offset
pointer-events
user-select
appearance
content
counter-increment
counter-reset
quotes
本篇文章为大家讲解第二个增强用户界面属性：盒模型计算公式box-sizing。
一、认识box-sizing属性：
在默认的盒模型中，当设置了宽度和高度后，若又使用了padding属性，则盒子的宽度和高度会由于paddin属性的存在而增大。要想依旧保持原有的宽度和高度，需要从宽高中减去padding属性的取值。
CSS3增加了box-sizing属性来改善上述问题的存在。
CSS3 使用box-sizing属性调整盒模型尺寸的就算方式
该属性可以取下列值：
content-box，默认值，盒模型的padding和border的大小不包括在盒模型的width和height中。
border-box，盒模型的padding和border的大小包括在盒模型的width和height中。
二、content-box取值的理解：
例1：在页面中有一个id属性取值为box1的块级元素。设置box1的宽度和高度均为700像素。为该块级元素设置一个50像素的填充距离，再为该块级元素设置一个25像素的边框距离。CSS3代码如下所示。
#box{
width:700px; height:700px;
border:solid 20px #ff5857;
padding:50px;
box-sizing: content-box;
}
因为content-box取值的含义是padding和border得大小不包括在盒模型的width和height中，因此最终盒模型的尺寸计算公式如下所示：
盒模型的宽度=width + padding-left-width*2 + border-left-width*2;
盒模型的高度=height + padding-left-height*2 + border-left-height*2
因此例1中#box的实际尺寸为：
宽度=700px + 50px*2 + 25px*2=850px
高度=700px + 50px*2 + 25px*2=850px
如果仍希望最终的实际尺寸保持700px*700px的大小，那就需要从宽度和高度中减去padding和border的大小。
width=700px - 50px*2 - 25px*2=550px
height=700px - 50px*2 - 25px*2=550px
最终的CSS3代码如下所示。
#box{
width:550px; height:550px;
border:solid 20px #ff5857;
padding:50px;
box-sizing: content-box;
}
三、border-box取值的理解：
例2：仍采用例1中的块级元素，设置box-sizing属性的取值为padding-box，CSS3代码如下所示。
#box{
width:700px; height:700px;
border:solid 20px #ff5857;
padding:50px;
box-sizing: border-box;
}
因为border-box取值的含义是padding和border得大小都包括在盒模型的width和height中，因此最终盒模型的尺寸计算公式如下所示：
盒模型的宽度=width
盒模型的高度=height
因此例1中#box的实际尺寸为：
宽度=700px
高度=700px
这样就不要从width和height中减去任何数据，就可以得到希望的尺寸了。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
明天的文章中，继续为大家讲解CSS3中有关增强用户界面的属性。
天学习下css的盒子模型，这是一种布局模式，所谓盒子模型，就是将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸）。
一个CSS盒子模型主要由以下几个部分组成：
这些组成部分共同定义了CSS盒子的总尺寸和布局方式。了解盒子模型对于掌握CSS布局至关重要，因为几乎所有的页面布局都是基于盒子模型的。
Web开发中，理解和掌握HTML5盒模型是至关重要的。盒模型不仅是CSS布局的基础，而且它直接影响着页面元素如何在浏览器中呈现。本文旨在深入探讨盒模型的各个组成部分以及它们如何影响网页布局。
盒模型是CSS布局的核心概念，它决定了文档中的元素如何定位，以及它们之间的空间关系。一个元素的盒模型由以下几部分构成：
每个部分都对元素的最终尺寸和页面布局有着直接影响。
在标准盒模型中，元素的width和height属性仅包括内容区域。内边距和边框的宽度是额外计算的。
box-sizing: content-box;
在IE盒模型中，元素的width和height包括内容、内边距和边框。
box-sizing: border-box;
现代浏览器支持box-sizing属性，允许开发者选择使用哪种盒模型。
当两个垂直外边距相遇时，它们会合并成一个外边距，这通常称为边距合并（margin collapsing）。这个现象会影响布局，特别是在构建垂直间距时。
在响应式设计中，盒模型的理解尤为重要。使用border-box可以简化计算，因为元素的宽度包含了内边距和边框，这使得元素的尺寸更容易控制。
浮动元素会影响盒模型，因为它们脱离了正常的文档流。清除浮动则是为了防止相邻元素的盒子相互覆盖。
绝对定位和相对定位的元素有着不同的盒模型表现。绝对定位元素的外边距不会与其他外边距合并，而相对定位元素可能会影响其周围元素的布局。
当涉及到内边距和边框时，计算元素的实际尺寸可能会变得复杂。理解盒模型有助于精确计算和预测元素的实际占位。
为了更好地控制布局，以下是一些推荐的最佳实践：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Layout Example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.sidebar {
background-color: #f9f9f9;
padding: 20px;
border-right: 2px solid #ddd;
float: left;
width: 20%;
height: calc(100vh - 40px); /* Full height minus header and footer */
}
.main-content {
padding: 20px;
float: left;
width: 80%;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
clear: both;
}
.box {
background-color: #007bff;
color: white;
padding: 10px;
margin: 10px 0;
border: 3px solid #0056b3;
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar area.</p>
</div>
<div class="main-content">
<h2>Main Content</h2>
<p>This is the main content area.</p>
<div class="box">Box Model Example</div>
</div>
<div class="footer">
<p>Footer Content</p>
</div>
</body>
</html>
盒模型是网页布局的基石，它决定了元素如何在页面上占据空间。作为一名前端工程师，深入理解盒模型的工作原理对于创建精确和灵活的布局至关重要。随着技术的发展，虽然我们有了更多的布局工具和框架，但盒模型仍然是所有布局决策的基础。掌握它，你将能够更加自信和高效地设计和构建现代Web页面。
*请认真填写需求信息，我们会在24小时内与您取得联系。
