溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS面試題有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS面試題有哪些”吧!
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
1 flex-direction:屬性決定主軸的方向； row 水平方向，起點在左端 row-reverse 水平方向，起點右端 column 縱向方向，起點在上 column 縱向方向，起點在下 2 flex-wrap:決定是否換行，默認都是排在一行 no-wrap;(默認)不換行 wrap; //換行，第一行在上方 wrap-reverse;//換行；第二行在上方 3 flex-flow:flex-direction和flex-wrap的縮寫，默認為row nowrap flex-flow:<flex-direction> ||<flex-wrap> 4 justify-content:定義在item在主軸上的對齊方式 flex-start 從左到右 flex-end 從右到左 center 居中 space-between 兩端對齊 space-around 每個item兩側中間相等 5 justify-content:定義在item在主軸上的對齊方式
給父元素添加display:flex
<div > <div > sss </div> <div > ssssss </div> </div>
//css
html,
body {
height: 100%
}
.main {
display: flex;
height: 100%;
justify-content: center;
align-items: center
}
.box {
width: 300px;
border: 1px solid red;
}
//html
<div class="main">
<div class="box">未知高度上下左右居中</div>
</div>頁面就是由一個個盒模型堆砌起來的，每個HTML元素都可以叫做盒模型，盒模型由外而內包括：邊距（margin）、邊框（border）、填充（padding）、內容（content）。它在頁面中所占的實際寬度是margin + border + paddint + content 的寬度相加。
不同之處就是標準盒模型的內容大小就是content的大小，而IE的則是content + padding +border 總的大小
通過設置 box-sizing:content-box(W3C)/border-box(IE)就可以達到自由切換的效果
BFC就是“塊級格式化上下文”的意思，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。通俗的講，就是一個特殊的塊，內部有自己的布局方式，不受外邊元素的影響。
BFC內部的盒子，會在垂直方向，一個接一個地放置。垂直方向上也會發生邊距重疊。
BFC就是頁面上的一個獨立容器，容器里面的子元素不會影響到外面的元素，外邊的也不會影響里邊的。
BFC的區域不會與float box重疊。
計算BFC的高度時，浮動元素也被計算在內。
overflow: auto/ hidden; position: absolute/ fixed; float: left/ right; display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
在屬性值為這些的情況下，都會讓所屬的box產生BFC。
float布局的兼容性比較好。解決辦法：給橙色塊添加overflow: hidden（生成了一個BFC）。浮動元素父元素還存在高度塌陷問題，解決方法： 父元素生成一個BFC。
absolute布局的有點是簡單直接，兼容性好。缺點，脫離了文檔流。
flex布局的優點，布局簡單、靈活，移動端友好；缺點是ie8以下不兼容。
table布局的優點是兼容性好，有時候布局相對簡單。缺點是它是對TABLE標簽的不正規使用，一直以來被大家所詬病。當需要內容高度不一致時并不適應。
grid布局優點，是第一個基于二維方向的布局模塊。它是第一個基于網格的原生布局系統。缺點是對低版本瀏覽器兼容性不好。
Less（基于Node寫的）、Sass（基于Ruby寫的）
1.嵌套 反映層級和約束 2.變量和計算 減少重復代碼 3.Extend和Mixin 代碼片段復用 4.循環 適用于復雜有規律的樣式 5.import CSS文件模塊化
E:nth-child(n) 選擇器匹配其父元素的第n個子元素，不論元素類型，n可以使數字，關鍵字，或公式
E:nth-of-type(n) 選擇與之其匹配的父元素的第N個子元素
E:frist-child 相對于父級做參考，“所有”子元素的第一個子元素，并且“位置”要對應
E：frist-of-type 相對于父級做參考，“特定類型”（E）的第一個子元素
E：empty 選擇沒有子元素的每個E元素
E:target 選擇當前活動的E元素
::selection 選擇被用戶選取的元素部分
屬性選擇器
E[abc*="def"] 選擇adc屬性值中包含子串"def"的所有元素
text-shadow:2px 2px 8px #000;參數1為向右的偏移量，參數2為向左的偏移量，參數3為漸變的像素，參數4為漸變的顏色
text-overflow:規定當文本溢出包含元素時發生的事情 text-overflow:ellipsis(省略)
text-wrap:規定文本換行的規則
word-break 規定非中日韓文本的換行規則
word-wrap 對長的不可分割的單詞進行分割并換行到下一行
white-space: 規定如何處理元素中的空白 white-space:nowrap 規定段落中的文本不進行換行
border-raduis:50%邊框的圓角
border-image 邊框圖片
.border-image {
border-image-source:url(images/border.png);
boder-image-slice:27;
border-image-width:10px;
border-iamge-repeat:round; (round平鋪) 平鋪效果不作用于四角，只適應與四邊
}
rgba
backgrounnd-size:cover/contain，其中background-size：cover，會使“最大”邊進行縮放，另一邊同比縮放，鋪滿容器，超出部分會溢出。background-size:contain，會使“最小”邊進行縮放，另一邊同比縮放，不一定鋪滿容器，會完整顯示圖片
linear-gradient
background-image:linear-gradient(90deg,yellow 20%,green 80%)
radial-gradient
background-iamge:radial-gradient(120px at center center,yellow,green)
column-count
column-width
column-gap
column-rule
transition
transition-property:width //property為定義過渡的css屬性列表，列表以逗號分隔
transition-duration:2s; //過渡持續的時間
transition-timing-function:ease;
transition-delay:5s //過渡延遲5s進行
animation
transform ：translate（x,y) rotate(deg) scale(x,y)
translate
scale
rotate
skew（傾斜）
1、none 此元素不會被顯示，并且不占據頁面空間，這也是與visibility:hidden不同的地方，設置visibility:hidden的元素，不會被顯示，但是還是會占據原來的頁面空間。
2、inline 行內元素 元素會在一行內顯示，超出屏幕寬度自動換行，不能設置寬度和高度，元素的寬度和高度只能是靠元素內的內容撐開。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 塊級元素 會獨占一行，如果不設置寬度，其寬度會自動填滿父元素的寬度，可以設置寬高，即使設置了寬度，小于父元素的寬度，塊級元素也會獨占一行。
示例元素：div,h2-h7,ul,ol,dl,p
4、inline-block 行內塊元素 與行內元素一樣可以再一行內顯示，而且可以設置寬高，可以設置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 會作為塊級表格來顯示(類似于<table>)，表格前后帶有換行符。
7、inline-table 會作為內聯表格來顯示(類似于<table>)，表格前后沒有換行符。
8、flex 多欄多列布局，火狐可以直接使用，谷歌和歐朋需要在屬性值前面加-webkit-前綴，比較適合移動端開發使用。
元素被當成行內元素排版的時候，原來HTML代碼中的回車換行被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block的元素之間就出現了空隙。這些元素之間的間距會隨著字體的大小而變化，當行內元素font-size:16px時，間距為8px。
解決：
1、font-size
2、改變書寫方式
3、使用margin負值
4、使用word-spacing或letter-spacing
手機瀏覽器會把頁面放入到一個虛擬的“視口”（viewpoint）中，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。通常這個虛擬的“視口”（viewport）比屏幕寬，會把網頁擠到一個很小的窗口。 如果不顯示地設置viewport，那么瀏覽器就會把width默認設置為980。但后果是瀏覽器出現橫向滾動條，因為瀏覽器可視區域的寬度比默認的viewport的寬度小。 然后瀏覽器引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
第一步先計算高度，假設寬100%，那么高為h=9/16=56.25%
第二步利用之前所說設置padding-bottom方法實現矩形
html
<div class="box">
<div class="scale">
<p>這是一個16：9的矩形</p>
</div>
</div>
css
.box {
width: 80%;
}
.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}
.item {
width: 100%;
height: 100%;
background-color: aquamarine;
position: absolute;
}優點：能讓我們在手機各個機型的適配方面；大大減少我們代碼的重復性，是我們的代碼更兼容。
缺點：目前ie不支持 對pc頁面來講使用次數不多；
數據量大：所有的圖片，盒子都需要我們去給一個準確的值；才能保證不同機型的適配；
元素的border是由三角形組合而成
div {
width: 0;
height: 0;
border: 40px solid;
border-color: transparent transparent red;
}IOS8下已經支持帶小數的px值, media query對應devicePixelRatio有個查詢值-webkit-min-device-pixel-ratio, css可以寫成這樣
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}【缺點】對設備有要求，小數像素目前兼容性較差。
該方案是對上述方案的優化，整體思路就是利用viewport + rem + js 動態的修改頁面的縮放比例，實現小于1像素的顯示。在頁面初始化時，在頭部引入原始默認狀態如下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
接下來的任務就是js的動態修改縮放比 以及 實現rem根元素字體大小的設置。
var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;【缺點】以為縮放涉及全局的rem單位，比較適合新項目，對于老項目可能要涉及到比較多的改動。
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("border.png") 2 0 stretch;
border-image: url("border.png") 2 0 stretch;
}【解釋】border-width 指定邊框的寬度，可以設定四個值，分別為上右下左border-width: top right bottom left。 border-image 該例意為：距離圖片上方2px（屬性值上沒有單位）裁剪邊框圖片作為上邊框，下方2px裁剪作為下邊框。距離左右0像素裁剪圖片即沒有邊框，以拉伸方式展示
結合起來就是：在邊框圖片中，裁剪圖片上下方的2個像素寬度作為上下邊框，并展示在寬度為1個像素的邊框空間里。左右沒有邊框。 注意這里的1個像素是特殊的，專指物理像素，而平時設定的長寬1px則表示邏輯像素，當然，這種方式引入了圖片，我們還能將圖片裝換成base64形式表現
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("data:image/png;base64,xxx") 2 0 stretch;
border-image: url('如上');
}【缺點】需要制作圖片，圓角可能出現模糊
? 除了使用圖片外，當然也能使用純css來實現，百度糯米團就是采用的這種方案。
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}【思路】將原本1個物理像素的邊框大小利用線性漸變分割成幾個部分（百分比控制），實現小于1像素效果 【解釋】linear-gradient指定線性漸變，接受大于等于3個參數，第一個為漸變旋轉角度，第二個開始為漸變的顏色和到哪個位置（百分比）全部變為該顏色，該例子中，第一句就是，漸變方向旋轉180度，即從上往下（默認為0度從下往上），從紅色開始漸變，到50%的位置還是紅色，再漸變為繼承父元素顏色。 【缺點】因為每個邊框都是線性漸變顏色實現，因此無法實現圓角
利用陰影也可以實現，優點是沒有圓角問題，缺點是顏色不好控制
div {
-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}【理解】來回顧一下box-shadow屬性的用法。
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
參數分別表示: 水平陰影位置，垂直陰影位置，模糊距離， 陰影尺寸，陰影顏色，將外部陰影改為內部陰影，后四個可選。該例中為何將陰影尺寸設置為負數？設置成-1px 是為了讓陰影尺寸稍小于div元素尺寸，這樣左右兩邊的陰影就不會暴露出來，實現只有底部一邊有陰影的效果。從而實現分割線效果（單邊邊框）。
在以上的用法種，無非逃不開一種思想，就是將1px縮小為0.5px來展示，然而。0.5px并不是所有的設備或瀏覽器都支持，就考慮用媒體查詢或viewport將其縮放比例。其實1像素問題的產生基本發生在設置邊框或分割線的時候，場景并不覆蓋全局樣式，因此，直接縮放需要設置的元素，才是我們真正需要的。tranform就能實現這個需求。
設置height: 1px，根據媒體查詢結合transform縮放為相應尺寸。
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}2.用::after和::befor,設置border-bottom：1px solid #000,然后在縮放-webkit-transform: scaleY(0.5);可以實現兩根邊線的需求
div::after{
content:'';width:100%;
border-bottom:1px solid #000;
transform: scaleY(0.5);
}3.用::after設置border：1px solid #000; width:200%; height:200%,然后再縮放scaleY(0.5); 優點可以實現圓角，京東就是這么實現的，缺點是按鈕添加active比較麻煩。
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}到此，相信大家對“CSS面試題有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
