Kongsi 6 soalan temu bual tentang model kotak CSS Berapa banyak yang anda boleh jawab dengan betul?

Artikel ini akan berkongsi dengan anda 6 soalan temu bual tentang model kotak CSS Semak sebarang jurang dan isikannya. Berapa banyak daripada enam soalan temu bual ini yang boleh anda jawab dengan betul? Bolehkah anda mendapatkan mereka semua betul?

Untuk temu bual bahagian hadapan, model kotak css pastinya merupakan titik pengetahuan bahagian hadapan yang mesti ditanya, kerana ia merupakan kandungan yang sangat penting dalam asas CSS , dan ia berkaitan dengan Terdapat juga banyak pengetahuan, jadi bagaimana anda biasanya bertanya soalan langkah demi langkah dalam temuduga? Mari lihat di bawah!

1. Beritahu saya tentang pemahaman anda tentang model kotak CSS?

Jawapan Pantas

Semua elemen HTML boleh dianggap sebagai kotak. Dalam CSS, istilah "model kotak" atau "model kotak" digunakan apabila bercakap tentang reka bentuk dan susun atur. Model kotak CSS pada asasnya ialah kotak yang mengelilingi setiap elemen HTML.

Ia termasuk:

• jidar luar→ jidar
• sempadan→ sempadan
• padding→ padding
• Kandungan sebenar → kandungan

Ia mempunyai dua jenis: model standard dan model IE

Analisis pengetahuan

Model kotak , Bahasa Inggeris model kotak.

• Sama ada div, span atau a, ia adalah kotak.
• Gambar dan elemen bentuk semuanya dianggap sebagai teks, ia bukan kotak, kerana tiada apa yang boleh diletakkan di dalam gambar, ia sendiri adalah kandungannya sendiri.

Perihalan setiap bahagian model kotak:

• Margin (margin): kosongkan kawasan di luar sempadan dan jidar adalah lutsinar (boleh negatif).
• Sempadan: Sempadan mengelilingi pelapik dan kandungan.
• Padding: Kosongkan kawasan di sekeliling kandungan dan padding adalah lutsinar (nilai negatif tidak dibenarkan).
• Kandungan: Kandungan kotak, menunjukkan teks dan imej.

2. Apakah perbezaan antara model standard dan model IE?

Jawapan ringkas untuk soalan

Perbezaan antara model standard dan model iaitu pengiraan lebar dan tinggi.

• Lebar model standard tidak mengira padding dan border
• iaitu lebar model mengira padding dan border

Pengetahuan; Analisis

Model kotak standard (model kotak W3C)

Set lebar dan tinggi adalah betullebar dan tinggi kandungan sebenar ditetapkan, dan jidar dan pelapik di sekeliling kandungan ditetapkan secara berasingan; daripada elemen tersebut ialah:

lebar[tinggi]= lebar[tinggi] jidar sempadan padding kandungan yang ditetapkan

boleh difahami melalui contoh: tulis div dan tetapkan lebar, tinggi, jidar dan tepi dalam pada masa yang sama Jarak, jidar; kesan

dan model kotak yang dipaparkan dalam alat pembangun Chrome adalah seperti berikut:

//注：如果下面示例未写html和css,说明与此处相同
.box {
    width: 100px;
    height: 100px;
    border: 10px solid #CC9966;
    padding: 30px;
    margin: 40px;
    background: #66FFFF;
}
<div class="box">Axjy</div>

Anda boleh melihat bahagian kandungan adalah 100×100, kandungan dikelilingi oleh tetapan tambahan,

; >Model kotak IE (model kotak pelik) >

width=40 10 30 100 30 10 40=180Set lebar dan tinggi adalah berdasarkan lebar dan tinggi

bermaksud lebar dan tinggi sebenar elemen ialah :

lebar (tinggi) = tetapkan lebar (tinggi) margin

Gunakan contoh yang sama seperti di atas, tetapi dengan menetapkan , tukarkannya menjadi kotak IE model;

Kesan dan model kotak yang dipaparkan dalam alat pembangun Chrome adalah seperti berikut: 实际内容content 内边距（padding） 边框（border）之和

Ia boleh dilihat dengan jelas bahawa segi empat sama adalah lebih kecil daripada yang di atas, ;

box-sizing:border-box;

.box {
    width: 100px;
    height: 100px;
    border: 10px solid #CC9966;
    padding: 30px;
    margin: 40px;
    background: #66FFFF;
    box-sizing: border-box;//注意
}
<div class="box">Axjy</div>

3. Bagaimana untuk menetapkan kedua-dua model ini?

Jawapan ringkas untuk soalan

width=40 10 30 20 30 10 40=100

Contoh di atas sebenarnya telah menggunakan tetapan ini

css tetapan Model standard: Box-sizing:context-box (juga model kotak lalai penyemak imbas); , JS Bagaimana untuk menetapkan/mendapatkan lebar dan ketinggian yang sepadan bagi model kotak?

Jawapan ringkas kepada soalan

Analisis pengetahuan
• box-sizing:border-box

1. dom.style.width/height

diperolehi melalui gaya gaya nod dom sahaja gaya dan tag gaya boleh diperolehi Gaya pautan neutral pautan tidak boleh diperoleh

Apabila menggunakan kelas untuk menetapkan lebar dan ketinggian

1) dom.style.width/height【只能取到内联元素】
2) dom.currentStyle.width/height【只有IE支持】
3) document.getComputedStyle(dom,null).width/height  
4) dom.getBoundingClientRect().width/height 
5) dom.offsetWidth/offsetHeight【常用】

lebar dan tinggi yang diperolehi adalah kosong

在行内设置宽高时

获取的是行内设置的宽高

element.style.xxx 这种只能取得内嵌样式的属性，获取样式能读能写

2、dom.currentStyle.width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.currentStyle.width;
let height = targetDom.currentStyle.height;

element.currentStyle[xxx] 可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读

3、document.getComputedStyle(dom,null).width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高，和currentStyle相同，但是兼容性更好，IE9 以上支持。

getComputedStyle()方法,

• 第一个参数：取得计算样式的元素；
• 第二个参数：一个伪元素字符串（例如“:after”），如果不需要伪元素信息，默认为null；

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width =  window.getComputedStyle(targetDom).width
let height = window.getComputedStyle(targetDom).height

console.log("width",width)
console.log("height",height)

『小扩展』

如果box类不设置宽高，而是由内容自动撑开；

则标准盒模型通过getComputedStyle获取到的宽高是content的值；

IE盒模型通过getComputedStyle获取到的宽高 = border + padding + content，不包括外边距；

4、dom.getBoundingClientRect().width/height

得到渲染后的宽和高，大多浏览器支持。IE9以上支持。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.getBoundingClientRect().width;
let height = targetDom.getBoundingClientRect().height
console.log('width',width)
console.log('height',height)

标准模型，宽高设置为100的结果，额外包括了padding和border的值；

IE模型，宽高设置为100的结果；

『小扩展』

如果box类不设置宽高，而是由内容自动撑开；

不论是哪种模型，获取到的都是（border + padding + content)，不包括外边距；

getBoundingClientRect还可以取到相对于视窗的上下左右的距离（用于获取某个元素相对于视窗的位置集合）。

5、dom.offsetWidth/offsetHeight（常用）

包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.offsetWidth;
let height = targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)

标准模型，宽高设置为100的结果；

IE模型，宽高设置为100的结果；

小扩展

如果box类不设置宽高，而是由内容自动撑开；

不论是哪种模型，获取到的都是（border + padding + content)，不包括margin；

从上面可以看出，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 结果是一样的

5、根据盒模型解释边距重叠

问题简答

外边距重叠是指两个【垂直】 【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）

『原因』

根据W3C文档的说明，当符合以下条件时，就会触发外边距重合

• 都是普通流中的元素且属于同一个 BFC
• 没有被 padding、border、clear 或非空内容隔开
• 两个或两个以上垂直方向的「相邻元素」

相邻元素包括父子元素和兄弟元素

『重叠后的margin计算』

• 1、margin都是正值时取较大的margin值

• 2、margin都是负值时取绝对值较大的，然后负向位移。

• 3、margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加

边距重叠详解及解决方案

1、嵌套块（父子）元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有padding-top及border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

『解决办法』

• 1、为父元素定义1px的border-top或padding-top。
• 2、为父元素添加overflow:hidden。
• 3、子元素或父元素设置display:inline-block。
• 4、父元素加前置内容（::before）生成。（推荐）

『示例』

在页面放两个正方形

<div class="parent-box">
    <div class="child-box"></div>
</div>

父元素margin-top设为0，子元素设置20px;

.parent-box{
    width: 100px;
    height: 100px;
    margin-top: 0;
    background: #99CCFF;
}
.child-box{
    width: 50px;
    height: 50px;
    margin-top: 20px;
    background: #FF9933;
}

预期效果：应该是父级元素没有边距，子元素顶部和父元素顶部之间的距离为20

实际效果：父子盒子重叠，父级与外面的间隔变成了20（会取较大的值，因为父级为0，所以取的是子级的margin）

通过上面的解决办法处理之后

方法一、二、三

方法四

.parent-box::before {
    content : "";
    display :table;
}

达到的效果

2、相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）

当上下相邻的两个块元素相遇时，如果

• 上面的元素有下外边距margin-bottom，
• 下面的元素有上外边距margin-top，

则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

『解决办法』

1）为了达到想要的间距，最好在设置margin-top/bottom值时统一设置上或下；

2）或者用以下的BFC解决，下面有详解

6、谈谈BFC

BFC的基本概念

BFC全称为块格式化上下文 (Block Formatting Context) ，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的通俗理解：首先BFC是一个名词，就是一个有特定规则的区域。我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

Spesifikasi W3C menerangkan perkara ini secara terperinci:

• Elemen terapung dan elemen kedudukan mutlak, blok kotak bukan peringkat blok Aras bekas (seperti inline-blocks, table-cells dan table-captions), serta kotak peringkat blok dengan nilai overflow selain visiable, akan mencipta BFC baharu (konteks pemformatan peringkat blok) untuk mereka kandungan.

• Dalam BFC, kotak disusun secara menegak satu demi satu bermula dari atas Jarak menegak antara dua kotak ditentukan oleh nilai marginnya Dalam BFC yang sama, Jidar menegak daripada dua kotak peringkat blok bersebelahan akan runtuh.

• Dalam BFC, tepi luar kiri setiap kotak menyentuh tepi kiri bekas atau tepi kanan untuk format kanan ke kiri. Ini benar walaupun dalam float (walaupun line boxes kotak akan mengecut disebabkan apungan), melainkan BFC baharu dicipta di dalam kotak (dalam kes ini kotak itu sendiri akan menjadi lebih sempit disebabkan apungan) )

Peraturan susun atur BFC (prinsip/peraturan rendering)

1. Apabila mengira ketinggian BFC, terapung Elemen juga akan mengambil bahagian dalam pengiraan (kosongkan pelampung)
2. Kawasan BFC tidak akan bertindih dengan kotak unsur terapung. (Elakkan teks terapung daripada dibalut)
3. BFC ialah bekas bebas pada halaman, dan unsur dalaman dan luaran tidak menjejaskan satu sama lain. (Menyelesaikan masalah margin bertindih)
4. Jarak menegak Kotak ditentukan oleh jidar. Jidar dua kotak bersebelahan milik BFC yang sama akan bertindih.

Senario penggunaan berikut akan menggunakan peraturan ini untuk menangani beberapa masalah praktikal.

Cara mencipta BFC

Terdapat beberapa kesan sampingan dalam kurungan

• Elemen terapung : float:left | float:right; >Elemen diposisikan
: kedudukan:mutlak | kehilangan] |. paparan:fleksibel |. paparan:jadual | : limpahan: tersembunyi; [limpahan akan dipotong Elemen] | kesan sampingan, sila beri perhatian kepada keserasian penyemak imbas]
『Nota』
• Sebab display:table juga boleh menjana BFC ialah Jadual akan menjana sel jadual tanpa nama secara lalai, dan sel jadual tanpa nama inilah yang menjananya.
• Tiada sebarang elemen boleh dianggap sebagai BFC Hanya apabila elemen ini memenuhi mana-mana syarat di atas, elemen ini akan dianggap sebagai BFC
• Senario penggunaan BFC

1 Elemen terapung yang jelas

Elemen terapung akan diasingkan daripada dokumen biasa. Aliran, seperti yang ditunjukkan di bawah, meninggalkan bekas induk dengan hanya 2px ketinggian jidar.

Gunakan untuk mencipta BFC untuk ibu bapa

Kaedah di atas boleh mencapai yang jelas terapung. Walau bagaimanapun, ia masih disyorkan untuk menggunakan pseudo-class.

Mengapa kita perlu mengosongkan apungan? Apungan runtuh, apabila bongkah berisi tidak mempunyai set ketinggian atau adaptif, blok berisi tidak boleh disandarkan naik dan menjadi runtuh.

overflow: hidden

2 Halang pembalut teks terapung

mempunyai kesan pembalut teks berikut:

『Reason』Peraturan 2 di atas: Kawasan BFC tidak akan bertindih dengan kotak elemen terapung Kaedah ini boleh digunakan untuk melaksanakan reka letak penyesuaian dua lajur Lebar di sebelah kiri ditetapkan dan kandungan di sebelah kanan mempunyai lebar penyesuaian.

3. Gunakan BFC untuk menyelesaikan masalah pertindihan margin

overflow: hidden

Mengikut syarat pertindihan margin sebelum ini, jika anda ingin menyelesaikan pertindihan margin, anda hanya perlu memusnahkan salah satu syarat pencetus, seperti mencipta BFC.

Menurut takrifan BFC, pertindihan jidar menegak hanya boleh dilakukan jika dua elemen berada dalam BFC yang sama, termasuk elemen bersebelahan dan elemen bersarang.

================================

Untuk menyelesaikan masalah pertindihan margin , cuma Pastikan mereka tidak berada dalam BFC yang sama.

• Untuk elemen bersebelahan, cuma tambahkan cangkang BFC padanya untuk mengelakkan jidarnya daripada bertindih;
• Untuk elemen bersarang, cuma Biarkan elemen induk cetuskan BFC (contohnya, tambah limpahan: tersembunyi pada induk), supaya jidar induk dan jidar unsur semasa tidak bertindih.

================================================

Jika ada bukan BFC baharu Apabila, jidar bertindih, jidar bawah jidar atas, hendaklah sama dengan 20

Selepas mencipta BFC baharu

Dalam contoh di atas, untuk mengelakkan jidar dua petak daripada bertindih, bekas dibalut dalam salah satu div untuk mencetuskan BFC.

Nota: Masalah lipatan margin boleh diselesaikan dengan BFC, tetapi mencetuskan BFC bukanlah syarat yang mencukupi untuk menyelesaikan masalah lipatan margin Ia mesti digunakan secara munasabah

Alamat asal: https://juejin.cn/post/6988877671606272031

Pengarang: Axjy

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Kongsi 6 soalan temu bual tentang model kotak CSS Berapa banyak yang anda boleh jawab dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!