Doctype
聲明位于文檔中最前面的位置拾氓，告訴瀏覽器文檔用那種HTML規(guī)范
viewport手機(jī)端瀏覽器將頁(yè)面放在一個(gè)虛擬窗口（viewport），通常這個(gè)虛擬窗口比屏幕寬
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>
link和@import
都可以引入CSS文件
順序有區(qū)別芹助，link引用CSS會(huì)同時(shí)被加載励翼，@import引入CSS會(huì)等頁(yè)面全部下載完后再加載缚去，因此有時(shí)候會(huì)有閃爍
@import在IE5以上支持，CSS2.1提出的標(biāo)準(zhǔn)
bootstrap
默認(rèn)字體14px, 默認(rèn)行高20px, 20/14=1.428571rem
xs<768px
768px<=sm<992px
992px<=md<1200px
1200px<=lg
柵格系統(tǒng)
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
iPhone
4s:320pt;
5/5s/5c:320pt; 物理像素640
6:375pt;
6 plus:414pt;
12px == 9pt;
1em == 16px;
px pt em rem
em:相對(duì)當(dāng)前對(duì)象內(nèi)文本樟结，如當(dāng)前對(duì)象內(nèi)文本尺寸未被認(rèn)為設(shè)置养交，則相對(duì)于瀏覽器默認(rèn)字體尺寸（瀏覽器默認(rèn)字體16px，因此默認(rèn)1em = 16px）
rem:相對(duì)HTML根元素瓢宦，修改根元素就成比例調(diào)整所有字體大小碎连，又可避免字體大小逐層復(fù)合連鎖反應(yīng)
// 1em = 10px;
html{font-size:62.5%;}
//rem
html{font-size:14px;}
body{font-size:1rem;}
動(dòng)畫(huà)
//css動(dòng)畫(huà)
.tm-dropdown-slider-out {
-webkit-animation: drop-slideOut 200ms;
animation: drop-slideOut 200ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes drop-slideOut {
from {
top: 0;
}
to {
top: 100%;
}
}
div{
width:100px;
transition: width 2s;
//hover是width會(huì)動(dòng)畫(huà)變?yōu)?00px
&:hover{
width:300px;
}
}
none:不改變默認(rèn)行為
forwards:動(dòng)畫(huà)完成后，保持最后一個(gè)關(guān)鍵幀中定義
backwards:animation-delay所指定的一段時(shí)間內(nèi)驮履，在動(dòng)畫(huà)顯示之前鱼辙，應(yīng)用第一個(gè)關(guān)鍵幀中定義
both:向前和向后填充模式被應(yīng)用
scroll硬件加速
//滾動(dòng)條硬件加速
overflow: auto;
-webkit-overflow-scrolling: touch;
上下左右居中
#parent{
position:relative;
#child {
position: absolute;
top: 50%;
left: 50%;
//transform變形改變(旋轉(zhuǎn)，移動(dòng))
//translate(x,y)定義2D移動(dòng)
transform: translate(-50%, -50%);
//允許屬性平滑過(guò)渡
//transition:width 2s ease 0s;
}
}
#parent{
display:table-cell;
text-align:center;
vertical-align:middle;
#child{
display:inline-block;
}
}
#parent{
display: flex;
align-items: center;
justify-content: center;
}
//按圖片比例
//padding-bottom設(shè)置百分比是相對(duì)于width
.mk-new-product-card > a > div:nth-of-type(1) {
width: 100%;
height: 0;
padding-bottom: 48.2%;
position: relative;
overflow: hidden;
}
瀏覽器內(nèi)核
IE:trident -ms-
FireFox:gecko -moz-
Safari:webkit -webkit-
Opera:presto(舊) blink -o-
Chrome:webkit -webkit-
Autoprefixer插件可自動(dòng)添加前綴
盒模型
具有content, padding, border, margin等屬性
IE的width = content + border + padding
box-sizing: content-box | border-box | inherit;
content-box:width = content-width
border-box:width = content-width + padding-width + border
偽類選擇器
目標(biāo)偽類:target
元素狀態(tài)偽類:enabled, :disabled, :checked
解構(gòu)偽類:first-child, :last_child, :empty, :only-child
否定偽類:not(selector)
a標(biāo)簽lvha:
:link
:visited
:hover
:active
偽元素
content屬性與:before, :after偽元素配合使用玫镐，插入生成內(nèi)容
p:before{
content: "hello";
}
Flex
.box{
display: -webkit-flex; /* Safari */
display: flex;
/* 主軸方向 */
flex-direction：row | row-reverse | column | column-reverse;
/* 如何換行倒戏，默認(rèn)不換 */
flex-wrap: nowrap | wrap | wrap-reverse；
/* flex-direction和flex-wrap縮寫(xiě) */
flex-flow:row nowrap;
/* 主軸對(duì)齊方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* 主軸垂直對(duì)齊方式 */
align-items: flex-start | flex-end | center | baseline | stretch;
.item{
//項(xiàng)目排序
order:1恐似；
//子項(xiàng)分配父項(xiàng)剩余空間比杜跷，默認(rèn)0
flex-grow:0；
//子項(xiàng)收縮占的份數(shù)
flex-shrink:1;
//子項(xiàng)初始大小
flex-basis: 350px;
//flex-grow, flex-shrink, flex-basis簡(jiǎn)寫(xiě)
flex:0 1 auto;
//子項(xiàng)，數(shù)值占剩余空間份數(shù)
flex:1;
}
}
媒體檢測(cè)
only限定某種設(shè)備
screen設(shè)備的一種
and 關(guān)鍵字
not
設(shè)備：all, braille, handheld, print, screen, speech
//screen指瀏覽器視窗
//視窗小于1024px響應(yīng)以下樣式
@media only screen and (max-width: 1024px) {
margin: 0;
}
//視窗小于376px響應(yīng)以下樣式
@media(max-width: 376px) {}
畫(huà)三角
//繪三角形
.up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
}
Position
position:absolute | fixed | relative | static | inherit;
absolute:絕對(duì)定位,相對(duì)于relative
fixed:絕對(duì)定位葛闷，相對(duì)于瀏覽器
relative:相對(duì)定位元素
static:默認(rèn)憋槐，沒(méi)定位
inherit:從父元素繼承position屬性值
Font-face
//.eot, .ttf, .woff, .svg
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?ac2jxe');
src: url('../fonts/icomoon.eot?ac2jxe#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?ac2jxe') format('truetype'),
url('../fonts/icomoon.woff?ac2jxe') format('woff'),
url('../fonts/icomoon.svg?ac2jxe#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-1:before {
content: "\e900";
}
文本溢出
.overflow {
overflow: hidden;
text-overflow: ellipsis;
//文本不換行，直到遇到<br/>
white-space: nowrap;
}
.overflow-plus {
overflow : hidden;
text-overflow: ellipsis;
//多行文本溢出
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
//跨瀏覽器兼容多行文本溢出
.overflow-plus-plus {
p {
position: relative;
line-height: 1.4rem;
height: 4.2rem; //3行
overflow: hidden;
}
p::after {
content: "...",
position: absolute;
background: #ffffff;
}
}
