前端面試題答案整理之CSS
介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?
css盒子模型由4部分構成,margin、border、padding、content。標準盒子模型和IE盒子模型的主要區別是在於width的計算,標準盒子模型中,width = content的寬度,IE盒子模型中width包括content、padding、border。
- CSS選擇符有哪些?哪些屬性可以繼承?
ID選擇器、類選擇器、標籤選擇器、屬性選擇器、後代選擇器等。優先順序:ID > 類 = 偽類 = 屬性 > 元素 = 偽元素。內聯樣式優先順序比ID高,!important優先順序最高。
可繼承的屬性:visibility. cursor - 如何居中div?如何居中div中的內容?
居中div
//適用於寬高已知的元素。
.item{
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
<div class="item"></div>
//利用flex佈局,不限制寬高
.parent{
display: flex;
justify-content : center;
align-items: center;
height: 500px;
width: 500px;
background:red;
}
.item{
width: 100px;
height: 100px;
border: 1px solid #000;
}
<div class="parent">
<div class="item"></div>
</div>
//
.item{
width: 100px;
height: 100px;
border: 1px solid #000 ;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
<div class="item"></div>
居中div中的內容
//缺點是如果div寬度設定不夠,內容會自動換行超出容器。只有當div的寬度足夠容納文字時,才會達到想要的效果,適用於單行文字居中。
.item{
width: 200px;
height: 100px;
border: 1px solid #000;
line-height: 100px; //行高與div等高,實現垂直居中
text-align: center; //實現水平居中
}
<div class="item">垂直水平我都居中了。</div>
//利用table佈局。適用於多行居中。
.parent{
display: table;
}
.item{
display: table-cell;
width: 200px;
height: 200px;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
}
<div class="parent">
<div class="item">垂直水平我都居中了。</div>
</div>
- 用純CSS建立一個三角形的原理是什麼?
- 滿屏 品 字佈局 ?非滿屏品字佈局?三列布局,左右定寬,中間自適應?
<div class="content">
<div class="top">p1</div>
<div class="left">p2</div>
<div class="right">p3</div>
</div>
//滿屏品字佈局
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 100px;
background: pink;
}
.left,.right{
float: left;
width: 50%;
height: 100px;
background: yellow;
}
.right{
background:blue;
}
//非滿屏品字佈局
*{
margin: 0;
padding: 0;
}
.top{
width: 100px;
height: 100px;
margin: 0 auto;
background: pink;
}
.left,.right{
float: left;
width: 100px;
height: 100px;
}
.left{
margin-left: 50%;
background:red;
}
.right{
background:blue;
margin-left: -200px;
}
//三列布局,左右定寬中間自適應。本文采用的方法注意center放在最後面一個div
<div class="content">
<div class="left">p1</div>
<div class="right">p3</div>
<div class="center">p2</div>
</div>
*{
margin: 0;
padding: 0;
}
.center{
width: auto;
background:pink;
height: 100%;
margin-left: 150px;
margin-right: 200px;
}
.left{
background: #E79F6D;
width:150px;
float:left;
}
.right{
background: #77BBDD;
width:200px;
float:right;
}
//三列布局,利用flex佈局
<div class="content">
<div class="left">p1</div>
<div class="center">p2</div>
<div class="right">p3</div>
</div>
*{
margin: 0;
padding: 0;
height: 100%
}
.content{
display: flex;
}
.left,.right{
width: 120px;
height: 100%;
background: green;
}
.center{
height: 100%;
background: pink;
width: 100%;
}
常見相容性問題?
1.不同瀏覽器的標籤預設的margin和padding不同:*{margin:0;padding:0}
2.塊級元素float後,又存在margin-left/right時,IE6中顯示margin比設定的大:只要在float的標籤樣式中加入 display:inline;將其轉化為行內屬性即可
3.設定較小高度標籤(一般小於10px),在IE6,IE7中高度超出自己設定高度:設定overflow:hidden或者是將line-height設定為更小的高度。
4.圖片預設有間距:使用float屬性為img佈局。li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
li標籤之間的空白間隔是由於換行符導致的。所以最簡單的辦法是寫li標籤的時候不換行,但是不美觀。
CSS裡的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
當在表格元素中使用時,設定visibility:collapse可刪除一行或一列,但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 “hidden”。- position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
1.首先看display、position、float之間的關係。
display:none,則positon/float不起作用。
display不為none,看position是否是absolute/fixed,如果是的話,float不起作用,display按照block/table展示;如果不是的話,再看float的值,如果float為none,display同設定值。如果float不是none或者元素為根元素的時候,調整diaplay的值。
2.再看margin-collapse:兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊。浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊 - 對BFC規範(塊級格式化上下文:block formatting context)的理解?
* BFC主要有這樣3個特性:*
1.屬於不同BFC的元素不會發生margin-collapse
2.BFC相當於一個隔離的盒子,不影響外部元素的佈局,外部元素也不會影響內部盒子的佈局。
3.塊級格式化上下文不會重疊浮動元素,
觸發BFC的條件:
1.float不為none
2.position為absolute/fixed的元素
3.display為table/table-cell/table-caption/inline-block
4.overflow不為visible - 清除浮動的方式
1.在浮動元素末尾新增一個空的標籤,設定 clear:both
2.父元素設定overflow:hidden/auto
3.利用after偽元素:這裡我們使用::after。新增一個類clear,在需要清除浮動時,只需要給父元素追加clear類即可
.clear::after {
content:"";
display:table;
clear:both;
}
::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。
雙冒號表示偽元素,單冒號表示偽類。
::before將會在內容之前“新增”一個元素,而::after將會在內容後“新增”一個元素。在它們之中新增內容我們可以使用content屬性如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?
**多數顯示器預設頻率是60Hz,即1秒重新整理60次,所以理論上最小間隔為1/60*1000ms = 16.7ms
**- 有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。
<div class="content">
<div class="top"></div>
<div class="bottom"></div>
</div>
//絕對佈局
*{
margin: 0;
padding: 0;
}
.content{
width: auto;
height: 200px;//演示方便,所以設定了一個高度
border: 5px solid #000;
position: relative;
}
.top{
height: 100px;
background: red;
}
.bottom{
position: absolute;
top: 100px;
right: 0px;
left: 0px;
bottom: 0px;
background: green;
}
//flex
.content{
display: flex;
flex-flow: column wrap;
border: 1px solid blue;
}
.top{
height: 100px;
background: red;
}
.bottom{
background: green;
}
- 什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
因為cookie有域的限制,因此不能跨域提交請求,故使用非主要域名的時候,請求頭中就不會帶有cookie資料 - style標籤寫在body後與body前有什麼區別?
寫在body後面會重新渲染