Rumah hujung hadapan web tutorial css CSS的inherit与auto

CSS的inherit与auto

Feb 10, 2017 pm 04:21 PM

一个很显浅的寓言,千年老树,电打雷劈,屹立不倒,却毁于蝼蚁的侵袭之下。自以为精通CSS的人,常常被一些小问题搞到头晕脑胀。通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了。CSS是一门很简单的语言,易学易用,但也最容易出垃圾代码。这是没有深入研究这门语言所致。本人认为,CSS是由以下三大块构成的:默认值,继承系统与加权系统。默认值,也就是浏览器在用户没有设置属性的情况下,默认指定的属性。CSS框架基本都有一个叫reset.css 的文件,就是对其进行重设,消除各浏览器的差异的。继承系统就是下面要重点讨论的东西。加权系统,也就是优先级的问题,不在本文的讨论范畴,不说了。

在CSS中,许多属性都是可以继承的,如某个段落的字体设置为白色,其元素的字体不用设置或设置为inhert,它就是白色。这些属性被称之为inherited property,它会从父元素获取对应属性的经过计算与转换的值(computed value),如果父元素和它的情形一样,它就继续往上找,最后没有就使用浏览器的默认值。

下面是 inherited properties的一览表:

  • border-collapse

  • border-spacing

  • caption-side

  • color

  • cursor

  • direction

  • empty-cells

  • font

  • font-family

  • font-stretch

  • font-size

  • font-size-adjust

  • font-style

  • font-variant

  • font-weight

  • letter-spacing

  • line-height

  • list-style

  • opacity

  • list-style-image

  • list-style-type

  • quotes

  • text-align

  • text-indent

  • text-transform

  • white-space

  • word-spacing

http://www.php.cn/

我们给父元素设置了字体的样式,没有设置子元素的,当取出子元素的时,发现其值转换为rgb格式(当然IE除外啦!)

不过,在IE7及其之前的版本,是不支持用inhert来设置direction与visibility以外的样式属性。具体可参见这里与这里

在IE8中,原本是inherited property的text-align在th中失效。

1

2

3

4

5

6

7

8

9

10

 <table>

  <tr>

    <th>Ruby</th>

    <th>Rouvre</th>

  </tr>

  <tr>

    <td>By</td>

    <td>司徒正美</td>

  </tr>

</table>

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

10

11

  

  table, tr, td, th {

    border-collapse: collapse;

    border: 1px solid #000;

  }

  table {

    text-align: right;

  

  td, th {

    width: 100px;

  }

Salin selepas log masuk

本来th应该会从table中继承文本向右对齐的设置,但失效了……

解决IE8这个弱智Bug也很容易,就是显式地设置inhert。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

  

  table, tr, td, th {

    border-collapse: collapse;

    border: 1px solid #000;

  }

  table {

    text-align: right;

  }

  td, th {

    width: 100px;

  }

  th {

    text-align: inherit;

  }

Salin selepas log masuk

此外还有一些CSS属性是不能继承的,最经典如border系列。它被称之为non-inherited property,如果我们不为它设置,我们只能取得浏览器的默认值,默认值在火狐中被称之为 initial value 。一个相关的好消息是,默认值在火狐也可以指定了,这样我们就不用reset样式了!

下面是non-inherited property的一览表:

  • background

  • border

  • bottom

  • clear

  • display

  • float

  • height

  • left

  • margin

  • outline

  • overflow

  • padding

  • position

  • right

  • top

  • visibility

  • width

  • z-index

我们给父元素设置了背景颜色,没有设置子元素的,这时会取得浏览器的默认值transparent(W3C那一方好像只要是颜色都会转换为rgb格式,多出的a为Alpha)

接着我们来看auto,这是一个含糊不清但是有长度概念的值。应用于以下属性:

  • overflow

  • cursor

  • height

  • width

  • marker-offset

  • margin

  • margin-* (left|bottom|top|right|start|end)

  • top

  • bottom

  • left

  • right

  • table-layout

  • z-index

  • -moz-column-width

  • languages

在块级元素的可度量的属性中(如width,height),如果不设置值,其默认值是auto,但它很容易会被父级元素的值覆盖,也就是隐式地成为了inhert了。在内联元素中,由于不具备盒子模型,如果不设置,就算是火狐也原本奉还它,这对于精确计算元素的宽度与高度是非常不利的。auto还有对称性,这个在居中布局我们常常运用到它。在非度量的属性中,如overflow,就要具体情况具体分析了。

更多CSS的inherit与auto 相关文章请关注PHP中文网!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menambah bayang -bayang kotak ke blok dan elemen WordPress Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Mar 02, 2025 am 09:03 AM

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Bekerja dengan Caching Graphql Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM

Bekerja dengan Caching Graphql

Menjadikan Peralihan Svelte Khas pertama anda Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres Muat naik fail dengan multer di node.js dan ekspres Mar 02, 2025 am 09:15 AM

Muat naik fail dengan multer di node.js dan ekspres

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma) Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma) Mar 01, 2025 am 09:32 AM

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)

See all articles