前端常用样式总结
本文全部使用 scss + autoprefixer
Brower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-colon)
Sticky footer
内容高度不够时，footer 依然显示到最下面
大概有这样的 html 结构
© Brook.inc
- flex 布局
html {
height: 100%;
}
$footer-height: 30px;
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
content {
flex: 1;
}
footer {
line-height: $footer-height;
text-align: center;
}
查看 demo
- -margin & padding
html, body {
height: 100%;
}
$footer-height: 30px;
content {
min-height: 100%;
margin-bottom: -$footer-height;
padding-bottom: $footer-height;
// requires box-sizing: border-box;
// 下面的不需要 border-box
/
&::after {
content: '';
display: block;
height: $footer-height; // footer height
}
/
}
footer {
line-height: $footer-height;
text-align: center;
}
查看 demo
absolute center
不定宽高的垂直水平居中
- 首先 flex
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
- transform
.center-transform {
img {
position: relative; left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
}
- table-cell
.center-tb-cell {
display: table-cell;
text-align: center; vertical-align: middle;
}
- :after，兼容性也不错可以，不想用 table-cell 时可以用
.center-ib {
text-align: center;
&::after {
content: '';
display: inline-block; vertical-align: middle;
height: 100%;
}
img {
vertical-align: middle;
}
}
垂直水平居中 demo
Cenerting float
居中浮动元素
.center-float {
// 父容器会产生滚动条
float: left; position: relative; left: 50%;
ul {
position: relative; left: -50%;
}
}
float 居中 demo
Autohiding scrollbars for IE
IE 自动隐藏滚动条 (works in Edge and IE10/11)
html {
-ms-overflow-style: -ms-autohiding-scrollbar;
}
以下是针对移动端 (mobile)的
Tap highlight
点击时高亮背景
.item {
-webkit-tap-highlight-color: rgba(0,0,0,0); // 隐藏系统自带的背景
// add ontouchstart attribte on body
// to allow :active work (if :active not work)
&:active {
background: # ECECEC
}
}
只添加上面的样式，:active 在移动端不一定（已经引入 zepto 的已经包含下面的 js 了）生效，需要下面的js
document.body.addEventListener('touchstart', function() {}, false);
// 也可以直接在body上添加 ontouchstart 属性，
Half pixel border
移动端半像素的边框
:after + scale(0.5) (可以是某一到两个边，或者全部边(支持圆角))
svg background
svg border-image
查看 demo
Cells
移动端常用的 cells 布局
查看微信我页面 demo (cell + tap highlight + half pixel border)
smooth scroll in webkit
平滑滚动
-webkit-overflow-scrolling: touch;
关键字：css, 前端, 移动web开发, css3
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！