- 清除浮動
- 水平居中
- 文字間距
- 兩端對齊-英文
- 文字超出部分顯示省略號
- background-image居中
- img居中并裁剪
- img等比例縮放
- 移動web響應(yīng)式開發(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響應(yīng)式開發(fā)
- Flex 彈性盒布局
- Media Query 媒體查詢
- 用rem開發(fā)
- Multiple Columns 多列
禁止頁面左右滑動
- 左右沒有超出內(nèi)容時
overflow: auto;
- 左右有超出內(nèi)容
overflow-x: hidden;
iOS上滑動卡頓
- 原因1：
html,body{
height: 100%;
}
解決： 刪除上述代碼即可
- 其他
-webkit-overflow-scrolling: touch;
}
需要滑動的區(qū)域雄人，加上這段代碼
