(1)父元素的dispaly:table
, 然后自身的display
为table-cell
,这样的话,自己可以利用垂直属性:vertical-align:middle
.
(2)采用绝对定位的方式position:absolute
,当然是对于其父节点。设置自身高度,top为50%,此时的水平线在顶部,通过设置margin-top为一半的高度就行了。
(3)对于固定宽和高的块级元素就比较简单,直接绝对定位,然后设置top,right,bottom,left为0,同时设置margin:auto就行了。
(4)对于容器内的单行文本垂直居中,只需设置其height = line-height就可以了。
(5)还有一种不要轻易尝试,增加个div父元素,float:left,margin-bottom:-一半height,height:50%。自身position:relative,clear:both.
3.flex布局
容器有的属性:
可以参考:https://github.com/xingbofeng/css-grid-flex
.box{
display:flex,//行内元素 display:inline-flex
flex-direction: row (default)| row-reverse | column | column-reverse;//定义排列方向
flex-wrap: nowrap(default) | wrap | wrap-reverse;//定义是否可以换行
flex-flow:flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around;//主轴的对其方式
// 左对齐,右对齐,居中对齐,两侧对其中间填充,两边对其,四周填充
align-items: flex-start | flex-end | center | baseline | stretch;//竖轴对其方式,基线对其,拉伸对其
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
//一行放不下是,多行轴线的对其方式
}
项目有的属性:
.item {
order: <integer>;//排列顺序,越小排在越前面,默认为零
flex-grow: <number>; /\* default 0 \*/ 缩放比例,设置百分比可以显示多行,也很好用
flex-shrink:<number>; /\* default 1 \*/ 缩放比例,如果为零,表示不缩放。
flex-basis: <length> | auto; /\* default auto \*/ 占据的空间大小,可以是固定大小
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;//纵轴上单个项目的对其方式,默认继承align-items
}
常用的应用场景:
(1)水平垂直居中
设置父元素的align-items:center(垂直居中),justify-content:center(水平居中)就行了。
<div class="box">
<div class="content">我是子元素,我要垂直居中</div>
</div>
.box {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 500px;
background-color: green;
}
.content {
height: 200px;
width: 200px;
background-color: yellow;
line-height: 200px;
text-align: center;
}
(2)圣杯布局
<div class="box">
<header>header</header>
<div class="content">
<main>main</main>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</div>
.box {
display: flex;
flex-direction: column;
width: 100%;
height: 500px;
background-color: yellow;
text-align: center;
font-size: 30px;
}
header, footer {
flex: 0 0 80px;
line-height: 80px;
}
header {
background-color: pink;
}
footer {
background-color: gray;
}
.content {
display: flex;
flex: 1;
}
nav {
order: -1;
background-color: blue;
flex: 0 0 80px;
}
aside {
background-color: green;
flex: 0 0 80px;
}
main {
flex: 1;
}
(3)响应式布局
这是一道来自百度前端技术学院-task10:Flexbox 布局练习的习题
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
.box div{
width: 150px;
padding: 20px;
}
.box1 {
height: 120px;
background-color: red;
}
.box2 {
height: 100px;
background-color: blue;
}
.box3 {
height: 40px;
background-color: pink;
}
.box4 {
height: 200px;
background-color: yellow;
}
@media (min-width: 640px) {
.box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
@media (max-width: 640px) {
.box {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.box4 {
order: -1;
}
}
其他的一些应用(固定在底部):http://azq.space/blog/flex/
一些常用的清除浮动
如果有一个DIV作为外部容器,内部的元素如果设置了float样式,则外部的容器DIV因为内部元素float脱离文档流,导致不能被撑开。这个时候我们可以用clearfix清除浮动
- 骨灰级的:
.clear{clear:both;height:0;overflow:hidden;}
上诉办法是在需要清除浮动的后面加个div.clear,最大缺陷就是改变了html结构,虽然只是加个div。
- 推荐的 伪元素
.clearfix:after{content:"";
display:block;
height:0;
clear:both;
visibility:hidden
}