什么是盒子模型?
所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,
也就是一个盛装内容的容器。
盒子模型的特点:
-
盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
-
盒子里面的文字和图片等元素是 内容区域
-
盒子的厚度 我们成为 盒子的边框
-
盒子内容与边框的距离是内边距(类似单元格的 cellpadding)
-
盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)
图解:
边框 border
边框的粗细可以决定元素的大小
语法:
<style>
border : border-width || border-style || border-color
</style>
.
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式(none:(默认值)solid:单实线 dashed:虚线 dotted:点线) |
border-color | 边框颜色 |
.
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin: 50px auto;
/* 1像素的 实线边框 颜色是hotpink */
border: 1px solid hotpink;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
可以单独给4个边框分别指定:
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
关于表格设置完cellspacing="0"之后表格边框线重叠变粗解决方案
【问题】通过表格的cellspacing=“0”,将单元格与单元格之间的距离设置为0,但是两个单元格之间的边框会出现重叠,从而使边框变粗,如何解决?
【解决方案】通过css属性 border-collapse
内边距 padding
padding属性用于设置内边距。
是指边框与内容之间的距离。
内边距属性:
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
调整内边距简写方式:
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右内边距; |
2个值 | padding: 上下内边距 左右内边距 ; |
3个值 | padding:上内边距 左右内边距 下内边距; |
4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ; |
注意:
如果给盒子指定了宽度,此时,如果给这个盒子再指定padding,则盒子会被撑大。
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin: 50px auto;
border: 1px solid hotpink;
/* 设置内边距上右下左全部为10px */
padding: 10px;
}
span {
background-color: red;
}
</style>
</head>
<body>
<div>
<span>我是span</span>
</div>
</body>
</html>
注意!!!
设置盒子内边距时会撑大盒子,如果希望这个内边距也算到盒子的总宽度或高度里面就要改变盒子大小的计算模式
box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: tomato;
/* 设置内边距计算在盒子模型的宽度或高度内 */
box-sizing: border-box;
/* 设置盒子内边距 */
padding: 50px;
}
.nei {
background-color: violet;
}
</style>
</head>
<body>
<div class="box1">
<span class="nei">我是span</span>
</div>
</body>
</html>
没设置内边距之前:
设置了内边距,div有了内边距,但同时被撑大了:
如果不希望被撑大,改变盒子模型的计算模式,把内边距也计算在盒子的宽度或高度内,同样设置边框和外边距同样适用:
外边距 margin
margin属性用于设置外边距。
margin就是控制盒子和盒子之间的距离。
外边距属性:
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
调整外边距简写方式:
margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
1. 块级盒子水平居中
.
让块级盒子居中的条件:
- 盒子必须指定宽度(width)
- 然后就给左右的外边距都设置为auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid hotpink;
}
.in {
/* 必须设置宽度 */
width: 10px;
height: 10px;
background-color: red;
/* margin左右设置为自动 */
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
<div class="in"></div>
</div>
</body>
</html>
三种写法:
.container {
width:960px;
/* 写法一(推荐) */
margin-left: auto;
margin-right: auto;
/* 写法二 */
margin: auto;
/* 写法三 */
margin: 0 auto;
}
2. 清楚元素默认的内外边距
.
为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除。
.
语法:
不推荐使用* 一般都是哪个有默认的内外边距就只去掉那个标签
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid hotpink;
}
.in {
background-color: red;
/* 清楚p标签自带的外边距和内边距 */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<p class="in">xxxxxx</p>
</div>
</body>
</html>
3. 相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
解决方案:相邻的盒子尽量给只给一个盒子添加margin值。
4. 嵌套块元素垂直外边距的合并
出现问题:
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* 防止子元素调整外边距与父元素重叠 */
overflow: hidden;
}
.in {
width: 50px;
height: 50px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<div class="in"></div>
</div>
</body>
</html>