文章目录
一、认识盒子模型的组成
1、盒子构成
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
2、盒子举例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>初识盒模型</title>
<style>
div {
width: 200px;
height: 100px;
background-color: blue;
margin: 30px;
border: 40px solid black;
padding: 50px;
}
</style>
</head>
<body>
<div id="d1">Hello World Yes No</div>
<div id="d2"></div>
</body>
</html>
-
真正可视大小:(border + padding + content)
- 宽:40 + 50 + 200 + 50 + 40
- 高: 40 + 50 + 100 + 50 + 40
-
真正占用的空间:(margin + border + padding + content)
- 宽:30 + 40 + 50 + 200 + 50 + 40 + 30
- 高: 30 + 40 + 50 + 100 + 50 + 40 + 30
-
通过box-sizing控制计算宽高的方式:
- content-box:默认宽高指的是content区域;
- border-box:宽高指定的是border + padding + content 区域。
注意
- 一般默认情况下,指定宽。高是指定content部分的宽、高。
- 两个盒子之间的margin,不是取margin之和,而是最大值。
二、内容区(content)
- 内容区是盒子模型的中心区域,包含了盒子的主要信息内容:文本、图片等。
- 当盒子中有内容时,可能会把宽高撑到超过我们指定的宽高。
- 内容区有三个属性:
- width:盒子内容区的高度;
- height:盒子内容区的宽度;
- overflow:当content中的信息太多时,并超出内容区所占用的范围时,用来指定溢出内容的处理方式。
overflow属性值 | 描述 |
---|---|
visible | 默认值,溢出的内容会出现在元素框之外 |
hidden | 溢出内容将不可见 |
scroll | 溢出的内容被修剪,但可以通过滚动条来查看隐藏部分 |
auto | 有浏览器来决定如何处理 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content-overflow属性</title>
<style>
div {
width: 400px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
<h3>定义和用法</h3>
<p>overflow属性规定当内容溢出元素框时发生的情况。</p>
<hr>
<h4>说明</h4>
<p> 如果为scroll,则不论是否需要,用户代理都会提供一种滚动机制。
所以,可能即使元素框中可以放下所有内容,也还是会出现滚动条。</p>
</div>
</body>
</html>
三、边框(border)
- 就是围绕着元素的内容和内边距的一条或者多条线,每条边框又有宽度、颜色、样式、圆角等特征。
- 元素的边框样式包括宽度、样式、颜色等。
1、边框宽度border-width
- 取值范围是指定的关键字或数值;指定的关键字有:thin(细边框)、medium(默认值,中等边框)、thick(粗边框)。
- 边框的参数可以是1~4个:
参数个数 | 表示含义 |
---|---|
当边框参数是4个时 | 按照上–》右–》下–》左 顺时针作用到边框上(TRBL原则:Top、Right、Bottom、Left) |
当边框参数是3个时 | 按照上–》左+右-》下 顺时针作用到边框上 |
当边框参数是2个时 | 按照上+下–》左+右 顺时针作用到边框上 |
当边框参数是1个时 | 指的是四个边框宽度都是一样的 |
2、边框样式border-style
值 | 描述 |
---|---|
none | 无边框 |
hidden | 隐藏边框 |
dotted | 点状边框,在大多数浏览器中呈现实线 |
dashed | 虚线,在大多数浏览器中呈现实线 |
solid | 实线 |
double | 双线,双线的宽度等于border-width的值 |
groove | 3D边框凹,取决于border-color的值 |