标准盒子与怪异盒子
从0到0.1学习实践盒子模型
盒子模型概念
预备知识
- margin:外边距
- border:边框
- padding:内边距
- height:文本高度
- width:文本宽度
content-box
.father{
box-sizing: content-box;
}
content-box --- >只计算内容区域的宽度和高度
*{
margin: 0;
padding: 0;
box-sizing: content-box;
}
.father{
height: 500px;
width: 500px;
background-color: plum;
border: 5px solid;
margin: 20px auto;
padding: 20px;
}
-
盒子总宽度 = content-width(500px) + padding-left(20px) + padding-right(20px) + border-left(5px①) + border-right(5px①)
-
总高度 = content-height(500px) + padding-top(20px) + padding-bottom(20px) + border-top(5px①) + border-bottom(5px①) = 130px
①:这里只有border不准确,border越小,误差越大
这里的4.984涉及到卷积,机器学习了,反正是浏览器的锅
总结:在 content-box 模型下,考虑四部分
border-box
border-box 包括内容,内边距和边框
这意味着在 border-box 模式下,元素的总宽度和高度更易于控制。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father{
height: 500px;
width: 500px;
background-color: plum;
border: 5px solid;
margin: 20px auto;
padding: 20px;
}
总宽度 = 520px
总高度 = 520px
总结:在 border-box 模型下,考虑两部分
盒子模型实践--制作一个九宫格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 500px;
width: 500px;
background-color: plum;
border: 1px solid;
}
.father div{
border: 1px solid;
height: 33.3333333%;
width: 33.3333333%;
}
</style>
</head>
<body>
<div class="father">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
本文作者:GJ504b
本文链接:https://www.cnblogs.com/GJ504b/p/18601209
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步