超全的css新手学习笔记
1.CSS三大特性
继承性、层叠性、优先级
继承性：子元素可以继承父元素的样式。
什么样的属性才可以继承：
color，以text-,font-,line-开头的属性都是可以继承的
这些关于文字样式的，都能继承；而所有关于盒子、定位、布局的属性都不能继承。
具体应用：在写页面之前我们会通过给body设置一个字体，来将页面上所有的标签都能够继承这个属性。
特殊性：
- a标签的颜色不能继承，如果一定要修改a标签的颜色直接作用在a标签上面。
- h标签的大小不能继承，如果一定要修改h标签的大小直接作用在h标签上面。
层叠性：是浏览器处理冲突的一个特性。
- 如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠掉。
- 如果多个不同的属性通过两个选择器设置到一个元素上面，那么不会发生层叠。
优先级
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
变数：!important
虽然important是一个变数，但是不能作用在继承上。!important属性无法继承。
关于important：
正确的：
| 1 font-size:60px !important; |
错误的：
| 1 font-size:60px; !important; → 不能把!important写在外面 2 font-size:60px important; → 不能忘记感叹号 |
!important需要强调3点：
1） !important提升的是一个属性，而不是一个选择器
| 1 p{ 2 color:red !important; → 只写了这一个!important，所以就字体颜色属性提升权重 3 font-size: 100px ; → 这条属性没有写!important，所以没有提升权重 4 } 5 #para1{ 6 color:blue; 7 font-size: 50px; 8 } |
所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;
2） !important无法提升继承的权重，该是0还是0
比如HTML结构：
| 1 2 哈哈哈哈哈哈哈哈 3 |
有CSS样式：
| 1 div{ 2 color:red !important; 3 } 4 p{ 5 color:blue; 6 } |
由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
3）!important不影响就近原则
如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
! important做站的时候，不允许使用。因为会让css写的很乱。
权重：
- 行内样式：1000
- id：100
- class：10
- 标签：1
选择器的一个工作原理：
选择器在查找元素的时候不是从左往右找，而是从右往左找！
例一：
#father p.c2{
color:black;
}/*找到一个p标签标签的类名叫c2,判断这个标签是否有一个父元素叫father*/
例二：
例三：
例四：同一个标签携带多个类名有冲突
总结：在开始算权重之前，一定要看看是不是真的选中文字所在的最内层标签，如果不是那么最内层标签权重为0！如果大家都为0，就近原则！
2.属性—文本
Ø text-indent:2em; 设置首行缩进。
Ø text-align: 设置文本的位置
center:设置内容在容器的水平方向上居中。
left:设置内容在窗口的水平方向上靠左
right:设置内容在容器的水平方向上靠右
Ø text-decoration: 设置文本的装饰
none:没有任何装饰
underline:下划线
Ø margin: 0 auto; 设置容器自身水平居中。
Ø 加粗、倾斜、下划线
| 1 font-weight:bold; 2 font-style:italic; 3 text-decoration:underline; |
3.属性—背景
Ø background-color: 设置背景颜色
Ø background-image: 设置背景图片
background-image:url(图片的路径);
默认情况下图片如果比容器要小，它会平铺满盒子。并且padding区域有背景图
Ø background-repeat: 设置背景是否平铺：
no-repeat:不平铺
repeat-x：在水平方向上平铺
repeat-y:在垂直方向上平铺
repeat:平铺
Ø background-position: 设置背景图片的位置
Ø background-attachment:fixed; 设置背景否固定
fixed：背景会被固定住，即不会被滚动条滚走
Ø background-postion: x y;
注意：x,y可以是具体的数值，也可以是一些英文单词。
x轴（水平方向）: left 左 center 中 right 右
y轴（垂直方向）: top 上 center 中 bottom下
定位属性可以是负数：
þ 背景的连写方式：
background: background-color background-image background-repeatbackground-position;
比如：background:blue url(images/wuyifan.jpg) no-repeat 100px 100px;
4.元素与元素之间的嵌套
1.行内元素
代表标签：a,span,b,u,i,s,strong,em,ins,del
特点：
² 一行里面可以显示多个
² 无法设置宽高
² 大小由内容来决定
缺点：
² 不能设置宽高
² 属性：display: inline
2.块级元素
代表标签：p,h1-h6,div,ul,li,ol,li,dl,dt,dd
特点：
² 独占一行
² 可以设置宽高
² 默认宽度一整行
缺点：
² 独占一行。
² 属性： display:block
3.行内块级元素
代表标签：img,input
特点：
² 可以设置宽高
² 一行内可显示多个
² 属性：display:inline-block
R 元素之间显示方式切换：修改display属性！
比如：想设置块级元素在同一行显示，可以设置display: inline。
² 行内块元素与行内块元素之间有间隙，为了让他们之间紧挨着，可是给他们都添加浮动：float：left
4.元素之间的嵌套
标签之间是不能够随意嵌套的。
如果一定要嵌套，要满足下面几条：
- 行内元素只能包含行内元素
- 块级元素可以包含所有的行内元素和部分块级元素。
- p标签，h标签都不能包含块级元素
5.伪类
1.锚伪类：
Ø a:link 给a标签设置没有被访问过的样式
Ø a:visited 给a标签设置被访问过的样式
Ø a:hover 给a标签设置鼠标悬停时的样式
Ø a:active 给a标签设置被点击的样式
代码：
a: link {
color: red;
font-size: 30px;
}
注意：
- 在使用的时候一定遵守这样的顺序：a:link,a:visited,a:hover,a:active，否则会失效！
- 记忆方法：爱恨原则：love-hate
- 有些锚伪类除了可以作用在a标签上还可以作用来其它标签上：
:link 只能用于a标签
:visited只能用于a标签
:hover 其它标签也可以使用这个伪类
:active 其它标签也可以使用这个伪类
超链接的美化
a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。
a标签中，描述盒子；伪类中描述文字的样式、背景
| 1 .nav ul li a{ 2 display: block;这里必须设成块级！ 3 width: 120px; 4 height: 40px; 5 } 6 .nav ul li a:link ,.nav ul li a:visited{ 7 text-decoration: none; 8 background-color: yellowgreen; 9 color:white; 10 } 11 .nav ul li a:hover{ 12 background-color: purple; 13 font-weight: bold; 14 color:yellow; 15 } |
记住，所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。
最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。所以这些“老油条”们，就把a标签简化了：
a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。
| 1 .nav ul li a{ 2 display: block; 3 width: 120px; 4 height: 50px; 5 text-decoration: none; 6 background-color: purple; 7 color:white; 8 } 9 .nav ul li a:hover{ 10 background-color: orange; 11 } |
6.行高：line-height
定义：两行文本之间基线的距离就是做行高。
Ø 默认情况下一行文本的行高分为：上间距+文本的高度+下间距，并且上间距是等于下间距的。所以如果行高等于容器的高度那么元素在父容器中垂直居中！
Ø 行高是可以继承的。
Ø 行高的单位：
a.具体的像素值
b.使用em：em指的是当前标签设置的字体大小。如果当前标签字体大小为16px，那么2em=32px，如果当前标签字体大小为20px，那么3em=60px;
c.使用%百分号：与em一样，如果当前字体大小为18px，那么 line-height:200%=36px;
d.可以什么单位都不带：与em一样，也是当前标签的字体大小为基数。
注意：
在设置行高的时候，如果单位是em或%，将来行高会先计算出来结果再继承给子元素。
在设置行高的时候，如果单位是没有，将来行高会先继承给子元素再计算出行高。
Ø 浏览器的默认字体大小是多小？谷歌默认大小是16px.
font属性
font连写：font: font-style font-weight font-size/line-heightfont-family
为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：
| 1 font-family: "微软雅黑","宋体"; |
备选字体可以有无数个，用逗号隔开。
我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
| 1 font-family: "Times New Roman","微软雅黑","宋体"; |
所有的中文字体，都有英语别名，我们也要知道：
微软雅黑的英语别名：
| 1 font-family: "Microsoft YaHei"; |
宋体的英语别名：
| 2 font-family: "SimSun"; |
font属性能够将font-size、line-height、font-family合三为一：
| 2 font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; |
7.盒子模型
在写一个html页面的时候，其实就相当于在这个页面中叠盒子！
思想：万物皆盒子。
具体内容：
盒子的挡板---------border
盒子的泡沫---------padding
盒子中的物品--------内容：width、height
盒子与盒子之间的距离---------margin
1.border
１.1 border-color:边框的颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
１.2 border-width:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
１.3 border-style:边框的样式
border-top-style
border-right-style
border-bottom-style
border-left-style
取值：solid：实线 dashed：虚线 dotted：点线
１.4 边框的连写方法：border:border-width border-style border-color;
１.5 去掉单元格之间的间隙border-collapse: collapse;
2.padding
作用：设置盒子的内容与边框之间的距离。
取值：
padding: 40px;给上右下左所有的内边距都设置了40像素的距离
padding: 40px 80px;给上下内边距设置了40像素，下左右边距设置了80像素
padding: 40px 60px 80px;给上边距设置了40像素，左右设置60像素，下设置80像素
padding: 40px 60px 80px 100px;以顺时针方向进行设置，依次为上右下左
padding-top padding-right padding-bottom padding-lef
注意：
小属性层叠大属性，不要把小属性写在大属性上面，会被大属性层叠
| 1 padding: 20px; 2 padding-left: 30px; |
这种写法是错误的
| 3 padding-left: 30px; 4 padding: 20px; |
padding（盒子中的填充物）会改变盒子的大小（跟日常生活中有区别），特殊情况下padding不会改变盒子的大小：
当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left和padding-right不会改变小盒子的大小。
小盒子的宽度会继承自大盒子，但是小盒子的高度不会继承自大盒子！
3.margin
作用：设置盒子与盒子之间的距离。
取值：
margin: 10px;给上右下左所有的外边距都设置了10像素的距离。
margin: 10px 20px;给上下外边距设置了10像素，左右外边距设置了20像素
margin: 10 px 20px 40px;上10px，左右20px，下40
margin:10px 20px 40px 80px;上10，右20，下40，左80
maring-top margin-right margin-bottom margin-left
þ 注意：很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.
例如：
1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
4)ul默认带有上下的margin以及左边的padding
......
清除的方法：
* {
margin: 0;
padding: 0;
}
注：width和height指的是内容的宽和高，background指的是内容的填充padding的颜色！
& margin两种特殊现象
外边距的合并现象：
如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。
margin塌陷现象：
如果一个大盒子中包含一个小盒子，给小盒子设置margin-top，大盒子会一起向下平移。
解决方案：
给大盒子加一个边框
给大盒子设置一个overflow属性 overflow:hidden
浮动也可以
从上一个案例中，可以总结：
margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。所以，我们要善于使用父亲的padding，而不是儿子的margin。
& margin的使用补充
Ø margin: 0 auto; 让容器水平居中。
Ø margin-right: auto; 如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right
Ø margin设置为负数：
如果margin-left设置为负数，那么将盒子会向左移动。
如果margin-right设置为负数，那么盒子会向右移动。
& 关于使用margin：0 auto的注意事项
1）使用margin:0 auto; 的盒子，必须有width，有明确的width
2）只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用：text-align:center;
关于text-align的补充
text-align:left; 没啥用，因为默认居左
text-align:right; 文本居右
8.浮动
作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）
浮动的性质：脱标、贴边、字围、收缩
浮动的特点：
Ø 浮动的元素会脱离标准流
Ø 浮动以后的元素会覆盖在标准流的元素之上。
Ø 浮动规则：浮动找浮动，不浮动找不浮动
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动
Ø 浮动显示的位置与原本不浮动之前的位置是对应的
Ø 浮动的重点：同一等级，浮动的元素只会影响下面的元素，不会影响上面的元素！
Ø 浮动的元素会改变显示方式：不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。显示方式与行内块级元素一样。
Ø 浮动以后的元素可以设置宽高。
Ø 兄弟关系的盒子，只要有一个加浮动，其余都要加浮动！
案例1：制作导航条
案例2：文字环绕图片
这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。这是一个很会写代码的狗，日子过得还算不错。
清除浮动
浮动对页面的影响：如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
& 额外标签法：
在浮动的盒子之下再放一个标签，对这个标签设置clear:both，来清除浮动对页面的影响。
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般不会使用这一种方式来清除浮动。这种清除浮动的方式会增加页面的标签。
& overflow属性：
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden
注意：一般也不会使用这种方式。overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏。
& 伪元素：
伪元素：在页面上不存在的元素，但可以通过css添加上去。每个元素都有自己的伪元素
ello worl
:after 在…之后
:before 在…之前
content:”” 添加内容
默认添加的伪元素是行内元素，所以前面的h和后面的ello，worl连在一起。后面的d由于设置了display:block，所以转行显示。
下面是利用伪元素来清楚浮动的方法：在页面的clearfix元素后面添加了一个空的块级元素（这个元素的高为0，行高也为0，并且这个元素清除了浮动）