久久综合九色综合97婷婷-美女视频黄频a免费-精品日本一区二区三区在线观看-日韩中文无码有码免费视频-亚洲中文字幕无码专区-扒开双腿疯狂进出爽爽爽动态照片-国产乱理伦片在线观看夜-高清极品美女毛茸茸-欧美寡妇性猛交XXX-国产亚洲精品99在线播放-日韩美女毛片又爽又大毛片,99久久久无码国产精品9,国产成a人片在线观看视频下载,欧美疯狂xxxx吞精视频

有趣生活

當前位置：首頁>職場>css頁面布局面試題（CSS面試常見問題）

css頁面布局面試題（CSS面試常見問題）

發布時間：2024-01-24閱讀(16)

導讀本篇文章主要是總結幾個前端面試常見的CSS面試題，希望對大家的面試有所啟示。一、CSS實現水平居中和垂直居中的方法有哪幾種？1、水平居中行內元素可設置:te....

本篇文章主要是總結幾個前端面試常見的CSS面試題，希望對大家的面試有所啟示。

css頁面布局面試題（CSS面試常見問題）(1)

一、CSS實現水平居中和垂直居中的方法有哪幾種？

1、水平居中

  • 行內元素可設置:text-align:center

.son {display:inline-block;text-align:center;}

  • margin:0 auto;這種方式的寬度需要固定已知

// 父布局的css 需要設置 overflow:hidden.father{width:100%;height:200px;overflow:hidden;//不可缺少否則margin-top不生效}.son{width: 100px;height: 100px;margin:50px auto ;}

  • table-cell

display:table-cell; /*IE8以上及Chrome、Firefox*/vertical-align:middle; /*IE8以上及Chrome、Firefox*/

  • 彈性布局flex

.father{display:flex;justity-content:center;align-items:center;}.father{display:flex;flex-direction:column;//改變主軸為cross axisjustity-content:center;}

  • 脫離文檔流，操作對象寬度確定

.father{position:relative;width:60%;height:400px;}.son{width:100px;height:160px;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-80px;}

2、垂直居中

  • line-height與height等高

.son { height:60px; line-height:60px; // line-height需要和height保持一致 display:inline-height;}

  • flex 【同上】
  • table-cell 【同上】
  • 脫離文檔流，操作對象寬度確定【同上】

二、absolute與fixed共同點與不同點

absoluate和fixed都是position屬性的值類型。position規定元素的定位類型，取值類型如下：

  • absolute：相對父級的絕對定位，它的定位坐標是針對相對于static定位以外的第一個父元素進行定位。
  • fixed：相對整個文檔的絕對定位，相對于瀏覽器窗口進行定位，用法基本與absolute一致。　　
  • relative：相對定位
  • static：默認值，無定位類型，元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。
  • sticky：粘性定位
  • inherit：繼承父類定位類型。

fixed和absoluate相同點：

  1. 脫離文檔流
  2. 覆蓋非定位元素，上層顯示

fixed和absoluate不同點：

  1. 相對定位的父級不同，fixed相對根節點，absoluate選擇對于static定位以外的第一個父元素進行定位。
  2. 瀏覽器的滾動條不會影響fixed的定位位置，absoluate會被影響【由于第一個原因導致的】

三、清除浮動的方法

CSS中經常會出現使用了float浮動元素而導致頁面中某些元素不能正確地顯示。那么如何清除float的浮動帶來的副作用呢？

1、在父元素中添加子元素，并為添加的子元素中添加clear，清除浮動

clear的取值如下：

  • none：不清除
  • left：清除左浮動
  • right：清除右浮動
  • both：清除父布局內所有元素的浮動

<style>.clearfix { clear: both; }</style><div > <div >content1</div> <div ></div></div><div > <div >content2</div></div>

2、偽元素清除clearfix

給父級元素添加了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的。

.clearfix:after{ content:""; display:block; visibility:hidden; clear:both; }

3、使用BFC清除

通過給父元素設置：overflow:auto或者overflow:hidden。讓父元素高度被撐起來。

<style>.wrap{ width:500px; margin:0 auto; overflow:hidden;}.float{ width:200px; height:200px; float:left;}.nofloat{ width:300px; height:150px; overflow:hidden;}</style><div > <div >浮動</div> <div >清除浮動</div></div>

四、什么是BFC?

BFC的官方定義是：BFC（Block Formatting Context）塊格式化上下文， 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。簡單點來說就是幫我們幫BFC內的元素和BFC外的元素進行隔離，使其不會影響到外部元素。

BFC類型：

  • 浮動元素（float不為none）
  • 根元素（HTML）
  • 絕對定位元素（ position 為 absolute 或 fixed）
  • 內聯塊 (元素具有 display: inline-block)
  • 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
  • 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
  • flex布局
  • overflow指定非visible的值

五、CSS和sass、LESS有什么區別？

CSS（層疊樣式表）是一門非程序式語言，SASS是使用Ruby 編寫，是一種對css的一種擴展提升，增加了規則、變量、混入、選擇器、繼承等等特性。可以理解為用js的方式去書寫，然后編譯成css。LESS受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。簡單點說就是less、sass是屬于編譯型CSS，需要通過編譯最終生成CSS。區別如下：

  • sass和less是編譯型css,需要編譯生成CSS
  • sass、less有更為靈活的變量、函數方式實現配置化樣式
  • sass、less可以嵌套編寫，隔離同名樣式影響，減少代碼量

六、rem 和 em 的區別?

em是一種相對長度單位，相對于自身元素的字號大小，如果沒有設置就參照父容器的字號大小或瀏覽器默認字號大小。rem是CSS3的新標準也是一種相對長度單位，其相對于html根標簽的字號大小。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{ font-size: 20px;}#box{ width: 10rem; height: 10rem; background: red; font-size:12px;}.remFont { font-size:1rem;}.emFont { font-size:1em; }</style></head><body> <div id="box"> <div >字體大小20px</div> <div >字體大小12px</div> </div></body></html>

歡迎分享轉載→http://m.avcorse.com/read-234246.html

Copyright ? 2024 有趣生活 All Rights Reserve吉ICP備19000289號-5 TXT地圖HTML地圖XML地圖