盒子模型
网页布局本质就是利用css摆不同的盒子
准备好相关的网页元素，基本上是盒子，利用css设置好盒子样式，摆到相应位置，往盒子装内容
1. 组成
boder边框
| 属性 | 作用 | 备注 |
|---|---|---|
| border-width | 边框粗细 | 单位 px |
| border-style | 边框样式 | soild 实线边框 dashed 虚线边框 dotted 点线边框 |
| border-color | 边框颜色 |
复合写法：border: 1px solid red; 没有顺序
边框分开写法
border-top: 1px solid red; 只设定上边框
border-bottom: 1px solid red; 只设定下边框
border-left: 1px solid red; 只设定左边框
border-right: 1px solid red; 只设定右边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box_style {
width: 200px;
height: 200px;
border-top: 3px solid red;
border-right: 3px solid green;
border-bottom: 3px solid yellow;
border-left: 3px solid orange;
}
</style>
</head>
<body>
<div class="image_box">
<div style="display:flex;">
<div class="box_style" >边框border</div>
</div>
</div>
</body>
</html>
其中这个属性 挺好用的
border-collapse:collapse; 表示相邻边框合并在一起
只有经历过这个痛苦的人才懂
注意：边框影响盒子实际大小测量盒子时要减去边框宽度
padding内边距
| 属性 | 作用 |
|---|---|
| padding-top | 上内边距 |
| padding-left | 左内边距 |
| padding-bottom | 下内边距 |
| padding-right | 右内边距 |
复合格式：
| 属性 | 作用 |
|---|---|
padding:5px; | 代表上下左右都有5像素内边距 |
padding:5px 10px; | 代表上下有5像素，左右有10像素 |
padding:5px 10px 20px; | 代表上内边距5像素，左右内边距10像素 下内边距20像素 |
padding:5px 10px 20px 30px; | 代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素 顺时针 |
会影响盒子大小
盒子已经有了高度和宽度，再指定内边距，会撑大盒子，内边距padding影响盒子实际大小
margin外边距
| 属性 | 作用 |
|---|---|
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-right | 右外边距 |
复合格式：
| 属性 | 作用 |
|---|---|
margin:5px; | 代表上下左右都有5像素外边距 |
margin:5px 10px; | 代表上下有5像素，左右有10像素 |
margin:5px 10px 20px; | 代表上外边距5像素，左右外边距10像素 下内边距20像素 |
margin:5px 10px 20px 30px; | 代表上外边距5像素，右外边距10像素，下外边距20像素，左外边距30像素 顺时针 |
块级盒子水平居中
1. 盒子必须指定宽度
2. 盒子左右的外边距都设置为auto
3. 行内元素或者行内块元素水平居中给父元素添加text-align:center即可
外边距合并
相邻块元素垂直外边距的合并
上下两个块元素都设置了外边距，取两个值中的较大者
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大的外边距值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
解决方案：
1：可以为父元素定义上边框。
2：可以为父元素定义内边距。
3：可以为父元素添加overflow:hidden。（常用，前两者也会把盒子撑大）
浮动、固定、绝对定位的盒子不会出现塌陷问题
清除内外边距
不同浏览器带有不同的默认内外边距，清除网页元素的内外边距
* {
margin: 0; /* 清除外边距 */
padding: 0; /* 清除内边距 */
}
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距
但是转化为块级或者行内块元素就行
2. 圆角边框
border-radius:lenght;
参数值可以是数值也可以是百分比形式
矩形：设置为高度的一半
简写：
左上角 border-top-left-radius
右上角 border-top-right-radius
右下角 border-bottom-right-radius
左下角 border-bottom-left-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.border_style {
width: 100px;
height: 100px;
margin-top: 10px;
border: 1px solid #ccc;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:0%;
border-bottom-left-radius:0%;
}
</style>
</head>
<body>
<div class="border_style">
</div>
</body>
</html>
3. 盒子阴影
box-shadow
| 属性 | 作用 |
|---|---|
| h-shadow | 必需，水平阴影 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离（虚实） |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影（outset）改为内部阴影 |
1. 默认的是外部阴影（outset），但是不可以写这个单词，否则导致阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列
简写
box-shadow: h-shadow v-shadow blur spread color inset;
4. 文字阴影
text-shadow
| 属性 | 作用 |
|---|---|
| h-shadow | 必需，水平阴影 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离（虚实） |
| color | 可选。阴影的颜色 |
简写：
text-shadow: h-shadow v-shadow blur color;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.dataOne {
text-shadow:2px 2px 8px #FF0000;
}
.dataTwo{
color:white;
text-shadow:2px 2px 4px #000000;
}
.dataThree {
text-shadow:0 0 3px #FF0000;
}
</style>
</head>
<body>
<div class="border_style">
<p class="dataOne">文字阴影模糊效果</p>
<p class="dataTwo">白色文字上的文字阴影</p>
<p class="dataThree">氖辉光文字阴影</p>
</div>
</body>
</html>
