盒模型的组成，由里向外content,padding,border,margin.
从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高。
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="static/css/style03.css"> -->
<style media="screen">
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/* 上右下左 */
/* padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-left:50px; */
/* 上右下左，简写 */
padding: 20px 30px 40px 50px;
/* 左右相等30，上下不相等20、40,可以这样简写 */
padding: 20px 30px 40px;
/* 上下也相等40px */
padding: 40px 30px;
/* 上边框 */
/* border-top-width: 10px;
border-top-style: solid;
border-top-color: red; */
/* 右边框 */
/* border-right-width: 10px;
border-right-style: dashed;
border-right-color: green; */
/* 下边框 */
/* border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue; */
/* 左边框 */
/* border-left-width: 10px;
border-left-style: double;
border-left-color: black; */
/* 简写 */
/* border-top: 10px solid red;
border-right: 10px solid green;
border-bottom:10px dotted blue;
border-left:10px dotted blue; */
border: 10px solid red;
}
.box2 {
height: inherit;
background-color: wheat;
}
</style>
<title>一切皆盒子</title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果图片
手写代码
总结
HTML盒子模型分为三个层级:
1、内容级
(1)width
(2)height
(3)background-color(默认透明)
2、元素级
(1)包括内容级(width+height+background)
(2)内边距:padding
(3)边框：border
3、位置级margin,决定当前盒子与其它盒子之间的位置与关系
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
