篇文章主要是總結(jié)幾個(gè)前端面試常見的CSS面試題,希望對(duì)大家的面試有所啟示。
一、CSS實(shí)現(xiàn)水平居中和垂直居中的方法有哪幾種?
1、水平居中
.son {
display:inline-block;
text-align:center;
}
// 父布局的css 需要設(shè)置 overflow:hidden
.father{
width:100%;
height:200px;
overflow:hidden;//不可缺少否則margin-top不生效
}
.son{
width: 100px;
height: 100px;
margin:50px auto ;
}
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改變主軸為cross axis
justity-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、垂直居中
.son {
height:60px;
line-height:60px; // line-height需要和height保持一致
display:inline-height;
}
二、absolute與fixed共同點(diǎn)與不同點(diǎn)
absoluate和fixed都是position屬性的值類型。position規(guī)定元素的定位類型,取值類型如下:
fixed和absoluate相同點(diǎn):
fixed和absoluate不同點(diǎn):
三、清除浮動(dòng)的方法
CSS中經(jīng)常會(huì)出現(xiàn)使用了float浮動(dòng)元素而導(dǎo)致頁面中某些元素不能正確地顯示。那么如何清除float的浮動(dòng)帶來的副作用呢?
1、在父元素中添加子元素,并為添加的子元素中添加clear,清除浮動(dòng)
clear的取值如下:
<style>
.clearfix {
clear: both;
}
</style>
<div class="box1">
<div class="content1">content1</div>
<div class="clearfix"></div>
</div>
<div class="box2">
<div class="content2">content2</div>
</div>
2、偽元素清除clearfix
給父級(jí)元素添加了一個(gè):after偽元素,通過清除偽元素的浮動(dòng),達(dá)到撐起父元素高度的目的。
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}
3、使用BFC清除
通過給父元素設(shè)置: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 class="wrap">
<div class="float">浮動(dòng)</div>
<div class="nofloat">清除浮動(dòng)</div>
</div>
四、什么是BFC?
BFC的官方定義是:BFC(Block Formatting Context)塊格式化上下文, 是Web頁面的可視CSS渲染的一部分,是塊盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。簡(jiǎn)單點(diǎn)來說就是幫我們幫BFC內(nèi)的元素和BFC外的元素進(jìn)行隔離,使其不會(huì)影響到外部元素。
BFC類型:
五、CSS和SASS、LESS有什么區(qū)別?
CSS(層疊樣式表)是一門非程序式語言,SASS是使用Ruby 編寫,是一種對(duì)css的一種擴(kuò)展提升,增加了規(guī)則、變量、混入、選擇器、繼承等等特性。可以理解為用js的方式去書寫,然后編譯成css。LESS受Sass的影響較大,但又使用CSS的語法,讓大部分開發(fā)者和設(shè)計(jì)師更容易上手。簡(jiǎn)單點(diǎn)說就是less、sass是屬于編譯型CSS,需要通過編譯最終生成CSS。區(qū)別如下:
六、rem 和 em 的區(qū)別?
em是一種相對(duì)長(zhǎng)度單位,相對(duì)于自身元素的字號(hào)大小,如果沒有設(shè)置就參照父容器的字號(hào)大小或?yàn)g覽器默認(rèn)字號(hào)大小。rem是CSS3的新標(biāo)準(zhǔn)也是一種相對(duì)長(zhǎng)度單位,其相對(duì)于HTML根標(biāo)簽的字號(hào)大小。
頁布局對(duì)網(wǎng)站的外觀特別重要,布得好,留得住用戶,增收流量;布不好,用戶逃之夭夭,還順道罵兩句。大多數(shù)Web系統(tǒng)會(huì)借用雜志或報(bào)紙那樣排版,至于為什么這樣,我不說,你也懂的,就是產(chǎn)品經(jīng)理吵架吵不過程序員時(shí),常說的:用戶教育成本低。
在HTML中,如果是數(shù)據(jù)集(像excel那種)的布局,常用<table>標(biāo)簽,如果是內(nèi)容塊(網(wǎng)站板塊)的布局,則常用<div>標(biāo)簽。
表格由<table>標(biāo)簽來定義。每個(gè)表格均有若干行<tr>標(biāo)簽和列<td>標(biāo)簽組成。<td>數(shù)據(jù)單元格的內(nèi)容可以包含文本、圖片、水平線、表格等內(nèi)容。表格頭由<th>標(biāo)簽生成。<table>標(biāo)簽常用的屬性是border,用來指定邊框?qū)挾取?lt;th>和<td>的屬性rowspan,可指定跨行數(shù)。
如果真的不理解表格的意義,那你打開excel,好好操作一翻,橫向合并一下單元格就知道什么是跨行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第5個(gè)HTML-表格</title>
</head>
<body>
<table border="1">
<tr>
<th>序號(hào)</th>
<th>產(chǎn)品名稱</th>
<th>編號(hào)</th>
<th>規(guī)格</th>
</tr>
<tr>
<td>1</td>
<td>平板電腦</td>
<td>P1010</td>
<td>9.7英尺</td>
</tr>
<tr>
<td>2</td>
<td>筆記本電腦</td>
<td>C2111</td>
<td>15英尺</td>
</tr>
</table>
</body>
</html>
輸出結(jié)果
網(wǎng)站分塊布局,常用<div>標(biāo)簽進(jìn)行定義。常見網(wǎng)站布局為上中下,上放導(dǎo)航欄,中間放內(nèi)容,底部放版權(quán)和友情鏈接,而它們的分割便是由<div>標(biāo)簽負(fù)責(zé)的。當(dāng)然,用<div>布局,需要CSS的支持才行。同表格<td>標(biāo)簽一樣,<div>標(biāo)簽中,也是可以嵌入<p>、<hr>等標(biāo)簽的。
<div style="color:blue">
<h3>老陳說編程</h3>
<p>一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗(yàn)。<br/>
想學(xué)編程的朋友,可關(guān)注:老陳說編程。<br/>
分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯(cuò)的。</p>
</div>
輸出結(jié)果
好了,有關(guān)HTML布局的內(nèi)容,老陳先講這么多,如果覺得對(duì)你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊,就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友,可關(guān)注:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯(cuò)的。
#前端##Web##程序員##CSS##HTML5#
able表格一種早期十分流行的網(wǎng)頁布局方式,現(xiàn)在基本都是div+css的布局方式,表格一般由tr(行)td(列)標(biāo)簽組成
表格的常用屬性:1)border:表示表格邊框線2)cellpadding:單元格內(nèi)容和內(nèi)邊框之間的距離3)cellspacing:表示單元格之間的間距4)bgcolor:背景顏色5)width:寬度6)height:高度 等等
表格
沒有設(shè)置表格width與height屬性,表格寬高暫時(shí)由單元格的內(nèi)容的寬高決定,其他暫不考慮
想要消除單元格間距與內(nèi)容與單元格內(nèi)邊框的間距設(shè)置屬性cellspacing,cellpadding為"0"
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="10">
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
</tr>
<tr>
<td>C#</td>
<td>Asp.net</td>
<td>MVC</td>
</tr>
<tr>
<td>HTML</td>
<td>JavaScript</td>
<td>JQuery</td>
</tr>
</table>
</body>
</html>
tr常用屬性
align:單元格內(nèi)容的水平對(duì)齊方式,屬性值:1)left2左側(cè))right右側(cè)3)center中間
valign:單元格內(nèi)容的垂直對(duì)齊方式,屬性值1)top上邊2)bottom下邊3)middle中間
rowspan與colspan:將單元格進(jìn)行行與行或者列與列的合并
這些屬性以后都會(huì)寫在css樣式表中;制作顯示一個(gè)對(duì)齊方式與行或列的合并的表格
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
<tr>
<td colspan="3" align="center">課程表</td><!--合并三行-->
</tr>
<tr align="center"><!--單元格內(nèi)容居中顯示-->
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr align="center">
<td>HTML</td>
<td rowspan="2">.NET</td><!--合并兩列-->
<td>JavaScript</td>
</tr>
<tr align="center">
<td>CSS</td>
<td>JQuery</td>
</tr>
</table>
</body>
</html>
顯示效果
表格中設(shè)置的屬性雖然會(huì)繼承,但是子標(biāo)簽單獨(dú)設(shè)置了屬性,就會(huì)覆蓋父標(biāo)簽的屬性;比如tr
設(shè)置align="center",此tr中的子標(biāo)簽td單獨(dú)設(shè)置了align="left",最終效果是此td內(nèi)容居左顯示
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。