本次我寫的是關于CSS布局的一些方法，CSS布局就類似于排版，也是最基礎的一項工作，想要寫的文章讓讀者看的有耐心我覺得布局是必不可少的。下面我就列出一些css最基礎的布局方式。
1.css的左右布局
左右布局很常見，簡單來說就是左邊一個容器右邊一個容器，哪里都會看到它的身影，就比如我現(xiàn)在在簡書里寫的markdown里面的預覽模式一樣，它也是左右布局的模式；但是通常我都會用
div這個塊級元素來創(chuàng)造我的模塊，這時候問題就來了，<div>這個塊級元素是獨自霸占一行的，它的左右只有它自己這個時候如果你在加一個<div>它只會出現(xiàn)在上一個<div>的下面一行是不會出現(xiàn)在上一個<div>的左邊的，那么如何是這兩個<div>變成左右布局的呢? 下面有請我們的黑科技float:left
float:left顧名思義是一種屬性，它的加入給了塊級元素浮動的效果 例:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="all clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
CSS:
.one{
width:100px;
height:100px;
background: black;
float:left;
}
.two{
width:100px;
height:100px;
background: red;
float:left;
}
我在兩個子元素里加了
float:left之后它們脫離了文檔流 ，就像內(nèi)聯(lián)元素一樣可以在一行里顯示了，自然也變成了左右布局。
2.css的水平居中
什么叫水平居中?就是一個子容器在自己的父容器中處于水平中間的位置。以文檔流的形式來看就是一段文字處在這一行的最中間的位置。那如何實現(xiàn)它們的水平居中呢? 我們可以用
margin:0 auto或者可以使用text-align:center
方法一:使用
margin:0 auto從而獲得水平居中 例:
.one{
width:100px;
height:100px;
background: black;
margin:0 auto;
}
方法二 脫離文檔流從而獲取水平居中
給目標設置一個父元素 然后給目標div變成脫離文檔流狀態(tài)( 可以使用display:inline-block來實現(xiàn)脫離文檔流) 然后我們把text-align:center寫在父元素上 這樣我們就也是先了水平居中狀態(tài)
.all{
border:1px solid red;
text-align: center;
}
.one{
width:100px;
height:100px;
background: black;
display:inline-block;
}
水平居中和垂直居中的區(qū)別 :
水平居中：文字的左右兩邊的間距是一樣的，
垂直居中:文字的上邊和下邊的間距是一樣的。
3.垂直居中
垂直居中相信看了上面的圖片大家就明白它和水平居中的區(qū)別了那么如何做到垂直居中呢?我是這樣做的 :
.all{
width:500px;
height:500px;
border:1px solid red;
text-align: center;
position: relative;
}
.one{
width:100px;
height:100px;
background: black;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
1在普通文檔流里，
margin: auto;的意思是設置元素的margin-top和margin-bottom為0;
2.設置了position: absolute; 的元素會變成塊元素，并脫離普通文檔流。而文檔的其余部分照常渲染，元素像是不在原來的位置一樣。
3.設置了top: 0; left: 0; bottom: 0; right: 0; 樣式的塊元素會讓瀏覽器為它包裹一層新的盒子，因此這個元素會填滿它相對父元素的內(nèi)部空間，這個相對父元素可以是是body標簽，或者是一個設置了position: relative; 樣式的容器。
4.css的其它小技巧
1.使用
border:1px solid red來顯示所包裹的物體的具體位置及大小往往是很有用的。
2.比如說在做一個導航欄你想給每個鏈接下面鼠標羅上去都會出現(xiàn)一個下邊框時，如果你直接加一個
hover然后你面給一個border-bottom:1px solid black時，當你去點擊這些<a>標簽時雖然會出現(xiàn)下劃線但是你的導航欄會抖動 那么如何解決呢?很簡單你只要在原來的<a>標簽上協(xié)商這樣一段代碼border-bottom:1px solid transparent這樣的原理呢是在原來的<a>標簽上加上一個同名的下劃線來占位 這樣當我們鼠標點擊的時候就不會再出現(xiàn)位置不足而抖動的情況了
