资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端常用样式总结

前端常用样式总结

phodal / 628人阅读

摘要：本文全部使用内容高度不够时，依然显示到最下面大概有这样的结构布局查看下面的不需要查看不定宽高的垂直水平居中首先，兼容性也不错可以，不想用时可以用垂直水平居中居中

本文全部使用 scss + autoprefixer
Brower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-colon)

Sticky footer

内容高度不够时，footer 依然显示到最下面
大概有这样的 html 结构

</>复制代码

flex 布局

</>复制代码 
  1. html {
  2.   height: 100%;
  3. }
  4. $footer-height: 30px;
  5. body {
  6.   min-height: 100%;
  7.   display: flex;
  8.   flex-direction: column;
  9. }
  10. #content {
  11.   flex: 1;
  12. }
  13. #footer {
  14.   line-height: $footer-height;
  15.   text-align: center;
  16. }

查看 demo

-margin & padding

</>复制代码 
  1. html, body {
  2.   height: 100%;
  3. }
  4. $footer-height: 30px;
  5. #content {
  6.   min-height: 100%;
  7.   margin-bottom: -$footer-height;
  8.   padding-bottom: $footer-height;
  9.   // requires box-sizing: border-box;
  10.   // 下面的不需要 border-box
  11.   /*
  12.   &::after {
  13.     content: "";
  14.     display: block;
  15.     height: $footer-height; // footer height
  16.   }
  17.   */
  18. }
  19. #footer {
  20.   line-height: $footer-height;
  21.   text-align: center;
  22. }

查看 demo

absolute center

不定宽高的垂直水平居中

首先 flex

</>复制代码 
  1. .center-flex {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }

transform

</>复制代码 
  1. .center-transform {
  2.   img {
  3.     position: relative; left: 50%; top: 50%;
  4.     transform: translate(-50%, -50%);
  5.   }
  6. }

table-cell

</>复制代码 
  1. .center-tb-cell {
  2.   display: table-cell;
  3.   text-align: center; vertical-align: middle;
  4. }

:after，兼容性也不错可以，不想用 table-cell 时可以用

</>复制代码 
  1. .center-ib {
  2.   text-align: center;
  3.   &::after {
  4.     content: "";
  5.     display: inline-block; vertical-align: middle;
  6.     height: 100%;
  7.   }
  8.   img {
  9.     vertical-align: middle;
  10.   }
  11. }

垂直水平居中 demo

Cenerting float

居中浮动元素

</>复制代码 
  1. .center-float {
  2.   // 父容器会产生滚动条
  3.   float: left; position: relative; left: 50%;
  4.   > ul {
  5.     position: relative; left: -50%;
  6.   }
  7. }

float 居中 demo

Autohiding scrollbars for IE

IE 自动隐藏滚动条 (works in Edge and IE10/11)

</>复制代码 
  1. html {
  2.   -ms-overflow-style: -ms-autohiding-scrollbar;
  3. }

以下是针对移动端 (mobile)的

Tap highlight

点击时高亮背景

</>复制代码 
  1. .item {
  2.   -webkit-tap-highlight-color: rgba(0,0,0,0); // 隐藏系统自带的背景
  3.   // add `ontouchstart` attribte on body
  4.   // to allow :active work (if :active not work)
  5.   &:active {
  6.     background: #ECECEC
  7.   }
  8. }

只添加上面的样式，:active 在移动端不一定（已经引入 zepto 的已经包含下面的 js 了）生效，需要下面的js

</>复制代码 
  1. document.body.addEventListener("touchstart", function() {}, false);
  2. // 也可以直接在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

平滑滚动

</>复制代码 
  1. -webkit-overflow-scrolling: touch;
</>复制代码 
  1. 原文地址：https://uedsky.com/2016-05/front-end-css-summary/
    获取最佳阅读体验并参与讨论，请访问原文
云服务器 GPU云服务器 年终总结 网络总结 方法总结 函数总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115254.html

相关文章

  • 前端性能优化常用总结

    摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...

    oliverhuang 评论0 收藏0

  • 前端性能优化常用总结

    摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...

    walterrwu 评论0 收藏0

  • 前端性能优化常用总结

    摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...

    luzhuqun 评论0 收藏0

  • 百度前端技术学院2017学习总结

    摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

    pkwenda 评论0 收藏0

发表评论

登陆后可评论

0条评论

phodal

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<