- 清除浮动
- 水平居中
- 文字间距
- 两端对齐-英文
- 文字超出部分显示省略号
- 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;
}
需要滑动的区域，加上这段代码
