CSS小Tips-1

CSS属性太多了，所以会有很多平时注意不到的知识点，这片博客主要就是记录一下平时遇到的一些需要注意的问题。虽然知识点比较杂，但是实用性很高。

关于文档流

文档流：文档内元素流动的方向（内联元素从左往右流，块级元素从上往下流）

1. 块级元素的高度由其内部文档流元素的高度总和决定【不是相等】
   • 块级元素从上往下流，每个另起一行
2. 内联元素：
   • 左往右流，宽度不够另起一行
   • 英文单词默认不换行，可以增加属性word-break：break-all;
   • 中文会换行

span的高度

文字居中是让2个字体的基线对齐

span{
    font-size:100px;
}

• 100px是字体最高点到最低点的距离
• span的高度为100px+建议行高【每个字体不一样】
• 建议行高可以用line-height锁定【不一定有用】
• 一个块级元素内有多个span，高度由最高的span决定
• 建议line-height比font-size多大一点

脱离文档流的2个方法

• {position：fixed}不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变
• 子元素{position：absolute};父元素{position:relative}

关于高度与宽度

尽量不要使用具体值，用文档流扩充其总体的宽度与高度！即利用文档流的marging和padding值。

如果不得已要使用具体的值建议使用{max-width:XXpx}当宽度低于max值，会自适应

display:inline-block

拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性.

应用：在做横向列表的时候可以利用此属性。

vertical-align: top

此属性可以修正某些情况下的元素距离父元素有多余的像素。例如img与svg元素。

浮动元素换行

设置宽度百分比可以让子元素自动换行，例如{width：50%}可以实现每2个子元素换一行。

另外如果子元素如果要加边框的话，需要增加{box-sizing：border-box；}

——远方不远