CSS知识小点（一）

• CSS3 box-sizing 属性  https://www.runoob.com/cssref/css3-pr-box-sizing.html
• 行高
  • line-height 
  • 设置行高等于height  让元素上下居中，这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本
• 块元素
  • display:block
  • 总是独占一行，宽高内外边距都可控制，不设置宽度，宽度独占一行，不设置高度，高度是按照子盒子高度自适应
  • div , h1 , h2 , h3 , h4 , h5 , h6 , hr , p , ul , li , dl , ol , form
• 内联元素
  • display:inline
  • 和相邻内联元素在同一行，宽、高、内外边距不可设置
  • span , input , a , i , img  ,strong ,  select , br , textarea
• 内联块元素
  • display:inline-block
  • 和相邻元素同一行，宽、高、内外边距均可设置
  • 将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了
• textarea
  • resize:none 可以实现禁止文本域拖拽
• 垂直居中属性
  • vertical- align: baseline（默认） | bottom | middle | top | inherit（规定应该从父元素继承 vertical-align 属性的值。）
  • 对于块级元素垂直居中 是无效的
  • 图片和文字默认是基线对齐，但我们想要中线对齐，在图片上加一个vertical-align:middle就可以实现文字和图片居中对齐
  • 实现元素对齐，如下

　　　　

　　　　　DOM结构如下：

<div>
　　<i class="iconfont txt24 icon-right ebk-c-green"></i>
　　<span>Enjoy the seaside scenery known as the Coconut Dream Corridor</span>
</div>

　　　　  样式如下：

i {
    line-height: 1;
    vertical-align: middle;
}

• div中内嵌img，图片或者表单等行内块元素，默认它的底线（bottom）和父级盒子的基线（baseline）对齐，这样就造成了图片地测会有一个空白缝隙

解决方案：

• 方案一：给img: vertical-align:middle | top，让图片不要和baseline对齐
• 方案二：给img添加display:block转换为块元素
• 文本一行显示，超出部分省略号展示
  • 第一步：white- space: nowrap  先强调必须一行展示，强制单词一行显示 直到遇到br换行符才换行
  • 第二步：overflow: hidden  溢出部分隐藏
  • 第三步：text- overflow: ellipsis  当文本对象溢出时显示省略号
• 使块元素多行文本溢出隐藏，显示省略号
  • display: -webkit-box  必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 
  • -webkit-box-orient  必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
  • text-overflow  可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 
  • overflow:hidden  超出部分隐藏

  • .box {
         400px; 
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

• 多行文本溢出隐藏显示省略号的通用方法

  • .text-p{
                height:20px;
                position: relative;
                line-height: 20px;
                overflow: hidden;
            }
            .text-p::after{
                position: absolute;
                content: '...';
                right: 0px;
                bottom:0px;
                padding-left:10px;
                background: #fff;
            }

• 让子盒子在父盒子中垂直居中的三种方法
  • 方法一：使用定位方式，父绝子相，先让子盒子的上边缘和父盒子的水平中心线重叠，再让子盒子往回移动到自身一半的距离

  • 父盒子{
    position: relative;
    }
    子盒子{
    position: absolute;
    margin-top: 父盒子的一半；
    margin-top: -50%；
    }

  •  方法二：使用表格的vertical-align:middle实现盒子垂直居中

  • 父盒子{
    vertical-align: middle;
    }
    子盒子{
    display: table-cell;  此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    }

  • 方法三：使用margin计算盒子的上下边距，使子盒子居中
• 让子盒子在父盒子水平居中的四种方法
  • 方法一：子盒子使用margin: 0 auto
  • 方法二：使用定位方式，父绝子相，先让子盒子的左边缘和父盒子的垂直中心线重叠，再让子盒子往回移动到自身一半的距离

  • 父盒子{
    position: relative;
    }
    子盒子{
    position: absolute;
    margin-left: 父盒子的一半；
    margin-left: -50%；
    }

  • 方法三：把子盒子转换为行内块元素，使用text-align属性使盒子水平居中

  • 父盒子{
    text-align: center;
    }
    子盒子{
    
    display: inline-block; 
    }

•  雪碧图（CSS Sprites） 

  • 将多张图片合并到一张图片中，可以减小图片的总大小
  • 将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显