前端项目总结-css常用1

---

• 清除浮动
• 水平居中
• 文字间距
• 两端对齐-英文
• 文字超出部分显示省略号
• background-image居中
• img居中并裁剪
• img等比例缩放
• 移动web响应式开发思路
• 禁止页面左右滑动
• iOS 滑动卡顿

---

清除浮动

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

水平居中

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

文字间距

word-space: 字间距
letter-space: 字符间距

两端对齐-英文

text-align: justify

文字超出部分显示省略号

• 单行文本

.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

• 多行

.multi-line-text-overflow {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

background-image居中

.cover {
    background-image: url("imgs/img-1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

img居中并剪裁

img {
    object-fit: cover;
}

img等比例缩放

<div class="item_img">
    <img src="img/img.jpg">
</div>

.item_img {
  position: relative;
  padding-bottom: 60%;
}
.item_img img {
  position: absolute;
  width: 100%;
  height: 100%;
}

移动web响应式开发

• Flex 弹性盒布局
• Media Query 媒体查询
• 用rem开发
• Multiple Columns 多列

禁止页面左右滑动

• 左右没有超出内容时

overflow: auto;

• 左右有超出内容

overflow-x:  hidden;

iOS上滑动卡顿

• 原因1：

html,body{
  height: 100%;
}

解决： 删除上述代码即可

• 其他

  -webkit-overflow-scrolling: touch;
}

需要滑动的区域，加上这段代码