前端学习基础课程回顾-CSS

css

1. css高级选择器
   
   • 后代选择器。空格就代表后代， .div p就是.div的后代所有的p。后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
   • 交集选择器 h3.special。选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。交集选择器没有空格。
   • 并集选择器。用逗号就表示并集，h3,li{}
   • 儿子选择器。div>p{}，只能选择div的儿子p。和div的后代p截然不同
   • 序选择器
   • 下一个兄弟选择器h3+p{}选择上的是h3元素后面紧挨着的第一个兄弟p

css的继承性和层叠性

- 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。color、 text-开头的、line-开头的、font-开头的。
- 当选择器，选择上了某个元素的时候，那么要这么统计权重：id的数量，类的数量，标签的数量。
    - 如果权重一样，那么以后出现的为准。
    - 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

标准文档流

1. 块级元素
   - 霸占一行，不能与其他任何元素并列
   - 能接受宽、高
   - 如果不设置宽度，那么宽度将默认变为父亲的100%。

2. 行内元素
   - 与其他行内元素并排
   - 不能设置宽、高。默认的宽度，就是文字的宽度。
   

3. 块级元素和行内元素的相互转换 display:inline(行内)/block;

4. css中一共有三种手段，使一个元素脱离标准文档流：
   - 浮动
   - 绝对定位
   - 固定定位

5. 浮动的清除
   - 方法一：给浮动元素的祖先元素加高度。如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关注浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
   - 方法二：clear:both;这种方法有一个非常大的、致命的问题，margin失效了。
   - 方法三：隔墙法
   - 方法四：overflow:hidden;一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。
6. margin的塌陷现象：标准文档流中，竖直方向的margin不叠加，以较大的为准。如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：
   - 盒子居中margin:0 auto;只有标准流的盒子，才能使用margin:0 auto; 居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
7. 相对定位、绝对定位的参考点
   
   • 一个绝对定位的元素的参考点要听最近的已经定位的祖先元素
   • 绝对定位的儿子，无视参考的那个盒子的padding。
8. 连字符和加号：“+”。如果加号两边都是数值，此时是加。否则，就是连字符。