16.行高、圆角、透明度以及浮动

•  行高  line-height

行高： 文本行与行之间的间距。

其实是指每行文本基线与基线之间的间距

 /* 1）遇到一行文本(单行文本)垂直居中，可以设置行高等于标签的高度 */
            line-height: 200px;

  /* 2）遇到多行文本垂直居中，可以通过内边距居中 */
            padding-top: 80px;
            padding-bottom: 80px;

• 圆角    border-radius: 100px;

 background-color: green;
            /* 分别设置不同的圆角 */
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;

• 透明度   opacity

  /* 设置标签透明

      标签和文本都变透明了

      opacity: 0; 完全透明，但标签不是消失，还是占位置的。

  */

 /* 透明度取值范围: 0 ~ 1 之间 */

 /* 背景透明不会影响文本 */

     background-color: rgba(255, 0, 0,.1);

•  浮动   float

浏览器在解析html文档时，正常的顺序是从上往下、从左往右解析。

  这个正常的解析过程，我们叫做正常文档流(标准文档流)

   /* 浮动: 设置元素靠左或者靠右摆放。 */
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }

• 清除浮动   clear: both

推荐使用伪类元素清除浮动，谁设置了浮动就在他的父元素添加 clearfix  类名

 /* 使用伪类元素清除浮动 */
        .clearfix::after {
            /* 生成伪类元素属于行内元素 */
            content: "";
            /* 把行内元素转成块元素 */
            display: block;
            /* 清除浮动 */
            clear: both;
        }