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 (dalam ) elemen yang ditandakan atau ditukar kepada keadaan hidup Pengguna boleh menukar keadaan ini dengan mengklik pada elemen, atau memilih nilai yang berbeza, yang mana :checked pseudo-class tidak lagi digunakan pada elemen ini, tetapi akan digunakan pada yang berkaitan.

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!