布局。
display 设定元素的现实方式。
常用值:block, inline, inline-blokc, none.
block块级元素,默认高度为父级宽度,可以设置宽高。换行显示。
inline:默认宽度为内容宽度,不可以设置宽高的。行级元素无法设定宽高。同行显示。
inline-block:默认宽度为内容宽度,可设置宽高,同行显示。超出的部分,整块换行。
none:元素不显示。下面的元素就会占据他的位置。
注意:visibility:hidden.隐藏,但是占位置。没有脱离文档流。
对比一下块级元素和行级元素。
块级元素:父级元素宽度,可以设定宽高,起始位置换行。
行内元素:内容宽度, 不可以设定宽高, 同行显示。
margin:0 auto;
text-align:center. //行级元素。
inline-block:
position:absolute;
top, left, bottom, left, 设定元素边缘,到参照物边缘的距离。
z-index:默认是0
z-index有栈的概念。父级元素也具有决定性的作用。
position:static|relative|absolute|fixed
static:静态的
relative: 相对定位,仍然在文档流中。块级,换行排列;行内就行内。
相对定位的参照物时元素本身。top:10px; left:-100px;
使用场景是绝对定位的参照物。对其他布局没有影响。
absolute绝对定位。
absolute的标签是相对于上层标签中第一个有position定位的标签,
如果没有这样的标签,就是body。
fixed:固定定位。宽度为默认内容宽度。脱离文档流。下面的元素会上来。
参照物是视窗。就是浏览器。
固定顶栏布局。
<body>
<div class="top">top bar</div>
<div class="mian">main content area</div>
</body>
<style type="text/css">
body {
padding-top:50px;
}
.top {
position:fixed;
top:0;
100%;
height:50px;
}
</style>
遮照的布局:
.mask{
position:fixed;
top:0;
left:0;
z-index:100;
100%;
height:100%;
}
三行自适应布局
header
main
footer
absolute
top, left, bottom, right.设定。这样,会把div撑开。
两列:
float:left,right,none(默认),inherit
浮动宽度和默认宽度,脱离文档流。浮动元素,向指定方向移动,移动到不能移动为止 。
float的元素,在同一个文档流中。比如同一个父级元素下面有2个元素,
都是float:left.一次向左。不重叠。
float半脱离文档流的。float不会改在覆盖在其他内容上面的。
对元素,float是脱离文档流的;对内容,在文档流。
内容可以环绕在float标签中。float不会占据内容的区域。
清楚浮动。
clear:both,left,right,none(默认)
应用于浮动元素的后续元素,清除浮动元素对后续元素的影响。
应用于块级元素。
(1)增加一个不显示的空白元素,清除浮动。
<br class="cb">
.cb {
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
clearfix:清除浮动。
(2)在float的父级元素添加clearfix。之后的元素就不会受浮动影响。
.clearfix:after(
content:'.';
display:block;
claer:both;
height:0;
overflow:hidden;
visibility:hidden;)
//IE的低版本,不支持after
.clearfix(zoom:1;)
//间隔自适应,多行,多列自适应。
弹性布局。
flex
display:flex;
在文档流中的直接子元素,才是弹性元素。
排列方向:
flex-direction:row(默认)|row-reverse|column|column-reverse.
row:行,从左向右,
row-reverse:从右向左,
column:列,从上到下
column-reverse:从下到上。
flex-wrap:nowrap|warp|warp-reverse.
nowrap:不换行
warp:换行
warp-reverse:从后向前,反向换行。
flex-flow:<'flex-direction'> || <'flex-wrap'>
flex-direction:定义弹性盒子元素的排列方向。
flex-wrap:定义弹性盒子元素溢出父容器时是否换行。
order:<interger>,定义排列顺序。
弹性相关:
flex-grow
flex-shrink
flex-basis:main-szie|<width> 设置flex item的初始宽/高