[Kompilasi dan perkongsian] 75 mata ujian frekuensi tinggi dalam CSS untuk temuduga hadapan

Artikel ini akan merumuskan dan berkongsi dengan anda 75 mata ujian frekuensi tinggi dalam CSS untuk temu duga hadapan untuk membantu pelajar berjaya dalam pengambilan musim luruh Cepat dan simpan untuk belajar.

Teori

1.

Mod parse digunakan untuk mengawal model kotak elemen, lalainya ialah kotak kandungan

• context-box: W3C model Kotak standard, menetapkan atribut ketinggian/lebar elemen merujuk kepada ketinggian/lebar bahagian kandungan

• border-box: IAITU model kotak tradisional. Menetapkan atribut ketinggian/lebar elemen merujuk kepada ketinggian/lebar bahagian kandungan padding jidar

[Perkongsian video pembelajaran: tutorial video css, bahagian hadapan web 】

2. Kedudukan mutlak mutlak adalah relatif kepada siapa?

Sifat kedudukan CSS digunakan untuk menentukan cara sesuatu elemen diletakkan dalam dokumen.

elemen mutlak akan dialihkan keluar daripada aliran dokumen biasa, dan tiada ruang akan dikhaskan untuk elemen tersebut. Kedudukan elemen ditentukan dengan meletakkan elemen relatif kepada kedudukan bukan statik yang terdekat unsur nenek moyang . Elemen yang diposisikan secara mutlak boleh menetapkan margin dan tidak akan bergabung dengan margin lain.

3. Apakah perbezaan antara elemen sebaris dan elemen peringkat blok?

Elemen sebaris: Elemen sebaris hanya menduduki ruang yang terdapat pada sempadan label yang sepadan dengannya.

Elemen Tahap Blok: Elemen peringkat blok menduduki keseluruhan ruang elemen induknya (bekas), sekali gus mewujudkan "blok".

Perbezaan:

• Sama ada hendak memulakan baris baharu: Secara lalai, elemen sebaris tidak akan bermula pada baris baharu, manakala blok Elemen tahap akan bermula pada baris baharu.

• Sama ada lebar dan tinggi boleh ditetapkan: Elemen tahap blok boleh menetapkan atribut lebar dan ketinggian Nota: Walaupun lebar tahap blok elemen ditetapkan, ia masih menduduki baris eksklusif. Menetapkan lebar dan ketinggian untuk elemen sebaris adalah tidak sah.

• Sama ada jidar dalam dan luar boleh ditetapkan: Elemen aras blok boleh digunakan dan pelapik mendatar-kiri/kanan dan jidar-kiri/kanan sebaris elemen dijanakan kesan margin, tetapi padding menegak-atas/bawah, margin-atas/bawah tidak akan menghasilkan kesan margin. (Iaitu, arah mendatar adalah sah dan arah menegak tidak sah)

• Sama ada untuk memasukkan satu sama lain : Elemen peringkat blok boleh mengandungi elemen sebaris dan elemen peringkat blok. Elemen sebaris tidak boleh mengandungi elemen peringkat blok

4. Apakah elemen sebaris biasa dan elemen peringkat blok?

1. Elemen sebaris biasa

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img alt="[Kompilasi dan perkongsian] 75 mata ujian frekuensi tinggi dalam CSS untuk temuduga hadapan" ></select></textarea></button></abbr></small></b></strong></lable></a></span>

2. Elemen peringkat blok biasa

<div>、<p>、</p> <li>、<h1> ~ <h6>、</h6> </h1> <form>、<header>、<hr>、<ol>、</ol> <ul>、<article>、<aside>、<dd>、<dl> <h2 data-id="heading-6"><strong>5. Bagaimana untuk mengesan saiz fon minimum yang disokong oleh penyemak imbas? </strong></h2> <p>Anda boleh menggunakan JS untuk menetapkan fon DOM kepada nilai tertentu, dan kemudian mengeluarkannya Jika nilai itu berjaya ditetapkan, ini bermakna ia disokong. </p> <h2 data-id="heading-7"><strong>6. Apakah maksud "flex:1;" dalam CSS? </strong></h2> <p>flex ialah singkatan untuk flex-grow, flex-shrink dan flex-base. </p> <p>Sebagai tambahan kepada dua nilai pintasan ​​auto (1 1 auto) dan tiada (0 0 auto), terdapat juga kaedah tetapan berikut: </p> <ul> <li>Apabila flex mengambil nombor nilai bukan negatif, maka nombor itu ialah nilai flex-grow, flex-shrink mengambil 1, flex-basis mengambil 0%, berikut adalah bersamaan: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 1;} .item {     flex-grow: 1;     flex-shrink: 1;     flex-basis: 0%; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> </li> <li>Apabila nilai flex ialah 0, tiga yang sepadan Nilainya adalah 0 1 0% masing-masing<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 0;} .item {     flex-grow: 0;     flex-shrink: 1;     flex-basis: 0%; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> </li> </ul> <p>Untuk kaedah penulisan lanjut, sila pergi ke <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" textvalue="MDN-flex">MDN-flex</a> untuk melihat</p> <h2 data-id="heading-8"> <strong>7. Apakah pertanyaan media CSS? </strong> </h2> <p>Pertanyaan Media telah wujud seawal era CSS2, dan telah menjadi lebih berkuasa selepas dibaptiskan oleh CSS3 Dari sinilah ciri responsif bootstrap berasal.</p> <p>Secara umumnya, pertanyaan media ialah sintaks yang digunakan untuk mengubah suai apabila css berkuat kuasa Pengenalan </p> <blockquote><p> pertanyaan media membolehkan anda menambah ungkapan untuk menentukan persekitaran media untuk menggunakan helaian gaya yang berbeza. Dalam erti kata lain, ia membolehkan kami menukar reka letak halaman untuk menyesuaikan dengan tepat pada peranti berbeza tanpa mengubah kandungan </p></blockquote> <h2 data-id="heading-9"><strong>8 Apabila mengimport gaya ke dalam halaman, apakah perbezaan antara menggunakan pautan dan @import? </strong></h2> <ul> <li> <p>pautan ialah teg HTML, dan @import disediakan oleh css; dimuatkan pada masa yang sama , dan css yang dirujuk oleh @import akan menunggu sehingga halaman dimuatkan sebelum dimuatkan sebelum dimuatkan; hanya diiktiraf oleh IE5 atau ke atas; </p> </li> <li><p>Berat gaya pautan lebih tinggi daripada berat @import. </p></li> <li> <p></p>9. Mengapakah CSS tidak menyokong pemilih ibu bapa? </li> <li><p>Jawapan kepada soalan ini adalah sama seperti "Mengapakah pemilih adik beradik bersebelahan CSS hanya menyokong elemen berikut tetapi bukan elemen adik beradik sebelumnya?" </p></li>Pelayar menghuraikan dokumen HTML dari hadapan ke belakang, dari luar ke dalam. Oleh itu, kita sering melihat situasi pemuatan halaman di mana pengepala muncul dahulu dan kemudian kandungan utama muncul. </ul> <h2 data-id="heading-10">Walau bagaimanapun, jika CSS menyokong pemilih induk, maka semua elemen anak halaman mesti dimuatkan sebelum dokumen HTML boleh dipaparkan, kerana apa yang dipanggil "pemilih ibu bapa" bermakna unsur keturunan mempengaruhi unsur nenek moyang. Jika unsur keturunan masih Bagaimana untuk mempengaruhi gaya unsur nenek moyang tanpa memuatkan pemprosesan? Akibatnya, kelajuan pemaparan halaman web akan menjadi sangat perlahan dan pelayar akan mempunyai papan putih yang panjang. Secara umumnya, ia ditentukan oleh mekanisme pemaparan CSS dan HTML itu sendiri. <strong></strong> </h2>10. Apakah senario yang sesuai untuk margin dan padding? <p></p> <p>Bila hendak menggunakan margin? Ruang antara dua kotak perlu mengimbangi satu sama lain. </p> <p></p>Bila menggunakan pelapik: <h2 data-id="heading-11"> <strong></strong>Anda perlu menambah ruang kosong di dalam sempadan</h2> <p>Ruang kosong memerlukan warna latar belakang</p> <ul>Dua bersambung atas dan bawah Ruang kosong dua kotak dijangka menjadi jumlah kedua-duanya. <li> <li>11. Apakah nilai paparan? <li> </ul>Yang biasa adalah seperti berikut: <p></p> <p>其他的可以自行查阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" textvalue="MDN-display">MDN-display</a></p> <h2 data-id="heading-13"><strong>12. 两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？</strong></h2> <p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。</p> <p>解决方法：</p> <ul> <li>相邻元素代码代码全部写在一排</li> <li>浮动元素，float:left;</li> <li>在父级元素中用font-size:0;</li> </ul> <h2 data-id="heading-14"><strong>13. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？</strong></h2> <p><strong>display:none</strong>：元素不可见，不占据空间，无法响应点击事件</p> <p><strong>visibility:hidden</strong>：元素不可见，占据页面空间，无法响应点击事件</p> <p><strong>opacity:0</strong>：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</p> <p><strong>设置height、width属性为0</strong>：将元素的 margin，border，padding，height和width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素。特点：元素不可见，不占据页面空间，无法响应点击事件</p> <p><strong>position:absolute</strong>： 将元素移出可视区域，元素不可见，不影响页面布局</p> <p><strong>clip-path</strong>：通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p>最常用的还是<code>display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

#	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

14. Mengapakah projek bahagian hadapan perlu memulakan gaya CSS?

Disebabkan isu keserasian penyemak imbas, penyemak imbas yang berbeza mempunyai nilai lalai yang berbeza untuk teg Jika tiada permulaan CSS untuk penyemak imbas, halaman yang sama akan dipaparkan secara berbeza dalam penyemak imbas yang berbeza.

15. Apakah perbezaan antara paparan:tiada dan keterlihatan:tersembunyi?

Prestasi

• paparan:tiada hilang sepenuhnya, tidak menduduki tempat dalam aliran dokumen dan penyemak imbas tidak akan menghuraikan elemen;
• keterlihatan:tersembunyi hilang secara visual, yang boleh difahami sebagai kesan ketelusan menjadi 0. Ia mengambil ruang dalam aliran dokumen dan penyemak imbas akan menghuraikan elemen

Prestasi Dihidupkan

• menggunakan visibility:hidden adalah lebih baik daripada display:none dari segi prestasi Apabila paparan:none menukar paparan, halaman akan mengalir semula (apabila beberapa elemen dalam halaman perlu menukar saiz, susun atur, paparan Sembunyikan, dsb., halaman itu dibina semula, dan ini adalah aliran semula (semua halaman perlu menjana aliran semula apabila ia dimuatkan buat kali pertama), tetapi suis keterlihatan tidak akan menyebabkan aliran semula.

16. Apakah ciri baharu CSS3?

Pemilih: pemilih adik beradik universal, pemilih kelas pseudo, pemilih unsur pseudo, pemilih negatif, pemilih kelas pseudo status

Gaya baharu : jidar, bayang-bayang kotak, latar belakang, teks, warna

• Sempadan:

  • jejari sempadan: Buat jidar bulat
  • bayang kotak: Tambahkan bayang pada elemen
  • imej sempadan: Gunakan imej untuk melukis sempadan

• Latar belakang: Beberapa atribut baharu tentang latar belakang telah ditambah, iaitu background-clip, background-origin, background-size dan background-break

• Teks: word-wrap, text-overflow, text - bayang, hiasan teks

peralihan: peralihan

transformasi: transformasi

Animasi: animasi

Lain-lain: kecerunan, flexsusun atur fleksibel, Gridreka letak grid, pertanyaan media, mod pengadunan, dsb...

17. Apakah pecutan perkakasan?

• Pecutan perkakasan adalah untuk menyerahkan proses pemaparan penyemak imbas kepada GPU dan bukannya menggunakan pemapar perlahan terbina dalam. Ini akan menjadikan animation dan transition lebih lancar.

• Kami boleh menggunakan CSS untuk mendayakan pecutan perkakasan dalam penyemak imbas bagi membolehkan GPU (Unit Pemprosesan Grafik) berfungsi, sekali gus meningkatkan prestasi.

• Kebanyakan kad grafik komputer kini menyokong pecutan perkakasan. Memandangkan ini, kami boleh menggunakan kuasa GPU untuk menjadikan tapak web atau aplikasi kami berfungsi dengan lebih lancar.

18 Apakah perbezaan antara kolon berganda dan kolon tunggal dalam ::sebelum dan :selepas? Terangkan apa yang mereka lakukan?

• Satu titik bertindih (:) digunakan untuk kelas pseudo CSS3 biasanya sepadan dengan beberapa keadaan khas elemen, seperti tuding, pautan, dll.,

• Double colon (::) digunakan untuk unsur pseudo CSS3 (unsur pseudo terdiri daripada dua titik dan nama unsur pseudo), dan unsur pseudo biasanya sepadan dengan kedudukan khas, seperti selepas, sebelum, dsb. .

• Elemen pseudo yang diperkenalkan dalam CSS3 baharu tidak lagi menyokong kolon tunggal lama Ini ditulis

• Anda mahu kandungan yang disisipkan. muncul dalam Sebelum kandungan lain, gunakan ::sebelum, jika tidak gunakan ::selepas Dari segi susunan kod, kandungan yang dihasilkan oleh ::selepas juga lebih lewat daripada kandungan yang dihasilkan oleh ::sebelum

pseudo-class

19. Apakah susunan peraturan pemadanan CSS?

Saya percaya kebanyakan pemula akan berfikir bahawa pemadanan CSS adalah dari kiri ke kanan, tetapi sebenarnya ia adalah sebaliknya.

Padanan CSS berlaku apabila Render Tree dibina (Chrome Dev Tools mengaitkan ini dengan proses Reka Letak). Pada masa ini, penyemak imbas telah membina DOM dan memperoleh gaya CSS Apa yang perlu dilakukan pada masa ini ialah memadankan gaya dengan nod pada DOM Perkara yang perlu dilakukan oleh penyemak imbas untuk meningkatkan prestasi ialah pemadanan pantas .

Pertama sekali, mari jelaskan bahawa penyemak imbas sedang mencari peraturan yang sepadan untuk nod "kelihatan" Ini berbeza daripada pemilih jQuery, yang menggunakan peraturan untuk mencari nod yang sepadan, jadi dari kiri ke Kanan mungkin lebih pantas. Tetapi untuk yang pertama, disebabkan saiz CSS yang besar, mungkin terdapat beribu-ribu peraturan dalam fail CSS, dan untuk nod semasa, kebanyakan peraturan tidak dapat dipadankan Jika anda memikirkannya sejenak, anda akan tahu bahawa jika anda mula memadankan dari kanan (juga dari kanan) Bermula dari kedudukan yang lebih tepat), kebanyakan nod yang tidak sesuai boleh dihapuskan dengan lebih cepat Jika anda bermula dari kiri, anda akan mendapati bahawa padanan itu gagal hanya apabila anda pergi lebih mendalam. Jika kebanyakan peringkat peraturan agak mendalam, ia akan menjadi pembaziran sumber.

Selain perkara di atas, kami juga menyebut sebelum ini bahawa pembinaan DOM adalah "langkah demi langkah", dan DOM tidak menyekat pembinaan Render Tree (hanya blok CSSOM). dipaparkan lebih awal pada halaman.

Pertimbangkan situasi berikut Jika kita membina hanya sebahagian daripada DOM pada masa ini dan CSSOM selesai, penyemak imbas akan membina Pokok Render.

Pada masa ini, untuk setiap nod, jika peraturan didapati sepadan dari kanan ke kiri, kita hanya perlu memerhati sama ada nod induk nod itu sepadan dengan lapisan demi lapisan, dan nod induknya mestilah sudah pada DOM pada masa ini.

Tetapi sebaliknya, kami mungkin memadankan nod yang belum wujud pada DOM dan proses pemadanan pada masa ini membazirkan sumber.

20 Apakah cara untuk mengoptimumkan CSS dan meningkatkan prestasi?

• Elakkan terlalu kekangan

• Elakkan pemilih keturunan

• Elakkan pilihan berantai Simbol

• Gunakan sintaks padat

• Elakkan ruang nama yang tidak perlu

• Elakkan yang tidak perlu Pengulangan

• sebaiknya dilakukan dengan menggunakan nama semantik. Nama kelas yang baik harus menggambarkan apa itu dan bukannya sesuatu seperti

• Elakkan !important dan pilih pemilih lain

• bila-bila boleh Untuk menyelaraskan peraturan, anda boleh menggabungkan peraturan berulang dalam kategori berbeza

21. Apakah perbezaan jika tag gaya ditulis sebelum atau selepas badan?

Halaman dimuatkan dari atas ke bawah Sudah tentu, gaya dimuatkan dahulu.

ditulis selepas teg badan Memandangkan penyemak imbas menghuraikan dokumen HTML baris demi baris, menghuraikan helaian gaya yang ditulis di hujung (garis besar atau ditulis dalam teg gaya) akan menyebabkan penyemak imbas menghentikan pemaparan sebelumnya. . , tunggu untuk memuatkan dan menghuraikan helaian gaya sebelum memaparkan semula fenomena FOUC dalam Windows (iaitu masalah kelipan halaman yang disebabkan oleh kegagalan gaya)

22 unsur Adakah ia relatif kepada ketinggian bekas?

Apabila lebar elemen ditetapkan sebagai peratusan, ia dikira relatif kepada lebar bekas induk Walau bagaimanapun, untuk sesetengah atribut yang mewakili jarak menegak, seperti pelapik atas, pelapik -bottom , margin-top, margin-bottom, dsb., apabila menetapkannya mengikut peratusan, ia juga berdasarkan lebar bekas induk, bukan ketinggian.

23. Apakah perbezaan antara peralihan dan animasi?

• transition ialah atribut yang terlalu menekankan dan pelaksanaannya perlu mencetuskan peristiwa (seperti pergerakan tetikus, fokus, klik, dll.) sebelum melaksanakan animasi . Ia serupa dengan animasi tweening kilat, menetapkan kerangka utama mula dan bingkai kunci tamat.

• animation ialah atribut animasi Pelaksanaannya tidak memerlukan peristiwa pencetus Ia boleh dilaksanakan dengan sendirinya selepas menetapkan masa dan animasi boleh digelung. Ia juga serupa dengan animasi flash tween, tetapi ia boleh menetapkan berbilang bingkai utama (ditakrifkan dengan @keyframe) untuk melengkapkan animasi.

24. Beritahu saya tentang pemahaman anda tentang model kotak?

Apabila meletakkan dokumen, enjin pemaparan penyemak imbas akan mewakili semua elemen sebagai Kotak segi empat tepat (kotak)

Kotak terdiri daripada empat bahagian: content, padding, border, margin

Model kotak standard: Model kotak standard, iaitu model kotak lalai penyemak imbas

Seperti yang anda boleh lihat daripada gambar di atas:

• Jumlah lebar kotak = lebar jidar sempadan padding;
• Jumlah ketinggian kotak = jidar sempadan padding ketinggian

Iaitu, width/height hanyalah ketinggian kandungan, tidak termasuk nilai padding dan border 

Jadi dalam soalan di atas, width ditetapkan kepada 200px, tetapi perlu kepada kewujudan padding, lebar kotak sebenarnya adalah 240px

IE model kotak pelik

Seboleh-bolehnya lihat daripada gambar di atas:

• Jumlah lebar kotak = jidar lebar;
• Jumlah tinggi kotak = jidar ketinggian;

Iaitu, width/height mengandungi nilai padding  dan border 

25. Apakah Atom CSS? Apakah kelebihan dan kekurangan?

Atom CSS: Atomic CSS bermaksud kelas hanya melakukan satu perkara.

Berbeza daripada peraturan BEM yang biasa digunakan, atomic css bermaksud pemisahan dan semua kelas CSS mempunyai peraturan CSS yang unik

Kelebihan

• Mengurangkan saiz css dan meningkatkan penggunaan semula css

• Mengurangkan kerumitan penamaan

Kelemahan

• Kos memori meningkat. Selepas membahagikan CSS kepada atom, anda mesti mengingati beberapa kelas sebelum menulis Walaupun tailwindcss menyediakan rantai alat yang lengkap, apabila anda menulis latar belakang, anda mesti ingat bahawa permulaan adalah bg.

• meningkatkan kerumitan struktur html. Apabila seluruh dom mempunyai nama kelas sedemikian, ia pasti akan menyebabkan masalah dalam penyahpepijatan Kadangkala sukar untuk mencari masalah css tertentu

• 你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

26. 脱离文档流有哪些方法？

• float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

• absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

• fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

27. CSSOM树和DOM树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

28. CSS Sprites 是什么，如何使用？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点：

• 图片合成比较麻烦；
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

29. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

• canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。

• 而style的width和height是canvas在浏览器中被渲染的高度和宽度。

• 如果canvas的width和height没指定或值不正确，就被设置成默认值。

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input> <input>

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题

这种表现是符合规范的应该有的表现。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉

• 移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了

• 使用margin负值

  .space a { 
      display: inline-block; 
      margin-right: -3px; 
  }

• 使用font-size:0

  .space { font-size: 0; } 
  .space a { font-size: 12px; }

• 使用letter-spacing

  .space { letter-spacing: -3px; } 
  .space a { letter-spacing: 0; }

• 使用word-spacing

  .space { word-spacing: -6px; } 
  .space a { word-spacing: 0; }

32. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

它们的优点？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。

• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

33. CSS3 新增伪类有哪些？

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中
• ...

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

• 浏览器可以对动画进行优化
• 代码相对简单,性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

• 运行过程控制较弱,无法附加事件绑定回调函数
• 代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

• 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
• CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

• 代码的复杂度高于CSS动画
• JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

什么时候需要清除浮动：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

• 父级div定义height
• 最后一个浮动元素后加空div标签 并添加样式clear:both。
• 包含浮动元素的父标签添加样式overflow为hidden或auto。
• 父级div定义zoom

36. IconFont 的原理是什么？

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体，基本用法如下：

@font-face { 
    font-family: <yourfontname>; 
    src: <url> [<format>],[<source> [<format>]], *; 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}</style></weight></format></source></format></url></yourfontname>

• font-family：为载入的字体取名字。
• src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
• font-weight：定义加粗样式。
• font-style：定义字体样式。

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

• display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

• display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
• visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

• display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
• visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
• opacity: 0:修改元素会造成重绘，性能消耗较少

38. CSS 中有哪些定位方式？（position有哪些属性值？）

static: 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。 当父元素使用了transform的时候，会以父元素定位。

sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

容器成员属性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self

更多属性写法可前往 MDN-flex 查看

40 Bilakah atribut indeks-z akan menjadi tidak sah?

Biasanya indeks-z digunakan apabila terdapat dua label yang bertindih Dalam keadaan tertentu, salah satu daripadanya boleh dikawal untuk muncul di atas atau di bawah yang lain. Semakin besar nilai indeks-z, semakin tinggi nilainya. Atribut kedudukan unsur indeks-z perlu relatif, mutlak atau tetap.

Atribut indeks-z akan menjadi tidak sah di bawah keadaan berikut:

• Apabila kedudukan elemen induk adalah relatif, indeks-z unsur anak akan menjadi tidak sah. Penyelesaian: Tukar kedudukan elemen induk kepada mutlak atau statik; elemen

• tidak menetapkan atribut kedudukan kepada atribut bukan statik. Penyelesaian: Tetapkan atribut kedudukan elemen kepada salah satu daripada unsur relatif, mutlak atau tetap; Penyelesaian: Alih keluar pelampung dan tukar kepada paparan: inline-block;

• 41 Bagaimana untuk mencetuskan BFC dan apakah senario aplikasi BFC?

Klik untuk pergi ke: Perbincangan ringkas tentang reka letak bahagian hadapan BFC

Adakah pemuatan CSS akan menyebabkan penyekatan?

Biar saya mulakan dengan kesimpulan:

pemuatan css tidak akan menyekat penghuraian pokok DOM

pemuatan css akan menyekat pemaparan Pokok DOM

• Pemuatan css akan menyekat pelaksanaan pernyataan js berikutnya
• Untuk mengelakkan pengguna melihat masa skrin putih yang panjang, kami harus meningkatkan kelajuan pemuatan css sebanyak mungkin . Contohnya, anda boleh menggunakan kaedah berikut :

Gunakan CDN (kerana CDN akan memilih nod terdekat dengan kandungan cache untuk memberikan anda sumber berdasarkan keadaan rangkaian anda, jadi ia boleh kurangkan masa pemuatan)

• Mampat CSS (anda boleh menggunakan banyak alat pembungkusan, seperti webpack, tegukan, dll., atau anda boleh menghidupkan pemampatan gzip)

• Gunakan cache secara munasabah ( Adalah baik untuk menetapkan kawalan cache, tamat tempoh dan E-tag, tetapi satu perkara yang perlu diambil perhatian ialah selepas fail dikemas kini, anda perlu mengelakkan kesan caching. Salah satu penyelesaiannya ialah menambah nombor versi selepas nama fail )

• Kurangkan bilangan permintaan http, gabungkan berbilang fail css atau tulis gaya sebaris secara langsung (kelemahan gaya sebaris ialah. bahawa mereka tidak boleh dicache)

• 43 Mari kita bincangkan secara ringkas tentang proses pemaparan penyemak imbas

Proses pemaparan pelayar adalah seperti berikut:

Fail penghuraian HTML , jana DOM Tree, hurai fail CSS untuk menjana CSSOM Tree

• Gabungkan Dom Tree dan CSSOM Tree untuk menjana Render Tree (rendering tree )

• Render dan lukis mengikut Pokok Render, menjadikan piksel ke skrin.

• Kita boleh lihat daripada proses itu:

Penghuraian DOM dan penghuraian CSS ialah dua proses selari, jadi ini juga menerangkan sebab Pemuatan CSS tidak blok penghuraian DOM.

• Walau bagaimanapun, memandangkan Pokok Render bergantung pada Pokok DOM dan Pokok CSSOM, ia mesti menunggu sehingga Pokok CSSOM dibina, iaitu, pemuatan sumber CSS selesai (atau CSS pemuatan sumber gagal) Selepas itu, rendering boleh dimulakan. Oleh itu, pemuatan CSS akan menyekat pemaparan Dom.

• Memandangkan js mungkin beroperasi pada nod Dom dan gaya css sebelumnya, penyemak imbas akan mengekalkan susunan css dan js dalam html. Oleh itu, helaian gaya akan dimuatkan dan dilaksanakan sebelum js seterusnya dilaksanakan. Oleh itu, css akan menyekat pelaksanaan js seterusnya.

• 44 Bagaimanakah js dan css mempengaruhi pembinaan pokok DOM?

Klik untuk pergi:

Bagaimanakah js dan css mempengaruhi pembinaan pokok DOM?

45. Bagaimana untuk memahami aliran semula dan lukis semula? Dalam keadaan apakah ia akan dicetuskan?

Klik untuk pergi ke:

"Alir Semula dan Lukis Semula" halaman hujung hadapan

46. Apakah prinsip asas reka bentuk responsif? Bagaimana untuk melaksanakannya?

Apa itu: Reka bentuk Web responsif ialah reka bentuk reka bentuk halaman rangkaian Reka bentuk dan pembangunan halaman harus berdasarkan tingkah laku pengguna dan persekitaran peranti (platform sistem), skrin saiz, orientasi skrin, dsb.) untuk bertindak balas dan melaraskan dengan sewajarnya

Ayat paling terkenal yang menerangkan antara muka responsif ialah "Kandungan seperti air", dan bahasa vernakular ialah "Jika skrin dianggap sebagai bekas, maka Kandungan seperti air”

Ciri biasa tapak web responsif:

Penyesuaian serentak pada PC, tablet, telefon mudah alih, dll.

Navigasi tab bertukar kepada apabila menghampiri peranti terminal pegang tangan Navigasi laci klasik

Susun atur tapak web akan melaraskan saiz dan kedudukan modul mengikut port pandangan
• Prinsip asas:
• prinsip asas reka bentuk responsif ialah Mengesan saiz skrin peranti yang berbeza melalui pertanyaan media untuk pemprosesan Pelaksanaan reka bentuk responsif biasanya mengambil kira aspek berikut:
• 弹性盒子（包括图片、表格、视频）和媒体查询等技术
• 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
• 使用相对单位使得内容自适应调节
• 选择断点，针对不同断点实现不同布局和内容展示

总结：

响应式布局优点：

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

47. 说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

48. CSS 中1像素问题是什么？有哪些解决方案？

1px边框问题由来： 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

50. CSS 单位中 px、em 和 rem 的区别？

• px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位

• em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小，因此并不是一个固定的值

• rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

51. Bagaimana untuk menggunakan CSS untuk meningkatkan prestasi halaman?

Klik untuk pergi ke: Bagaimana untuk menggunakan CSS untuk meningkatkan prestasi halaman?

52 Apakah perbezaan antara jarak huruf dan jarak perkataan?

letter-spacing berfungsi pada semua aksara, tetapi word-spacing hanya berfungsi pada aksara angkasa. Dalam erti kata lain, peranan jarak perkataan adalah untuk meningkatkan lebar jurang ruang.

53. Apakah itu kedudukan mutlak tanpa pergantungan?

Kedudukan mutlak tanpa menetapkan nilai atribut kiri/atas/kanan/bawah dipanggil "kedudukan mutlak bebas pergantungan". Kedudukan kedudukan mutlak bebas pergantungan adalah berkaitan dengan kedudukan apabila position:absolute tidak ditetapkan.

54 garis panduan?

(1) Siapa yang lebih besar, siapa di atas: Apabila terdapat pengecam tahap tindanan yang jelas, seperti nilai atribut indeks-z yang berkesan, dalam medan konteks tindanan yang sama, yang mempunyai nilai tahap susun yang lebih besar Tutup yang lebih kecil.

(2) Datang dari belakang: Apabila tahap tindanan elemen adalah konsisten dan susunan tindanan adalah sama, elemen kemudian dalam aliran DOM akan menimpa unsur sebelumnya.

55. Apakah keistimewaan berat fon?

Jika anda menggunakan nilai berangka sebagai nilai atribut font-weight, ia mestilah integer dari 100 hingga 900. Oleh kerana nilai berangka di sini hanya kelihatan seperti nilai berangka, ia sebenarnya adalah kata kunci dengan makna khusus dan terdapat hubungan yang sepadan antara kata kunci berangka dan kata kunci huruf di sini.

56 Apakah ciri khas inden teks?

(1) inden teks hanya sah untuk baris pertama kandungan kotak sebaris.

(2) Nilai inden teks yang ditetapkan untuk elemen sebaris selain daripada elemen tidak diganti yang nilai pengiraan paparan adalah sebaris adalah tidak sah Jika nilai yang dikira ialah blok sebaris/jadual sebaris, ia akan berkuat kuasa .

(3)<input>Nilai inden teks butang label adalah tidak sah.

(4)<button></button>Nilai inden teks butang label adalah sah.

(5) Nilai peratusan inden teks dikira secara relatif kepada "blok yang mengandungi" elemen semasa, bukan elemen semasa.

57. Apakah kelebihan dan keburukan menggunakan susun atur rem?

Kelebihan: Dalam era resolusi skrin yang berbeza-beza secara meluas, penskalaan keseluruhan halaman boleh dicapai dengan mengaitkan rem dengan resolusi skrin, menjadikan paparan seragam pada peranti bangun. Selain itu, kebanyakan pelayar kini menyokong rem, dan keserasian juga sangat baik.

Kelemahan:

(1) Prestasinya tidak begitu baik pada peralatan DPR yang pelik, contohnya, sesetengah model mewah Huawei akan menyebabkan kekeliruan apabila menggunakan rem susun atur.

(2) Terdapat juga masalah menggunakan rujukan iframe.

(3) rem tidak konsisten dengan falsafah reka bentuk dua platform utama semasa dalam menyesuaikan diri dengan berbilang saiz skrin. Iaitu, sama ada kemunculan skrin besar adalah untuk melihat perkara yang lebih besar dan lebih jelas, atau untuk melihat lebih banyak lagi. soalan.

58. Apakah lebar minimum yang diutamakan?

"Lebar minimum yang diutamakan" merujuk kepada lebar minimum yang mana elemen paling sesuai. Lebar minimum untuk skrip Asia Timur (seperti bahasa Cina) ialah lebar setiap aksara Cina. Lebar minimum teks Barat ditentukan oleh unit bersebelahan tertentu aksara Inggeris. Tidak semua aksara Inggeris membentuk unit berterusan, dan biasanya ditamatkan dengan ruang (ruang biasa), sempang, tanda soal dan aksara bukan bahasa Inggeris yang lain.

Jika anda mahu aksara Inggeris sama dengan bahasa Cina, dan setiap aksara menggunakan unit lebar minimum, anda boleh cuba menggunakan word-break:break-all dalam CSS.

59. Mengapakah ketinggian:100% tidak sah?

Untuk elemen dalam aliran dokumen biasa, untuk nilai peratusan ketinggian berfungsi, induknya mesti mempunyai nilai ketinggian yang boleh berkuat kuasa.

Alasannya ialah jika ketinggian blok yang mengandungi tidak dinyatakan secara eksplisit (iaitu, ketinggian ditentukan oleh kandungan), dan elemen tidak diletakkan secara mutlak, nilai yang dikira adalah auto ditafsirkan sebagai auto, ia tidak boleh mengambil bahagian dalam pengiraan.

Elemen yang menggunakan kedudukan mutlak akan mempunyai nilai yang dikira, walaupun jika ketinggian elemen nenek moyang dikira sebagai auto.

60 Mengganti peraturan antara atribut lebar-min/lebar-maks dan tinggi-min/tinggi-maks?

(1) lebar maks akan mengatasi lebar, walaupun lebar ialah gaya baris atau !penting ditetapkan.

(2) lebar min akan mengatasi lebar maks Peraturan ini berlaku apabila lebar min dan lebar maks.

61. Apakah model kotak sebaris?

(1) Kawasan kandungan. Kawasan kandungan merujuk kepada kotak yang tidak kelihatan di sekeliling teks Saiznya hanya dikawal oleh ciri-ciri watak itu pada dasarnya. (kotak aksara); tetapi untuk beberapa elemen, seperti elemen penggantian seperti gambar, kandungannya jelas bukan teks, dan tidak ada kotak aksara Oleh itu, untuk ini Elemen, kawasan kandungan boleh dianggap sebagai elemen itu sendiri.

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒 子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

代码篇

1. 下面代码中，p标签的背景色是什么？

<style>
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div>
     <div>
         <p>xxxx</p>
     </div>
</div>

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 所以本题的分析思路是：

• 先比较高权重位，即第一个样式的高权重为 #god = 100
• 第二个样式的高权重为 #god + #text = 200
• 100
• 所以最终计算结果是取 width: 250px;
• 若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div>
    <div></div>
    <div></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

Flex 布局会默认：

• 把所有子项变成水平排列。
• 默认不自动换行。
• 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

手写篇

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

3. 如何使用 CSS 画一个三角形

.box {
   width: 0;
   height: 0;
   border-style:solid;
   border-width: 0 50px 50px;
   border-color: transparent transparent #d9534f;
}

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div>
    <div>左边</div>
    <div>右边</div>
</div>

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div>
    <div>左边</div>
    <div>右边</div>
  </div>

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div>
    <div>左侧</div>
    <div>中间</div>
    <div>右侧</div>
  </div>

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: &#39;&#39;;
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div>
    <span>哈哈哈</span>：
    <span>哈哈哈</span>
  </div>

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

   //scss
  .item {
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          min-width: 100px;
          text-align: justify;
          text-align-last: justify;
      }
      .value {
          padding-right: 10px;
      }
  }

6. 使用 CSS 实现一个无限循环动画

  <style>
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image></image>

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      /* 溢出隐藏 */
      overflow: hidden;           
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;   
      /* 规定段落中的文本不进行换行   */
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>


    <div>
        <div>small</div>
    </div>

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

5. 使用flex

方法一：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

方法二：

  .box {
    display: flex;
    justify-content: center;
  }
  .small {
    align-self: center;
  }

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci [Kompilasi dan perkongsian] 75 mata ujian frekuensi tinggi dalam CSS untuk temuduga hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!