前端面试1:CSS布局
課程思維導(dǎo)圖
Q:三欄布局,高度已知,左右兩欄固定,中間自適應(yīng)的三欄布局有幾種實(shí)現(xiàn)方式,各自的優(yōu)缺點(diǎn)是什么?
<!-- float實(shí)現(xiàn)優(yōu)點(diǎn):兼容性好缺點(diǎn):脫離文檔流,DOM節(jié)點(diǎn)順序錯(cuò)誤--> <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> <!-- absolute實(shí)現(xiàn)優(yōu)點(diǎn):快捷缺點(diǎn):脫離文檔流--> <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> <!-- margin負(fù)值實(shí)現(xiàn)優(yōu)點(diǎn):兼容性好缺點(diǎn):節(jié)點(diǎn)順序錯(cuò)誤,需要多一層額外的div,出問題難以排查--> <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> <!-- flex實(shí)現(xiàn)優(yōu)點(diǎn):新布局方式,解決以上兩種布局方式的缺陷缺點(diǎn):兼容性較差--> <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> <!-- table實(shí)現(xiàn)優(yōu)點(diǎn):兼容性好、快捷缺點(diǎn):單元格限制,當(dāng)某個(gè)單元格高度調(diào)整時(shí),其他單元格也會(huì)被調(diào)整--> <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> <!-- grid實(shí)現(xiàn)優(yōu)點(diǎn):將網(wǎng)格布局標(biāo)準(zhǔn)化,將復(fù)雜問題簡(jiǎn)單化缺點(diǎn):兼容性差--> <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:三欄布局,高度未知,以上布局哪些仍可用,哪些不可用?
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
二、CSS居中:使用 text-align:center
三、CSS居中:使用line-height讓單行的文字垂直居中
四、CSS居中:使用表格
五、CSS居中:使用display:table-cell來居中
六、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í)需要注意哪些方面?
總結(jié)
以上是生活随笔為你收集整理的前端面试1:CSS布局的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 自定义控件-条状、块状菜单
- 下一篇: HTML与XHTML差额