最近學(xué)習(xí)了CSS的一些知識，下面總結(jié)一下我學(xué)到的CSS布局技巧
1.左右布局
(1). 浮動
左右布局也叫橫向布局，常用的方法是：
在所有子元素上添加浮動float:left;或float:right;
在父元素上添加上類名 clearfix
例如做一個(gè)導(dǎo)航欄時(shí)划址，
HTML如下
<div class="wrap clearfix">
<div class="left"><a href="#">關(guān)于</a></div>
<div class="middle"><a href="#">技能</a></div>
<div class="right"><a href="#">作品</a></div>
</div>
css樣式如下：
div.wrap {
margin: 0;
padding: 0;
margin-top: 3px;
}
div.wrap>div {
float: left;
margin: 0 17px;
}
clearfix類的css樣式如下：
.clearfix::after {
content:'';
clear:both;
display:both;
}
最終效果：
(2) 絕對定位position : absolute;
在所有子元素上添加絕對定位position : absolute;
在父元素上添加上相對定位或絕對定位position : relative;或position : absolute;
同樣是上面的例子
css樣式如下：
div.wrap {
position: relative;
}
div.wrap>div {
position: absolute;
}
div.wrap>.left {
left:0;
top:0;
}
div.wrap>.right{
right:0;
top:0;
}
2.左中右布局
左中右布局可以根據(jù)情況使用左右布局中浮動和絕對定位兩種方法梦抢，另外一種是BFC三欄布局：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
3.水平居中
(1). 對于行內(nèi)元素, 可以給行內(nèi)元素的父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中
span.parent {
text-align:center;
}
(2). 對于定寬塊級元素, 對該塊級元素設(shè)置 margin:0 auto，前提是居中的塊級元素寬度必須固定（定寬）
div{
width:100px;
margin:0 auto;
}
(3). 對于不定寬塊級元素, 將該塊級元素設(shè)置 行內(nèi)塊級元素（display: inline-block;）限嫌，在對該元素的父級元素設(shè)置text-align:center送粱；
div{
display: inline-block;
text-align:center;
}
(4). 對于浮動元素, 可以設(shè)置父元素寬度設(shè)置為fit-content（CSS3）,并且配合margin:0 auto;
.parent{
width:fit-content;
margin:0 auto;
}
(5). 使用絕對定位褪贵，以及transform屬性（CSS3）, 子元素設(shè)置如下:
.parent {
position: relative;
}
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
4.垂直居中
(1). 對于單行文本, 則可設(shè)置 line-height 等于父元素高度
(2). 使用絕對定位，以及transform屬性（CSS3）, 設(shè)置父元素相對定位(position:relative), 子元素如下css樣式:
.parent {
position: relative;
}
.son{
position:absolute;
top:50%;
transform: translate(-50%,-50%);
}
(3). 對于不定寬塊級元素, 將該塊級元素設(shè)置 行內(nèi)塊級元素（display: inline-block;）抗俄，利用偽元素和vertical-align: middle脆丁，樣式如下：
.parent::after,
.son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
5.其他小技巧
(1). 元素脫離文檔流的方法：
- position: fixed; 脫離文檔流相對于窗口定位
這種方法會使寬度往內(nèi)縮，寬度需要重新設(shè)置 - 絕對定位：position:absolute;
脫離文檔流相對于祖先中第一個(gè)relative元素定位
(2). :nth-child() 偽類選擇器
nth-child(odd)父元素下的奇數(shù)子元素
nth-child(even)父元素下的偶數(shù)子元素
(3). 一些小工具
- iconfont.cn 這個(gè)網(wǎng)站里有各種小圖標(biāo)可以用动雹，搜索后選擇合適的圖標(biāo)加入項(xiàng)目槽卫，可以自動生成代碼
- generator 對于一些寫起來較為復(fù)雜的CSS樣式，例如linear-gradient或者box-shadow,可以直接搜索 linear-gradient generator 這個(gè)工具會提供圖形化界面洽胶，操作非常方便，直接生成代碼裆馒，復(fù)制過來就行了
- CSS Tricks 這個(gè)網(wǎng)站里面有很多大神的CSS作品例子姊氓，提供了源代碼，可以直接在里面搜索相應(yīng)的關(guān)鍵詞喷好，模仿學(xué)習(xí)
