1.calc, support, media各自的含義及用法?
@support主要是用于檢測(cè)瀏覽器是否支持CSS的某個(gè)屬性聪廉,其實(shí)就是條件判斷蹄葱,如果支持某個(gè)屬性,你可以寫一套樣式锄列,如果不支持某個(gè)屬性,你也可以提供另外一套樣式作為替補(bǔ)惯悠。
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值邻邮。 calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
@media 查詢克婶,你可以針對(duì)不同的媒體類型定義不同的樣式筒严。
2.css水平、垂直居中的寫法情萤,請(qǐng)至少寫出4種鸭蛙?
這題考查的是css的基礎(chǔ)知識(shí)是否全面,所以平時(shí)一定要注意多積累
水平居中
行內(nèi)元素: text-align: center
塊級(jí)元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
**垂直居中
設(shè)置line-height 等于height
position:absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
3.1rem筋岛、1em娶视、1vh、1px各自代表的含義睁宰?
rem
rem是全部的長(zhǎng)度都相對(duì)于根元素<html>元素肪获。通常做法是給html元素設(shè)置一個(gè)字體大小,然后其他元素的長(zhǎng)度單位就為rem柒傻。
em
子元素字體大小的em是相對(duì)于父元素字體大小
元素的width/height/padding/margin用em的話是相對(duì)于該元素的font-size
vw/vh
全稱是 Viewport Width 和 Viewport Height孝赫,視窗的寬度和高度,相當(dāng)于 屏幕寬度和高度的 1%红符,不過青柄,處理寬度的時(shí)候%單位更合適,處理高度的 話 vh 單位更好预侯。
px
px像素(Pixel)致开。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的萎馅。
一般電腦的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕寬度總共有1920個(gè)像素,后者則是高度為1024個(gè)像素
4.畫一條0.5px的直線喇喉?
考查的是css3的transform
height: 1px;
transform: scale(0.5);
5.說一下盒模型?
盒模型是css中重要的基礎(chǔ)知識(shí)校坑,也是必考的基礎(chǔ)知識(shí)
盒模型的組成拣技,由里向外content,padding,border,margin.
在IE盒子模型中千诬,width表示content+padding+border這三個(gè)部分的寬度
在標(biāo)準(zhǔn)的盒子模型中,width指content部分的寬度
6.box-sizing的使用
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默認(rèn)屬性是content-box
畫一個(gè)三角形膏斤?
這屬于簡(jiǎn)單的css考查徐绑,平時(shí)在用組件庫(kù)的同時(shí),也別忘了原生的css
.a{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*順時(shí)針旋轉(zhuǎn)90°*/
}
<div class="a"></div>
7.清除浮動(dòng)的幾種方式莫辨,及原理傲茄?
清除浮動(dòng)簡(jiǎn)單,但這題要引出的是BFC沮榜,BFC也是必考的基礎(chǔ)知識(shí)點(diǎn)
::after /
/ clear: both
創(chuàng)建父級(jí) BFC(overflow:hidden)
父級(jí)設(shè)置高度
BFC (塊級(jí)格式化上下文)盘榨,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離蟆融,使內(nèi)外元素的定位不會(huì)相互影響草巡。
觸發(fā)條件:
根元素
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible
規(guī)則:
屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 垂直排列
屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的 margin 會(huì)發(fā)生重疊
BFC 的區(qū)域不會(huì)與 float 的元素區(qū)域重疊
計(jì)算 BFC 的高度時(shí),浮動(dòng)子元素也參與計(jì)算
文字層不會(huì)被浮動(dòng)層覆蓋型酥,環(huán)繞于周圍