CSS常用 Less 公共樣式封裝
阿新 • • 發佈：2019-01-30
/------------------------------------- ├ 佈局 ┆ └------------------------------------/
// 盒子寬高
.size(@w, @h) { width: @w; height: @h; }
// 最小尺寸, 相容IE6
.min-width(@min-w) { min-width: @min-w; _width: @min-w; }
.min-height(@min-h) { min-height: @min-h; _height: @min-h; }
// 內聯塊級元素, 相容IE6
.dib() { display: inline-block; *display: inline; *zoom: 1; }
// 固定定位, 相容IE6
.fixed() { position: fixed; _position: absolute; *zoom: 1; }
// 統一盒模型
.border-box() {
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
}
// 文字圖片居中
.center(text-x) { text-align: center; }
.center(text-y) { display: table-cell; vertical-align: middle; }
// 塊級元素水平居中
.center(auto-x) { display: block; margin-left: auto; margin-right: auto; }
// 居中, 不確定尺寸, 不相容 IE6
.center(unknown) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.center(unknown-x) { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.center(unknown-y) { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
// 居中, 確定尺寸, 相容 IE6
.center(known, @w, @h) {
.size(@w, @h);
position: absolute; top: 50%; left: 50%; margin-top: -(@w / 2); margin-left: -(@h / 2);
}
.center(known-x, @w) {
width: @w;
position: absolute; left: 50%; margin-left: -(@h / 2);
}
.center(known-y, @h) {
height: @h;
position: absolute; top: 50%; margin-top: -(@w / 2);
}
// 居中, CSS3 平移方式, 相容性不行
.center(translate) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
// 居中, Flex 方式, 相容性不行
.center(flex) { display: flex; align-items: center; justify-content: center; }
// 多個子項佈局
.list(float, @w: 25%) { float: left; width: @w; }
.list(inline, @w: 25%) { .dib(); width: @w; }
.list(flex) { flex: 1; }
// 遮罩層, 全屏遮罩、區域遮罩
.over-screen(fixed) { .fixed(); top: 0; left: 0; right: 0; bottom: 0; }
.over-screen(absolute) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
// 容器寬高比固定
// 100* 1/1 = 100%
// 100* 3/4 = 75%
.fixed-ratio(@padding-top: 100%) {
position: relative; width: 100%; height: 0; padding-top: @padding-top;
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
// 擴充套件點選區域
.extend-click() {
position: relative;
&:before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; }
}
// 定寬居中頁面佈局
.layout-page(@width: 1200px) { width: @width; margin-left: auto; margin-right: auto; }
// 側邊欄
// 主要區域：overflow: hidden; margin-left: xx; margin-right: xx;
.sidebar(left, @width) { position: absolute; top: 0; left: 0; width: @width; }
.sidebar(right, @width) { position: absolute; top: 0; right: 0; width: @width; }
/------------------------------------- ├ 字型 ┆ └------------------------------------/
// 字型大小
.fz(@fz) { font-size: @fz; }
// 字型大小與行高
.fz(@fz, @lh) { font-size: @fz; line-height: @lh; }
// 字型大小、行高、高度
.fz(@fz, @h, @lh: @h) { font-size: @fz; height: @h; line-height: @lh; }
// 行高與高度
.lh(@h, @lh: @h) { height: @h; line-height: @lh; }
// 字型顏色, 包括連結與非連結
.color(@color) { color: @color;}
// 字型顏色 + 自身 Hover
.color(@color, @hovercolor) {
color: @color;
&:hover { color: @hovercolor; }
}
// 字型顏色 + 連結 Hover
.color(@color, @acolor, @hovercolor) {
color: @color;
a {
color: @acolor;
&:hover { color: @hovercolor; }
}
}
// 正常字型樣式
.normal-font() { font-weight: normal; font-style: normal; }
// 輔助性文字（灰色）
.assist-font(@color: #b0b0b0, @fz: 14px) { color: @color; font-size: @fz; }
// 禁止換行, 文字溢位省略號顯示 (一行)
.ellipsis() {
white-space: normal; word-wrap: break-word; word-break: break-all;
-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden;
}
// 文字溢位省略號顯示 (多行)
// 只支援 webkit 瀏覽器, 解決方案：高度 = 行高*行數
// height: 90px; line-height: 30px; -webkit-line-clamp: 3;
.ellipsis-mult(@n: 3) {
display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: @n; word-break: break-all;
-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow: hidden;
}
// 書寫模式：牌匾從右至左水平單行排版效果、文箋從右至左、從上至下排版效果
.retext(x) { direction: rtl; unicode-bidi: bidi-override; }
.retext(y) { writing-mode: tb-rl; writing-mode: vertical-rl; }
// 文字透明
.transparent-text() { font: 0/0 serif; text-shadow: none; color: transparent; }
// 文字隱藏（常用於SEO優化）
//
xx
.hidden-text() { text-indent : -9999px; overflow: hidden; text-align: left; }
// 文字外發光效果
.glow-text(@r: 10px, @color: gold) { text-shadow: 0 0 @r @color; }
/------------------------------------- ├ 影象 ┆ └------------------------------------/
// 用 max-width 來防止圖片撐破容器
.max-img() { display: block; max-width: 100%; height: auto; }
// 2x 3x 背景圖片
.bg-image(@url) {
background-image: url("@url + '@2x.png'");
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url("@url + '@3x.png'");
}
}
// 全屏大圖背景
.fullscreen-bg(@url) {
width: 100vw;
height: 100vh;
background: url(@url) no-repeat 50% 50%;
background-size: cover;
}
// 濾鏡: 將彩色照片顯示為黑白照片
.grayscale() {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
/------------------------------------- ├ 動效 ┆ └------------------------------------/
// 連結預設無下劃線，hover後有下劃線的樣式
.hover-link() {
text-decoration: none;
&:hover { text-decoration: underline; }
}
// 將連結變成預設的文字樣式
.unstyled-link() {
color: inherit;
cursor: inherit;
text-decoration: inherit;
&:active, &:focus { outline: none; }
}
// 盒子陰影
// box-shadow: 水平陰影的位置, 垂直陰影的位置, 模糊距離, 陰影的大小, 陰影的顏色, 陰影開始方向（預設是從裡往外，設定inset就是從外往裡）;
// box-shadow: h-shadow v-shadow blur spread color inset;
.box-shadow() {
box-shadow: 0px 14px 26px 0px rgba(0, 0, 0, 0.1);
}
// 盒子 Hover
.box-hover() {
// box-shadow: 0px 1px 2px 0px rgba(84, 107, 107, .4);
transition: all .2s linear;
&:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
transform: translate3d(0, -2px, 0);
}
}
.box-hover2() {
transition: transform .5s ease;
&:hover {
transform: translateX(10px);
}
}
// 三維閃動 bug 處理
.transform-fix() { -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }
// Animation
.ani(@name, @time: 1s, @ease: ease-in-out, @fillmode: forwards) {
animation-name: @name;
animation-duration: @time;
animation-timing-function: @ease;
animation-fill-mode: @fillmode;
}
/------------------------------------- ├ 功能 ┆ └------------------------------------/
// 浮動, 相容 IE6
.fl() { float: left; *display: inline; _display:inline; }
.fr() { float: right; *display: inline; _display:inline; }
// 清除浮動
.clearfix() {
*zoom: 1;
&:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
}
.clearfix(table) {
*zoom: 1;
&:before, &:after { content: " "; display: table; clear: both; }
}
// 禁止文字被選擇
.user-select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
// 隱藏滑鼠手勢
.hide-cursor() { cursor: none !important; }
// 滑鼠禁用樣式，但仍然可以觸發事件
//
.disabled() { cursor: not-allowed; }
// 禁用元素事件
// 1. 阻止任何點選動作的執行
// 2. 使連結顯示為預設游標(cursor:default)
// 3. 阻止觸發hover和active狀態
// 4. 阻止JavaScript點選事件的觸發
.pointer-events() { pointer-events: none; }
// 模糊
.blur(@blur: 10px) {
filter: blur(@blur);
-webkit-filter: blur(@blur);
-moz-filter: blur(@blur);
-o-filter: blur(@blur);
-ms-filter: blur(@blur);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='@{blur}');
*zoom: 1;
}
// 透明度, 相容 IE8
.opacity(@opacity: 20) { opacity: @opacity / 100; filter: alpha( 相關推薦
CSS常用 Less 公共樣式封裝
/------------------------------------- ├ 佈局 ┆ └------------------------------------/ // 盒子寬高 .size(@w, @h) { width: @w; height: @h; } /
css常用清除基礎樣式
/*(1)清除預設樣式*/ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img,input{ margin:0; padding:0; } fieldset, img,i
在vue的元件中引進less公共樣式檔案
1安裝less 和less-loader肯定是少不了 npm install less less-loader 2.修改webpack.config.js檔案，配置loader載入依賴，讓其支援外部的less，在原來的程式碼上新增 {
一些css常用的簡單樣式描述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
AppCan UI2.0架構中CSS類彈性盒子樣式封裝
ub 元素採用彈性BOX佈局ub-rev 子元素反序排列ub-con 在子元素中加入一個容器，用於避免內容引起子元素大小變化 對應CSS程式碼為position:absolute;width:100%;height:1
css公共樣式整理
one pan small fig parent fieldset block web kit 第一種PC端公共樣式： html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, bl
js獲取css樣式封裝
padding set body script log center auth compute ctype 封裝 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[att
CSS覆蓋公共樣式中的某個屬性
1.0 gree code 標題 oct 綠色 itl 字體 clas CSS如何覆蓋公共樣式中的某個屬性？利用CSS樣式的優先級。 如下例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
css常用樣式
-s linear 無效 pad 表達 漸變 div word pty box-shadow Chrome和Safari 寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。 .box-shadow-6{
繼承盒模型以及CSS常用樣式
size 輔助 默認 indent over 基線 one 傳遞 顏色 serif 襯線字體 serif sans-serif 非襯線字體 sans serif line-through 刪除線 line-throughtext-shadow ： x y 模糊度 顏色
css公共樣式 | 標簽元素初始化
騰訊 bili tail 1.0 keywords form oot ctype light PC參考樣式1： @charset "utf-8"; html{background:#fff;overflow:auto;} body{min-width:1200px;fon
CSS常用位置樣式
CSS margin 屬性 例子 1 margin:10px 5px 15px 20px; 上外邊距是 10px 右外邊距是 5px 下外邊距是 15px 左外邊距是 20px 例子 2 margin:10px 5px 15px; 上外邊距是 1
前端公共樣式base.css裡面主要寫一些什麼？
* -- 樣式說明 -- * 最大優先實現法，全域性能實現不用區域，區域能實現不用模板， * 模板能實現不用介面，介面能實現不用標籤 * g - 全域性 * t - 區域 * m - 模板 * ui - 介面 * lb - 標籤 * 特殊標籤
CSS公共樣式
*{ margin: 0; padding: 0; } ul,li,ol{ list-style: none; } a{ text-decoration: none; } img{ border: 0; } body{ font-size: 12px; font
css常用樣式筆記
css樣式全稱為Cascading Style Sheets，“層疊樣式表”，簡稱樣式表。（層疊的意思就是“權重”、“覆蓋”、“繼承”，通過良好的層級命名更好的實現效果，以更少的程式碼實現更多的功能） 引入樣式的三種方式： 1. 內部樣式：在head內部應用
國內可用的css,js,圖示字型,等常用前端公共庫CDN服務
CDN的全稱是Content Delivery Network，即內容分發網路。其基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的網際網路基礎之上的一層智慧虛擬網路，CDN系統能夠實時地根據網路流量和各節點的連
移動端css公共樣式
@charset "utf-8"; /* 禁用iPhone中Safari的字號自動調整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解決IOS預設
css公共樣式及清除浮動
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0;}*
vue App.vue檔案裡引入外聯樣式（css、less）
vue-cli安裝並配置好less-loader、css-loader後 <style lang="less" scoped src="../dist/css/order.less"><
前端css公共樣式
* -- 樣式說明 -- * 最大優先實現法，全域性能實現不用區域，區域能實現不用模板， * 模板能實現不用介面，介面能實現不用標籤 * g - 全域性 * t - 區域 * m - 模板 * ui - 介面 * lb - 標籤 * 特殊標籤 * j -