CSS-002-宽度与高度

宽度与高度

文档流

文字两边对其

多行文字两端对其

1
<p style="text-align:justify;"> fjalsfjdsalkj</p>

单行文字两端对齐

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>
    span{
      width:5em;
      display:inline-block;
      border:1px solid red;
      text-align:justify;
      height: 20px;
      line-height:20px;
      overflow:hidden;
    }
    span::after{
      content:'';
      display:inline-block;
      width:100%;
    }
  </style>
</head>
<body>
  <div>
    <span>姓名</span>
    <br>
    <span>手机号</span>
  </div>  
</body>
</html>

文字省略溢出

单行文本溢出省略号

1
2
3
white-space:nowrap;
overflow:hidden;
text-overflow:ellipse;

多行文本溢出

1
2
3
4
5
6
.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

文字水平垂直居中

水平

1
text-align:center;

文字垂直居中 ，比如要求40px

  • 不要写死宽度
1
2
3
line-height:24px;
padding:8px 0;
/* 一旦设置高度，多行文本就有bug */

margin 合并

  • 给 parent 设置 border 上下的 margin 就不会合并
  • 给 parent 设置 padding 上下的 margin 就不会合并
  • 给 parent 设置 overflow:hidden 上下的 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
25
26
27
28
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body{
      border:1px solid green;
    }
    .parent{
      margin:10px;
      outline:1px solid red;
    }
    .child{
      border:10px solid black;
      background:pink;
      height: 100px;
      margin:10px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>  
</body>
</html>

总结

视口内容水平垂直居中

child 定宽定高

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

child 不定宽不定高

  • flex
1
2
3
4
5
6
7
8
9
.child{
    height:auto;
}
.parent{
    height:100vh;
    display:flex;
    justify-contnet:center;
    align-items:center;
}

实现 1比1的div

  • 高度为0
  • 宽度自适应
1
2
3
4
5
.one{
    border:1px solid red;
    padding-top:100%;
    /* padding 和 宽度一样 */
}