一、html中的容器级标签和文本级标签，
1.容器级标签可以嵌套其它所有的标签
常见的容器级标签:div h ul ol dl li dt dd
2.文本级标签:只能存放文本、表单和图片、超链接
常见的文本级标签span p buis strong em ins del
二、CSS中的块级元素和行内元素
块级标签:在html中 ```<div><p><h1><form><ul><ol><dl><table><li>``` 等就是块级标签
块级标签的三个特点:
1.一个块级标签元素独占一行
2.元素的高度 宽度 行高以及顶部和底部边距都可以设置
3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素宽度一致),除非设定宽度
行内元素:在html中```<a> <span> <br> <i> <em> <strong> <label>```等等
行内元素的三大特点:
1.和其他元素都在一行上
2.元素的宽度 高度 行高以及顶部和底部边距不可设置
3.元素的宽度就是它包含文字或图片的宽度,不可改变
行内块元素:html中```<img> <input>```标签就是这种标签
特点:
1.所有元素同在一行
2.可以设置宽高
元素之间的相互转换:
display:block 块元素
display:inline-block 行内块元素
display:inline 行内元素
三、 CSS的三大特点:
1.层叠性是指多种CSS样式的叠加 浏览器解析CSS是从上到下,当CSS冲突时,以最后定义的CSS为准
层叠性是css处理冲突的能力。所有的权重计算没有任何兼容性问题。
权重计算大总结:
1) 先看有没有选中，如果选中了,那么以(id数，类数、标签数)来计算权重，谁大听谁的。如果权重一样，谁写在后面听谁的。
2）如果没有选中，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，再比选择器权重，如果权重在一样，谁写在后面听谁的。
2.继承性是子标签继承上了上级标签的CSS样式的属性
color、text-开头的、line开头的、font开头的都可以继承
这些关于文字样式的，都能够被继承。所有关于盒子的、定位的、布局的属性都不能被继承。
3.优先级:important!>内联样式>ID选择器>类选择>标签选择器>浏览器默认值
important!来给一个属性提高权重，这个属性的权重无限大。
k:v !important;
!important是用来给一个属性提高权重的，而不是一个选择器，!important无法提升继承的权重，该是0还是0
Snip20170722_8.png
Snip20170722_1.png
Snip20170722_1.png
Snip20170722_4.png
Snip20170722_3.png
Snip20170722_6.png
Snip20170722_7.png
四、标准文档流与浮动
标准文档流就是一个默认的状态，标准文档流中，标签分为两种:块级元素、行内元素。
块级元素:一定是霸占一行，能设置宽高，不设置宽度默认占满父亲。div p h li
行内元素:和其他行内元素并排，不能设置宽高，默认宽度就是文字宽度。span、a、b 、i、u
标准文档流做不出网页，因为能并排的不能设置宽高
标准文档流的三个特点:
1.空白折叠现象: 比如，如果我们想让a标签之间没有空隙，必须紧密连接。
<a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">体育新闻</a><a href="#">娱乐新闻</a>
2.高低不齐，底边对齐
3.自动换行，一行写不满，换行写
CSS中有三种方式是一个元素脱离标准文档流:浮动、绝对定位、固定定位。
浮动(float)是CSS里面布局用的最多的属性。
浮动的性质:脱标 贴边 字围 收缩
1.浮动的元素脱离标准文档流
一旦一个元素浮动了，那么，将能够并排和设置宽高，不管这个元素是个div还是span
2.浮动的元素相互贴靠
Snip20170722_9.png
3.浮动的元素会有字体围绕效果
Snip20170722_10.png
4.一个浮动的元素，如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)
关于浮动我们要强调一点，在初期一定要遵循一个原则:永远不是一个单独的东西单独浮动，要浮动大家一起浮动。
浮动带来的问题:
当父容器没有设置高度,里面的盒子没有设置浮动的情况下会将父容器的高度撑开.一旦父容器中的盒子设置浮动,脱离标准文档流,父容器立马没有高度,下面的盒子会跑到浮动的盒子下面出现这种情况,我们需要清除浮动(是指清除浮动带来的负面效果).
Snip20170722_12.png
清除浮动的方式
1.给浮动元素的祖先元素增加高度
浮动的元素，只能被有高度的盒子关住。也就是如果盒子内部有浮动，这个盒子有高度就不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
Snip20170722_13.png
Snip20170722_14.png
2.clear:both
clear:both的意思是清除左右浮动。表示自己内部的元素不受其他盒子的影响。
这个方法带来一个很大的问题，就是margin失效了。
Snip20170722_15.png
3.隔墙法:在两部分浮动元素中间，建一个墙，隔开两部分浮动，让后面浮动的元素不去追前面浮动元素。墙用自己的身体做了间隙
我们发现隔墙法好用，但是第一个div还是没有高度，如果我们现在想让第一个div，自动的根据自己的儿子撑出高度，我们就要使用内墙法
Snip20170722_17.png
内墙法的优点是，不仅仅能够让后部分的p不去追前部分的p，并且能够把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
Snip20170722_18.png
4.overflow:hidden
这个属性的本意，就是将多有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。这个是浏览器的小偏方。并且，overflow:hidden能够让margin生效。
一个父亲不能被自己浮动的儿子撑出高度，但是，只要给父亲加上
overflow:hidden就可以了，这是一个偏方。
Snip20170722_19.png
5.通过伪元素
.clearfix:after{
content:"",
height:0;
line-height:0;
visibily:hidden;
clear:both;
display:block;
}
.clearfix{
zoom:1; //为了兼容IE浏览器
}
五、定位:
1.静态定位(static):就是按照标准流的方式显示
2.相对定位(relative)就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。相对定位不脱离标准文档流。
相对定位一般有两个作用:
微调元素
做绝对定位的参考，子绝父相
Snip20170722_20.png
3.绝对定位(absolute):
绝对定位的盒子是脱离标准文档流的，所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素。
绝对定位的参考点:
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角:
Snip20170722_22.png
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角。
Snip20170722_23.png
一个绝对定位的元素，如果父辈元素中出现了定位的元素，那么以这个父辈元素为参考点，绝对定位的儿子，无视参考的那个盒子的padding
绝对定位的盒子居中:
Snip20170722_24.png
4.固定定位(fixed):就是相对于浏览器窗口定位。页面如何滚动，这个盒子显示位置不变。固定定位脱标。IE6不兼容
六、z-index
z-index表示谁压着谁。数值大的压盖数值小的。
只有定位的元素，才能有z-index值。
如果大家都没有z-index值，或z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位的元素永远压着没有定位的元素。
父亲怂了，儿子再牛逼也没用。
七、CSS中的隐藏
overflow:hidden 将超出的部分隐藏
display:none 元素隐藏以后不占原来的位置
visibility:hidden 元素隐藏以后占原来的位置
网友评论