CSS

Perkenalkan model kotak CSS?

(1) Terdapat dua jenis, model kotak IE dan model kotak W3C standard; pemilih CSS? Apakah harta yang boleh diwarisi? Bagaimanakah algoritma keutamaan dikira? Apakah kelas pseudo baharu dalam CSS3?

* 1. pemilih id (# myid)
2. Pemilih kelas (.nama kelas saya)

3. Pemilih tag (div, h1, p)

4. Pemilih bersebelahan (h1 + p)

5. Pemilih kanak-kanak (ul < ; li)

6. Pemilih keturunan (li a)
7. Pemilih kad liar (*)
8. Pemilih atribut (a[rel = "luaran"])
9. Bekas pemilihan kelas pseudo (a: hover, li: nth - child)

* Gaya yang boleh diwarisi: fon-saiz fon-warna keluarga, UL LI DL DD DT;

* Gaya tidak boleh diwarisi: tinggi lebar jidar padding;

* Prinsip keutamaan, definisi gaya yang paling hampir akan diutamakan di bawah berat yang sama; contoh kelas pseudo baharu:

p:first-of-type memilih setiap

elemen yang dimiliki oleh elemen pertama

p:last-of-type memilih setiap

elemen yang terakhir

p:only-of-type memilih setiap

elemen yang merupakan satu-satunya

p:only-child Memilih setiap elemen

yang merupakan satu-satunya elemen anak bagi elemen induknya.
p:nth-child(2) Memilih setiap elemen

:enabled :disabled mengawal keadaan dilumpuhkan kawalan borang.
:ditanda Butang radio atau kotak semak ditanda.

Bagaimana untuk memusatkan div? Bagaimana untuk memusatkan elemen terapung?

Tetapkan lebar pada div, dan kemudian tambahkan margin:0 auto atribut

div{

width:200px;

margin:0 auto;

}

Pusat elemen terapung

Tentukan lapisan dengan lebar 500 dan ketinggian 300 bekas
Tetapkan jidar luar lapisan

.div {
Lebar:500px;//Ketinggian boleh diabaikan
Margin: -150px 0 250px;
kedudukan :relatif; Kedudukan relatif
warna latar:merah jambu;//Mudah untuk melihat kesannya
kiri:50%;
atas:50%;
}

Senaraikan nilai paparan dan terangkan fungsi. Apakah nilai kedudukan, asal kedudukan relatif dan mutlak?

1.
blok dipaparkan seperti elemen jenis blok.
tiada nilai lalai. Muncul seperti jenis elemen sebaris.
blok sebaris dipaparkan seperti elemen sebaris, tetapi kandungannya dipaparkan seperti elemen jenis blok.
senarai item dipaparkan seperti elemen jenis blok dan menambah penanda senarai gaya.

2.
*mutlak
Hasilkan elemen berkedudukan mutlak, diposisikan relatif kepada elemen induk pertama selain daripada kedudukan statik.

*tetap (IE lama tidak menyokong)
Hasilkan elemen berkedudukan mutlak, diposisikan berbanding tetingkap penyemak imbas.

*relatif
Menghasilkan elemen yang agak berkedudukan, berkedudukan berbanding kedudukan normalnya.

* Nilai lalai statik. Tanpa kedudukan, elemen muncul dalam aliran biasa
* (pengisytiharan indeks z atas, bawah, kiri, kanan diabaikan).

* warisan menentukan untuk mewarisi nilai atribut kedudukan daripada elemen induk.

Apakah ciri baharu CSS3?

CSS3 melaksanakan penjuru bulat (jejari sempadan:8px), bayang-bayang (bayang-kotak:10px),
Tambah kesan khas pada teks (bayang-teks,), kecerunan linear (kecerunan), putaran (transformasi)
transform:putar ( 9deg) skala(0.85,0.90) terjemah(0px,-30px) condong(-9deg,0deg);//Putaran, penskalaan, kedudukan, kecondongan
Menambah lebih banyak pemilih CSS rgba berbilang latar belakang

Cara penuh reka reka letak perkataan skrin

Apakah keserasian CSS yang sering ditemui? Punca dan penyelesaian?

Mengapa memulakan gaya CSS.

- Disebabkan isu keserasian penyemak imbas, penyemak imbas yang berbeza mempunyai nilai lalai yang berbeza untuk sesetengah teg Jika CSS tidak dimulakan, perbezaan paparan halaman antara penyemak imbas sering berlaku.

- Sudah tentu, gaya permulaan akan memberi impak tertentu pada SEO, tetapi anda tidak boleh memiliki kek anda dan memakannya juga, tetapi cuba mulakannya dengan kesan yang paling sedikit.

*Kaedah permulaan yang paling mudah ialah: * {padding: 0; margin: 0;} (tidak disyorkan)

Pengamatan gaya Taobao:
body, h1, h2, h3, h4, h5, h6, hr, p , blockquote , dl, dt, dd, ul, ol, li, pra, borang, set medan, lagenda, butang, input, kawasan teks, ke, td { margin:0 }
badan, butang, input, pilih , kawasan teks { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100% }
address, cite, dfn, em, var { font-style :normal ; }
kod, kbd, pra, samp { font-family:couriernew, courier, monospace }
small{ font-size:12px }
ul, ol { list-style:none; :tiada; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; set medan, img { border:0; }
button, input, pilih, textarea { font-size:100% }
jadual { border-collapse:0; kaedah pengiraan mengandungi blok berbeza daripada aliran biasa?

Apakah yang akan berlaku apabila ciri kedudukan, paparan, keruntuhan jidar, limpahan dan apungan ditindih antara satu sama lain?

Memahami spesifikasi BFC?

(Konsep dalam spesifikasi W3C CSS 2.1 yang menentukan cara sesuatu elemen meletakkan kandungannya, serta hubungan dan interaksinya dengan elemen lain.)

Berat ditakrifkan oleh css

Berikut ialah peraturan untuk berat: Tag Berat ialah 1, berat kelas ialah 10 dan berat id ialah 100. Contoh berikut menunjukkan nilai berat pelbagai definisi:

/*Beratnya ialah 1*/

div{
}

/ *Berat 10*/

.class1{

}

/*Berat 100*/
#id1{
}
/*Berat 100+1=101*/
#id1 div{
}
/ *Beratnya ialah 10+1=11* /
.class1 div{
}
/*Beratnya ialah 10+10+1=21*/
.class1 .class2 div{
}

Jika beratnya sama , gaya yang ditakrifkan terakhir akan berfungsi, tetapi ini harus dielakkan Situasi ini timbul


Terangkan apungan dan prinsip kerjanya? Petua untuk membersihkan terapung

Pernahkah anda menggunakan pertanyaan media untuk reka letak mudah alih?

Gunakan prapemproses CSS? Seperti yang itu?

SASS