1.display:inline-block布局
一:display的几个常用的属性值
inline(行内元素)
1.和其他元素都在一行上,可以与其他行内元素共享一行,不会独占一行
2.高,行高及顶和底边距不可改变,大小由内容撑开
3.可以使用padding,margin上下左右都有效block(块级元素)
1.总是在新行上开始,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度
2.高度,行高以及顶和底边距都可控制,宽度是它的容器的100%,除非设定一个宽度
3.可以设置padding,margin的属性值,top,left,bottom,right都能够产生边距效果inline-block(融合行内于块级)
不独占一行的块级元素
测试一下:
<div class="box"><div class="child1">child1</div><div class="child2">child2</div></div>
.box{width: 280px;background-color: rgb(240, 192, 192);}.child1{width: 100px;height: 100px;background-color: lightblue;}.child2{width: 100px;height: 100px;background-color: rgb(44, 168, 209);}
图一:不设置
图二:对child1,child2样式添加display: inline-block;
两个图可以看出,display:inline-block
后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block
的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。
二:inline-block布局 vs 浮动float布局
a:不同之处:对元素设置display:inline-block
,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果
b.相同之处:能在某程度上达到一样的效果
效果测试:
图一:child1,child2样式为display: inline-block;
的效果
图二:删除child1,child2的display: inline-block;
,对child1,child2样式添加float: left;
的效果,父元素会高度坍塌
所以要闭合浮动,对box使用overflow:hidden;
c.浮动布局不太好的地方:参差不齐的现象
添加两个child,都添加float: left;
的效果,增高child2的高度为120px,box的宽度为380px;
这并不是我们想要的布局效果
我们把四个child的float: left;
删除,都添加display:inline-block
,就会排列整齐
三:inline-block存在的小问题
a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符
b.去除空隙的方法:
1.对父元素添加,font-size:0;
,即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙,这种方法已经可以兼容各种浏览器(子元素的文字消失了,后面要单独设置)
c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:
在ie6/7下:
对于行内元素直接使用dislplay:inline-block;
对于块级元素:需添加display:inline;zoom:1;
总结:
对于横向排列东西来说,倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。对于浮动布局就用于需要文字环绕的时候2. display:table和display:table-cell结合
一:实现元素垂直居中
对父元素display: table;
,子元素display: table-cell;
即可实现垂直居中
效果测试:
<div class="parent"><p class="son">这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!这是一段很长的文字!</p></div>
.parent {width: 300px;height: 300px;text-align: center;}.son {height: 200px;background-color: rgb(165, 230, 140);vertical-align: middle;}
给父元素添加display: table;
,子元素添加display: table-cell;
二:实现元素两端对齐
content:display: table;
left,right:text-align: right;
,display: table-cell;
box:display: inline-block;
,text-align: center;(文字居中)
<div class="content"><div class="left"><div class="box">B</div></div><div class="right"><div class="box">A</div></div></div>
*{box-sizing:border-box;}.content{display: table;border:1px solid #06c;padding:15px 15px;max-width: 1000px;/*对容器的水平居中*/margin:10px auto;min-width: 320px;width:100%;}.box{width:100px;height:100px;border:1px solid #ccc;text-align: center;display: inline-block;font-size: 40px;line-height: 100px;}.right{text-align: right;display: table-cell;}.left{text-align: left;display: table-cell;}
效果如下:
三:自动平均划分每个小模块,使其一行显示
ul{display: table;}
li{display: table-cell;}
<div class="content"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
*{box-sizing:border-box;}.content{display: table;border:1px solid #06c;padding:15px 15px;max-width: 1000px;margin:10px auto;min-width:320px;width:100%;}.content ul{display: table;width:100%;padding:0;border-right:1px solid #ccc;}.content ul li{display: table-cell;border:1px solid #ccc;text-align: center;height:100px;border-right: none;line-height: 100px;}
3.display: flex布局
一:容器属性:
flex-direction
决定主轴的方向(即项目的排列方向)
row
(默认):主轴水平方向,起点在左端;row-reverse
:主轴水平方向,起点在右端;column
:主轴垂直方向,起点在上边沿;column-reserve
:主轴垂直方向,起点在下边沿。
flex-wrap
定义换行情况
nowrap
(默认):不换行wrap
:换行,第一行在上方;wrap-reverse
:换行,第一行在下方。
flex-flow
以上两个属性的简写方式
justify-content
定义项目在主轴上的对齐方式
flex-start
(默认值):左对齐;flex-end
:右对齐;center
:居中;space-between
:两端对齐,项目之间间隔相等;space-around
:每个项目两侧的间隔相等,即项目之间的间隔比项目与边框的间隔大一倍。
align-item
定义在交叉轴上的对齐方式
flex-start
:起点对齐;`flex-end:终点对齐;center
:中点对齐;baseline
:项目的第一行文字的基线对齐;stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
定义多根轴线的对齐方式
flex-start
:与交叉轴的起点对齐;flex-end
:与交叉轴的终点对齐;center
:与交叉轴的中点对齐;space-between
:与交叉轴的两端对齐,轴线之间的间隔平均分布;space-around
:每根轴线两侧的间隔相等,即轴线之间的间隔比轴线与边框的间隔大一倍;
二:项目属性
order定义项目的排列顺序
order: <整数>;
flex-grow数值越小,排列越靠前,默认为0,可以是负值
定义项目的放大比例
flex-grow: <数字>;
默认值为0,即如果空间有剩余,也不放大。
可以是小数,按比例占据剩余空间
1.若所有项目的flex-grow的数值都相同,则等分剩余空间
2.若果有一个项目flex-grow为2,其余都为1,则该项目占据剩余空间是其余的2倍
flex-shrink
定义项目的缩小比例
flex-shrink: <非负整数>;
默认值都为1,即如果空间不足将等比例缩小。
如果有一个项目的值为0,其他项目为1,当空间不足时,该项目不缩小。
负值对该属性无效,容器不应该设置flex-wrap(不设置换行)。
1.设置flex-shrink为0的项目不缩小
2.如果所有项目都为0,则当空间不足时,项目撑破容器而溢出。
3.如果设置项目的flex-shrink不为0的非负数效果同设置为1。
flex-basis
定义在分配多余空间之前,项目占据的主轴空间。
flex-basis: <auto或者px>;
设置flex-basis,空间不足,项目缩小,小于设定值flex
flex-grow
,flex-shrink
和flex-basis
的简写
flex: none | [<flex-grow><flex-shrink><flex-basis>];
1.可以用 flex:auto; 代替 flex: 1 1 auto;;
2.可以用 flex: none;代替 flex: 0 0 auto;align-self
允许单个项目与其他项目有不一样的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
默认值为auto,表示继承父元素的align-items属性,并可以覆盖align-items属性