box-sizing属性使用场景
2021-04-07 本文已影响0人
夜色001
关键词：布局 盒子模型
盒子模型
盒子模型在前端开发中有着非常重要的地位。盒子模型的组成由content+padding+border+margin组成，从内往外分别为内容区、内边距、边距、外边距。css规范发展至今已经到css3了，其盒子模型的规定也在响应的发生变化。
box-sizing是css3的参数，用于控制盒子模式使用哪种规范。
box-sizing有3个值：
content-box：在宽度和高度之外绘制元素的内边距和边框。即元素的内容占满整个元素的宽高，内边距和边框将扩展开来，在外绘制。
border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。元素宽高包裹盒子的边框、内边距和内容区。
inherit：从父元素继承
默认的值为content-box。
使用场景
在界面布局中，当多个元素并排时，最好设置border-box。这样我们在对某个元素设置内边距时，才不会造成整个布局的混乱。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写作</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./css/reset.css" media="all">
<link rel="stylesheet" href="./css/write.css" media="all">
<style>
.main{
display: flex;
width: 800px;
margin: 0 auto;
}
.anthology {
width: 50%;
height: 200px;
background: #FF0000;
padding-right: 100px;
box-sizing: content-box;
}
.article{
width: 50%;
height: 200px;
background: #0000FF;
box-sizing: content-box;
}
</style>
</head>
<body>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jquery.3.2.1.min.js"></script>
<div class="main">
<div class="anthology">
</div>
<div class="article"></div>
<div class="writing-area"></div>
</div>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写作</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./css/reset.css" media="all">
<link rel="stylesheet" href="./css/write.css" media="all">
<style>
.main{
display: flex;
width: 800px;
margin: 0 auto;
}
.anthology {
width: 50%;
height: 200px;
background: #FF0000;
padding-right: 100px;
box-sizing: border-box;
}
.article{
width: 50%;
height: 200px;
background: #0000FF;
box-sizing: border-box;
}
</style>
</head>
<body>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jquery.3.2.1.min.js"></script>
<div class="main">
<div class="anthology">
</div>
<div class="article"></div>
<div class="writing-area"></div>
</div>
<script>
</script>
</body>
</html>
