CSS--宽度与高度-CSDN博客

什么是文档流？（普通流Normal Flow）

1、div 的高度由什么决定？

例子：当我们写font-size: 20px; 的时候，应用不同字体，div的高度不同。

不同字体的默认行高不一样。

如果div里面只有一个内联元素，div的高度等于行高。line-height: 20px;

2、如何文本对齐？

套路：改html，在姓名后面加一个div撑开和后面的对齐。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <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;      overflow: hidden;      height: 20px;    }    span::after{      content:'';      display: inline-block;      width: 100%;      border: 1px solid blue;    }  </style></head><body>  <div>     <span>姓名</span> <br>     <span>联系方式</span>  </div></body></html>复制代码

3、inline元素之间如果有任何空格、换行等看不见的字符，页面就会有空隙。

不要用inline-block，用套路：在子元素身上加float: left; 在父元素身上加

.clerafix::after{  content: '';  display: block;  clear: both;}复制代码

4、多行文字溢出，后面变省略号 google：css multi line text ellipsis

代码：

div{  display: -webkit-box;  -webkit-line-clamp: 2; //要几行就写几  -webkit-box-orient: vertical;}复制代码

居中问题

1、文字垂直居中

不写高度，自适应

例子：

要求高度为40px；

div{line-height: 24px;padding: 8px 0;}复制代码

2、文字水平居中

div{text-align: center;}复制代码

div里有div如何垂直水平居中？

1、高度不确定：

{display: flex;justify-content: center;align-items: center;}复制代码

margin合并

如果父元素没有border；那么子元素的margin的上下maigin就会合并。

如果解决？在父元素上加margin-top 或者加padding-top 或者加overflow: hidden;（不到万不得已不用这个）

做一个1:1的div

div{

padding-top: 100%

}

总结：

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

文档流是指内联元素从左到右依次排列（），如果空间不够，再起一行流动；

块级元素另起一行，从上到下。

脱离文档流：

方法一 float: left;

方法二 position: absolute;

方法三 position: fixed;