929 字
4 分钟阅读
html – 盒子模型
简介
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
标签
- div 标签
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
- span 标签
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
代码演示
<html>
<head>
<title>html 盒子模型</title>
<style>
#div1 {
box-sizing: border-box;
background-color: yellow;
width: 200px;
height: 200px;
padding: 50px;
margin: 50px;
}
#div2 {
background-color: #550055;
box-sizing: content-box;
width: 200px;
height: 200px;
padding: 50px;
margin: 50px;
}
#span1 {
background-color: red;
}
#span2 {
background-color: blue;
}
</style>
</head>
<body>
<div id = "div1"><p>这里是div1</p></div>
<div id = "div2"><p>这里是div2</p></div>
<span id = "span1">这里是span1 </span>
<span id = "span2">这里是span2</span>
</body>
</html>效果
CSS 样式
- background-color: 背景颜色
- width: 宽度
- height: 高度
- padding: 内边距上右下左的间距
- border: 边界上右下左的间距
- margin: 外边距上右下左的间距 左右设置为auto可能会居中页面
- box-sizing: 明确宽度和高度是仅限内容盒子还是包含内边距盒子的
- border-box 边界盒子
- content-box 内容盒子 默认
- text-align：控制单元格内文本的对齐方式
[…] 盒子模型 跳转 […]