web前端面試之CSS布局（碼動(dòng)未來(lái)）

2.2.1蚂维、如何居中div米奸？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的div居中构韵？

給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

div{

???? width:200px;

????margin:0 auto;

?}

居中一個(gè)浮動(dòng)元素

確定容器的寬高寬500高 300 的層

設(shè)置層的外邊距

相對(duì)定位的div居中：

?.div {

width:500px ; height:300px;//高度可以不設(shè)

???? ??margin: -150px 0 0 -250px;

??????position:relative; ????????

???? background-color:pink; ????//方便看效果

??????left:50%;

??????top:50%;

?}

讓絕對(duì)定位的div居中：

?.div {

??position: absolute;

??width: 1200px;

??background: none;

??margin: 0 auto;

??top: 0;

??left: 0;

??bottom: 0;

??right: 0;

?}

2.2.2趋艘、display有哪些值疲恢？說(shuō)明他們的作用。

block像塊類型元素一樣顯示致稀。

none缺省值冈闭。像行內(nèi)元素類型一樣顯示俱尼。

inline-block像行內(nèi)元素一樣顯示抖单，但其內(nèi)容像塊類型元素一樣顯示。

list-item像塊類型元素一樣顯示，并添加樣式列表標(biāo)記矛绘。

table此元素會(huì)作為塊級(jí)表格來(lái)顯示

inherit規(guī)定應(yīng)該從父元素繼承 display 屬性的值

2.2.3耍休、position的值relative和absolute定位原點(diǎn)是？

??absolute

生成絕對(duì)定位的元素货矮，相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位羊精。

fixed（老IE不支持）

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位囚玫。

??relative

生成相對(duì)定位的元素喧锦，相對(duì)于其正常位置進(jìn)行定位。

??static

默認(rèn)值抓督。沒(méi)有定位燃少，元素出現(xiàn)在正常的流中（忽略top, bottom, left, right z-index聲明）。

??inherit

規(guī)定從父元素繼承position屬性的值铃在。

2.2.4阵具、li與li之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法定铜？

行框的排列會(huì)受到中間空白（回車\空格）等的影響阳液，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間揣炕，所以會(huì)有間隔帘皿，把字符大小設(shè)為0，就沒(méi)有空格了畸陡。

2.2.5矮烹、請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式

浮動(dòng)從何而來(lái)我們?yōu)楹我宄?dòng)清除浮動(dòng)的原理是什么http://www.bitscn.com/school/HTMLCSS/201312/284207.html

1）普通流：很多人或者文章稱之為文檔流或者普通文檔流罩锐，其實(shí)標(biāo)準(zhǔn)里根本就沒(méi)有這個(gè)詞奉狈。如果把文檔流直譯為英文就是 document flow ，但標(biāo)準(zhǔn)里只有另一個(gè)詞涩惑，叫做 普通流 （normal flow)仁期，或者稱之為常規(guī)流。

2）浮動(dòng)：浮動(dòng)的框可以左右移動(dòng)竭恬，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣跛蛋。浮動(dòng)框不屬于文檔中的普通流，當(dāng)一個(gè)元素浮動(dòng)之后痊硕，不會(huì)影響到 塊級(jí)框的布局而只會(huì)影響內(nèi)聯(lián)框（通常是文本）的排列赊级，文檔中的普通流就會(huì)表現(xiàn)得和浮動(dòng)框不存在一樣，當(dāng)浮動(dòng)框高度超出包含框的時(shí)候岔绸，也就會(huì)出現(xiàn)包含框不會(huì)自動(dòng)伸高來(lái)閉合浮動(dòng)元素理逊。顧名思義橡伞，就是漂浮于普通流之上，像浮云一樣晋被，但是只能左右浮動(dòng)兑徘。

正是因?yàn)楦?dòng)的這種特性，導(dǎo)致本屬于普通流中的元素浮動(dòng)之后羡洛，包含框內(nèi)部由于不存在其他普通流元素了挂脑，也就表現(xiàn)出高度為0（高度塌陷）。在實(shí)際布局中欲侮，往往這并不是我們所希望的崭闲，所以需要清除浮動(dòng)的元素，使其包含框表現(xiàn)出正常的高度威蕉。

清除浮動(dòng)的方式：

1.使用空標(biāo)簽清除浮動(dòng)镀脂。這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽定義css clear:both.弊端就是增加了無(wú)意義標(biāo)簽。

2.使用overflow忘伞。給包含浮動(dòng)元素的父標(biāo)簽添加css屬性overflow:auto;zoom:1;zoom:1用于兼容IE6薄翅。

3.使用after偽對(duì)象清除浮動(dòng)。該方法只適用于非IE瀏覽器氓奈。具體寫(xiě)法可參照以下示例翘魄。使用中需注意以下幾點(diǎn)。

一舀奶、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0暑竟，否則該元素會(huì)比實(shí)際高出若干像素；

二育勺、content屬性是必須的但荤，但其值可以為空，content屬性的值設(shè)為”.”涧至，空亦是可以的腹躁。

4.浮動(dòng)外部元素

此三種方法各有利弊，使用時(shí)應(yīng)擇優(yōu)選擇南蓬，比較之下第二種方法更為可取纺非。

2.2.6、用純CSS創(chuàng)建一個(gè)三角形的原理是什么赘方？

把上烧颖、左、右三條邊隱藏掉（顏色設(shè)為transparent）

#demo {

??width: 0;

??height: 0;

??border-width: 20px;

??border-style: solid;

??border-color: transparent transparent red transparent;

}

2.2.7窄陡、一個(gè)滿屏‘品’字布局如何設(shè)計(jì)?

簡(jiǎn)單的方式：

上面的div寬100%炕淮，

下面的兩個(gè)div分別寬50%，

然后用float或者inline使其不換行即可

2.2.8跳夭、在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體涂圆？為什么呢们镜？

偶數(shù)字體：

一、UI設(shè)計(jì)師的原因

多數(shù)設(shè)計(jì)師用的設(shè)計(jì)軟件（如：ps）大多數(shù)都是偶數(shù)乘综，所以前端工程師一般都是用偶數(shù)字體

二、瀏覽器的原因

其一是為了遷就ie6套硼，萬(wàn)惡的ie6會(huì)把定義為13px的字渲染成14px卡辰，你可以寫(xiě)個(gè)頁(yè)面試試

還有一個(gè)原因是，偶數(shù)寬的漢字邪意，比如12px寬的漢字九妈，去掉1像素的間距，填充了像素的實(shí)際寬是11px雾鬼，這樣漢字的中豎線左右是平分的萌朱，以“中”這個(gè)字為例，在12像素時(shí)策菜，豎線在中間晶疼，左右各5像素，顯得均衡又憨。

其二像谷歌一些比較流行的瀏覽器一般會(huì)有個(gè)默認(rèn)的最小字體翠霍，而且對(duì)奇數(shù)字體渲染的不太好看

三、實(shí)際應(yīng)用

偶數(shù)字號(hào)相對(duì)更容易和web設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系蠢莺。比如：當(dāng)我用了 14 px 的正文字號(hào)寒匙，我可能會(huì)在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的標(biāo)題字號(hào)躏将。Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開(kāi)始只提供 12锄弱、14、16 px 這三個(gè)大小的點(diǎn)陣祸憋，而 13会宪、15、17 px 時(shí)用的是小一號(hào)的點(diǎn)陣（即每個(gè)字占的空間大了 1 px蚯窥，但點(diǎn)陣沒(méi)變）狈谊，于是略顯稀疏。

2.2.9沟沙、margin和padding分別適合什么場(chǎng)景使用

何時(shí)應(yīng)當(dāng)使用margin：

需要在border外側(cè)添加空白時(shí)河劝。

空白處不需要背景（色）時(shí)。

上下相連的兩個(gè)盒子之間的空白矛紫，需要相互抵消時(shí)赎瞎。如15px + 20px的margin，將得到20px的空白颊咬。

何時(shí)應(yīng)當(dāng)時(shí)用padding：

需要在border內(nèi)測(cè)添加空白時(shí)务甥。

空白處需要背景（色）時(shí)牡辽。

上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)敞临。如15px + 20px的padding态辛，將得到35px的空白。

個(gè)人認(rèn)為：margin是用來(lái)隔開(kāi)元素與元素的間距挺尿；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔奏黑。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔编矾，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”熟史。

2.2.10、全屏滾動(dòng)的原理是什么窄俏？用到了CSS的那些屬性

主要呈現(xiàn)方式有兩種蹂匹，一種是整體的元素一直排列下去，假設(shè)有五個(gè)需要展示的全屏頁(yè)面凹蜈，那么高度是500%限寞，只是展示100%，剩下的可以通過(guò)transform進(jìn)行Y軸定位仰坦，也可以通過(guò)margin-top實(shí)現(xiàn)昆烁，第二種就是所有的子元素和頁(yè)面一樣，都顯示在當(dāng)前頁(yè)面缎岗，簡(jiǎn)單的實(shí)現(xiàn)第一種頁(yè)面

2.2.11静尼、CSS隱藏元素的幾種方法（至少說(shuō)出三種）

Opacity:元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁(yè)的布局起作用。它也將響應(yīng)用戶交互;

Visibility:與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互传泊。此外鼠渺，元素在讀屏軟件中也會(huì)被隱藏;

Display:display設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效。此外眷细，讀屏軟件也不會(huì)讀到元素的內(nèi)容拦盹。這種方式產(chǎn)生的效果就像元素完全不存在;

Position:不會(huì)影響布局，能讓元素保持可以操作;

Clip-path:clip-path屬性還沒(méi)有在 IE 或者 Edge 下被完全支持溪椎。如果要在你的 clip-path 中使用外部的 SVG 文件普舆，瀏覽器支持度還要低;

2.2.12、CSS居中（包括水平居中和垂直居中）

一校读、內(nèi)聯(lián)元素居中方案

水平居中設(shè)置：

1.行內(nèi)元素 設(shè)置 text-align:center沼侣；

2.Flex布局設(shè)置display:flex;justify-content:center;(靈活運(yùn)用,支持Chroime，F(xiàn)irefox歉秫，IE9+)

垂直居中設(shè)置：

1.父元素高度確定的單行文本（內(nèi)聯(lián)元素）設(shè)置 height = line-height蛾洛；

2.父元素高度確定的多行文本（內(nèi)聯(lián)元素）

a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle；

b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle轧膘；

二钞螟、塊級(jí)元素居中方案

水平居中設(shè)置：

1.定寬塊狀元素 ?設(shè)置 左右 margin 值為 auto；

2.不定寬塊狀元素

a:在元素外加入 table 標(biāo)簽（完整的谎碍，包括 table鳞滨、tbody、tr蟆淀、td）拯啦，該元素寫(xiě)在 td 內(nèi)，然后設(shè)置 margin 的值為 auto扳碍；

b:給該元素設(shè)置 displa:inine 方法提岔；c:父元素設(shè)置 position:relative 和 left:50%仙蛉，子元素設(shè)置 position:relative 和 left:50%笋敞；

垂直居中設(shè)置：

使用position:absolute（fixed）,設(shè)置left、top荠瘪、margin-left夯巷、margin-top的屬性;

利用position:fixed（absolute）屬性，margin:auto這個(gè)必須不要忘記了;

利用display:table-cell屬性使內(nèi)容垂直居中;

使用css3的新屬性transform:translate(x,y)屬性;

使用:before元素;

2.2.13哀墓、寫(xiě)出幾種IE6 BUG的解決方法

1.雙邊距BUG float引起的 使用display

2.3像素問(wèn)題 使用float引起的 使用dislpay:inline -3px

3.超鏈接hover 點(diǎn)擊后失效 使用正確的書(shū)寫(xiě)順序 link visited hover active

4.Ie z-index問(wèn)題 給父級(jí)添加position:relative

5.Png透明 使用js代碼 改

6.Min-height最小高度 趁餐！Important 解決’

7.select在ie6下遮蓋 使用iframe嵌套

8.為什么沒(méi)有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

QQ技術(shù)交流群:815302226