CSS布局
浏览器把页面盒子按照既定的规则摆放在浏览器页面上，而布局是指将元素以正确的大小摆放在正确的位置上。
display
display
/*设置元素的显示方式*/
display:block|inline|inline-block|nonedisplay: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;width: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|fixedposition: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;width:480px;}
.is .title{position:absolute;bottom:0;width:100%;}
.is .controls{position:absolute;bottom:20px;right:10px;}
.is .controls span{display:inline-block;width: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;width:100%;height:100px;}
.body{position:absolute;top:100px;left:0;bottom:100px;right:0;}
.foot{position:absolute;bottom:100px;left:0;width:100%;height:100px;}
/* 下面为一个图片（无论其大小）在所在窗口中水平居中的例子 */
<div id="img-box"><div id="imgs><a><img href="#"></a></div>
</div>
#img-box{width:100%;height:400px;position:relative;overflow:hidden;min-width:1000px;
}
#imgs{width:(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;width:100%;height:50px;}float浮动
floatfloat:left|right|none|inherit
/*默认宽度为内容宽度；脱离文档流；向指定的方向一直移动*/
/*float的元素在同一个新的文档流中，按照顺序排列。*/
/*floatd的元素脱离了文档流，但是元素中的内容还在文档流中,float left的元素中的内容会挤压没有浮动的元素中的内容。*/clear
clearclear: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{width:700px;margin:0 auto;}
.side{float:right;width:200px;}
.main{float:left:width: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-sizeflex元素对齐
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{width:200px;}
.main{flex:1;}