![d09911df1a408a5ac0d791c93854cbde.png](https://img-blog.csdnimg.cn/img_convert/d09911df1a408a5ac0d791c93854cbde.png)
![90bcb1118f59b8bd8785f35b964b0803.png](https://img-blog.csdnimg.cn/img_convert/90bcb1118f59b8bd8785f35b964b0803.png)
![e18d2b02a02614bd02a89932903b5bb1.png](https://img-blog.csdnimg.cn/img_convert/e18d2b02a02614bd02a89932903b5bb1.png)
1.宽度与高度
字和字之间通过基线对齐
如果在<div>里写一个1,默认高度高度由字体设计决定
text-align:justify多行时使得两边对齐
文字两端对齐
![a11a9af53d96e6e19da1284f80a5f009.png](https://img-blog.csdnimg.cn/img_convert/a11a9af53d96e6e19da1284f80a5f009.png)
![9a0be380b3261c284bca905f371319b6.png](https://img-blog.csdnimg.cn/img_convert/9a0be380b3261c284bca905f371319b6.png)
去掉蓝线,强制行高,再overflow:hidden
![1ec6c70c3582b30dd6d242c296a98bc9.png](https://img-blog.csdnimg.cn/img_convert/1ec6c70c3582b30dd6d242c296a98bc9.png)
![34b693a503b985038023b621286e1c5a.png](https://img-blog.csdnimg.cn/img_convert/34b693a503b985038023b621286e1c5a.png)
多行文本溢出省略(搜索css multi line text ellipsis)
![852567e1c30065cad20ba4d10b5e9a48.png](https://img-blog.csdnimg.cn/img_convert/852567e1c30065cad20ba4d10b5e9a48.png)
![0e2a458392a766ee38bacef1868cda58.png](https://img-blog.csdnimg.cn/img_convert/0e2a458392a766ee38bacef1868cda58.png)
一行文本溢出
![57ec4b011e90d7fcab7990218700de29.png](https://img-blog.csdnimg.cn/img_convert/57ec4b011e90d7fcab7990218700de29.png)
文字垂直居中设置line-height和padding不要设置height
text-aligin:center水平居中
![982ffecf6d433ec9e7fde9c1a9416e6f.png](https://img-blog.csdnimg.cn/img_convert/982ffecf6d433ec9e7fde9c1a9416e6f.png)
![90d0fa2964f13a85f0776689468814a1.png](https://img-blog.csdnimg.cn/img_convert/90d0fa2964f13a85f0776689468814a1.png)
![9bb75620ebbced8444823de5fbc87cfa.png](https://img-blog.csdnimg.cn/img_convert/9bb75620ebbced8444823de5fbc87cfa.png)
![47b5d5a2b7ab5213ee8fca4b1a9654c1.png](https://img-blog.csdnimg.cn/img_convert/47b5d5a2b7ab5213ee8fca4b1a9654c1.png)
如果变成outline
![9414615b21abdaa93b8d09647ba7ad82.png](https://img-blog.csdnimg.cn/img_convert/9414615b21abdaa93b8d09647ba7ad82.png)
如果父元素没有什么挡住margin,那么儿子外边距就会和父元素合并
如果div包含一个div那么外面包含的div高度由里面div+padding+margin(看情况)决定
总结:div的高度由其内部文档流中元素的总和决定(内联元素从左到右,块级元素从上到下)
脱离文档流(算高度不算上我)
![3cbf86adc90de5391589a82ed00a9065.png](https://img-blog.csdnimg.cn/img_convert/3cbf86adc90de5391589a82ed00a9065.png)
![260c9fd5aa26a42ea0d630727a63a515.png](https://img-blog.csdnimg.cn/img_convert/260c9fd5aa26a42ea0d630727a63a515.png)
![35c3d225f9c75943887f3166f5eef2c0.png](https://img-blog.csdnimg.cn/img_convert/35c3d225f9c75943887f3166f5eef2c0.png)
![6b1002f431086897e1ed434652eb04e2.png](https://img-blog.csdnimg.cn/img_convert/6b1002f431086897e1ed434652eb04e2.png)
div里的div如何垂直居中
![01e6d8bbe53207a627f0b841ab20b72b.png](https://img-blog.csdnimg.cn/img_convert/01e6d8bbe53207a627f0b841ab20b72b.png)
![44e2d6fa8884827399433e44b66ba93f.png](https://img-blog.csdnimg.cn/img_convert/44e2d6fa8884827399433e44b66ba93f.png)
![5be6a8197f1b25fccf94ed25c41c0a51.png](https://img-blog.csdnimg.cn/img_convert/5be6a8197f1b25fccf94ed25c41c0a51.png)
![1ae52571944b2229b98ddfb9aa40fa17.png](https://img-blog.csdnimg.cn/img_convert/1ae52571944b2229b98ddfb9aa40fa17.png)
![11d7769ff437ea379132c881a4f86213.png](https://img-blog.csdnimg.cn/img_convert/11d7769ff437ea379132c881a4f86213.png)
![1a846c3cfec15aac7e7b31dd4b48d4d4.png](https://img-blog.csdnimg.cn/img_convert/1a846c3cfec15aac7e7b31dd4b48d4d4.png)
一比一的div
![af2c57d982cc4bf61f4b973ae0e4be51.png](https://img-blog.csdnimg.cn/img_convert/af2c57d982cc4bf61f4b973ae0e4be51.png)