莫克力学习博客

CSS基本布局篇

水平垂直居中

很多方法都会受浮动影响

  • 单行已知宽高

    1
    2
    text-align:center;
    inline-height: 50px;

  • 已知字元素宽高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .parent{
        position: reletive;
    }
    .child {
        position: absolute/relative;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
        width: 100px;
        height: 100px;
    }

  • margin:auto;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .parent{
        position: reletive;
    }
    .child {
        position: absolute;
        left: 0;
        top: 0;
        tight: 0;
        b0ttom: 0;
        width: 100px;
        height: 100px;
        margin:auto;
    }

  • 未知宽高
    用css3 transform: translate(-50%, -50%);

  • table-cell表格实现

    1
    2
    3
    display: table-cell;
    vertical-align: middle;
    text-align: center;

两栏布局

  • 浮动
    left左浮动，right不浮动，margin/padding-left
  • 绝对定位
    方式和浮动一样
  • 表格布局
    wrap: table, child:table-cell
  • flex布局

圣杯布局

1、将middle首先放在container的子元素第一个，然后是left，right,同时设置三者float:left；

2、middle要自适应，需要设置width:100%；让left部分和middle处于一行，要是用margin-left:-100%;

3、此时left部分会遮盖middle的内容，将middle部分收缩起来，设置其父元素container内边距，padding：0 200px;

4、left部分内容随同middle收缩，占据middle一部分，需要设置left部分使用相对定位，独立于middle，left:-200px;

5、同理right部分放置middle右部分，需要设置其相对定位、宽度和margin-left、right值。

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
　　body{
　　　　margin:auto;
　　　　text-align: center;
　　}
　　.container{
　　　　overflow: hidden;
　　　　margin:10px 0;
　　　　padding: 0 200px 0 205px;
　　}
　　.left{
　　　　float: left;
　　　　position: relative;
　　　　margin-left: -100%;
　　　　left: -210px;
　　　　width: 205px;
　　　　background-color:grey;
　　}
　　.middle{
　　　　float: left;
　　　　width: 100%;
　　　　background-color: red;
　　}
　　.right{
　　　　right: -210px;
　　　　margin-left: -205px;
　　　　width: 200px;
　　　　float: left;
　　　　position: relative;
　　　　background-color: grey;
　　}
</style>
</head>
<body>
　　<div class="container">
　　　　<div class="middle">middle</div>
　　　　<div class="left">left</div>
　　　　<div class="right">right</div>
　　</div>
</body>
</html>
``` 
## 双飞翼布局
1、将middle首先放在container的子元素第一个，然后是left，right,同时设置三者float:left；

2、middle要自适应，需要设置width:100%；让left部分和middle处于一行，要是用margin-left:-100%;，right使用margin-left:-190px;

3、此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div -- middle_content, 然后设置 margin:0 200px
Document
main
left
right
``` ## flex布局 - display:flex/inline-flex - flex-direction 主轴方向 - flex-wrap 是否换行 - nowrap 不换行 - wrap 换行 - wrap-reverse 换行，第一行在上方 - flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap - justify-content 水平方向排列 - flex-start - flex-end - center - space-between - space-around - align-items 垂直方向 - flex-start - flex-end - center - baseline - stretch - align-content 根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  • 子元素的属性
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self