CSS-001-CSS不正交

CSS不正交

CSS难学

Margin塌陷问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .demo{
      border:1px solid red;
      height: 60px;
      margin:10px;
    }
  </style>
</head>
<body>
  <div class="demo"></div>
  <div class="demo"></div>
  <div style="border-top:0.1px solid green;"></div>
  <div class="demo"></div>
  <div style="display:table;"></div>
  <div class="demo"></div>
</body>
</html>
  • 第一个和第二个div之间的margin 不是 20px 而是 10px

如何不让他塌陷？

  • 加入一个 div 设置 border-top:0.1px solid green;
  • 加入一个 div 设置 display:table;
  • 加入一个 div 设置 display:flex;

这就是CSS不正交之处

Margin贯穿

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .parent{
      outline:1px solid red;
    }
    .child{
      outline:1px solid green;
      height: 60px;
      margin-top:100px;
      background:green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>  
</body>
</html>
  • child 的 margin 贯穿了 parent 把div整体 顶了下来

如何让他不贯穿

  • 给 parent 加 border border-top:0.1px solid blue;
  • 给 parent 设置 overflow:hidden;
  • 给 parent 设置 display:flex; ，但要同时设置 child width:100%;,因为是 flex

display 影响 li 标签小圆点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    li{
      display:inline;
      /* display:block; */
    }
  </style>
</head>
<body>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</body>
</html>

li 默认是 display:list-item;

position 会改变 display

  • child display 已经从 inline 变成了 block
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .parent{
      background:pink;
      height: 100px;
      position:relative;
    }
    .child{
      display:inline;
      position:absolute;
      right:0;
      bottom:0;
      background:green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">hahaha</div>
  </div>  
</body>
</html>

position:fixed 和 transform相互影响

  • 直觉上 fixed 会相对视口定位到左下角
  • 而因为 parent 里 设置了 transform:scale(1.1); 因为要做动画所以会把 parent内的所有东西一起包含进来，于是 child就从 视口左下角 定位到了 parent 左下角
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .parent{
      background:pink;
      height: 300px;
      transform:scale(1.1);
    }
    .child{
      display:inline;
      position:fixed;
      left:0;
      bottom:0;
      background:green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">hahaha</div>
  </div>  
</body>
</html>

float 对 inline 元素影响

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .parent{
      background:pink;
      height: 200px;
    }
    .float{
      background:green;
      float:left;
      width:100px;
      opacity:0.5;
    }
    .child{
      height: 100px;
      background:white;
      width:200px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="float">aaa</div>
    <div class="child">hahaha</div>
  </div>  
</body>
</html>
  • float 不影响 child的位置
  • float 能感知 到 child 里的文字形成 图文混排

CSS容易学

布局常规套路

两栏、三栏布局

  • PC
    • IE8 只能控制宽度设置 float 了
    • Chrome flex
  • Mobile
    • flex

居中

水平居中

1
2
3
<div class="parent">
    <div class="child"></div>
</div>
  • child 宽度不确定， margin-left:20px;margin-right:20px;
  • child 宽度确定 margin-left:auto;margin-right:auto;

如果是 inline元素 直接text-align:center

垂直居中

  • child高度确定不确定都是这样
    • parent 上加 上下内边距 padding-top:20px;padding-bottom:20px;

难点在于 parent 高度确定如何做？

  • 理论上不该出现这个现象，应该避免这种现象。
  • 实在避免不了也有办法
    • IE: table
    • chrome:flex
    • mobild: flex