盒子模型和标签的标准流
页面中的每一个标签，都可以看做事一个盒子
浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，所以称之为盒子
盒子模型的组成
CSS中的盒子分别由：内容区域(
content)、内边距区域(padding)、边框区域(border)、外边距(margin)构成
内容区域宽度和高度
/*
width和height属性值，如果不设置的话，默认是盒子的宽度和高度
取值：数字+px
*/border(边框)的使用方法
/*
属性名：border
属性值：单个取值的连携，取值之间以空格隔开
如：border:10px solid red:
快捷键：bd+tab
*/border单方向设置
/*
场景：只给盒子的某个方向单独设置边框
属性名：border-方位名词(left/right/top/botton)
*/边框属性(几乎用不到)
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width |
数字+px |
| 边框样式 | border-style |
实线solid、虚线dashed、点线dotted |
| 边框颜色 | border-color |
内边距(padding)
顺时针方向去记：上、下、左、右
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 50px;
/*
padding 属性可以当作复合属性使用，表示单独设置某个方向的内边距
padding 最多取4个值
四值：上、右、下、左(顺时针)
pingding: 10px 20px 30px 40px;
三值：上、左右、下
padding: 10px 40px 80px;
两值：上下 左右
padding:10px 80px;
*/
}
</style>盒子内减(内减模式)
border 和 padding都会撑大盒子的
/*
手动内减：自己计算多余大小，手动在内容中减去
自动内减：
给盒子设置属性 box-sizing: border-box
浏览器自动化计算多余代下，自动在内容中减去
*/外边距
margin和padding的属性值设置方法是一样的，只不过margin不会撑大盒子
清除标签默认样式
即：清除内边距和外边距
/*
场景：浏览器会默认给部分标签设置默认的margin和padding，一般项目开始前会先清除这些标签自带的margin和padding，后续自己设置
比如：
body标签默认由margin: 8px
p标签默认有上下的margin
ul标签默认由上下的margin和padding-left
*/ <style>
* {
margin: 0;
padding: 0;
}
</style>版心居中
版心居中：一般都是指水平居中，即设置外边距0 auto
版心：即网页的有效内容
外边距合并现象
这里所说的合并通常：是指两个块标签做垂直布局的时候，即两个块级标签同时设置上边距和下边距
上下的margin会合并，此时会取两者的最大值，如上面的块级标签设置了
margin-bottom:60px、下面的标签设置了margin-top:40px则此时两者的边边距会取最大值60px
<!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>Document</title>
<style>
.big_box {
/*
现象：
垂直布局的块级元素，上下的margin会合并
导致最终两者的距离为margin的最大值，即取这个案例的最大值60px
解决方法：
垂直居中的两个块级标签，只给其中一个盒子设置margin即可
*/
margin-bottom: 60px;
width: 300px;
height: 300px;
background-color: pink;
}
.small_box {
margin-top: 50px;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="big_box"></div>
<div class="small_box"></div>
</body>
</html>外边距折叠现象(塌陷现象)
塌陷现象：父子级嵌套标签，子级标签想往下挪，导致把父标签的位置挪下来了
给父元素设置overflow: hidden
父子级标签，都是块级的标签；此时子级加margin会影响父级的位置
<!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>Document</title>
<style>
.big_box {
width: 300px;
height: 300px;
background-color: pink;
}
.small_box {
width: 100px;
height: 100px;
background-color: aqua;
/*此时给子标签设置*/
margin-top: 50px;
}
</style>
</head>
<body>
<div class="big_box">
<div class="small_box"></div>
</div>
</body>
</html>外边折叠解决放法
/*
1.给父元素设置overflow: hidden
2.转成行内块元素
3.设置浮动
*/行内元素垂直的内、外边距问题
即：如果想要通过
margin和padding改变行内标签的垂直位置，无法生效，只会改变水平方向的margin或者padding
<body>
<!--行内标签的margin-top和margin-bottom不生效-->
<!-- 行内标签的padding-top和padding-bottom不生效 -->
<span>span标签</span>
</body>标签的标准流
即：标签的默认排列方式
/*
1.块级标签：从上往下，垂直布局，独占一行
2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
*/
浙公网安备 33010602011771号