有哪些CSS面試題？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)柳州,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575
標(biāo)準(zhǔn)模型由四部分組成：
模型區(qū)分：
標(biāo)準(zhǔn)表型指的是設(shè)置box-sizing為content-box的盒子模型，一般width,height指的是content的寬高。IE盒模型指的是box-sizing為border-box的盒子。寬高的計(jì)算是content+padding+border;
可繼承的樣式： font-size font-family color
不可繼承的樣式： border padding margin height width
優(yōu)先級(jí)為：
transition-property:width transition-duration:1s transition-timing-function:linear transition-delay:2s
animation:動(dòng)畫名稱，一個(gè)周期花費(fèi)時(shí)間,云頂曲線(默認(rèn)ease),動(dòng)畫延遲(默認(rèn)0),動(dòng)畫播放次數(shù)(默認(rèn)1),是否反向播放動(dòng)畫(默認(rèn)normal),是否暫停動(dòng)畫(默認(rèn)running)
transform: 使用于2D或3D轉(zhuǎn)換的元素 transform-origin: 裝換元素的位置(圍繞哪個(gè)點(diǎn)進(jìn)行裝換).默認(rèn)(x,y,z);
選擇器
陰影
box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始的方向(默認(rèn)是從里向外，設(shè)置inset就是從外往里)
border-image: 設(shè)置圖片路徑 設(shè)置邊框背景圖的分割方式 設(shè)置或檢索對(duì)象的邊框厚度 設(shè)置或檢索對(duì)象的邊框背景圖向外擴(kuò)展 設(shè)置邊框圖片的平鋪方式
border-radius: n1 n2 n3 n4; /* n1-n4 四個(gè)值得順序是左上角，右上角，右下角，左下角 */
box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩圖片
重慶分公司
重慶分公司
word-break:normal(默認(rèn)使用瀏覽器默認(rèn)的換行規(guī)則)|break-all(允許在單詞內(nèi)換行)|keep-all(只能在半角空格或連字符處換行)overflow: hidden; white-space: nowrap; text-overflow:ellipsis;
overflow:hiden; text-overflow:ellipsis;用省略號(hào)"..."隱藏超出范圍的文本 display:-webkit-box; //將對(duì)象作為彈性伸縮盒子模型顯示 -webkit-line-clamp:2; //用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù) -webkit-box-orient:vertical;設(shè)置彈性盒對(duì)象的子元素的排列方式
text-shadow: 水平陰影 垂直陰影 模糊陰影 陰影顏色
rgba(rgb顏色值，a為透明度)
線性漸變和徑向漸變
filter: 濾鏡效果(透明度)
彈性布局就是flex布局
-柵格布局
柵格化布局。就是grid
一個(gè)用于頁(yè)面布局的全新css3功能，flexbox可以把列表放在同一個(gè)方向(從上到下排列，從左到右)，并且列表能延伸到占用可用的空間，較為復(fù)雜的布局還可以嵌套一個(gè)伸縮容器(flex container)來(lái)實(shí)現(xiàn)。采用flex布局的元素，成為flex容器。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而flex布局是基于flex布局flex-flow流可以很方便的用來(lái)做居中，能對(duì)不同屏幕大小自適應(yīng)，在布局上有了比以前更加靈活的空間
移動(dòng)端
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
} .wrapper{
position:relative;
overflow:hidden;
}webkit-over-flow-scrolling:touch;清浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使頁(yè)面后面的布局不能正常顯示
.clear{clear:both}.clearfix{
zoom:1;
}
.clear:after{
content:'.';
height:0;
clear:both;
display:block;
visibility:hidden;
}margin是用來(lái)隔開元素與元素的間距；padding是用來(lái)隔開元素與內(nèi)容的間隔。margin是用來(lái)布局分開元素，使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容與元素之間有一段間距
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中較大者
示例：
.md-warp{ width: 400px; height: 300px; max-width: 100%; border: 1px solid #000; } .md-main{ display: block; width: 100px; height: 100px; background: #f00; }
水平居中
.md-main{
margin: 0 auto
}.md-wrap{
position:relative;
}
.md-main{
position:absolute;
left:50%;
margin-left:-50px
}有些時(shí)候元素寬度不是固定的，依然可以使用定位法實(shí)現(xiàn)水平居中用到css3中的transform屬性中的translate
.md-warp{
position: relative;
}
// 注意此時(shí)md-main不設(shè)置width為100px
.md-main{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}直接使用text-align:center即可
垂直居中
和水平居中類似，只是把left:50%換成top:50%,副邊距和transform屬性進(jìn)行對(duì)應(yīng)更改即可
優(yōu)點(diǎn)：能在各個(gè)瀏覽器下工作，結(jié)構(gòu)簡(jiǎn)單明了，不需要增加額外的標(biāo)簽
.md-warp{
position: relative;
}
.md-main{
position: absolute;
/* 核心 */
top: 50%;
margin-top: -50px;
}不確定高度的時(shí)候
.md-warp{
position: relative;
}
.md-main{
position: absolute;
top: 50%;
// 注意此時(shí)md-main不設(shè)置height為100px
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}需要滿足兩個(gè)條件：
p{
width: 400px;
height: 300px;
border: 1px solid #000;
}
span{
line-height: 300px;
}視窗單位的解決辦法
讓元素在視窗中居中，使用vh實(shí)現(xiàn)
.md-warp{
position: relative;
}
.md-main{
position: absolute;
margin: 50vh auto 0;
transform: translateY(-50%);
}Flexbox的解決方案
完成這項(xiàng)工作只需要兩個(gè)樣式，在需要水平垂直居中的父元素中設(shè)置display:flex和在水平存執(zhí)居中的元素設(shè)置margin:auto
.md-wrap{
display:flex
}
.md-main{
display:auto
}Flexbox的實(shí)現(xiàn)文本的水平垂直居中同樣很簡(jiǎn)單
.md-warp{
display:flex;
}
.md-main{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}絕對(duì)垂直居中
.md-wrap{
position: relative;
}
.md-main{
position:absolute;
top:0'
right:0
bottom:0;
left:0;
margin:auto;
}最好不要使用絕對(duì)定位，因?yàn)樗麑?duì)整體的布局影響相當(dāng)?shù)拇?/p>
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
