盒模型定义及分类
听说过吗 CSS有个盒子模型，超重要的哦～说白了就是告诉我们网页上各种元素长啥样～就像个小屋子，里面装着内容、内补丁啊、边框什么的。按照规定，还能分成两大类——普通盒子模型和怪胎盒子模型。
我们平时用的小盒子模型，如果给元素设置100px的宽度，那么最后显示出来的尺寸就是包含内容区、内边距、边框和外边距这四部分之和。但是，在奇怪的盒子模型中，只有内容宽度、内边距和边框有效，外边距是不给计算在内的。这个区别可是会影响到我们做设计的效果！
box-sizing属性
CSS有个新玩法，除了那个常见的盒子模型和特殊的盒子模型以外，还能通过调整box-sizing来改变元素体型大小怎么算。这就像开个开关似的，你想选哪个算法就选哪个，一种叫content-box，跟平时咱们用的普通盒子模型差不多；另一种叫border-box，它用的就是特有的盒子模型了。
设置box-sizing为border-box后，我们就能随心所欲地调整元素大小！比如把两个有边框的框放在一起，它们的总宽高会自动包含内边距和边框哦～有了这个技巧，做响应式网站、处理特殊样式需求岂不更省事？
元素类型划分
.contentBox {
box-sizing: content-box;
width: 350px;
border: 10px solid black;
padding: 0 10px;}
在 CSS 里头，有好几种元素要认识下：霸占整栏的块级元素，靠在一起的内联元素，还有就是别具特色的行内块。块级元素就像是占地方的大哥，能设定自己的身高和宽度；内联元素虽然不够大但是个性十足，喜欢排排坐，大小受内容影响；行内块则是个另类，既保留了块级元素的性格还可以不换行，想变多大就变多大。
让元素随你心意变样，那就得用显示属性！block像个大盒子，左链则如小巧的内联盒子，那么inline-block？这个可就是它们中间的特别角色——行内块。
.borderBox {
box-sizing: border-box;
width: 350px;
border: 10px solid black;
padding: 0 10px;}
盒模型属性设置
除此以外，你得学习下CSS中的margin、padding和border这三个属性。有了它们，你就可以随意把你的框弄出各种花样来！随便怎么捣鼓都没关系，因为这些属性特别听话，随你怎么摆弄。总而言之，只要你能想象到的样子，就可以用这套东西实现出来~
123 div.container { width: 100%; border: 2px solid black; } div.box { box-sizing: border-box; width: 50%; border: 5px solid red; float: left; }这个 div 占据了左边部分这个 div 占据了右边部分
这儿说的margin就是让不同网页之间保持点距离，用来排列页面会很方便；而padding的话，就是让元素内容跟边缘有个小空间，这样看起来页面会更加好看些。别忘了那个叫border的家伙，它能让元素的边线有各种样式，宽度和颜色，美感立马上升了！
学习完CSS盒子模型和box-sizing属性运用后，通过实践操作，你就能轻易掌握前端开发中的各种布局和样式设计技能。期间，你还能深入理解并提升网页设计和开发水平喔！
* {
box-sizing: border-box;
}
#example1 {
width: 300px;
padding: 40px;
border: 15px solid blue;
}
#example2 {
width: 300px;
padding: 10px;
border: 2px solid red;
}
通用的 box-sizing
使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。
你设置的宽度就是实际的宽度，不需要考虑内边距和边框：
div 的完整宽度为 300px, 不需要考虑内边距和边框。
这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。
。
评论0