1、外边距margin
概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性
1.1、单个方向定义
margin-bottom 设置下内边距。
margin-left 设置左内边距。
margin-right 设置右内边距。
margin-top 设置上内边距。
.box{
margin-left:10px;
margin-right:20px;
margin-top:30px;
margin-bottom:40px;
}1.2、简写
语法：空格隔开
取值：1-4个规则与padding值 一致
取值
px,
auto浏览器自动计算
允许使用负值
.box{
margin:10px 20px 30px 40px;
}1.3、外边距应用
外边距实现已知宽度的块级盒子居中
.box{
width:200px;
/*
margin-left:auto;
margin-right:auto;
*/
margin:0 auto;
}1.4、外边距问题
典理情形一
结构关系：嵌套块元素的垂直外边距塌陷
问题描述 ：当父元素没有padding,border时子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：父子元素公用一个外边距
.parent{ width:100px; background-color:red; margin-top:200px; } .child{ width:100px; height:100px; background-color:green; margin-top:100px; margin-bottom:100px; }
<div class="parent">
<div class="child">
</div>
</div>解决方法
给父元素设置边框或内边距（慎用）
父元素overflow:hidden
典型情形二
结构 关系：相邻元素垂直外边距合并
问题描述 ：当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：两个外边距合并成一个
.box1{ width:100px; height:100px; background-color:red; margin-bottom:100px; } .box2{ width:100px; height:100px; background-color:green; margin-top:100px; }<div class="box1"></div> <div class="box2"></div>
解决方法
方法1.尽量只定义其中一个的margin值
方法2.给其中一个盒子加父元素overflow:hidden(auto\scroll也可),改变渲染规则
其他情况同上
2、overflow详解
概述：溢出元素内容区的内容会如何处理
2.1、取值
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
.box{
width:200px;
height:200px;
border:1px solid red;
overflow:auto;
}<div class="box"> 【环球网军事报道 特约记者 杨铁虎】4月22日-24日，第九届世界雷达博览会在江苏南京国际博览中心隆重举行。作为承办单位，中国电子科技集团公司第十四研究所（简称中国电科14所）以“科技改变生活、铸造大国重器”为主题精彩亮相，通过实物、模型、图像以及视频等多种形式展示了多款先进的军用雷达，引发国内外广泛关注。 </div>
2.2、应用
产品描述的溢出隐藏
模块溢出显示滚动条
补充：盒子模型值计算
包含了 边框 内间距 外间距 内容
盒子宽度 = width + 左右border + 左右padding + 左右的margin
盒子的高度=height + 上下的border + 上下的padding + 上下的margin
margin 在页面中是透明的 我们看到的 盒子的尺寸 不包含margin
3、CSS背景
CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。
3.1、background-color
background-color 属性，设置元素的背景颜色。
常用的值
color_name 规定颜色值为颜色名称的背景颜色（比如 red）
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
提示：背景应用于由内容和内边距、边框组成的区域
3.2、background -image
background-image 属性，为元素设置背景图像。
background-image:url(" 图片资源路径 ");
常用的值
url(‘URL’) 指向图像的路径。
none 默认值。不显示背景图像。
元素的背景默认绘制区域包括内边距和边框。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
我们也可以通过 background-repeat 属性可以改变背景图像的平铺方式。
3.3、background -repeat
background-repeat 属性，设置是否或如何重复背景图像。
常用的值
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
3.4、background -position
background-position 属性，设置背景图像（由 background-image 定义）的起始位置。 背景图像如果要重复，将从这一点开始。
语法：background-position: xpos ypos;
一般来说它有两个值：第一个值表示水平位置，第二个值表示垂直位置。如果仅规定 了一个值，另一个值将是 50%。
取值
关键字：top、bottom、left、right 和 center ; 指定图像放置于元素内边距区域的位置，一个对应水平方向，另一个对应垂直方向。 左上角为：left top;
长度值 指定图像相对于元素 内边距区左上角的偏移量。左上角是 0 0，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上
百分比 指定百分数值将同时应用于元素和图像，左上角是 0% 0%；右下角是 100% 100%。 如果设置为 50% 50%，图像的中心点将与元素的中心点对齐显示。
3.5、background简写
background是背景复合属性，在一个声明中设置所有背景属性。
语法：background:bg-color bg-image bg-repeat bg-position;
background: red url(“bgimage.jpg”) no-repeat left top;
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-position
如果某个属性不需要设置，可以省略。
4、CSS显示模式（元素的分类）
概述： 显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素
4.1、元素默认显示模式与元素特性总结
本身属性为display:block;的元素 称为块级元素
常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol
本身属性为display:inline;的元素称为行级元素
常见行级元素：span,strong,em,i,a,b
本身属性为display:inline-block的元素称为行级块元素
常见行内块元素：img、input(表单元素后续会讲到)
块级元素特性总结（记忆)
独成一行，可以设置宽高。
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。
在不设置高度的情况下，块级元素的高度是它本身内容的高度。
可以设置上下左右的内边距和外边距。
行内元素特性总结（记忆)
● 默认并排，不可以设置宽高，宽高取决于内容。
● 设置上下外边距无效
● 行内元素只能容纳文本或者其他内联元素
行内块元素特性总结（记忆)
● 默认并排，可以设置宽高。
● 可以设置上下左右的外边距和内边距。
● 如果不设置宽高，宽高取决于内容
4.2、元素类型转换（记忆)
特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。
display:inline;转换为行内元素。 【不常用】
display:block;转换为块状元素。 【常用】
display:inline-block;转换为行内块状元素 【比较常用】
4.3、CSS显示隐藏
display:
none：隐藏该元素并且该元素所占的空间也不存在了。
block; 显示元素
visibility:
hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。
visible 显示元素
display的隐藏 visibility 隐藏的区别
5、CSS图片
5.1、清除图片下间隙
原因：图片默认与文本的基线对齐
解决方法一：将图片显示为块
img{display:block;}解决方法二：改变图片的对齐方式，
img{vertical-align:不为baseline}5.2、vertical-align 属性详解
作用1：回顾表格处的应用
作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
常用的值：
baseline 默认。标签放置在父标签的基线上。
top 把标签的顶端与行中最高标签的顶端对齐。
middle 把此标签放置在父标签的中部。
bottom 把标签的顶端与行中最低的标签的顶端对齐。
典型应用
图片与图片垂直方向的对齐（行内块与行内块）
图片与文字垂直方向的对齐
5.3、图片居中
方法1：父元素{text-align:center}
方法2：img{display:block;margin:0 auto;}
6、CSS三大特性总结
6.1、继承性
概念：父元素向后代元素传递属性的机制
表现：后代元素会继承父元素的属性
总结常用可继承的属性
font-size,font-style,font-weight,font-family,font,text-align,text-indent,cursor,list-style等
font- text- color
但是： a标签无法继承父元素的 字体颜色 text-decoration: none, text-indent 标题标签是无法继承父元素的 字体大小的
强制继承
每个CSS属性都接受这些值inherit 表示强制开启了继承”。
作用
恰当地使用继承可以简化代码，降低CSS样式的复杂性
6.2、优先级
概述：浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。 样式不冲突，优先级没有意义。当同一个元素有多个冲突声明的时候，优先级才会有意义
行内样式与选择器的优先级
概述：匹配元素的每一种类型CSS都级指定了相应的权重，权重越高优先级越高
概述：选择器的权重表述为4个部分，比如０，０，０，０． 一个选择器的数值如下确定： (１)对于选择器中给定的各个ID属性值，加0,1，0,0 (２)对于选择器中给定的各个类属性值、属性选择或伪类，加０，０，１，０； (３)对于选择器中给定的各个元素和伪元素，加０，０，０，１ (４)结合符和通配选择器对特殊性没有贡献．其特殊性为0，0，0，0 (５)每个行内样式特殊性都是１，０，０，０
总结： 复合选择器的权值计算方式为，组成其所**有单一选择器的权重累加** 同级之前比较个数，不同级别不可跨越
继承样式的优先级
概述：每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
继承的属性有限小于 单独设置的样式优先级
* > 继承属性
例外规则important
概述：当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明
语法：.box{background-color:red;!important}
注意：一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
6.3、层叠性
概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠
表现
（1）开发者样式>浏览器默认样式 （2）行间 >id >类>元素名称>* >继承样式 （3）当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上,内部和外部样式遵循就近原则
总结
css的层叠性是通过继承 和 优先级实现
样式声明不冲突 （同时应用于元素）
样式声明冲突
同级选择器，css样式中最后定义的声明应用于元素（就近原则）
不同级选择器，由选择器优先级决定
思维导图：
