Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menetapkan nilai lalai untuk menyelaraskan kandungan dalam CSS?
Bagaimana untuk menetapkan nilai lalai untuk menyelaraskan kandungan dalam CSS?
- WBOYke hadapan
- 2023-08-30 09:09:06825semak imbas
CSS ialah bahasa web yang digunakan terutamanya untuk mereka bentuk dan memaparkan halaman web. Ia memberikan kami banyak sifat yang membantu dalam proses penyesuaian. Salah satu sifat ini ialah "sifat kandungan sejajar".
Selaraskan sifat kandungan digunakan untuk memperuntukkan ruang antara atau sekitar item yang dimiliki oleh kotak flex atau grid. Nilai awal hartanah ini ialah "normal". Ia mempunyai animasi diskret dan nilai yang dikira sentiasa sama dengan nilai yang ditentukan.
Perlu diingat bahawa ia bukan harta pusaka. Ini adalah harta yang disokong secara meluas oleh kebanyakan penyemak imbas.
Pelbagai nilai yang boleh disediakan untuk hartanah ini diterangkan di bawah -
Mula - Digunakan apabila anda mahu kandungan atau item mula dibungkus dari awal elemen bekas.
End - Digunakan apabila anda mahu kandungan atau item mula dibalut dari hujung elemen bekas.
Center - Digunakan untuk membungkus elemen kanak-kanak di tengah bekas yang dijajarkan.
Normal - Ini ialah nilai lalai untuk sifat kandungan sejajar.
Flex-start - untuk bekas jenis flexbox dan akan mula menjajarkan item di sepanjang tepi permulaan. Walau bagaimanapun, jika kami menggunakannya pada bekas yang bukan Flexbox, ini akan dianggap sebagai permulaan.
Flex-end - Sama seperti flex-start, ini juga digunakan dalam bekas jenis Flexbox dan akan mula menjajarkan item di sepanjang tepi hujung. Walau bagaimanapun, jika kami menggunakannya pada bekas yang bukan Flexbox, ini akan dianggap sebagai penamat.
Ruang- Antara - Item yang dinyatakan menggunakan sifat ini akan dijajarkan di sepanjang paksi mendatar bekas, dengan jarak yang sama di sepanjang elemen bersebelahan.
Ruang sekeliling - Ia berfungsi sama seperti ruang antara, tetapi ruang di sebelah kiri elemen pertama dan di sebelah kanan elemen terakhir akan sama dengan separuh daripada ruang antara dua ruang elemen bersebelahan.
Ruang-sekata - Ini bermakna terdapat ruang yang sama antara semua elemen, tidak seperti ruang genap yang hanya terdapat separuh ruang dari permulaan elemen pertama hingga penghujung elemen terakhir.
Regangan - Ia menukar saiz item secara automatik dalam bekas yang dikaitkan dengan saiz automatik.
Selain itu, kami mempunyai selamat dan tidak selamat sebagai nilai untuk hartanah ini. Ia digunakan dengan kata kunci penjajaran dan bergantung pada ciri bekas, seperti sama ada limpahan akan mengakibatkan kehilangan data. Berdasarkan syarat ini, kami memilih sama ada untuk mengekalkan penjajaran.
Contoh
Contoh atribut kandungan sejajar diberikan di bawah.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #92a4b5;
}
#mainDiv {
background-color: black;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
#mainDiv div {
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<h1>The example of align-content Property</h1>
<div id="mainDiv">
<div style="background-color: coral"></div>
<div style="background-color: lightblue"></div>
<div style="background-color: pink"></div>
</div>
</body>
</html>
Tetapkan lalai untuk menjajarkan kandungan
Istilah "nilai lalai" sebenarnya boleh merujuk kepada "nilai awal" sesuatu harta. Nilai lalai untuk menjajarkan item ialah "Regangan".
Jadi kita boleh katakan bahawa "biasa" adalah sedikit seperti kata kunci khas dengan makna tertentu, tetapi berubah bergantung pada konteks di mana ia digunakan. Kerana tanpa konteks khusus, kita tidak boleh menentukan apa yang "biasa" akan lakukan.
Kami boleh menggunakan normal sebagai nilai lalai tanpa perlu risau kerana ia sama ada akan dianggap sebagai tidak sah dan menggunakan nilai sandaran, atau dianggap sebagai sah dan sandarkan kepada nilai yang betul.
Contoh
Diberikan di bawah ialah kod sampel untuk menetapkan nilai lalai kandungan sejajar kepada normal -
<!DOCTYPE html>
<html>
<head>
<style>
.FlexBox {
width: 40vw;
height: 54vh;
border: 5px solid blue;
display: flex;
flex-wrap: wrap;
background-color: rgb(170, 210, 170);
align-content: normal;
}
#BoxItem1,
#BoxItem2,
#BoxItem3,
#BoxItem4 {
box-sizing: border-box;
min-height: 20%;
width: 22%;
border: 1.5px dashed red;
margin: 0.5vw;
display: flex;
align-items: center;
justify-content: center;
}
#BoxItem1 {
background-color: rgb(214, 198, 192);
}
#BoxItem2 {
background-color: rgb(198, 198, 49);
}
#BoxItem3 {
background-color: rgb(233, 115, 135);
}
#BoxItem4 {
background-color: rgb(143, 196, 196);
}
</style>
</head>
<body>
<div class="FlexBox">
<div id="BoxItem1">1</div>
<div id="BoxItem2">2</div>
<div id="BoxItem3">3</div>
<div id="BoxItem4">4</div>
</div>
</body>
Kita dapat melihat bahawa semua item dalam bekas dijajarkan "biasa" secara lalai, yang diregangkan mengikut spesifikasi bekas Flexbox.
Kesimpulan
Secara keseluruhannya, menggunakan CSS untuk menetapkan lalai bagi meletakkan kandungan ialah cara yang mudah dan berkesan untuk memastikan reka bentuk yang konsisten di seluruh tapak web anda. Dengan menetapkan satu nilai sebagai lalai, anda boleh melaraskan dengan cepat kedudukan semua elemen pada setiap halaman tanpa perlu menukar setiap elemen secara individu. Ini memudahkan pembangun dan pereka bentuk untuk mencipta rupa yang konsisten yang sesuai dengan mana-mana tema atau tema. Anda boleh melaraskannya dengan mudah kemudian jika perlu.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai lalai untuk menyelaraskan kandungan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!