盒模型-盒子的组成部分
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子） 盒子类型： 1. 行盒，display等于inline的元素 2. 块盒，display等于block的元素 行盒在页面中不换行，块盒独占一行 display默认值为inline 浏览器默认样式表设置的块盒：容器元素 h1~h6 p 常见的行盒：span a img video audio
盒子的组成部分
无论是行盒，还是块盒 都由下面几个部分组成，从内到外分别是：
- 内容 content width height 设置的是盒子内容的宽高 内容部分通常叫做整个盒子的 内容盒 content-box
- 填充(内边距) padding 盒子边框到盒子内容的距离 padding-left padding-right padding-top padding-bottom padding:简写属性 padding:上 右 下左 填充区+内容区=填充盒padding-box
- 边框 border 边框 = 边框样式 + 边框宽度 + 边框颜色 边框样式: border-style 边框宽度: border-width 边框颜色: border-color 边框+填充区+内容区= 边框盒 border-box
- 外边距 margin 边框到其他盒子的距离(盒子与盒子的距离) margin-top margin-left margin-right margin-bottom
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
padding: 20px;
border: 50px;
}
div{
padding: 20px;
border: 20px;
}
</style>
</head>
<body>
<h1>
一年四季
</h1>
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem, ipsum dolor.
</div>
</body>
</html>
上一篇：
通过多线程提高代码的执行效率例子