前端面試 一面03 CSS盒模型

2021-08-29 18:46:28 字數 859 閱讀 7440

三、實際情況中的例項

四、延伸問題

思考接下來會怎麼延伸追問,做好心理準備

1、盒模型的基本概念、區別

2、怎麼應用2種盒模型

box-sizing

: content-box;

/*預設標準模型*/

box-sizing

: border-box;

/*ie模型包含border、padding*/

3、js怎麼獲取盒模型(content)的寬高
dom.style.width/height

//只能獲取內聯的寬高

dom.currentstyle.width/height

//獲取到渲染到瀏覽器之後的寬高

//只支援ie

window.

getcomputedstyle

(dom)

.width/height

//獲取到渲染到瀏覽器之後的寬高

//支援谷歌火狐等

dom.

getboundingclientreact()

.width/height

//一般用於獲取到dom在視窗的位置

//輸出座標x,y和寬高

中父元素的高度是多少?

怎麼使父元素110px

bfc的概念、原理、如何建立、使用場景

原理 如何建立bfc容器

使用場景

bfc的詳細內容可參考這個

前端面試之盒模型

當你對乙個文件進行布局 laying out 時候,瀏覽器引擎會根據css box模型將所有元素描述為乙個盒子,css會決定這些盒子的大小,位置,屬性 顏色,邊框.盒模型分為兩類 ie盒模型和標準盒模型。兩者的區別在於 ie盒模型的width height content border paddin...

03 CSS盒模型概念及企業應用規則

border top width style color 寬度 種類 顏色 border right width style color 寬度 種類 顏色 border bottom width style color 寬度 種類 顏色 border left width style color 寬...

前端面試必考題 CSS盒模型詳解

盒模型是css的基礎中的基礎。因為它的重要性,所以很多面試中都會被提到。它也成為了考察求職者基本素質的一道題。屬於絕對的經典問題。這樣描述,相信大家能意識到盒模型的重要性了吧。我們先來看一種圖 當瀏覽器對乙個html文件進行布局的時候,會把每乙個元素都渲染成乙個矩形的盒子,盒模型就是對這些元素的形狀...