CSS初学感受很简单,但随着学习的深刻才感受CSS的水由多深,日常总会遇到各类坑,先总结一些常常遇到的坑css
虽然咱们平时在写CSS的时候都是用小写,但其实CSS并非大小写敏感的html
.test{ background-COLOR:#a00; width:100px; height: 100px; }
虽然把background-color写为了background-COLOR,但仍然会生效,之因此写成小写是由于xhtml标准的关系,可是即便不是xhtml仍是写成小写比较好,美观、易读并且能够应对可能的转换需求web
当两个规则都做用到了同一个html元素上时,若是定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。浏览器
不一样级别网络
同一级别less
同一级别中后写的会覆盖先写的样式学习
上面的级别仍是很容易看懂的,可是有时候有些规则是多个级别的组合,像这样字体
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div.test{ background-COLOR:#a00; width:100px; height: 100px; } .test.test2{ background-COLOR:#0e0; width:100px; height: 100px; } </style> </head> <body> <div class="test test2"></div> </body> </html>
到底div是应用那条规则呢,有个简单的计算方法(经园友提示,权值实际并非按十进制,用数字表示只是说明思想,一万个class也不如一个id权值高)url
咱们能够把选择器中规则对应作加法,比较权值,若是权值相同那就后面的覆盖前面的了,div.class的权值是1+10=11,而.test1 .test2的权值是10+10=20,因此div会应用.test1 .test2变成绿色spa
并非全部的属性对行内元素都可以生效
<div style=""> <span style="padding:4px; margin:8px; height: 500px; width:1000px; ">123456789123456789</span> </div> <div style=""> <span style="padding:4px; margin:8px; height: 500px; width:1000px; ">123456789</span> </div>
经过例子能够看出,咱们对span设置的width和height属性并无生效,margin-top和margin-bottom无效,padding-top和padding-bottom会改变元素范围(背景区域变大了),但并无影响下面元素位置
咱们在写字体的尺寸的时候经常使用的单位有
这些字体分别有什么含义?
咱们知道:checked会选择被选中的checkbox和radio,看个例子
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> :checked{ margin: 10px; } </style> </head> <body> <input id="t1" type="checkbox" checked/> <input id="t3" type="radio" checked/> <select> <option id="t2">test</option> <option id="t4">test2</option> </select> </body> </html>
对于前两个margin变成10px咱们不奇怪,可是当咱们看select的option的时候会发现被选中的option的margin业变成了10px,没有被选中的option则没有变化!
是的:checked也会选择被选中的option
咱们知道写在页面上的img标签,不管显示与否,图片都会被加载(因此试图经过对图片display:none来达到节省网络流量的作法就省省吧。。。),咱们也常用backgroung-image等css属性为页面添加图片,这些图片是否是必定会被加载呢,看个例子
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .useless{ background-image: url(images/0.jpg); } .hidden{ background-image: url(images/1.jpg); } .none{ background-image: url(images/2.jpg); } .parentHidden{ background-image: url(images/3.jpg); } .parentNone{ background-image: url(images/4.jpg); } </style> </head> <body> <div class="hidden"></div> <div class="none"></div> <div style="visibility:hidden;"> <div class="parentHidden"></div> </div> <div style="display:none;"> <div class="parentNone"></div> </div> <div style="display:none"> <img src="images/5.jpg"></div> </body> </html>
看一下网络监视状况(怎么柳岩的照片变小后感受怪怪的。。。)
咱们能够发现图片0和4没有被下载,0是没有用到的CSS,4是父容器的display被设为none的状况,这两种状况下的CSS引用的图片是不会被加载的,而父容器设置visibility属性为hidden仍然会加载图片,不要搞混了