display
inline-block实现网格效果
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
inline-block.png
position
static -- 默认
relative -- 控制多个position: relative视图之间的相对位置
fixed -- 对于整个视图的固定位置
absolute -- 控制对于上个position视图的相对位置
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}
效果：
position.png
flexbox
- 使用 Flexbox 的居中布局
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
- 使用 Flexbox 的牛逼布局
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
# initial和none 剩余空间的1/3
.flex1 {
-webkit-flex: 1;
flex: 1;
}
# initial和none 剩余空间的2/3
.flex2 {
-webkit-flex: 2;
flex: 2;
}
