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