當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端面试1：CSS布局

發(fā)布時(shí)間：2025/3/17 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了前端面试1：CSS布局小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

課程思維導(dǎo)圖

Q：三欄布局，高度已知，左右兩欄固定，中間自適應(yīng)的三欄布局有幾種實(shí)現(xiàn)方式，各自的優(yōu)缺點(diǎn)是什么？

<section class="float"><style>.float .left {float: left;width: 300px;background: green;}.float .center {background: yellow;}.float .right {width: 300px;float: right;background: red;}</style><article class="left-center-right"><div class="left"></div><div class="right"></div><div class="center"></div></article> </section>  <section class="absolute"><style>.absolute article > div {position: absolute;}.absolute .left {left: 0;width: 300px;background: green;}.absolute .center {left: 300px;right: 300px;background: yellow;}.absolute .right { width: 300px;right: 0;background: red;}</style><article class="left-center-right"><div class="left"></div><div class="center"></div><div class="right"></div></article> </section>  <section class="margin"><style>.absolute .center {width:100%;float:left;}.absolute .main {margin: 0 100px;background:yellow;}.absolute .left {float:left;width: 300px;margin-left: -100%;background: green;}.absolute .right { width: 300px;float:right;margin: -300px;background: red;}</style><article class="left-center-right"><div class="center"><div class="main"></div></div><div class="left"></div><div class="right"></div></article> </section>  <section class="flex"><style>.flex {margin-top: 110px;}.flex .left-center-right {display: flex;}.flex .left {width: 300px;background: green;}.flex .center {flex:1;background: yellow;}.flex .right {width: 300px;background: red;}</style><arctile class="left-center-right"><div class="left"></div><div class="center"></div><div class="right"></div></arctile> </section>  <section class="table"><style>.table .left-center-right {width: 100%;height: 100px;display: table;}.table .left-center-right div {display: table-cell;}.table .left {width: 300px;background: green;}.table .center {background: yellow;}.table .right {width: 300px;background: red;}</style><arctile class="left-center-right"><div class="left"></div><div class="center"></div><div class="right"></div></arctile> </section>  <section class="grid"><style>.grid .left-center-right {display: grid;width: 100%;grid-template-rows : 100px;grid-template-columns : 300px auto 300px;}.grid .left {background: green;}.grid .center {background: yellow;}.grid .right {background: red;}</style><arctile class="left-center-right"><div class="left"></div><div class="center"></div><div class="right"></div></arctile> </section> 復(fù)制代碼

Q：三欄布局，高度未知，以上布局哪些仍可用，哪些不可用？

float：不可用

absolute：不可用

flex：可用

table：可用

grid：不可用

Q：三欄布局，高度已知，左中固定，右自適應(yīng)

與左右固定，中自適應(yīng)的三欄布局

Q：三欄布局，上下固定，中自適應(yīng)

<body><style>* {margin:0;padding: :0;}article {width: 100%;}.top{height: 200px;background: red;position: absolute;top: 0;left: 0;}.bottom {height: 200px;background: blue;position: absolute;bottom: 0;left: 0;}.center {background: yellow;position: absolute;height: auto;top: 200px;bottom: 200px;}</style><article class="top"></article><article class="center"></article><article class="bottom"></article> </body> 復(fù)制代碼

Q：CSS居中布局有哪些，適用于什么場(chǎng)景，舉例說明？

一、CSS居中：margin設(shè)為auto

做法：把要居中的元素的margin-left和margin-right都設(shè)為auto

場(chǎng)景：只能進(jìn)行水平的居中，且對(duì)浮動(dòng)元素或絕對(duì)定位元素?zé)o效。

二、CSS居中：使用 text-align:center

場(chǎng)景：只能對(duì)圖片，按鈕，文字等行內(nèi)元素(display為inline或inline-block等)進(jìn)行水平居中。但要說明的是在IE6、7這兩個(gè)奇葩的瀏覽器中，它是能對(duì)任何元素進(jìn)行水平居中的。

三、CSS居中：使用line-height讓單行的文字垂直居中

做法：把文字的line-height設(shè)為文字父容器的高度

場(chǎng)景：適用于只有一行文字的情況。

四、CSS居中：使用表格

做法：td/th元素設(shè)置align="center"、valign="middle"即可處理單元格里面內(nèi)容的水平和垂直居中問題

場(chǎng)景：必須是table

五、CSS居中：使用display:table-cell來居中

做法：通過display:table-cell 模擬表格單元格，這樣就可以利用表格那很方便的居中特性了。

場(chǎng)景：IE6、IE7都無效。

六、CSS居中：使用絕對(duì)定位進(jìn)行居中

場(chǎng)景：只適用于寬度或高度已知的元素。

原理：通過把這個(gè)絕對(duì)定位元素的left或top的屬性設(shè)為50%,這個(gè)時(shí)候元素并不是居中的，而是比居中的位置向右或向左偏了這個(gè)元素寬度或高度的一半的距離，所以需要使用一個(gè)負(fù)的margin-left或margin-top的值來把它拉回到居中的位置，這個(gè)負(fù)的margin值就取元素寬度或高度的一半。

七、CSS居中：使用絕對(duì)定位進(jìn)行居中

場(chǎng)景：只適用于寬度或高度已知的元素。且只支持IE9+,谷歌，火狐等符合w3c標(biāo)準(zhǔn)的現(xiàn)代瀏覽器。

原理：這里如果不定義元素的寬和高的話，那么他的寬就會(huì)由left,right的值來決定，高會(huì)由top,bottom的值來決定，所以必須要設(shè)置元素的高和寬。同時(shí)如果改變left，right , top , bottom的值還能讓元素向某個(gè)方向偏移。

八、CSS居中：使用浮動(dòng)配合相對(duì)定位來進(jìn)行水平居中

場(chǎng)景：不用知道要居中的元素的寬度，缺點(diǎn)是需要一個(gè)多余的元素來包裹要居中的元素。

原理：把浮動(dòng)元素相對(duì)定位到父元素寬度50%的地方，但這個(gè)時(shí)候元素還不是居中的，而是比居中的那個(gè)位置多出了自身一半的寬度，這時(shí)就需要他里面的子元素再用一個(gè)相對(duì)定位，把那多出的自身一半的寬度拉回來，而因?yàn)橄鄬?duì)定位正是相對(duì)于自身來定位的，所以自身一半的寬度只要把left 或 right 設(shè)為50%就可以得到了，因而不用知道自身的實(shí)際寬度是多少。

Q：CSS布局時(shí)需要注意哪些方面？

語義化掌握到位

頁面布局理解深刻

CSS基礎(chǔ)知識(shí)扎實(shí)

代碼書寫規(guī)范

總結(jié)

以上是生活随笔為你收集整理的前端面试1：CSS布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

css
布局