• 清除浮動
• 水平居中
• 文字間距
• 兩端對齊-英文
• 文字超出部分顯示省略號
• background-image居中
• img居中并裁剪
• img等比例縮放
• 移動web響應式開發(fā)思路
• 禁止頁面左右滑動
• 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響應式開發(fā)

• Flex 彈性盒布局
• Media Query 媒體查詢
• 用rem開發(fā)
• Multiple Columns 多列

禁止頁面左右滑動

• 左右沒有超出內容時

overflow: auto;

• 左右有超出內容

overflow-x:  hidden;

iOS上滑動卡頓

• 原因1：

html,body{
  height: 100%;
}

解決： 刪除上述代碼即可

• 其他

  -webkit-overflow-scrolling: touch;
}

需要滑動的區(qū)域，加上這段代碼