cari
Rumahhujung hadapan webhtml tutorialCSS3:布局_html/css_WEB-ITnose

定位内容

用于定位内容的属性包括:
1)position:设置定位方法
2)left、right、top、bottom:为定位元素设置偏移量
3)z-index:设置定位元素的层叠顺序

定位方法

position属性设置元素的定位方法,可选值如下:
1)static:元素为普通布局,默认值;
2)relative:元素位置相对于普通位置(及static值)定位;
3)absolute:元素相对于position值不为static的第一位祖先元素定位,如果不存在这样的元素,则相对于body元素定位;
4)fixed:元素相对于浏览器窗口来定位,也就是说元素始终占据同样的位置,无论剩余内容是否向上向下滚动。
使用left、right、top和bottom属性设置元素的偏移量的时候,指的是相对于position属性指定的元素的偏移量。
我们通过一些例子来理解这些属性值的含义:

<button>First</button><br><button>Second</button><br><button>Last</button><br>
界面在Chrome中的效果如下:


然后为First按钮添加样式:

<button style="position: static;top: 200px;">First</button><br><button>Second</button><br><button>Last</button><br>
在添加了该样式后,界面的效果将无任何变化,但如果我们将position的值修改为relative:

<button style="position: relative;top: 200px;">First</button><br><button>Second</button><br><button>Last</button><br>
然后布局的效果发生了变化:


从这里我们可以看出当position的值为static时,top的设置将没有效果,而当position值为relative时,元素的top位置就变为static时的top值加上设置的top值。
接下来我们将second按钮的position设置为absolute;

<button>First</button><br><button style="position: absolute;top: 200px;">Second</button><br><button>Last</button><br>
在chrome中的效果如下


设置产生了效果。我们再给second按钮一个p元素的父亲节点,并将样式中的position的值设置为relative(非static):

<p style="position: relative;top: 100px;">	<button>First</button>	<br>	<button style="position: absolute;top: 200px;">Second</button>	<br>	<button>Last</button>	<br></p>
在chrome中的效果就发生了变化,因为second按钮会相对于position值不为static的第一位祖先元素来定位。


如果我们为first按钮设置样式如下:

<p style="position: relative;top: 100px;">	<button style="position: relative;top: 200px;">First</button>	<br>	<button style="position: absolute;top: 200px;">Second</button>	<br>	<button>Last</button>	<br></p>
在chrome中的效果如下:


我们发现first按钮消失了,但实际上first按钮并不是真的消失了,是被second按钮给遮住了。原因是first按钮设置的是相对于自己的static位置偏离top为200px的位置,而second按钮则是相对p元素位置偏离top为200px的位置,而first按钮的static位置实际上即为p元素的位置,所以first按钮和second按钮就重叠了。
下面我们看看position为fixed的例子:

<p style="position: relative;top: 100px;">	<button style="position: relative;top: 200px;">First</button>	<br>	<button style="position: absolute;top: 600px;">Second</button>	<br>	<button style="position: fixed;top: 110px;">Last</button>	<br></p>
在chrome中的效果如下:


大家注意看下滚动条的位置,当我把滚动条从最上面拖动到最下面时,last按钮相对于浏览器的位置没有发生变化。

元素的层叠顺序

z-index属性指定元素显示的层叠顺序,值为数值,允许取负值,值越小,在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会派上用场。
z-index属性的默认值是0。

多列布局

多列属性支持在多个垂直列中布局内容,包括:
1)column-count:指定列数,数值;
2)column-fill:指定内容在列与列之间的分布方式:auto表示按照顺序填充;balance指浏览器确保不同列之间的长度差异尽可能小;
3)column-gap:指定列之间的距离,长度值;
4)column-rule:在一条声明中设置column-rule-*的简写属性,;
5)column-rule-color:设置列之间的颜色规则;
6)column-rule-style:设置列之间的样式规则,同border-style属性值;
7)column-rule-width:设置列之间的宽度;
8)columns:设置column-span和column-width的简写属性;
9)column-span:指定元素横向能跨多少列;
10)column-width:指定列宽。

p {	column-count: 3;	column-file: balance;	column-rule: medium solid black;	column-gap: 1.5em;}
注意如果应用column-width属性,浏览器会通过添加或者删除列数维持指定列宽。目前大部分浏览器还不支持多列布局。
Kenyataan
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
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

See all articles

Alat AI Hot

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.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),