Flexbox

按照两个轴进行排列
设置display: flex中就会生成主轴和垂轴

1
2
3
4
5
6
div{
 display: flex;
 justify-content: center //在主轴方向居中
 align-items: center //在垂轴方向居中
 flex-direction: row; //主轴默认为水平方向，可以修改为垂直方向column
}

有导航栏nav和内容div

1
2
3
4
5
6
7
8
9
10
11
12
div.main{
    display: flex;
    flex-wrap: wrap; //宽度不足的时候实现垂直方向两栏布局
}

div.main nav{
    flex: 0 0 300px;
}

div.main div.content{
    flex: 1 0 0
}

搜索框

1
2
3
4
5
6
7
8
form{
    display: flex;
}

input[type = "text]: focus{
    background: white;
    flex-grow: 1; //设置为1以后只要有多余的空间都会给输入框
}


圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
body{
    display: flex;
    flex-direction: column;
}

section{
    flex: 1
    display: flex
    flex-direction: row;
}

div.main{
    flex: 1
}

div.left div.right{
    flex: 0 0 50px;
}

@media(max-width: 768px){ //当页面被压缩时更改section的展示方向
    section{
        flex: 1
        display: flex
        flex-direction: column;  //修改为垂直
    }

    div.main{
        flex: 1
    }

    div.left div.right{
        flex: 0 0 50px;
    }
}


固定底栏

1
2
3
4
5
6
7
8
9
10
11
12
body{
    display: flex;
    flex-direction: column;
}

section{
    flex: 1;
}

html, body{
    height: 100%; //记得设置高度，重要！
}

选项卡布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
section{
    display: flex;
    flex-direction: column;
}

div.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; //让选项卡各自有空间
    align-items: center; //垂轴剧中
}

div.content > div{
    flex: 0 0 180px;
}

div.content > div:hover{ //想让鼠标移动到单独的选项卡时有伸缩的效果
    align-self: stretch;
}

div.content{
    flex: 1;
} //为content元素设置增长份子

网格布局

1
2
3
4
5
6
7
8
9
10
11
12
section{
    display: flex;
    flex-direction: column;
}

section div{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
} 
以下省略见图


数字表示剩余空间的分配
不过如何收缩都是按照设置的比例来进行收缩的

朋友圈

不用border创建边框（box-shadow）

box-shadow: x轴偏移 y轴偏移 模糊半径 扩散半径 颜色
内阴影要加inset

在需要输入内容的时候显示边框提醒用户

1
2
3
4
5
input: focus{
    border: none;
    padding-bottom: 0;
    box-shadow: 0 0 0 5px #fcf876 //使用扩散半径    
}

设置内边框

1
2
3
4
5
6
7
8
9
10
img{
    position: relative; //允许img标签重叠
    z-index: -1; //把图片设置在底部
}

div{
    height: 500px;
    width: 320px;
    box-shadow: inset 0 0 50px rgba(123, 104, 255, 0.2);
}

设置双层边框

1
2
3
4
5
6
7
img{
    width: 500px;
    box-shadow: 0 0 0 10px #32e0c4,
                0 0 0 30px white,
                -40px -40px #ff9595,
                40px 40px #ff9595;
}

实现照片效果，如果直接给左上和左下设置边框：

在他们的上面再加一层白色边框进行遮挡：

垂直居中

padding

line-height

Flexbox

table

grid

absolute