continue css (width & height)

核心知识

1. 文档流（normal flow）

内联元素的宽高
块级元素的宽高
水平居中
垂直居中
文字溢出可省略（多行）

2. 盒模型（box sizing）

一比一的div
outline
border 调试大法

文档流是什么

文档流中，内联元素 从左到右依次排列，如果空间不够，会自动换行再从左到右依次排列

文档流中，div 元素 会另起一行，每个div元素都另起一行

总结：文档流中，内联元素从左到右；块级元素，从上到下

脱离文档流方法

float: left;
position: absolute;
position: flex;

脱离文档流的理解就是：算高度的时候请忽略我

内联元素的高度

div中只包含：内联元素的情况

内联元素有默认的行高

<style>
  div {
    border: 1px solid red;
    font-size: 20px;
    font-family: tahoma;  //每种字体都有默认的行高
    line-height: 20px;  //当然也可以自己设定行高
  }
</style>

<div>1     2</div>

这里 div 的高度（行高）为 = 字体的高度 * 该字体建议的行高（如 1.2em |1.4em），这里 div 的高度由行高确定
代码多个空格，网页上只显示一个空格，因为 html 会把多余的空格给缩起来。实现多个空格用  （全称 no break space）

如何让两个字和四个字对齐

<style>
  div {
    border: 1px solid red;
    font-size: 20px;
  }
    
  span {
    border: 1px solid green;
    display: inline-block;
    width: 5em;
    text-align: justify;
    line-height: 20px;
    height: 20px;
    overflow: hidden; 
  }
    
  span::after {
    content: '';
    display: inline-block;
    width: 100%;
    border: 1px solid blue;
  } 
</style>

<div>
  <span>姓名</span><br/>
  <span>联系方式</span>
</div>

text-align: justify;
http://js.jirengu.com/yuhad/1/edit?html,output

导航条 inline-block 如何去除缝隙

<style>
  body {
    font-size: 0;  //先设置父元素的字体大小为0
  }
  ul>li {
    border: 1px solid red;
    display: inline-block;
    font-size: 16px;  //再重新设置字体大小
  }
</style>

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
  <li>选项5</li>
</ul>

http://js.jirengu.com/vatuk/1/edit?html,output

导航条 float 记得清除浮动

<style>
  ul {
    border: 1px solid;
  }
  ul>li {
    list-style: none;
    border: 1px solid red;
    float: left;
  }
    
  .clearfix::after {  //清除浮动
    content: '';
    display: block;
    clear: both;
  }
</style>

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  <li>选项4</li>
  <li>选项5</li>
</ul>

http://js.jirengu.com/yefep/1/edit

文档流特性
当一行放不下时,文字内容会自动换行
http://js.jirengu.com/wobiz/1/edit

为什么输入很长一段字符,不会被换行
http://js.jirengu.com/tukax/1/edit

块级元素的高度

div里面包含div，外面div的高度为多少

父子元素上下margin合并的问题

body {
  border: 1px solid black;
}
.son {
  border: 5px solid lightgreen;
  margin: 20px;
}

.dad {
  outline: 5px solid yellow;
  margin: 20px;
}

<div class="dad">
  <div class="son">hello</div>
</div>

http://js.jirengu.com/gehot/1/edit?html,css,output

此时产生父子元素上下margin合并，那么如何解除合并呢

1. 试试给父元素设置border-top和border-bottom

body {
  border: 1px solid black;
}
.son {
  border: 5px solid lightgreen;
  margin: 20px;
}

.dad {
  outline: 5px solid yellow;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

<div class="dad">
  <div class="son">hello</div>
</div>

http://js.jirengu.com/gehot/7/edit

所以给父元素添加border-top和border-bottom可以分别解除上下margin合并，结论border可以解决父子元素的margin合并问题

还有其他方法可以解决父子元素上下margin合并吗

2. 试试给父元素添加padding-top和padding-bottom

body {
  border: 1px solid black;
}
.son {
  border: 5px solid lightgreen;
  margin: 20px;
}

.dad {
  outline: 5px solid yellow;
  padding-top: 1px;
  padding-bottom: 1px;
}

<div class="dad">
  <div class="son">hello</div>
</div>

http://js.jirengu.com/gehot/8/edit

所以给父元素添加padding-top和padding-bottom也可以分别解除上下margin合并，结论padding可以解决父子元素的margin合并问题

结论：父元素div的高度 = 子元素div的内容的高度 + padding + margin（这里 ‘=’ 表示由后面内容决定，不是绝对相等）

3. 父元素加上overflow: hedden;呢

body {
  border: 1px solid black;
}
.son {
  border: 5px solid lightgreen;
  margin: 20px;
}

.dad {
  outline: 5px solid yellow;
  overflow: hidden;
}

<div class="dad">
  <div class="son">hello</div>
</div>

http://js.jirengu.com/gehot/4/edit

但是不推荐用overflow: hidden;因为所有超出父元素的内容都会被隐藏，所有内容不能超过父元素

4. 子元素中有内联元素时

body {
  border: 1px solid black;
}
.son {
  border: 5px solid lightgreen;
  margin: 20px;
}

.dad {
  outline: 5px solid yellow;
}

<div class="dad">
  hello  //内联元素
  <div class="son">hello</div>
</div>

http://js.jirengu.com/gehot/9/edit

当div中有内联元素时，也会影响margin合并，但是这就很离谱，无缘无故多加个元素再里面

div 的高度

http://js.jirengu.com/gehot/10/edit

总结div的高度到底是由什么决定的？

div高度是由它内部文档流中元素的高度总和决定的

多行文本溢出

单行文本溢出

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

http://js.jirengu.com/wobiz/2/edit

多行文本溢出

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

http://js.jirengu.com/wobiz/3/edit

文字垂直居中

height: 40px;
line-height: 40px;

之前用该方法实现单行文本的居中,有局限性,一般不要用

所以看看下面这个方法

line-height: 24px;
padding: 8px;
text-align: center;  /* 水平居中 */

该方法解决了多行文本的居中,与上面的例子相同,实现div的高度为40px

div 垂直居中

.aa {
  outline: 3px solid lightgreen;
}
.bb {
  border: 1px solid red;
  width: 100px;
  padding: 10px;
  
}

<div class=aa>
  <div class=bb>bbb</div>
</div>

父元素高度不确定

试试给父元素加上下 padding

.aa {
  outline: 3px solid lightgreen;
  padding: 100px 0;  
}
.bb {
  border: 1px solid red;
  width: 100px;
  padding: 10px;
margin: 0 auto;
}

<div class="aa">
  <div class="bb">bbb</div>
</div>

http://js.jirengu.com/docip/1/edit?html,css,output

父元素高度确定

子元素高度确定

body {
  margin: 0;
}
.aa {
  height: 100vh;
  border: 3px solid lightgreen;
  box-sizing: border-box;
}

.bb {
  border: 5px solid red;
  width: 100px;
  height: 100px;  /* 定高 */
  padding: 10px;
  margin: auto;   /* 绝对定位要配合margin: auto  */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="aa">
  <div class="bb">bbb</div>
</div>

http://js.jirengu.com/docip/2/edit?html,css,output

当子元素的高度确定的时候，使用绝对定位，设置上下左右都为 0，并且配合margin: auto;就可以实现垂直居中

子元素高度自适应

body {
  margin: 0;
}
.aa {
  height: 100vh;
  border: 3px solid lightgreen;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bb {
  border: 5px solid red;
  width: 100px;
  padding: 10px;
}

<div class="aa">
  <div class="bb">bbb</div>
</div>

http://js.jirengu.com/docip/3/edit

高度自适应的情况可以使用flex实现居中，具体代码如上

实现一个一比一的 div

.one {
  border: 1px solid red;
  padding-top: 100%;
}

<div class="one"></div>

http://js.jirengu.com/zawem/1/edit?html,css,output