1.盒子模型的组成。
1.就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器
2.盒子模型=元素(内容)+内边距+边框+外边距构成
3.盒子模型的总宽度=总宽度 = 左内边距 + 左边框 + 左外边距 + 宽度 +右外边距+右边框+右内边距
作用:网页的布局就是众多个盒子模型组在一起
2.边框(border)
1.边框:设置元素的边框;边框的三大要素:粗细(单位是px) 颜色 样式
1.1样式的种类
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线
dotted:边框为点线
<!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>
.A{
width: 100px;
height: 100px;
background-color: blanchedalmond;
/* 颜色 */
border-color: blue;
/* 粗细 */
border-width: 1px;
/* 样式:边框没有 */
border-style: none;
}
.B{background-color: blanchedalmond;
width: 100px;
height: 100px;
/* 颜色 */
border-color: blue;
/* 粗细 */
border-width: 1px;
/* 样式:边框为实线 */
border-style: solid;
}
.C{background-color: blanchedalmond;
width: 100px;
height: 100px;
/* 颜色 */
border-color: blue;
/* 粗细 */
border-width: 1px;
/* 样式:边框为虚线 */
border-style: dashed;
}
.D{background-color: blanchedalmond;
width: 100px;
height: 100px;
/* 颜色 */
border-color: blue;
/* 粗细 */
border-width: 1px;
/* 样式:边框为点线 */
border-style: dotted;
}
</style>
</head>
<body>
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</body>
</html>
2.单独对一条边或任意方向的边框进行调整
border-top:1px solid red
3.内边距(padding)
1.内边距是内容与边框的的距离。
2.单独的表示方向
- padding-top:表示上内边距
- padding-bottom:表示下内边距
- padding-left:表示左内边距
- padding-right:表示下内边距
3.数据的多少代表方向
- padding:20px(代表上下左右都是20px)
- padding:20px 30px(依次代表上下,左右)
- padding:20px 30px 20px(依次代表左右,上,下)
- padding:20px 30px 20px 30px(顺时针:上右下左)
4.注意事项
1.增添了内边距相当于增大了盒子的长度与宽度,要保证盒子大小样子的不变,可以自行调节内容的height和width。没有width和height就不会撑大。
4.外边距(margin)
1.外边距是盒子与盒子之间的的距离。
2.单独的表示方向
- margin-top:表示上内边距
- margin-bottom:表示下内边距
- margin-left:表示左内边距
- margin-right:表示下内边距
3.数据的多少代表方向
- margin:20px(代表上下左右都是20px)
- margin:20px 30px(依次代表上下,左右)
- margin:20px 30px 20px(依次代表左右,上,下)
- margin:20px 30px 20px 30px(顺时针:上右下左)
4.注意事项
4.1让块级元素自适应居中(仅限于水平居中),盒子内的居中可以使用text-align
前提:盒子得有宽度
text—align:center;
margin:auto;
4.2垂直相邻两个块元素的之间的合并
4.2.1 当两个块元素,一个块元素的margin-bottom:20px,与他垂直相邻的块元素的顶部是margin-top:10px,那么这是他们会合并在一起并被大的合并。
4.2.2 嵌套块元素垂直外边距的塌陷:当一个div包含宁一个div时,正正取大,正负取和,负负取小,符合这个原则
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden。
- 还可以其他定位方式:定位 浮动
5.清除内外边距
用一个通用选择器,将所有的margin与padding清为0px,避免原有的造成影响
*{ margin:0px;
padding:0px;}
6,让行内文字垂直居中
让行内文字垂直上居中,通过使文字的行高与盒子的高度相等,这样就可以是文字垂直居中