CSS布局

浏览器把页面盒子按照既定的规则摆放在浏览器页面上，而布局是指将元素以正确的大小摆放在正确的位置上。

display

display
/*设置元素的显示方式*/
display:block|inline|inline-block|none

display:block;
/*默认宽度为父元素宽度；可以设置宽高；换行显示*/
/*默认display:block的元素-->div,p,h1-h6,ul,form.....*/

display:inline;
/*默认宽度为内容宽度；不能设置宽高；同行显示*/
/*默认display:inline的元素-->span,a,label,cite,em....*/

display:inline-block;
/*默认宽度为内容宽度；可以设置宽高；同行显示；整块儿换行；*/
/*默认display:inline-block的元素-->input,textarea,select,button....*/

display:none;
/*设置元素不显示*/
/*display:none vs visibility:hidden*/
/* display:none -->元素不显示，不占空间； */
/* visibility:hidden -->元素不显示，但是依然占据空间；*/

布局模式

/*块级元素水平居中*/
<div>
    <div class="content">content area</div>
</div>

.content{margin:auto;with:978px;}


/*居中导航*/
<ul>
    <li><a href="#">推荐</a></li>
    <li><a href="#">歌单</a></li>
    <li><a href="#">大牌DJ</a></li>
    <li><a href="#">歌手</a></li>
    <li><a href="#">新碟上架</a></li>
</ul>

ul{text-align:center;height:30px;line-height:30px;}
li,a{display:inline-block;80px;height:100%;}
li{margin:0 10px;}

定位position

使用position来设置定位方式；
使用top,right,bottom,left,z-index来设置位置；
- top,right,bottom,left的值为元素边缘距离参照物的距离；
z-index表示盒子在z轴上的排序；
- 比较z-index的值的时候，要先看一下父元素的z-index值，再比较本元素的z-index值；

position:static|relative|absolute|fixed

position:relative
/*元素仍在文档流中,参照物为元素本身*/
/*常用来改变元素的z-index值*/
/*使用场景：绝对定位元素的参照物。！important*/
position:relative;
top:10px;left:20px;/*盒子以元素本身为参照，向右下方偏移了10px和20px*/

position:absolute
/*默认宽度为内容宽度；落体文档流；参照物为第一个定位的祖先/根元素*/
/*下面为一个轮播头图的例子*/
<div class="is">
    <img src="hot girl.jpg">
    <p class="title"><a href="#">美女在小巷子竟然干这事儿？</a><p>
    <div class="controls">
        <span></span><span></span><span></span><span class="cur"></span><span></span>
    </div>
</div>
.is{position:relative;480px;}
.is .title{position:absolute;bottom:0;100%;}
.is .controls{position:absolute;bottom:20px;right:10px;}
.is .controls span{display:inline-block;10px;height:10px;border-radius:50%;}
/*下面为一个三行自适应布局的例子*/
<body>
    <div class="head">head</div>
    <div class="body">body</div>
    <div class="foot">foot</div>
</body>
body{position:relative;}
.head{position:absolute;top:0;left:0;100%;height:100px;}
.body{position:absolute;top:100px;left:0;bottom:100px;right:0;}
.foot{position:absolute;bottom:100px;left:0;100%;height:100px;}
/* 下面为一个图片（无论其大小）在所在窗口中水平居中的例子 */
<div id="img-box">
    <div id="imgs>
        <a><img href="#"></a>
    </div>
</div>
#img-box{
    100%;
    height:400px;
    position:relative;
    overflow:hidden;
    min-1000px;
}
#imgs{
    (img-width);
    height:(img-height);
    position:absolute;
    left:50%;
    margin-left=-(img-width/2);
    overflow:hidden;
}
    


position:fixed
/*默认宽度为内容宽度；脱离文档流；参照物为浏览器窗口；*/
/*下面为一个固定顶栏的例子*/
<body>
    <div class="top">top bar</div>
    <div class="main">main content area</div>
</body>
body{padding-top:50px;}
.top{position:fixed;top:0;100%;height:50px;}

float浮动

float

float:left|right|none|inherit
/*默认宽度为内容宽度；脱离文档流；向指定的方向一直移动*/
/*float的元素在同一个新的文档流中，按照顺序排列。*/
/*floatd的元素脱离了文档流，但是元素中的内容还在文档流中,float left的元素中的内容会挤压没有浮动的元素中的内容。*/

clear

clear

clear:both|left|right|none|inherit
/*应用于后续元素；应用于块儿级元素；*/

/*clearfix 的应用*/
.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}

两列布局案例

/*下面是一个两列布局的例子*/
<div class="body clearfix">
    <div class="side">side</div>
    <div class="main">main</div>
</div>

.body{700px;margin:0 auto;}
.side{float:right;200px;}
.main{float:left:500px;}
.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

flex

flex

/*创建flex container */
display:flex;
/*和display:block|inline|inline-block|none是一样的布局样式而已*/

flex item /*在文档流中的子元素*/
<div style="display:flex">
    <div>block</div>/*是flex item*/
    <div style="float:left;">float</div>/*是flex item*/
    <span>inlin</span>/*是flex item*/
    <div style="position:absolute;"></div>/*不是flex item*/
    <div>
        <div>grandson</div>/*不是flex item*/
    </div>
</div>

flex-direction
flex-direction:row|row-reverse|column|column-reverse
/*默认row*/

flex-wrap
flex-wrap:nowrap|wrap|wrap-reverse
/*默认wrap*/

flex-flow
flex-flow:<'flex-direction'>||<'flex-wrap'>

order
order:<interger>
initial:0
/* 需要进一步研究啊 */

flex-basis
flex-basis:main-size|<width>
/*设置flex item的初始宽/高*/

flex-grow
flex-grow:<number>
initial:0
/*flex item的最终尺寸=flex-basis + flex-grow/sum(flex-grow)*remain */

flex-shrink
flex-shrink:<number>
initial:1
/*flex item的最终尺寸=flex-basis + flex-shrink/sum(flex-shrink)*remain */

flex
flex:<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size

flex元素对齐

justify-content
justify-content:flex-start|flex-end|center|space-between|space-around
/*设置main-axis方向上的对齐方式*/

align-items
align-items:flex-start|flex-end|center|baseline|stretch
/*设置cross-axis方向上的对齐方式*/

align-self
align-self:auto|flex-start|flex-end|center|baseline|stretch
/*设置单个flex item在cross-axis方向上的对齐方式*/

align-content
align-content:flex-start|flex-end|center|space-between|space-around|stretch
/*设置cross-axis方向上 行 的对齐方式


/* 下面是一个三行两列自适应布局 */
<div class="head">head</div>
<div class="body>
    <div class="side">side</div>
    <div class="main">main</div>
</div>
<div class="foot">foot</div>

body{display:flex;flex-flow:column;}
.head,.foot{height:100px;}
.body{flex:1;display:flex;}
.side{200px;}
.main{flex:1;}