1.display:inline-block布局
一:display的几个常用的属性值
- inline(行内元素)
1.和其他元素都在一行上,可以与其他行内元素共享一行,不会独占一行
2.高,行高及顶和底边距不可改变,大小由内容撑开
3.可以使用padding,margin上下左右都有效
块级元素 | 说明 |
---|---|
a | 超链接 |
span | 常用行级 |
strong | 加粗,强调 |
b | 加粗,不强调 |
em | 斜体,强调 |
i | 斜体,不强调 |
img | 图片 |
input | 输入框 |
select | 下拉列表 |
- block(块级元素)
1.总是在新行上开始,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度
2.高度,行高以及顶和底边距都可控制,宽度是它的容器的100%,除非设定一个宽度
3.可以设置padding,margin的属性值,top,left,bottom,right都能够产生边距效果
块级元素 | 说明 |
---|---|
div | 最典型的块元素 |
p | 表示段落 |
h1-h6 | 六级标题,默认加粗 |
br | 表示换行 |
ol | 有序刘表 |
ul | 无序列表行 |
- 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: <整数>;
数值越小,排列越靠前,默认为0,可以是负值
- flex-grow
定义项目的放大比例
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属性