CSS features that are easily overlooked

容易被忽略CSS特性

CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑

大小写不敏感

虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的

.test{    background-COLOR:#a00;    width:100px;    height: 100px;}

虽然把background-color写为了background-COLOR，但仍然会生效，之所以写成小写是因为xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求

选择器优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

作为style属性写在元素内的样式

id选择器

类选择器

标签选择器

通配符选择器

浏览器自定义或继承

同一级别

同一级别中后写的会覆盖先写的样式

上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样

               

到底div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）

内联样式表的权值为 1000

ID 选择器的权值为 100

Class 类选择器的权值为 10

HTML 标签选择器的权值为 1

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色

行内(inline)元素的一些属性

并不是所有的属性对行内元素都能够生效

行内元素不会应用width属性，其长度是由内容撑开的

行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节

行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响

行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效

行内元素的overflow属性无效，这个不用多说了

行内元素的vertical-align属性无效（height属性无效）

       123456789123456789    

   

       123456789    

As you can see from the example, the width and height attributes we set for span do not take effect, margin-top and margin-bottom are invalid, padding-top and padding-bottom will change the scope of the element (the background area becomes larger ), but it does not affect the position of the following elements

Some mutually exclusive elements

For absolute and fixed positioned (fixed size, width and height attributes are set) elements, if the top and left attributes are set, then set the bottom and The right value has no effect. Top and left should have higher priority. Otherwise, how will the browser know who to position according to the same code? For absolute and fixed positioned elements, if the values ​​​​of top, left, bottom, and right are set, The margin attribute will not work

For absolute and fixed positioned elements, if the values ​​​​of top, left, bottom, and right are set, the float attribute will also be invalid.

If the block element is set with the float attribute or absolute or fixed Positioning, then the vertical-align attribute no longer works

font-size unit

The commonly used units when we write the size of fonts are

px

pt

em

rem

What do these fonts mean? ?

px is the abbreviation of pixel, which is a unit based on pixels. During the process of browsing the web, the text and pictures on the screen will change with the resolution of the screen. A picture with a width of 100px will have a resolution of 800×600 , it takes up 1/8 of the screen width, but at 1024×768, it only takes up about 1/10. Therefore, if px is used as the unit when defining the font size, once the user changes the display resolution from 800 to 1024, the text actually seen by the user will become "smaller" (natural length unit), and may even be unclear, affecting Browse.

pt is the abbreviation of point (pound), which is a fixed length measurement unit with a size of 1/72 inch. If you use pt as the unit of text on the web, the font size will be the same on different screens (same resolution), which may have an impact on typesetting, but it is very convenient to use pt in Word. Because the main purpose of using Word is not for screen browsing, but for output and printing. When printing to an entity, pt is convenient and practical as a natural length unit: for example, ordinary documents in Word use "Song font 9pt", titles use "Helvetica 16pt", etc. No matter how the computer is set, it will always be this big when printed. .

em: It is a relative unit and a relative length unit. It originally refers to the width of the letter M, so it is called em. It now refers to the multiple of the character width. Its usage is similar to percentage, such as: 0.8em, 1.2em, 2em, etc. Usually 1em=16px (browser default font size 16px), em refers to the font size of the parent element. Given the font size of a parent element on a page, you can proportionally change the size of all elements by adjusting one element. It can be scaled freely, such as for making scalable style sheets. Similar to the concept of ex, ex is the height relative to the character "x", which is usually half the font size.

rem: rem is a new addition to CSS. Em sets the font size relative to its parent element. This will cause a problem. When setting any element, you may need to know the size of its parent element multiple times. When used, there is a risk of unpredictable errors. And rem is relative to the root element (r:root). Using rem, we only need to determine a reference value in the root element, and then we can control all fonts in the entire html page.

:checked selector range

We know: checked will select the selected checkbox and radio, see an example

   

   

   

       

   

   

       

   

       

       

看一下网络监视情况（怎么柳岩的照片变小后感觉怪怪的。。。）

我们可以发现图片0和4没有被下载，0是没有用到的CSS，4是父容器的display被设为none的情况，这两种情况下的CSS引用的图片是不会被加载的，而父容器设置visibility属性为hidden仍然会加载图片，不要搞混了

 以上就是容易被忽略CSS特性的内容，更多相关文章请关注PHP中文网（www.php.cn）！