前端面试1：CSS布局
生活随笔
收集整理的這篇文章主要介紹了
前端面试1：CSS布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
課程思維導圖
Q：三欄布局，高度已知，左右兩欄固定，中間自適應的三欄布局有幾種實現方式，各自的優缺點是什么？
<!-- float實現優點：兼容性好缺點：脫離文檔流，DOM節點順序錯誤--> <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實現優點：快捷缺點：脫離文檔流--> <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負值實現優點：兼容性好缺點：節點順序錯誤，需要多一層額外的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實現優點：新布局方式，解決以上兩種布局方式的缺陷缺點：兼容性較差--> <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實現優點：兼容性好、快捷缺點：單元格限制，當某個單元格高度調整時，其他單元格也會被調整--> <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實現優點：將網格布局標準化，將復雜問題簡單化缺點：兼容性差--> <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> 復制代碼Q：三欄布局，高度未知，以上布局哪些仍可用，哪些不可用？
Q：三欄布局，高度已知，左中固定，右自適應
與左右固定，中自適應的三欄布局
Q：三欄布局，上下固定，中自適應
<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> 復制代碼Q：CSS居中布局有哪些，適用于什么場景，舉例說明？
一、CSS居中：margin設為auto
二、CSS居中：使用 text-align:center
三、CSS居中：使用line-height讓單行的文字垂直居中
四、CSS居中：使用表格
五、CSS居中：使用display:table-cell來居中
六、CSS居中：使用絕對定位進行居中
場景：只適用于寬度或高度已知的元素。
原理：通過把這個絕對定位元素的left或top的屬性設為50%,這個時候元素并不是居中的，而是比居中的位置向右或向左偏了這個元素寬度或高度的一半的距離，所以需要使用一個負的margin-left或margin-top的值來把它拉回到居中的位置，這個負的margin值就取元素寬度或高度的一半。
七、CSS居中：使用絕對定位進行居中
場景：只適用于寬度或高度已知的元素。且只支持IE9+,谷歌，火狐等符合w3c標準的現代瀏覽器。
原理：這里如果不定義元素的寬和高的話，那么他的寬就會由left,right的值來決定，高會由top,bottom的值來決定，所以必須要設置元素的高和寬。同時如果改變left，right , top , bottom的值還能讓元素向某個方向偏移。
八、CSS居中：使用浮動配合相對定位來進行水平居中
場景：不用知道要居中的元素的寬度，缺點是需要一個多余的元素來包裹要居中的元素。
原理：把浮動元素相對定位到父元素寬度50%的地方，但這個時候元素還不是居中的，而是比居中的那個位置多出了自身一半的寬度，這時就需要他里面的子元素再用一個相對定位，把那多出的自身一半的寬度拉回來，而因為相對定位正是相對于自身來定位的，所以自身一半的寬度只要把left 或 right 設為50%就可以得到了，因而不用知道自身的實際寬度是多少。
Q：CSS布局時需要注意哪些方面？
總結
以上是生活随笔為你收集整理的前端面试1：CSS布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义控件－条状、块状菜单
- 下一篇： 2017年html5行业报告,云适配发布