Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

響應式web開發項目教程,嵌入式web開發

一起學前端架構 2021-09-26 04:28:42 阅读数:40 评论数:0 点赞数:0 收藏数:0

問:BFC 與 IFC 區別

BFC 是塊級格式上下文,IFC 是行內格式上下文:

  • 內部的 Box 會水平放置
  • 水平的間距由 margin,padding,border 决定

問:BFC會與float元素相互覆蓋嗎?為什麼?舉例說明

不會,因為 BFC 是頁面中一個獨立的隔離容器,其內部的元素不會與外部的元素相互影響,比如兩個 div,上面的 div 設置了 float,那麼如果下面的元素不是 BFC,也沒有設置 float,會形成對上面的元素進行包裹內容的情况,如果設置了下面元素為 overflow:hidden;屬性那麼就能够實現經典的兩列布局,左邊內容固定寬度,右邊因為是 BFC 所以會進行自適應。

問:了解box-sizing嗎?

box-sizing 屬性可以被用來調整這些錶現:

  • content-box? 是默認值。如果你設置一個元素的寬為100px,那麼這個元素的內容區會有100px 寬,並且任何邊框和內邊距的寬度都會被增加到最後繪制出來的元素寬度中。
  • border-box 告訴瀏覽器:你想要設置的邊框和內邊距的值是包含在width內的。也就是說,如果你將一個元素的width設為100px,那麼這100px會包含它的border和padding,內容區的實際寬度是width减去(border?+ padding)的值。大多數情况下,這使得我們更容易地設定一個元素的寬高。

(2)什麼是 BFC

BFC(Block Formatting Context)格式化上下文,是 Web 頁面中盒模型布局的 CSS 渲染模式,指一個獨立的渲染區域或者說是一個隔離的獨立容器。

形成 BFC 的條件

五種:

  • 浮動元素,float 除 none 以外的值
  • 定比特元素,position(absolute,fixed)
  • display 為以下其中之一的值 inline-block,table-cell,table-caption
  • overflow 除了 visible 以外的值(hidden,auto,scroll)
  • HTML 就是一個 BFC

BFC 的特性:

  • 內部的 Box 會在垂直方向上一個接一個的放置。
  • 垂直方向上的距離由 margin 决定
  • bfc 的區域不會與 float 的元素區域重疊。
  • 計算 bfc 的高度時,浮動元素也參與計算
  • bfc 就是頁面上的一個獨立容器,容器裏面的子元素不會影響外面元素。

(2)問:了解盒模型嗎?

CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性。 CSS盒模型:標准模型 + IE模型

標准盒子模型:寬度=內容的寬度(content)+ border + padding

低版本IE盒子模型:寬度=內容寬度(content+border+padding),如何設置成 IE 盒子模型

問:說一下你知道的position屬性,都有啥特點?

static:無特殊定比特,對象遵循正常文檔流。top,right,bottom,left等屬性不會被應用。 ?relative:對象遵循正常文檔流,但將依據top,right,bottom,left等屬性在正常文檔流中偏移比特置。而其層疊通過z-index屬性定義。 ?absolute:對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定比特。而其層疊通過z-index屬性定義。 ?fixed:對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定比特,當出現滾動條時,對象不會隨著滾動。而其層疊通過z-index屬性定義。 sticky:具體是類似 relative 和 fixed,在 viewport 視口滾動到閾值之前應用 relative,滾動到閾值之後應用 fixed 布局,由 top 决定。

問:兩個div上下排列,都設margin,有什麼現象?

  • 都正取大
  • 一正一負相加

問:為什麼會有這種現象?你能解釋一下嗎

是由塊級格式上下文决定的,BFC,元素在 BFC 中會進行上下排列,然後垂直距離由 margin 决定,並且會發生重疊,具體錶現為同正取最大的,同負取絕對值最大的,一正一負,相加

BFC 是頁面中一個獨立的隔離容器,內部的子元素不會影響到外部的元素。

問:清除浮動有哪些方法?

不清楚浮動會發生高度塌陷:浮動元素父元素高度自適應(父元素不寫高度時,子元素寫了浮動後,父元素會發生高度塌陷)

  • clear清除浮動(添加空div法)在浮動元素下方添加空div,並給該元素寫css樣式:{clear:both;height:0;overflow:hidden;}
  • 給浮動元素父級設置高度
  • 父級同時浮動(需要給父級同級元素添加浮動)
  • 父級設置成inline-block,其margin: 0 auto居中方式失效
  • 給父級添加overflow:hidden 清除浮動方法
  • 萬能清除法 after偽類 清浮動(現在主流方法,推薦使用)

基礎面試題

 開源分享:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】

主要內容包括:HTML,CSS,JavaScript,瀏覽器,性能優化等等

響應式web開發項目教程,嵌入式web開發_前端開發

版权声明
本文为[一起學前端架構]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领