資訊專欄INFORMATION COLUMN
摘要：本文全部使用內(nèi)容高度不夠時，依然顯示到最下面大概有這樣的結(jié)構布局查看下面的不需要查看不定寬高的垂直水平居中首先，兼容性也不錯可以，不想用時可以用垂直水平居中居中
本文全部使用 scss + autoprefixer
Brower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-colon)
內(nèi)容高度不夠時，footer 依然顯示到最下面
大概有這樣的 html 結(jié)構
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 {
// 父容器會產(chǎn)生滾動條
float: left; position: relative; left: 50%;
> ul {
position: relative; left: -50%;
}
}
float 居中 demo
Autohiding scrollbars for IEIE 自動隱藏滾動條 (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); // 隱藏系統(tǒng)自帶的背景
// add `ontouchstart` attribte on body
// to allow :active work (if :active not work)
&:active {
background: #ECECEC
}
}
只添加上面的樣式，:active 在移動端不一定（已經(jīng)引入 zepto 的已經(jīng)包含下面的 js 了）生效，需要下面的js
document.body.addEventListener("touchstart", function() {}, false);
// 也可以直接在body上添加 `ontouchstart` 屬性，
Half pixel border
移動端半像素的邊框
:after + scale(0.5) (可以是某一到兩個邊，或者全部邊(支持圓角))
svg background
svg border-image
查看 demo
移動端常用的 cells 布局
查看微信我頁面 demo (cell + tap highlight + half pixel border)
smooth scroll in webkit平滑滾動
-webkit-overflow-scrolling: touch;
原文地址：https://uedsky.com/2016-05/front-end-css-summary/
獲取最佳閱讀體驗并參與討論，請訪問原文
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115254.html
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關注的指標。它直接影響著我們...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關注的指標。它直接影響著我們...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關注的指標。它直接影響著我們...
摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結(jié)來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結(jié)束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發(fā)布的任務（...
閱讀 3682·2021-11-24 10:25
閱讀 2681·2021-11-24 09:38
閱讀 1305·2021-09-08 10:41
閱讀 3076·2021-09-01 10:42
閱讀 2727·2021-07-25 21:37
閱讀 2061·2019-08-30 15:56
閱讀 980·2019-08-30 15:55
閱讀 2816·2019-08-30 15:54
