盒子模型：
盒子模型
盒子模型介绍
盒子的概念
页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
内容区域的宽度和高度
内容的宽度和高度
作用：利用width 和height 属性默认设置是盒子内容区域的大小
属性：width /height
常见取值：数字+px
边框（boder)
边框（border）-单个属性
作用：给设置边框粗细、边框样式、边框颜色效果。
单个属性：
作用 属性名 属性值
边框粗细 border-width 数字+px
边框样式 border-style 实线solid、虚线dashed、点线dotted
边框颜色 border-color 颜色取值
边框（border）-连写形式
属性名：border
属性值：单个取值的连写，取值之间以空格隔开，如：border : 10px solid red;(粗细、样式、颜色)
快捷键：bd + tab
边框（border）-单方向设置
场景：只给盒子的某个方向单独设置边框
属性名：border -方位名词
属性值：连写的取值
盒子实际大小初级计算公式
需求：盒子尺寸400*400，背景绿色，边框10px 实线黑色，如何完成？
注意点：①设置width和height是内容的宽高 ②设置border会撑大盒子
盒子实际大小初级计算公式：
盒子宽度= 左边框+ 内容宽度+ 右边框
盒子高度= 上边框+ 内容高度+ 下边框
解决：当盒子被border撑大后，如何满足需求？
解决：计算多余大小，手动在内容中减去（手动内减）
内边距(padding)
内边距（padding）-取值
作用：设置边框与内容区域之间的距离
属性名：padding
常见取值：
取值 示例 含义
一个值 padding: 10px; 上右下左都设置为10px
两个值 padding: 10px 20px; 上下设置为10px、左右设置为20px
三个值 padding: 10px 20px 30px; 上设置为10px、左右设置为20px、下设置为30px
四个值 padding: 10px 20px 30px 40px; 上设置为10px、右设置为20px、下设置为30px、左设置为40px
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
内边距（padding）-单方向设置
场景：只给盒子的某个方向单独设置内边距
属性名：padding -方位名词
属性值：数字+ px
盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
注意点：
①设置width和height是内容的宽高
②设置border会撑大盒子
③设置padding会撑大盒子
盒子实际大小终极计算公式：
盒子宽度= 左边框+ 左padding + 内容宽度+ 右padding + 右边框
盒子高度= 上边框+ 上padding + 内容宽度+ 下padding + 下边框
解决：当盒子被border和padding撑大后，如何满足需求？
自己计算多余大小，手动在内容中减去（手动内减）
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
外边距（margin）
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
取值 示例 含义
一个值 margin: 10px; 上右下左都设置为10px
两个值 margin: 10px 20px; 上下设置为10px、左右设置为20px
三个值 margin: 10px 20px 30px; 上设置为10px、左右设置为20px、下设置为30px
四个值 margin: 10px 20px 30px 40px; 上设置为10px、右设置为20px、下设置为30px、左设置为40px
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！（同border的属性）
5.2 外边距（margin）-单方向设置
场景：只给盒子的某个方向单独设置外边距
属性名：margin -方位名词
属性值：数字+ px
5.3 margin单方向设置的应用
应用：
方向 属性 效果
水平方向 margin-left 让盒子向右移
水平方向 margin-right 让盒子向左移
垂直方向 margin-top 让盒子向下移
垂直方向 margin-bottom 让盒子向上移
浮动的基础用法：
让多个块级盒子（div）水平排列成一行
<!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>行内块中间有缝隙</title>
<style>
div {
width: 150px;
height: 200px;
background-color: #d87093;
display: inline-block;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动演示</title>
<style>
.left,.right {
/* 添加浮动，元素统一向左浮动，向右同理 float:right*/
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
/* 可以利用层叠性将右盒子向右浮动，覆盖掉上面统一声明的向左浮动 */
.right {
/* float: right; */
background-color: pink;
}
</style>
</head>
<body>
<div class="left">
左盒子
</div>
<div class="right">
右盒子
</div>
</body>
</html>
定位：主要为这三种
固定定位（滑动页面的时候盒子位置不变）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
.fixed {
width: 200px;
height: 200px;
background-color: aqua;
/* 使用固定定位 */
position: fixed;
top: 50px;
left: 300px;
}
</style>
</head>
<body>
<div class="fixed">
</div>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
<h1>我是h的内容</h1>
</body>
</html>
相对定位：
自己位置的微调。相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
在head中选中对象
position：relative
再使用四条指令进行调整
绝对定位：
- 在盒子定位中通过给元素设置 position:absolute即可实现绝对定位
- 精确控制位置：使用 left、right、top、bottom 四个属性调整位置
-
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了
-
两个或多个绝对定位的元素，“标签”靠后写的标签，它的层的叠放顺序靠上
