１．左右布局
２．左中右布局
３．水平居中
４．垂直居中
５．等其他小技巧
１．左右布局
實現(xiàn)方法一：直接用float
直接使用float會導(dǎo)致力崇，當(dāng)頁面變窄，不夠放右邊的部分的時候，會流下去。
<div class="left"></div>
<div class="right"></div>
.left{
width: 100px;
height: 100px;
background: #000;
float: left;
}
.right{
width: 100px;
height: 100px;
background: green;
float: left; //或者右浮動
}
記得給父元素清除浮動
如果給定父元素的寬度磷蜀，可以靈活運用width: num%，來實現(xiàn)布局
實現(xiàn)方式二：margin+float
<div class="left">定寬</div>
<div class="right">自適應(yīng)</div>
.left{
width: 100px;
height: 100px;
background: red;
float: left;
}
.right{
margin-left: -100px;
height: 100px;
background: yellow;
}
image
會發(fā)現(xiàn)百炬，兩個并不齊褐隆，還得調(diào)整。
實現(xiàn)方式三：絕對定位
<div class="left"></div>
<div class="right"></div>
.left{
width: 100px;
height: 100px;
background: #000;
position: absolute;
}
.right{
width: 100px;
height: 100px;
background: green;
position: absolute;
left:100px
}
image
實現(xiàn)方式四：inline-block
<div class="left">..</div>
<div class="right">..</div>
/*實際測試剖踊，發(fā)現(xiàn)50%沒法用庶弃，會擠下去，不知道為啥*/
.left {
display: inline-block;
vertical-align: top;
width: 50%;
background-color: grey;
}
.right {
display: inline-block;
vertical-align: top;
width: 50%;
background-color: pink;
}
修改為48％的效果圖：
image
２．左中右布局
實現(xiàn)方式一：float
<div class="left">..</div>
<div class="middle">...</div>
<div class="right">..</div>
div{
float: left;
}
.left{
width:30%;
background: #000;
}
.middle{
width:40%;
background: grey;
}
.right{
width: 30%;
background: red;
}
image
實現(xiàn)方式二：float + margin + calc（兩側(cè)定寬）
<div class="wrap clearfix">
<div class="left">..</div>
<div class="middle">...</div>
<div class="right">..</div>
</div>
.left{
width:100px;
background: #000;
float: left;
}
.middle{
width: calc(100% - 200px);
background: grey;
float:left;
}
.right{
width: 100px;
background: red;
float: right;
}
image
３．水平居中
行內(nèi)元素：
行內(nèi)元素（主要是表現(xiàn)為文字德澈，圖片等行內(nèi)元素）歇攻，通過在父級元素設(shè)置 text-align:center使子級行內(nèi)元素居中。
定寬塊級元素：
為定寬塊級元素設(shè)置：
margin-left: auto;
margin-right: auto;
不定寬塊級元素：
方法一：設(shè)置 position:relative 和 left:50%
<div>
<ul>
<li><a href="#">我是要</a></li>
<li><a href="#">居中的</a></li>
<li><a href="#">ul標(biāo)簽</a></li>
</ul>
</div>
div{
display: inline-block;
position:relative;
left:50%
}
ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
li{
float:left;
margin-right:8px;
}
通過給父元素設(shè)置 display:inline-block梆造，然后給父元素設(shè)置 position:relative 和 left:50%缴守，子元素設(shè)置 position:relative 和 left:-50% 來實現(xiàn)水平居中。
方法二：設(shè)置 display:inline 方法：
通過給父元素設(shè)置display: inline的方法，然后用行內(nèi)元素居中的方式
４．垂直居中
方式一屡穗，行內(nèi)元素可以使用line-height贴捡；
方式二，定高的塊級元素可以使用display:inline-block然后同上村砂，或者用padding來實現(xiàn)栈暇；
方式三：使用 position 和 transform
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
image
５．等其他小技巧
浮動：
浮動會造成父元素塌陷
image
image
image
解決方法：給浮動元素的父元素箍镜，清除浮動；
image
寬度：
使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況
其他：
box-shadow神器
作者：索伯列夫
鏈接：http://www.reibang.com/p/d04d82d70673
來源：簡書
簡書著作權(quán)歸作者所有煎源，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處色迂。
