Rumah hujung hadapan web tutorial css 全面总结css中属性值继承知识

全面总结css中属性值继承知识

Dec 12, 2017 am 09:31 AM
css Pengetahuan

本文主要介绍了css中属性值继承,介绍了属性的可以继承和不可继承,同时分析了继承的局限性以及是否可以取消等等,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性。

1.css可以和不可以继承的属性

不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。 
 

2.值的继承

  继承也是基于文档树的,文档树中元素的某些属性可以被其子元素继承,每一个CSS属性都定义了它能否被继承。要设定文档的某些缺省样式属性,可以在文档树的根上设定该属性,如果这个属性可以继承,则其后代元素将继承这个属性,例如color、font-size等属性。

3.“inherit(继承)”值

  每一个属性可以指定值为“inherit”,即:对于给定的元素,该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值,它可以通过显式地指定“inherit”而得到加强,例如:

         p { font-size: inherit; }

4.继承的局限性

继承虽然减少了重复定义的麻烦,但是,有些属性是不能继承的,例如border(边框)、margin(边距)、padding(补白)和背景等。
这样设定是有道理的,例如,为一个

设定了边框,如果此属性也继承的话,那么在这个

内所有的元素都会有边框,这无疑会产生一个让人眼花缭乱的结果。同样的,影响元素位置的属性,例如margin(边距)和padding(补白),也不会被继承。

  同时,浏览器的缺省样式也在影响着继承的结果。例如:

      body { font-size: 12px; }

      

2级标题的文字不是12px。

      //

H2中文字将是标题2样式的文字而非12px大小的文字。

  这是因为浏览器的缺省样式设定了

的CSS规则。

同时,有些老版本的浏览器可能对继承支持的不太好,例如某些浏览器当遇到

的时候,就会丢失所有的继承的属性

5.能否取消

css属性一旦继承了不能被取消,只能重新定义样式。

6.案例

父元素position:relative 子元素:position:absolute 父元素宽度固定,子元素会继承父元素的宽度(对于二级导航很重要,当隐藏的那个导航栏宽度不固定,或者宽度大于父元素时,此时一般只能重新设置子元素的宽度)

相关推荐:

css中属性值继承介绍

javascript 获取特定的 CSS属性值_经验交流

详解CSS属性值用法

Atas ialah kandungan terperinci 全面总结css中属性值继承知识. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China 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

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat 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)

Topik panas

Tutorial PHP
1596
276
Cara menukar gaya senarai dalam css Cara menukar gaya senarai dalam css Aug 17, 2025 am 10:04 AM

Untuk menukar gaya senarai CSS, gunakan jenis gaya pertama untuk menukar gaya peluru atau penomboran. 1. Gunakan jenis gaya senarai untuk menetapkan peluru UL ke cakera, bulatan atau persegi, dan bilangan OL adalah perpuluhan, rendah alpha, atas-alpha, rendah-Rom atau atas-Rom. 2. Keluarkan tag sepenuhnya dengan gaya senarai: Tiada. 3. Gunakan senarai gaya senarai: URL ('Bullet.png') untuk menggantikannya dengan imej tersuai. 4. Gunakan senarai gaya senarai: dalam

Cara membuat gelangsar testimoni responsif dengan CSS Cara membuat gelangsar testimoni responsif dengan CSS Aug 12, 2025 am 09:42 AM

Adalah mungkin untuk membuat slider karusel automatik yang responsif dengan CSS tulen, hanya menggabungkan struktur HTML, susun atur flexbox, dan animasi CSS. 2. Pertama membina bekas HTML semantik yang mengandungi pelbagai syarat cadangan, setiap .Item mengandungi kandungan rujukan dan maklumat pengarang. 3. Gunakan bekas induk untuk menetapkan paparan: flex, lebar: 300% (tiga slaid) dan gunakan limpahan: tersembunyi untuk mencapai susunan mendatar. 4. Gunakan @KeyFrames untuk menentukan transformasi translatex dari 0% hingga -100%, dan menggabungkan animasi: scroll15slinearinfinite untuk mencapai tatal automatik lancar. 5. Tambah media

Cara membuat sempadan bertitik di CSS Cara membuat sempadan bertitik di CSS Aug 15, 2025 am 04:56 AM

Gunakan CSS untuk membuat sempadan bertitik, hanya tetapkan atribut sempadan untuk bertitik. Sebagai contoh, "Sempadan: 3PXDotted#000" boleh menambah sempadan titik hitam 3-pixel ke elemen. Dengan menyesuaikan lebar sempadan, saiz titik boleh diubah. Sempadan yang lebih luas menghasilkan mata yang lebih besar. Anda boleh menetapkan sempadan bertitik untuk sisi tertentu, seperti "Border-top: 2PxDotteded". Sempadan bertitik sesuai untuk elemen peringkat blok seperti div dan input. Mereka sering digunakan dalam keadaan fokus atau kawasan yang boleh diedit untuk meningkatkan kebolehcapaian. Perhatikan kontras warna. Pada masa yang sama, berbeza dengan gaya garis pendek Dashed, bertitik membentangkan bentuk titik bulat. Ciri ini digunakan secara meluas dalam semua pelayar arus perdana.

Cara menggunakan kecerunan CSS untuk latar belakang Cara menggunakan kecerunan CSS untuk latar belakang Aug 17, 2025 am 08:39 AM

CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo

Cara Membuat Kesan Glassmorfisme Dengan CSS Cara Membuat Kesan Glassmorfisme Dengan CSS Aug 22, 2025 am 07:54 AM

Untuk membuat kesan meniru kaca CSS, anda perlu menggunakan penapis latar belakang untuk mencapai latar belakang kabur, menetapkan latar belakang lut seperti RGBA (255,255,255,0.1), tambah sempadan halus dan bayang-bayang untuk meningkatkan rasa hierarki, dan pastikan terdapat kandungan visual yang cukup di belakang unsur-unsur; 1. Gunakan penapis latar belakang: blur (10px) untuk mengaburkan kandungan latar belakang; 2. Gunakan RGBA atau HSLA untuk menentukan latar belakang telus untuk mengawal tahap ketelusan; 3. Tambah 1PxSolidrgba (255,255,255,0.3) sempadan dan bayang-bayang kotak untuk meningkatkan tiga dimensi; 4. Pastikan bekas mempunyai latar belakang yang kaya seperti gambar atau tekstur untuk membentangkan kesan penembusan kabur; 5. Ia serasi dengan pelayar lama

Cara menukar kursor dalam CSS Cara menukar kursor dalam CSS Aug 16, 2025 am 05:00 AM

UseBuilt-IncursortypesLikePointer, Bantuan, Ornot-AllowedtoprovideimmediatevisualFeedBackFordifferentInteractivements.2.applycustomcursorimageswithTheCursorPropertyuseSaurl, OptionallySpecyfyLySpotandingLudinglikeAtoToAllik.

Cara Menggunakan GRID-Template-areas di CSS Cara Menggunakan GRID-Template-areas di CSS Aug 22, 2025 am 07:56 AM

Thegrid-template-areaspropertyallowsdeveloperstercreateintuitive, readableLelayoutsbydefiningnamedgridareas; eachstringRepresentowandeachwordacolumncell, withgrid-areanamesonchildelementsmatchingthoseIntHetHetPlate, sedemikian "headerheaderererheaderererheadererheadererheadererheadererheadererheadererheadererheadererheadererheaderheaderheadererheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader."

Cara Melaksanakan Tema Mod Gelap dengan CSS Cara Melaksanakan Tema Mod Gelap dengan CSS Aug 22, 2025 am 09:55 AM

Terdapat dua cara utama untuk melaksanakan Mod Gelap: Satu adalah dengan menggunakan media yang lebih suka warna-skema untuk menanyakan secara automatik untuk menyesuaikan keutamaan sistem, dan yang lain adalah untuk menambah fungsi pensuisan manual melalui JavaScript. 1. Gunakan lebih suka skema-skema untuk menggunakan tema gelap secara automatik mengikut sistem pengguna. Tidak ada keperluan untuk JavaScript, hanya menentukan gaya dalam pertanyaan media; 2. 3. Anda boleh menggabungkan kedua -duanya untuk membaca Localst Pertama apabila halaman dimuatkan.

See all articles