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;}