1、css选择器分类:
id选择器,类选择器,通用选择器,
包含(后代)选择器——加入空格,用于选择指定标签元素下的后辈元素。
子选择器(大于符号)——用于指定标签元素的第一代子元素。
伪类选择器——允许给html中不存在的标签(标签的某种状态)设置样式,like:a:hover
分组选择器——用逗号隔开,为多个标签设置同一个样式时。
2、css的继承,层叠,特殊性
继承:设置给某一标签的样式会被继承到该标签元素的子元素
特殊性:浏览器根据权值来判断使用哪种css样式,权值高就使用哪种css样式。标签的权值为1,类选择符的权值为10,id选择器的权值为100
层叠:如果html文件中对同一个元素有多个样式的存在,且有相同权值的情况下,会根据样式的前后顺序来决定处于最后面的css样式会被使用。
3、!important的使用
p{color:red!important;}
为最高权值。 浏览器默认的样式<网页制作者的样式<用户自己设置的样式<!important的权值
4、html标签元素分类
块状元素:div,p,table,h1...h6,ul,form ——block ——特点:每个块状元素都是霸占一行;高,宽,行高,顶,底边距都可设置;不设置的情况下宽度是它父容器的100%
内联元素:a,span,br,label ——inline ——特点:和其他元素都在一行上;高,宽等不可设置
内联块状元素:input, img ——inline-block ——特点:和其他元素都在一行上;高,宽,行高等可以设置
5、css盒子模型的宽度和高度
css中定义的宽和高指的是填充以里的内容宽度。一个元素的实际宽度(盒子的宽度),需要加上他的左边距,右边距,左边框,右边框,左填充,右填充
6、css布局模型:流动模型,层模型,浮动模型
重点回顾下层模型:
层模型一般在局部布局的时候使用,主要三种:绝对定位,相对定位,固定定位
绝对定位:将元素从文档流中拖出来,然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块(abolute和relative的结合使用)进行绝对定位。如果不存在这样的包含块,则相对于body元素,即浏览器窗口。
相对定位:注意一点:就是偏移前的位置保留不动。也就是说虽然在显示结果上来说是偏移了,但实际上的之前的位置,浏览器是给你保存下来,如果该元素后有其他的元素,那么其他元素的显示结果还是按照偏移前的位置,也就是原样保持不动。
固定定位:固定定位的相对移动坐标是视图本身,不会随着滚动条滚动而变化,始终位于浏览器窗口内试图的某个位置,不会受文档流动影响。