hujung hadapan web
tutorial css
Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?
Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?
CSS atau Cascading Style Sheet ialah alat berkuasa yang menyediakan satu set sifat untuk menjajarkan dan elemen kedudukan pada halaman web. Sifat align-self ialah salah satu daripada banyak sifat yang tersedia dalam CSS untuk melaraskan penjajaran item Flex individu dalam bekas Flex. Secara lalai, align-self ditetapkan kepada auto, yang bermaksud elemen itu akan mewarisi penjajaran bekas induknya. Walau bagaimanapun, tingkah laku ini boleh diubah untuk item Flex individu dengan menetapkan sifat align-self.
scc selector{
align-self: auto;
}
atribut align-self dalam CSS
Sebelum kita membincangkan cara untuk menetapkan semula sifat align-self kepada nilai lalainya, adalah penting untuk memahami apa itu align-self. Sifat align-self ialah subsifat bagi sifat trengkas flex ia digunakan untuk menjajarkan satu item flex sepanjang paksi mendatar bekas. Nilai lalai atribut align-self ialah auto, yang menyebabkan elemen mewarisi atribut align-item pada bekas induknya. Atribut align-self boleh ditetapkan kepada salah satu nilai berikut -
Auto (lalai),
Pelancaran Flex,
Sebelah lentur,
Pusat,
Garis asas, dan
Menganjalkan
Jika anda menetapkan atribut align-self kepada nilai selain daripada auto, ia akan mengatasi atribut align-item bagi bekas untuk elemen khusus tersebut.
Tetapkan semula align-self kepada nilai lalai dalam CSS
Untuk menetapkan semula atribut align-self kepada nilai lalainya, cuma alih keluar nilai auto atribut daripada pengisytiharan CSS elemen. Contohnya
.element {
align-self: center;
}
Apabila atribut align-self dialih keluar daripada pengisytiharan, ia ditetapkan semula kepada nilai lalainya.
.element {
/* align-self: center; */
}
Sekarang, kami akan meneroka beberapa contoh menetapkan semula sifat align-self kepada nilai lalainya dalam CSS.
Gunakan nilai automatik
Cara mudah untuk menetapkan semula sifat align-self kepada nilai lalainya ialah dengan menetapkannya kepada auto. Apabila nilai align-self ditetapkan kepada auto, item Flex akan dijajarkan mengikut nilai sifat item align-item yang ditetapkan pada bekas Flex.
Contoh
Dalam contoh ini, kami akan menggunakan nilai auto untuk memilih semua elemen .item yang tidak mempunyai kelas .div1 atau .div3 dan menetapkan atribut align-self mereka kepada auto. Ini akan memastikan bahawa hanya .div1 dan .div3 serta elemen mempunyai nilai penjajaran diri tersuai.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.item { width: 100px; height: 50px; background-color: white; border: 1px solid black; margin: 10px; }
.div1 { align-self: flex-start; }
.div2 { align-self: auto; }
.div3 { align-self: flex-end; }
</style>
</head>
<body>
<h3 id="Set-align-self-property-to-its-default-value-using-the-align-self-auto">Set align-self property to its default value using the align-self:auto</h3>
<div class="container">
<div class="item div1">HTML</div>
<div class="item div2">CSS</div>
<div class="item div3">JavaScript</div>
</div>
</body>
</html>
Gunakan pemilih :not()
Pemilih:not() ialah cara lain untuk menetapkan semula sifat align-self kepada nilai lalainya. Pemilih ini membenarkan pemilihan semua elemen yang tidak memenuhi kriteria tertentu. Menggunakan pemilih :not() kita boleh memilih semua elemen kecuali elemen yang kita mahu gunakan nilai align-self tertentu.
Contoh
Dalam contoh ini, kami akan menggunakan pemilih :not() untuk memilih semua elemen .item yang tidak mempunyai kelas .box1 atau .box3 dan menetapkan atribut align-self mereka kepada auto. Ini akan memastikan bahawa hanya .box1 dan .box3 serta elemen mempunyai nilai align-self tersuai.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h3{ text-align:center;}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.item:not(.box1):not(.box3) { align-self: auto;}
.item { width: 100px; height: 50px; border: 1px solid black; margin: 10px; background-color:pink; }
.box1 { align-self: flex-start; background-color:lightgreen;}
.box3 { align-self: flex-end; background-color:lightblue; }
</style>
</head>
<body>
<h3 id="Set-align-self-property-to-its-default-value-using-the-not-selector">Set align-self property to its default value using the :not() selector</h3>
<div class="container">
<div class="item box1">Java</div>
<div class="item">Python</div>
<div class="item box3">PHP</div>
</div>
</body>
</html>
Kesimpulan
Sifatalign-self ialah alat yang berkuasa untuk menetapkan penjajaran menegak item Flex dalam bekas Flex. Walau bagaimanapun, kadangkala kita mungkin perlu menetapkan semula sifat align-self dalam CSS kepada nilai lalainya. Dengan menetapkan semula sifat align-self kepada nilai lalainya iaitu auto, atau sebaliknya menggunakan align-item, kami boleh memudahkan CSS dan mengelakkan isu penjajaran.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan harta align-self kepada nilai lalainya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
