#yyds干货盘点# 前端歌谣的刷题之路-第一百二十四题-盒模型-border-box

时间：2022-10-18 10:59:29


前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

  默认盒模型的width和height只会作用于盒子的内容区，而通过"box-sizing"属性可以改变计算盒子大小的方式。"box-sizing"的默认值为"content-box"，即上一题看到的那样，把值只作用于内容区。现在给类名为"border-box"的盒子设置"box-sizing"属性为"border-box"，此时width和height的值不仅会作用于内容区，并且还会包括内边距和边框。
 很多人将"border-box"称为怪异盒模型，其实并不怪异。因为现实中的盒子就是这样测量的。比如快递盒，当用安全气囊包裹易碎物品时，填充物就可以视为"padding"，无论填充物有多厚，也不会影响盒子的整体大小。
 现在再给类名为"border-box"的盒子设置宽度、高度都为"100px"、内边距为"5px"、边框为"5px solid black"，此时通过调试工具会发现盒子的实际大小并没有因为添加了内边距或边框而被撑大。"border-box"在布局中可以让开发者减少不必要的烦恼，如添加内边距、边框之后盒子大小发生变化影响到整体布局的效果。完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

#yyds干货盘点# 前端歌谣的刷题之路-第一百二十四题-盒模型-border-box

#yyds干货盘点# 前端歌谣的刷题之路-第一百二十四题-盒模型-border-box

​编辑

 核心代码

<!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>content-box</title>
<style type="text/css">margin: 0;
padding: 0;
    }
.border-box{
width:80px;
height:80px;
padding:5px;
border:5px solid black;
box-sizing: content-box;
    }
</style>
</head>
<body>
<div class="border-box"></div>
</body>
</html>

#yyds干货盘点# 前端歌谣的刷题之路-第一百二十四题-盒模型-border-box

总结

box-sizing:content-box
//盒子设置宽度是多少，content的宽度就是多少，不会影响padding和border
box-sizing:border-box
//盒子的宽度设置为500px,padding为10px,则计算的content的宽度=500px-10*2px


标签：

相关文章