外边距典型应用：
可以让块级盒子水平居中，盒子必须指定宽度（width），盒子左右的外边距必须设置为auto。
margin-left:auto;
margin-right:auto;
margin:auto;
margin:0 auto;
<div class="header"></div>
如果想让行内块、行内元素水平居中，给其父元素添加text-align：center；即可。
外边距合并：使用margin定义元素的垂直外边距，会出现外边距的合并/塌陷
1:transprant(透明边框)为父元素定义上边框
2：为父元素定义上内边距
3：为父元素添加overflow：hidden;
清除网页元素的内外边距：
谷歌有个默认8px的外边距的距离，
ul有默认40px的内边距
*{(*是通配符选择器，选择页面中所有元素)
padding:0;
margin:0;
}行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边边距，但是转换为块级和行内元素就可以了。
盒子阴影：
用box-shaadow属性添加阴影
box-shadow：h-shadow v-shadow blur spread color inset;
h-shadow:必须,水品阴影的位置，允许负值
v-shadow:必须，垂直阴影的位置，允许负值
blur：可选，模糊距离（数值越大越模糊）
spread：可选，阴影的尺寸
color：可选，阴影的颜色
insert：可选，将外部阴影（outset）改为内部阴影。
border-shadow：10px 10px 10px 10px black;rgba(0,0,0,3)(半透明)
原先盒子没有阴影，当鼠标经过盒子添加阴影效果：
div:hover{
border-shadow：10px 10px 10px 10px black;
}阴影不影响盒子大小,不占用空间
text-shadow设置文字阴影，应用于文本
text-shadow:h-shadow v-shadow blur color;\h-shadow:水平阴影的位置，允许负值
v-shadow:垂直阴影，允许负值
blur:模糊的距离
color
圆角边框，边框变圆角
border-radius：length(10px/50%);数值越大，圆角越明显
50%就是宽度和高度的一半
CSS盒子模型：
4个组成部分
利用边框的复合型写法添加边框
计算盒子的实际大小
利用盒子模型布局模块案例
给盒子设置圆角边框
给盒子添加阴影
给文字添加阴影
网页布局三大核心：盒子模型，浮动，定位
盒子包括：边框（border），外边框（margin），内边距（padding），实际内容(content)
边框：border（粗细，样式，颜色）
border-width:5px;
border-style:solid(实线（默认黑色）)|dashed（虚线）|dotted（点线）;
border-color：pink;边框的复合型写法：
border：1px solid red;（没有先后顺序）
border-top:1px solid red;(上边框)
border-bottom：1px solid red;(下边框)
border-left：1px solid red；
border-right：1px dashed blue;
border-collapse：collapse；表示相邻边框合并在一起
边框会影响盒子的大小
内边距：padding，边框与内容之间的距离。
padding-left
padding-right
padding-top
padding-bottom
padding简写可以有一到四个属性值
padding：5px；（上下左右）
padding：5px 10px;（上下，左右）
padding:5px 10px 20px;（上，左右，下）
padding:5px 10px 20px 30px;（上 右 下 左）
padding也会影响盒子的大小（如果盒子有了高度和宽度，再加padding会撑大盒子）
（内容和边框有了距离）
如果盒子本生没有指定width/height属性那么padding不会撑开盒子大小
margin外边距（盒子与盒子之间的距离）
margin-left:
margin-right:
margin-top:
margin-bottom:
传统页面布局的三种方式
本质：用css来摆放盒子
布局方式：
普通流（标准流/文档流 ，标签按照规定好的默认方式排列 ）--最基本的布局方式
块级元素会独占一行，从上向下排列
浮动
浮动的作用：多个块级元素一行排列显示
如何让多个块级盒子（div）水平排列成一行
：行内块元素（之间会默认有空隙）
：
如何让两个盒子左对齐，右对齐
float;left;
float:right;
float属性用于创建浮动框，将其移动到另一边或另一个浮动框的边缘
选择器｛float：属性值;｝
float：none;不浮动
float：right;向左浮动
float:right;向右浮动
浮动特性：
1：浮动元素脱离标准流：脱标
浮动的盒子不再保留原来的位置，会被标准的盒子占
如果多个盒子都设置了浮动，则会按照属性值一行内显示并且顶端对齐排列
2：浮动元素会一行显示并且元素顶部对齐
3：浮动的元素具有行内块元素的属性
