成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端常用樣式總結(jié)

phodal / 556人閱讀

摘要：本文全部使用內(nèi)容高度不夠時(shí)，依然顯示到最下面大概有這樣的結(jié)構(gòu)布局查看下面的不需要查看不定寬高的垂直水平居中首先，兼容性也不錯(cuò)可以，不想用時(shí)可以用垂直水平居中居中

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

Sticky footer

內(nèi)容高度不夠時(shí)，footer 依然顯示到最下面
大概有這樣的 html 結(jié)構(gòu)

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，兼容性也不錯(cuò)可以，不想用 table-cell 時(shí)可以用

.center-ib {
  text-align: center;
  &::after {
    content: "";
    display: inline-block; vertical-align: middle;
    height: 100%;
  }
  img {
    vertical-align: middle;
  }
}

垂直水平居中 demo

Cenerting float

居中浮動(dòng)元素

.center-float {
  // 父容器會(huì)產(chǎn)生滾動(dòng)條
  float: left; position: relative; left: 50%;
  > ul {
    position: relative; left: -50%;
  }
}

float 居中 demo

Autohiding scrollbars for IE

IE 自動(dòng)隱藏滾動(dòng)條 (works in Edge and IE10/11)

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

以下是針對(duì)移動(dòng)端 (mobile)的

Tap highlight

點(diǎn)擊時(shí)高亮背景

.item {
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 隱藏系統(tǒng)自帶的背景
  // add `ontouchstart` attribte on body
  // to allow :active work (if :active not work)
  &:active {
    background: #ECECEC
  }
}

只添加上面的樣式，:active 在移動(dòng)端不一定（已經(jīng)引入 zepto 的已經(jīng)包含下面的 js 了）生效，需要下面的js

document.body.addEventListener("touchstart", function() {}, false);
// 也可以直接在body上添加 `ontouchstart` 屬性，
Half pixel border

移動(dòng)端半像素的邊框

:after + scale(0.5) (可以是某一到兩個(gè)邊，或者全部邊(支持圓角))

svg background

svg border-image
查看 demo

Cells

移動(dòng)端常用的 cells 布局

查看微信我頁(yè)面 demo (cell + tap highlight + half pixel border)

smooth scroll in webkit

平滑滾動(dòng)

-webkit-overflow-scrolling: touch;
原文地址：https://uedsky.com/2016-05/front-end-css-summary/
獲取最佳閱讀體驗(yàn)并參與討論，請(qǐng)?jiān)L問原文

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115254.html

相關(guān)文章

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來(lái)都沒有斷絕過(guò)。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來(lái)，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來(lái)我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來(lái)都沒有斷絕過(guò)。因?yàn)檫@個(gè)東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

    oliverhuang 評(píng)論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來(lái)都沒有斷絕過(guò)。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來(lái)，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來(lái)我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來(lái)都沒有斷絕過(guò)。因?yàn)檫@個(gè)東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

    walterrwu 評(píng)論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來(lái)都沒有斷絕過(guò)。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來(lái)，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來(lái)我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來(lái)都沒有斷絕過(guò)。因?yàn)檫@個(gè)東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

    luzhuqun 評(píng)論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

    摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開始做里面發(fā)布的任務(wù)（...

    pkwenda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<