CSS知识点回顾
声明：CSS知识点越来越多，越来越杂，为巩固所学，形成知识点，现按老师所讲来进行知识点回顾，此过程不单单只是回忆还有知识点的总结和提炼，为方便以后使用。
1.CSS的的三种写法
1.1内嵌式写法
例：
<head><style></style></head>
内嵌式写法的特点是：
1.书写比较方便
2.影响的只是当前的页面（比较小）
3.没有实现HTML和CSS的完全分离（因此不便于后期的维护）
1.2行内样式写法
如：
<p style=”color:red;font-size:13px”></p>
注意不同的属性之间要用;隔开
行内样式的书写特点是：
1.书写比较简单 随手就来；
2.影响的仅是当前的标签（范围极小）；
3.没有实现HTML和CSS的完全分离，因此也不便于网页的后期维护
1.3外联式写法（以后项目最常用）
写法如下：
首先新建一个独立的CSS的文件
然后在原HTML页面里的<head></head>里新建一个<link rel=”stylesheet” type=”text/css” href=””>这里涉及到相对路径的问题
外联式写法的特点是：
1.css在独立的一个文件里写明
2.影响的范围是整个站点
3.实现了HTML和css的完全分离，便于网页的维护
2.HTML的标签元素分类
分类的依据是根据标签的显示效果不同来界定的
2.1块级元素
主要代表是<div></div> <p></p> <h></h><li></li> <ul></ul>(以此类推其他列表也是如此）
需注意的是
1.在实际练习的过程中 <div><p>中的padding值和margin值都是0；而<ul>有一个默认的padding-left:40px;
2.在对块级元素设置样式的时候要注意首先设定它的 height不然，效果和bg显示不出来
块级元素的特点是：
1.独占一行
2.可以设定宽度和高度
3.在子盒子未设定宽度的时候，子盒子与父盒子的宽度一样
2.2行内元素
主要代表：<span></span> ;<label></label>;<font></font>;<a href=””></a>
行内元素的特点是：
1.行内元素可以在在一行内显示；
2.通常不能独占一行；
3.不能设置宽度和高度
2.3行内块级元素
主要代表是：<input type=””> <img>
行内块级元素的特点是：
1.所有元素可以在一行内显示
2.可以设定宽度和高度
3不同元素之间的转换
块级元素：block；
行内块级元素：inline-block;
行内元素：inline;
不同元素之间可以通过CSS的display属性来实现。
如将元素转化成块级元素 display:block;
4.CSS的三大特性
4.1层叠性
当调用样式时发生冲突时，这时应调用在样式表里的最后面一个的
如<p>一段文字</p>
p{color:red;}
p{color:yellow;}
这时候文字应当调用最后一个声明的，因此此处字体的颜色应该是yellow;
4.2继承性（主要发生在子盒子未设定样式的情况下）
<div><p></p></div>
如果这时候只给div设定了样式，而p没有这时候p继承div所有关于文字的属性，此外还可以继承width与line-height的属性；
特别注意的是：
1.<a>超链接不能继承文字颜色的属性
2.标题标签不能继承font-size 的属性
4.3优先级
关于优先级的需要了解的是：
权重由大到小
标签选择器<类选择器<id选择器<行内样式写法<! important
1.继承的权重为0；
2.权重会叠加 (官大一级压死人，描述地越详细，权重越高）；
5.伪类（针对a标签）
a:link{ } 在未访问下的样式；
a:visited{ } 访问过后的样式；
a:hover{ } 光标在链接上的样式；
a:active{ } 链接被激活后的样式；
：focus 设置对象在成为输入焦点的onfocus时的样式表属性，也就是在<input>输入框中正在输入时的样式
在样式表中进行设定时，要按照 link visited hover active 的顺序声明
6.background的各种属性
Background-color background-image :url（“ ”） background-repeat background-position background-attachment
background的连写不要求按照顺序
这里特别注意的是关于background-position 的 如果只有一个数字的 第一个代表水平方向 纵坐标将默认为50 如果有第二个数字代表垂直方向
7.行高
7.1认识行高
一般浏览器默认的行高是18px
行高=字体高度+上间距+下间距
7.2 行高对间距的影响
一般行高的高度单位有
单位 单位对行高的影响
px 设置多少就是多少
em 行高=字体大小x行高值
% 行高=字体大小x行高值
无 行高=字体大小x行高值
给父盒子设定行高
单位 父盒子对子盒子的影响
px 子盒子的行高等于父盒子的行高
em 子盒子的行高=父x行高值
% 子盒子的行高=父x行高值
无 子盒子的行高=子（默认）x行高值
8.关于盒子的认识
9.border的属性及连写
样式 属性
Border border-color border-size border-style
Border的连写与background的连写一样没有顺序的要求
注意的一点是 border:0 none;是去掉边框效果
补充几个属性
1.Text-decoration 决定文字链接是否有下画线
2.两个值 分别为 none;underline;
Outline-style 控制表单控件的轮廓线
其值与 border的值是一样的，去掉轮廓效果的值为none;
10.padding的属性
Padding只有一个大小的属性
但是要记住当去不同个的值得时候
padding 代表含义
1个 上右下左都是都为一个值
2个 1st上下 2nd右左
3个 1st上 2nd右左3rd 下
4个 分别依次代表上右下左
关于padding与border的计算
要理解的是padding 作为一个盒子的属性和宽高差不过 ，因此会影响盒子的大小，如果要保持原来的盒子大小不变，当在水平或者垂直的方向上移动了多少的时候，这时候盒子的大小会增大，因此会在水平或者垂直的方向上增加，因此移多少，original盒子减多少。
盒子真正的大小（宽度）=original盒子宽度+左右边框+左右padding.
补充知识点
子盒子继承父盒子的宽度，给子盒子设置padding值的时候一般不会影响子盒子的大小（padding值不超过父盒子的宽度）
11.Margin
Margin的两个特点：
1.垂直合并：以外边距大的为准；
2.包含合并问题：
父盒子包含子盒子的时候给子盒子设置margin-top的时候 这回收会出现父盒子和子盒子一起往下移动。
解决办法：1.给父盒子设置一个边框
2给父盒子设置一个overflow的属性值为hidden
