前端面試問題CSS篇

前端面試問題HTML篇:https://my.oschina.net/u/3674939/blog/1637883css

前端面試問題JavaScript篇:https://my.oschina.net/u/3674939/blog/1640595前端

前端面試問題其它篇(安全、性能、加載等):https://my.oschina.net/u/3674939/blog/1643029git

文本不換行

/*單行文本*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

CSS樣式優先級

!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性github

  • 權重計算
  • 後寫優先

雪碧圖的做用

  • 減小HTTP請求數,提升加載性能
  • 減小圖片大小

display:inline-block的間距問題

因爲空白字符的緣由面試

解決:font-size: 0segmentfault

如何清除浮動

  • overflow:hidden
  • ::after{clear:both}
  • .clear{clear:both}

如何適配移動端

viewport rem media查詢瀏覽器

響應式設計:隱藏、折行、自適應安全

頁面三欄佈局

  • 浮動佈局
  • 定位佈局
  • flexbox佈局
  • 表格佈局
  • 網格佈局

盒子垂直水平居中

  • 定位 + margin:
position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
  • 定位 + transform:
position: relative / absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);
  • 表格佈局:
父級 display: table-cell; vertical-align: middle;  子級 margin: 0 auto;
  • flex 佈局:
父級 display: flex;align-items: center;justify-content: center;
  • 網格佈局

參考:https://github.com/Sweet-KK/css-layout佈局

CSS盒模型

標準模型:寬高 = contentpost

IE模型:寬高 = border+padding+content

邊距重疊問題

上下2個div分別設置margin-bottom和margin-top,margin值合併取最大值。父div嵌套子div並設子div寬高margin-top,父div=子div寬高並會margin值合併取最大值。

解決:overflow:hidden

BFC

塊級格式化上下文

原理:BFC元素垂直方向的邊距會重疊;BFC區域不會和浮動元素重疊;BFC是個獨立容器裏外互不影響;計算BFC高度時浮動元素也會參與計算

如何建立:overflow、 float、 postion(relative不算)、 dispay(只有inline-box和table相關的)

附:55道css面試題:http://www.javashuo.com/article/p-nmmsldqk-g.html

相關文章
相關標籤/搜索