見落とされがちな CSS 機能

容易被忽略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    

例からわかるように、span に設定した幅と高さの属性は有効ではなく、margin-top と margin-bottom は無効で、padding-top と padding-bottom によって範囲が変更されます。要素 (背景領域が大きくなります) ですが、後続の要素の位置には影響しません

いくつかの相互排他的な要素

絶対配置および固定配置 (固定サイズ、幅、高さの属性が設定されている) 要素の場合、最上部の場合と left 属性が設定されている場合、bottom と right の値は無効になります。そうでない場合、ブラウザは同じコードに従って誰を配置するかをどのように認識するのでしょうか。上、左、下、および右の値が設定されている場合、マージン属性は機能しません

絶対および固定位置の要素の場合、上、左、下、および右の値が設定されている場合、設定すると、float 属性も無効になります。

ブロック要素が float 属性または絶対位置または固定位置で設定されている場合、vertical-align 属性は機能しなくなります

フォントサイズの単位

フォントのサイズは

px

pt

em

rem

と書きますが、これらのフォントは何を意味しますか？

pxとはピクセルの略で、ウェブを閲覧する過程で画面上の文字や写真などが画面の解像度に応じて変化します。 100px の解像度は 800×600 で、画面幅の 1/8 を占めますが、1024×768 では約 1/10 しか占めません。したがって、フォントサイズを定義するときにピクセルを単位として使用すると、ユーザーが表示解像度を 800 から 1024 に変更すると、ユーザーが実際に見る文字が「小さく」（自然長単位）なり、不鮮明になる場合があります。 、ブラウズに影響します。

ptはポイント（ポンド）の略で、サイズが1/72インチの固定長さの測定単位です。 Web 上のテキストの単位として pt を使用すると、異なる画面でフォント サイズが同じ (同じ解像度) になり、組版に影響が出る可能性がありますが、Word で pt を使用すると非常に便利です。 Wordを使用する主な目的は画面閲覧ではなく、出力・印刷だからです。エンティティに印刷する場合、自然な長さの単位として pt が便利で実用的です。たとえば、Word の通常の文書では「Song font 9pt」が使用され、タイトルでは「Helvetica 16pt」が使用されます。コンピュータの設定に関係なく、pt は使用されます。印刷するときは常にこの大きさになります。

em: 相対単位および相対長さの単位であり、元々は文字 M の幅を指すため、現在は文字幅の倍数を指します。その使用法はパーセンテージと似ています。 、0.8em、1.2em、2emなど。通常は 1em=16px (ブラウザのデフォルトのフォント サイズ 16px)、em は親要素のフォント サイズを指します。ページ上の親要素のフォント サイズを考慮して、1 つの要素を調整することですべての要素のサイズを比例的に変更できます。スケーラブルなスタイル シートを作成する場合などに、自由に拡大縮小できます。 ex の概念と同様に、ex は文字「x」を基準とした高さであり、通常はフォント サイズの半分です。

rem: rem は CSS に新しく追加されたもので、Em は親要素を基準にしてフォント サイズを設定します。これは、使用時にその親要素のサイズを何度も知る必要がある場合があります。 、予期しないエラーが発生するリスクがあります。そして、rem はルート要素 (r:root) に対する相対値です。rem を使用すると、ルート要素内の参照値を決定するだけで、HTML ページ全体のすべてのフォントを制御できます。

:チェックされたセレクター範囲

わかっています: チェックすると、選択されたチェックボックスとラジオが選択されます。例を参照してください

;    

   

   

       

   

   

       

   

       

       

次のネットワーク監視状況を見てください（怎柳岩の写真を少し見ると怪奇です。 。）

私たちは、図0と4がダウンロードされていないことを明らかにできます、0は使用できないCSS、4は親コンテナの表示が何も設定されていない場合、この両方の場合のCSS参照の図は次のとおりです。追加されませんが、父コンテナの可視性プロパティは非表示に設定されていますが、図片をダウンロードする必要はありません。 ）！