Bab CSS bank soalan ujian bertulis bahagian hadapan web
Dalam artikel sebelumnya "Bank soalan ujian bertulis bahagian hadapan web - HTML ", kami berkongsi beberapa soalan temuduga bahagian hadapan tentang HTML. Artikel berikut mengikuti yang sebelumnya dan berkongsi soalan ujian bertulis (dengan jawapan) untuk bahagian CSS Mari lihat berapa banyak daripada mereka yang boleh anda jawab dengan betul!
1: Adakah sifat CSS sensitif huruf?
```
ul {
MaRGin: 10px;
}
```J: Tiada perbezaan. HTML dan CSS tidak peka huruf besar-besaran, tetapi untuk kebolehbacaan yang lebih baik dan kerjasama pasukan, ia biasanya menggunakan huruf kecil Dalam XHTML, nama dan atribut elemen mestilah huruf kecil.
2. S: Adakah menetapkan margin atas dan margin bawah pada elemen sebaris berfungsi?
J: Tidak berfungsi. (Jawapannya ialah ia berfungsi, tetapi saya secara peribadi berpendapat ia salah.) Elemen dalam
html dibahagikan kepada elemen diganti dan elemen tidak diganti.
Elemen pengganti ialah elemen yang digunakan sebagai ruang letak untuk kandungan lain. Yang paling tipikal ialah img, yang hanya menunjuk ke fail imej. Dan kebanyakan elemen bentuk juga diganti, seperti input, dll.
Elemen yang tidak diganti ialah elemen yang kandungannya disertakan dalam dokumen. Sebagai contoh, perenggan ialah unsur tidak diganti jika kandungan teksnya diletakkan dalam elemen itu sendiri.
Untuk membincangkan sama ada margin atas dan margin bawah berfungsi pada elemen sebaris, kita perlu membincangkan elemen gantian sebaris dan elemen bukan gantian sebaris secara berasingan.
Pertama sekali, kita harus menjelaskan bahawa margin boleh digunakan pada elemen sebaris Ia dibenarkan dalam spesifikasi Walau bagaimanapun, memandangkan margin digunakan pada elemen sebaris yang tidak diganti, ia tidak mempunyai kesan pada ketinggian garisan. Oleh kerana margin sebenarnya telus. Jadi tiada kesan visual pada pengisytiharan margin-atas dan margin-bawah. Sebabnya ialah margin elemen tidak diganti sebaris tidak mengubah ketinggian garis elemen. Ini tidak berlaku untuk jidar kiri dan kanan unsur tidak diganti sebaris, yang mempunyai kesan.
Jidar yang ditetapkan untuk elemen yang diganti akan mempengaruhi ketinggian garisan, yang mungkin menambah atau menurunkan ketinggian garisan, bergantung pada nilai jidar atas dan bawah. Jidar kiri dan kanan elemen yang diganti sebaris mempunyai kesan yang sama seperti jidar kiri dan kanan unsur yang tidak diganti. Mari lihat demo:
http://codepen.io/paddingme/pen/JwCDF
3 S: Adakah mungkin untuk menetapkan padding-top dan padding -bawah untuk elemen sebaris Adakah ia akan meningkatkan ketinggiannya?
(Soalan asal ialah Adakah menetapkan padding-top dan padding-bottom pada elemen sebaris menambah dimensinya?)
J: Jawapannya tidak. Saya agak keliru tentang soalan yang sama Saya tidak begitu faham apa yang dimaksudkan dengan dimensi di sini. Ketepikan dan mari analisa. Untuk elemen sebaris, tetapkan padding kiri dan kanan, dan padding kiri dan kanan akan kelihatan. Apabila menetapkan pelapik atas dan bawah, anda boleh melihat bahawa kawasan pelapik bertambah selepas menetapkan warna latar belakang Untuk elemen sebaris yang tidak diganti, ketinggian baris tidak akan terjejas dan elemen induk tidak akan diregangkan. Untuk elemen yang diganti, elemen induk dikembangkan. Lihat demo untuk pemahaman yang lebih baik:
http://codepen.io/paddingme/pen/CnFpa
4 S: Tetapkan saiz fon p : 10rem , adakah saiz teks akan berubah apabila pengguna menetapkan semula atau menyeret tetingkap penyemak imbas?
J: Tidak.
rem ialah unit ukuran relatif berdasarkan saiz saiz fon dalam elemen akar HTML Saiz teks tidak akan berubah apabila saiz tetingkap berubah.
5. S: Pemilih kelas pseudo: yang ditanda akan bertindak pada jenis input radio atau kotak pilihan, dan tidak akan bertindak mengikut pilihan.
J: Tidak.
Takrifan pemilih kelas pseudo yang diperiksa adalah jelas:
Pemilih kelas pseudo CSS :checked mewakili mana-mana radio (
), kotak semak () atau pilihan (
6 S: Dalam teks HTML, pseudo -class Class:root sentiasa menunjuk kepada elemen html?
J: Tidak (jawapan diberikan sebagai ==||). Berikut dipetik daripada Zhihu: Adakah root dan html merujuk kepada elemen yang sama dalam CSS3? Jawapan:
Jari tunggal mencipta akar. Akar ini mungkin bukan html , jika ia adalah serpihan html dan tiada akar dicipta, ia akan menjadi akar serpihan. Masukkan URL di bawah ke dalam penyemak imbas yang menyokong URL data (Firefox, Chrome, Safari, Opera) dan anda akan melihat:
data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>7. S: Kaedah translate() boleh menggerakkan The kedudukan unsur pada paksi z?
J: Tidak. Kaedah translate() hanya boleh menukar anjakan pada paksi-x dan paksi-y.
8. S: Apakah warna teks "Sosej" dalam kod berikut?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul {color:red;}
li {color:blue;}A: biru.
9. S: Apakah warna teks "Sosej" dalam kod berikut?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul {color:red;}
#must-buy {color:blue;}A: biru.
10. S: Apakah warna teks "Sosej" dalam kod berikut?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}A: biru.
11、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}A: blue。
12、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}A: blue。
13、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}A: blue。
14、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}A: blue。
15、Q:#example位置如何变化：
<p id="example">Hello</p>
#example {margin-bottom: -5px;}A: 向上移动5px。
16、Q: #example位置如何变化：
<p id="example">Hello</p>
#example {margin-left: -5px;}A: 向左移动5px。
17、#i-am-useless 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#i-am-useless {background-image: url('mypic.jpg');}A: 不会
18、mypic.jpg 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#test2 {
background-image: url('mypic.jpg');
display: none;
}A: 会被下载。
19、mypic.jpg 会被浏览器加载吗？
<div id="test1">
<span id="test2"></span>
</div>#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}A: 不会被下载。
20、Q: only 选择器的作用是？
@media only screen and (max-width: 1024px) {argin: 0;}A：停止旧版本浏览器解析选择器的其余部分。
only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。
21、Q:overfloa:hidden 是否形成新的块级格式化上下文？
<div>
<p>I am floated</p>
<p>So am I</p>
</div>div {overflow: hidden;}
p {float: left;}A：会形成。
会触发BFC的条件有：
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。
22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？
@media only screen and (max-width: 1024px) {margin: 0;}A: 浏览器视窗
（学习视频分享：css视频教程）
Atas ialah kandungan terperinci Bab CSS bank soalan ujian bertulis bahagian hadapan web. 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
1376
52
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara Mengesahkan Tarikh Bootstrap
Apr 07, 2025 pm 03:06 PM
Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.
Cara menetapkan bar navigasi bootstrap
Apr 07, 2025 pm 01:51 PM
Bootstrap Menyediakan panduan mudah untuk menubuhkan bar navigasi: Memperkenalkan Perpustakaan Bootstrap untuk membuat bar navigasi Tambah Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)
