面試之道之 CSS 佈局

時間 2019-11-06

原文原文鏈接

浮動（float）知識點

浮動主要考察爲何清除浮動和如何清除浮動的問題。css

浮動場景：一般對於塊級元素咱們是不設置高度的（天知道之後會不會加內容，另外設置了高度會帶來顯示問題），塊級元素的高度是靠子元素內容撐開的。這時，子元素設置浮動，子元素就會脫離文檔流，此時父元素的高度就不能靠子元素內容撐開了，就會出現顯示（體驗）問題。css3

清除浮動是爲了解決頁面父元素高度塌陷的問題。如何清除呢，這纔是我關心的git

方法一：使用 `overflow: hidden`（在父元素操做）

.clearfix {
    overflow: hidden;
}
複製代碼

反作用是離開了這個元素所在的區域之後會被隱藏（ overflow:hidden 會將超出的部分隱藏起來），不推薦。。github

方法二：添加一個標籤

在父元素裏面加一個標籤，標籤樣式面試

.clear {
    clear: both;
}
複製代碼

反作用就是添加了一個無用標籤，不推薦。佈局

方法三：使用僞元素來清除浮動

.clearfix {
    zoom: 1; // 爲了兼容IE
}
.clearfix: after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
複製代碼

方法四：使用雙僞元素清除浮動

.clearfix {
    zoom: 1; // 爲了兼容IE
}
.clearfix:before,.clearfix:after {
    content: "";    
    display: block;    
    clear: both;
}
複製代碼

清浮動前post

清浮動後flex

居中知識點

使用 flex

.parent {
    width: 520px;
    height: 260px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

.child {
    background-color: pink;
    width: 300px;
    height: 150px;
}
複製代碼

使用 transform（css3 屬性）

.parent-transform {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-transform {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

使用 `margin` 負值

.parent-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -150px;
}
複製代碼

使用 `absolute` 和 `margin`

.parent-absolute-margin {
    width: 520px;
    height: 260px;
    background-color: green;
    position: relative;
}

.child-absolute-margin {
    background-color: pink;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
複製代碼

使用 flexui

使用 transformspa

使用 margin 負值

absoulte 和 margin

三欄佈局

浮動對策

左右兩欄浮動（脫離文檔流），中間一欄經過 margin 左右值（左右兩欄的寬度以及欄外間距）,別忘了清浮動

.three-column-float {
    height: 200px;
    background-color: #ddd;
}

.float-left {
    float: left;
    width: 300px;
    height: 100%;
    background-color: deepskyblue;
}

.float-right {
    float: right;
    width: 300px;
    height: 100%;
    background-color: pink;
}
.float-center {
    height: 100%;
    margin: 0 320px;
}
複製代碼

絕對定位對策

左右兩欄絕對定位（脫離文檔流），中間一欄經過 margin 左右值（左右兩欄的寬度以及欄外間距）

.three-column-absolute {
    position: relative;
    height: 200px;
    background-color: #ddd;
}

.absolute-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color:deepskyblue;
}

.absolute-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background-color: pink;
}

.absolute-center {
    height: 100%;
    margin: 0 320px;
}
複製代碼