CSS-高度和宽度

文档流（Normal Flow）

div里面有内联元素时div的高度：

div的宽度不是由div里面的文字决定的。
在没有内容的时候，默认的行高就是字体设计师写进去的行高。
默认的行高是字体的几倍。（1.4 或者1.2等等）
通过line-height:xxpx;明确的告诉浏览器多高，但是有的情况下，line-height写的很小的时候没有什么用。
在div内写一些内容，高度是由这个字的字体x它建议的行高确定的，和字的大小没关系，即写font-size时，div的高度是不确定的。div的高度是由行高line-height决定的。
如果div里面只有一个内联元素，那么div的高度就是这个内联元素这一行的行高。
如果div里面有多行内联元素，则div的高度是多行内容的行高总和。
如果div里面有一个很长的字，要加一个word-break:break-all;。
代码里不管有多少空格，在显示的时候都会合并成一个空格。要想有多个空格，使用 。

1. 字和字之间通过基线对齐，而不是中线。
2. 设计师在设计字体的时候，会给一个建议行高即行与行之间的间距是多少。
3. 不同字体的空格宽度是不一样的，空格宽度是由设计师确定的。
4. 响应式页面：你拉动页面，页面随着你的动作自然排版。如果内联元素足够多，一行容纳不下，会自动换行。
5. 如果内联元素足够多，一行放不下，就会换行，叫文档流。内联元素默认从左往右流，遇到挡住就再一次从左往右。
6. word-break: break-all：单词的中断，中断所有，防止单词过长。
7. 两个字和四个字对齐，三个字和四个字对齐，文字两端对齐。
   代码示例：
8. HTML会把所有内联元素之外的内容删掉，不显示在页面里。
9. 内联元素之间的所有看不见的字符，只能显示一个空格。
10. span和span之间有任何回车空格都会显示一个空格。
    两个inline或者inline-block元素，之间有任何的回车，换行等任何看不见的字符，都会显示出空格，空格消不掉。（解决办法不要用inline-block，用float）。

ul>li {
  /*
  display: inline-block;
  */
  float: left;
  border: 1px solid red;
}

1.png

清除浮动

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

12. 如果用了inline-block一定会出现空隙的问题，所以改用float:left浮动，但是一定要clearfix清除浮动
    代码示例：

13. 习题

    
    
    

    2.png
    
    
    

    3.png
    
    
    

    4.png

div里面有div块级元素时，div的高度。

如果div里面还有div，那么这个div的高度就是由它里面的div的高度加上padding加margin决定。

div里面如果有块级元素和内联元素，div的高度。

div的高度是由他内部文档流中元素的总和决定的。决定并不代表相等，比如中间还有行高、margin、padding等等。div的宽度是默认自适应。
文档流中，内联元素从左到右依次排列，如果空间不够，在另起一行，依旧从左到右依次排列，每个div元素占据一行，从上到下排列。
div的高度是由文档流决定的。

脱离文档流

• float: left;：可以脱离文档流。算高度的时候不要算脱离文档流的元素。
• position: absolute;脱离文档流，没有含义.
• position:fixed：fixed定位也可以脱离文档流。

相对定位

相对定位，没有脱离文档流，算高度的时候要算上它。定位的时候是相当于之前的位置定位，占据的位置还是原来的位置，我在文档流中的位置是不变的。相对之前的位置偏离一点，但是在文档流中占据的还是原来的那个位置。他不会改变页面总其他元素的位置。我的父元素再算高度的时候还是要算上我，人眼看我离开了那个位置，但是那个空间依旧属于我。
代码示例：

内联元素的宽高：

内联元素的padding和margin和border影响它的宽度而不是高度
内联元素的宽是由里面的字数确定的，可以加padding和margin，但是他的高度是不受加padding和margin影响的。它的高度是由行高决定的。span的宽度是受padding，margin影响的。

实现一个一比一的div

.one {
  border: 1px solid red;
  padding-top: 100%;/*含义是与宽度一样*/
}

//其实所有的内容都是Padding-top，他的高度是0。
实现了宽度与其爸爸一样宽，高度是0，用padding-top实现高度的撑开。因为高度是受padding影响的。

如果父元素没有什么东西可以挡住margin，那么儿子的上下magin就会和其父亲的合并