盒模型
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>
6137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
