css簡單的一些基礎知識

時間 2019-12-06

標籤 css 簡單一些基礎知識欄目 CSS 简体版

原文原文鏈接

css
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化javascript

文本樣式
內部引用
<p style="color:red;font-size:50px;">xxxxxxxxxx</p>
<head>
<meta charset="utf-8">
<title>css樣式</title>
<style type="text/css">
p{
color: green;
font-style: italic/*傾斜或normal*/;
font-weight: 500/*字體粗細0-900取整*/;
font-size: 100px/*字體大小*/;
font-family: 楷體;
}
h1{
font: normal 900 50px 宋體;
}/*這個是連寫*/
</style>
</head>
<body>
<h1>問候語</h1>
<p>你好，大貓</p>
</body>css

外部引用
在外面建一個.css的層疊樣式表p{color: green;font: 100px 楷體}
兩個.css的表格能夠相互引用用@import url(style2.css);引用
<head>
<meta charset="utf-8">
<title>css樣式</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>問候語</h1>
<p>你好，大貓</p>
</body>
樣式
<style type="text/css">
h1{
/*顏色的四種表示方法*/
color: rgb(123,56,148);
color: rgba(44,55,66,0.4);
color: #FF5566;
color: #f56;

text-decoration: line-through;
/*文本修飾 underline下劃線 overline上劃線 line-through貫穿文字線 none */
text-align: center;
/*文本對齊樣式left(默認)|center|right*/
text-indent: 2em;
/*首行縮進，數字＋單位(px|em);這個單位能夠是px能夠是em(一個文字的寬度),用的最多的仍是em*/
text-shadow: 2px 2px 2px red;
/*水平偏移距離垂直偏移距離模糊距離陰影顏色;*/
width: 1000px;
white-space:nowrap; /*空白符處理
normal默認值,文字超出容器寬度會自動換行,容器會變高
nowrap,文字超出容器寬度不會換行文本會在同一行上溢出
overflow: hidden;
text-overflow: clip;
/*文本溢出處理方式 clip剪貼ellipsis顯示省略號...*/
word-wrap: normal;
/*長單詞換行到下一行 break-word單詞換行須要在容器上設置*/
}
不讓用戶點到頁面上的字 user-select:none
</style>html

選擇器
類選擇器
id選擇器交集,並集選擇器
相鄰兄弟選擇器通用兄弟選擇器java

<head>
<meta charset="utf-8">
<title>選擇器</title>
<style type="text/css">
.dang{/*類選擇器*/color: blue;}
#a1{/*id選擇器，頁面上全部的ID不能重複*/color: green;}
/*類和id只能如下劃線和英文字符開頭，ID不是用來做爲選擇器添加樣式的，它的主要做用是給JS使用*/
body h2{/*後代選擇器，body標籤下全部h2標籤都會被執行*/font-size: 50px;}
body>p{/*子選擇器，body標籤下的前三個p標籤被選擇*/font-family: 楷體;}
p.dang{/*交集選擇器，p標籤前兩個被選中*/font-style: italic;}
p,.dang/*並集選擇器，全部p和.dang都會被選中*/
p+h2/*相鄰兄弟選擇器，選中的是第一個h2*/
p~h2/*通用兄弟選擇器，選中的是p的向下兄弟全部的h2標籤*/
選擇器能夠是標籤，ID，類
</style>
</head>
<body>
<p class="dang">你有糖嗎</p>
<p class="dang">你有糖嗎</p>
<p id="a1">你有糖嗎</p>
<nav>
<p>你有糖嗎</p>
<h2 class="dang">你有糖嗎</h2>
<h2>你有糖嗎</h2>
</nav>
</body>web

序選擇器跨域

<head>
<meta charset="utf-8">
<title>13</title>
<style type="text/css">
p:first-child{ }
/*找到同級別的第一個元素不區分類型7和12被選中*/
p:last-child{ }
/*找到同級別的最後一個元素不區分類型15被選中*/
p:nth-child(n){color: red;}
/*找到同級別的第n個元素不區分類型,n能夠寫爲nx+y*/
p:only-child{}
/*不區分類型的同級別惟一元素*/
p:first-of-type{color: red;}
/*找到同級別的第一個元素區分類型2.7.12被選中*/
p:last-of-type{ }
/*找到同級別的最後一個元素區分類型6.10.15被選中*/
p:nth-of-type(n){color: red;}
</style>
</head>
<body>
<h2>1</h2>
<P>2</P>
<P>3</P>
<P>4</P>
<P>5</P>
<P>6</P>
<div>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<h2>11</h2>
<ul>
<li>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
</li>
</ul>
</div>
</body>瀏覽器

屬性選擇器網絡

<head>
<title></title>
<style type="text/css">
[title]{color: green}
[title="qwert"]{color: red;}
[title|="qwert"]{}
/*屬性的值以qwert開始,只能選中用「-」分隔的和獨立的,是CSS2中的選擇器*/
[title^="qwert"]{}
/*全部以qwert屬性值開始的均可以選中,
是CSS3中的選擇器*/
[title$="qwert"]{}
/*全部以屬性值結尾的均可以選中,是CSS3中的選擇器*/
[title~="qwert"]{}
/*屬性值包括什麼，只能選中包括用空格分隔的和獨立的,是CSS2中的選擇器*/
[title*="qwert"]{}
/*全部包括該屬性值的均可以選中,是CSS3中的選擇器*/
</style>
</head>
<body>
<a href="#" title="">title</a>
<a href="#" title="qwert">qwert</a>
<a href="#" title="qwert yu">qwert yu</a>
<a href="#" title="qwert_yu">qwert-yu</a>
<a href="#" title="aaa.qwert">aaa.qwert</a>
<a href="#" title="aaa.qwert.www">aaa.qwert.www</a>
<a href="#" title="qwertyuiop">qwertyuiop</a>
<p>我是誰</p>
</body>app

通用選擇器僞選擇器less

<head>
<title>1111</title>
<style type="text/css">
*{color: red;}
/*通用選擇器全部元素都被變紅*/
a:link{color: green}
/*默認狀態*/
a:visited{color: }
/*被訪問過*/
a:hover{color: }
/*鼠標懸停時*/
a:active{color: }
/*鼠標點擊時*/
/*四種狀態能夠同時都寫，也能夠單獨寫,若是全寫的狀況下必須遵循必定的順序，
特別是active要寫到hover後面,不然就會被覆蓋,由於點擊的同時鼠標確定是懸停在內容上的,hover對其餘元素也起做用*/
input:focus{outline-color: red;}
/*獲取焦點邊框顏色*/
p:before{content: "你好"}
p:after{content: "你好"}
/*在p標籤的先後加上content*/
</style>
</head>
<body>
<h1>標題</h1>
<p>段落</p>
<a href="#">百度一下</a>
<input type="text" name="text">
</body>

盒子模型

1.
width: 300px;
height: 300px;
border: 50px solid pink;
border:寬度樣式顏色
顏色能夠省略，默認的是黑色
常見樣式有dotted(點狀),dashed(虛線),solid(實線)
寬度能夠省略，默認是1px
2.
border-width: 100px;
border-style: solid;
border-color: black;
border-width:上右下左;
border-style:上右下左;
border-color:上右下左;
按照順時針方向設置，若是省略了一個邊，就取對邊的值，若是隻設置了一個邊，那麼全部的邊都同樣
3.
border-top: 120px solid red;
border-right: 150px solid yellow;
border-bottom: 150px solid green;
border-left: 100px solid blue;
4.
border-top-width: 寬度;
border-top-style: 樣式;
border-top-color: 顏色;
border-right-width: 寬度;
border-right-style: 樣式;
border-right-color: 顏色;
border-bottom-width: 寬度;
border-bottom-style: 樣式;
border-bottom-color: 顏色;
border-left-width: 寬度;
border-left-style: 樣式;
border-left-color: 顏色;
內邊距
padding:上右下左;
按照順時針方向設置。若是省略了一個邊，就取對邊的值，若是隻設置了一個邊，那麼全部的邊都同樣
當設置內邊距時會使盒子變大，能夠設置box-sizing: border-box;使內容邊距變小盒子大小不變（IE盒模型）
content-box爲默認值做用使盒子變大內容區域不變
外邊距
margin:上右下左;
按照順時針方向設置。若是省略了一個邊，就取對邊的值，若是隻設置了一個邊，那麼全部的邊都同樣
水平方向上的margin值能夠疊加
普通元素垂直方向上的margin值發生重疊現象，重疊後取較大的值overflow:hidden解決
普通的父子元素margin值發生溢出現象，給子元素設置margin top時候，這個值會傳遞到父元素,能夠經過給父元素添加邊框或者是內邊距來阻止margin值的傳遞,還能夠給父元素添加overflow:hidden來阻止margin的值傳遞

外邊距不會影響元素的寬和高，可是會影響整個元素空間的寬和高
padding主要是用來設置父元素和子元素之間的距離，margin主要是用來設置元素和元素之間的距離
margin能夠取負值,表示相反的方向
內容
元素的寬width和高height決定了真正能夠填充內容的空間
取值能夠是具體的像素也能夠是百分比,百分比是相對於本身的父元素來講的
display: inline-block;使兩個盒子水平排版
當兩個盒子屬於父子關係使，設置子盒子的width,height值時能夠設置爲百分比，至關父盒子的寬高

內容的寬和高
內容的寬:經過width屬性設置的值
內容的高:經過height屬性設置的值
元素的寬和高
元素的寬：左邊框＋左內邊距＋內容的寬度＋右內邊距＋右邊框
元素的高：上邊框＋上內邊距＋內容的高度＋下內邊距＋下邊框
元素空間的寬和高
元素空間的寬：左外邊距＋左邊框＋左內邊距＋內容的寬度＋右內邊距＋右邊框＋右外邊距
元素空間的高：上外邊距＋上邊框＋上內邊距＋內容的高度＋下內邊距＋下邊框＋下外邊距

盒子的圓角

border-radius: 150px;/*或50%*/
border-radius:取值1(左上右上右下左下)/[取值2(左上右上右下左下)]*/
border-top-left-radius:取值1 [取值2];
border-top-right-radius:取值1 [取值2];
border-bottom-right-radius:取值1 [取值2];
border-bottom-left-radius:取值1 [取值2];取值能夠是px也能夠是百分比
（width: 100px;
height: 100px;
border-right: 10px solid red;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;）月牙形狀經過只設置一個盒子的邊來完成

盒子行高和陰影

line-height: 40px;
使行高變爲知道的數值利於計算內邊距和其餘數值*/
padding: 10px 10px;
利用內邊距的設置及計算使文字在方框內垂直居中*/
box-shadow: 2px 2px 2px 2px black;
水平距離垂直距離模糊距離陰影大小陰影顏色內外陰影默認outset，inset;
div:hover{
box-shadow: 2px 2px 2px 2px black;/*當鼠標懸浮到盒子時顯示的陰影*/
cursor: pointer;當鼠標懸浮到盒子時的鼠標圖標*/}

盒子背景圖片大小位置處理

background-image: url(../54/修羅.jpg);
background-color: green;
background-repeat: no-repeat;
repeat-x只在水平方向上平鋪repeat-y只在垂直方向上平鋪*/
background-attachment: fixed;
scroll(背景圖片會隨着滾動條的滾動而滾動)|fixed(背景圖片固定在某個位置,不隨滾動條的滾動而滾動)*/
background-position: center center;
background-position: 水平移動距離垂直移動距離
取值:具體的數值+px|方向單詞
水平:right center left 垂直:top center bottom移動的參考點是容器的左上點
background: url(../54/修羅.jpg) green no-repeat fixed center center;連寫
background-size:100% 100%;
background-size:寬度高度 | 單詞
寬度和高度的取值有:
具體的像素
百分比(相對於容器)
auto auto(誰設置爲auto把誰等比拉伸)
單詞的取值有:
cover,圖片等比拉伸到寬度和高度都填滿元素，圖片不變形，但可能會顯示不全
contain,圖片等比拉伸到寬度或高度中的一個填滿元素另外一個等比擴大或縮小，顯示徹底，不變形，但在整個盒子中可能會有空白區域
background-origin:padding-box;
格式padding-box(從內邊距開始顯示)border-box(從邊框開始顯示)content-box(從內容區域開始顯示)
注意點:該屬性用來指定從哪一個區域開始顯示背景圖片,默認是padding-box
background-clip:padding-box;
格式padding-box(從內邊距開始顯示)border-box(從邊框開始顯示)content-box(從內容區域開始顯示)
注意點:該屬性用來指定從哪一個區域開始顯示背景顏色,默認是border-box*/
background: url(../54/修羅.jpg) green no-repeat fixed center center;連寫

input輸入框
outline-width：0px 點擊input框時沒有顏色

塊狀行內塊狀行內元素

div{/*塊狀元素，
獨佔一行，
可設置寬高，
有默認寬高，
可設置邊框，
可設置垂直和水平方向的內外邊距
常見的塊狀元素 p div header nav section article footer h ul ol dl li dt dd ...*/
p元素，只能包含inline元素，而不能包含block元素
width: 200px;
height: 200px;
border: 1px solid red;}
span{/*行內元素
width height無效
垂直方向上的內外邊距無效,但內邊距可設置，外邊距不可設置，其餘跟塊狀元素效果同樣
常見的行內元素span b u i s stong em ins del ...*/
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；
但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果，
注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px 10px;
padding: 20px 20px;}
p{width: 200px;
height: 200px;
border: 1px solid red;}
img{
/*行內塊狀，
除了不會獨佔一行，其餘效果跟塊狀元素同樣
常見的行內塊級元素img input textarea ...*/
width: 200px;
height: 200px;
border: 1px solid red;}
.aaa{display: inline-block;
/*給元素添加display能夠手動的改變元素的顯示模式,常見取值有:
block 塊級
inline 行內
inline-block 行內塊級*/
vertical-align: top;
/*行內塊狀對齊方式vertical-align:baseline|top|middle|bottom|text-bottom，
只有行內塊狀元素設置vertical-align屬性纔有效
默認的對齊方式是baseline(基線對齊)
top是相對於父元素的頂部對齊
middle是相對於父元素的中部對齊
bottom是相對因而相對於父元素的底部對齊
text-bottom是相對於父元素的文字底部對齊*/}

浮動流佈局

float: left/right；
沒有中間對齊,對齊是相對於父元素的左右邊框的
浮動流主要是用來水平排版的
雖然把元素設置爲行內塊狀也能夠實現水平排版,但有不足之處,例如左右水平排版,若是父元素寬度不固定的狀況下會發生錯位,因此在項目中通常都用浮動流來實現水平排版
因爲脫離標準後,標準流中位置空閒了出來,所以後面標準流中的元素會去頂替脫離標準流的那個元素的位置
浮動元素脫標後的在浮動流中的特色
由於脫離標準流,因此浮動的元素不區分塊狀，行內，行內塊狀，他的屬性和行內塊狀同樣
浮動流的元素不能夠用margin: 0 auto;來水平居中
浮動元素脫標後在浮動流中的排列規則
同方向上,先浮動的顯示在前面，後浮動的顯示在後面,注意這個前後指的結構上的前後而不是css的書寫前後
不一樣方向上,左浮動找左浮動元素，右浮動找右浮動元素
浮動後元素的位置由浮動前元素在標準流中的位置決定,這個位置主要指的是浮動前在標準流中是第幾行,浮動後仍是顯示在第幾行
因爲浮動元素的位置和浮動前在標準流的位置有關 ,因此嚴格意識上說浮動元素是非徹底脫標
清除浮動
方式一,
給前面的盒子添加高度
項目中通常高度是有內容撐起來的,儘可能不設置高度
方式二,
經過給第二個盒子添加clear屬性來清除前面元素浮動帶來的影響
clear: both;
clear屬性的取值有:left|right|both|none(默認)
clear屬性的意思是不讓本身的子元素找前面浮動的元素
經過clear屬性清除浮動會致使第一個盒子的margin-bottom和第二個盒子的margin-top失效,第二個盒子的margin-top失效是由於margin的值傳遞
方式三
給第一個盒子和第二個盒子之間添加一個空盒子，而且給這個空盒子設置clear:both屬性,俗稱外牆法
第一個盒子的margin-bottom依然不能夠用, 空盒子{clear: both;height: 20px;}
可是第二個盒子的margin-top能夠用
能夠經過設置空盒子的高度來達到設置margin-bottom/top的效果
方法四,
給第一個盒子全部元素的後面添加一個空盒子，
<div class="wall">空盒子</div>
而且給這個空盒子設置clear:both屬性,俗稱內牆法
第一個盒子的margin-bottom能夠用,第二個盒子的margin-top也能夠用
也能夠經過設置空盒子的高度來達到設置margin-bottom/top的效果
內牆法能夠撐起盒子的高度，而外牆法不能夠
方法五,
經過僞元素選擇器(:after)實現內牆法
.eee:after{content: "";
clear: both;
display: block;
height: 0px;
visibility: hidden;}
.eee{*zoom:1;} /*此代碼適用於IE6*/
做用和內牆法同樣，可是不用額外添加空元素，在第一個盒子的父元素盒子標籤加：after 能夠實現結構和樣式分離，在實際項目開發中推薦使用*
方式六,
經過給第一個盒子添加overflow: hidden來清除浮動

定位流佈局

1 相對定位
position：relative
top/right/bottom/left：10px;
四條邊的移動距能夠寫一個,也能夠寫兩個,寫兩個的時候要注意在同一個方向的只能設置一個邊
相對定位元素是不脫離標準流的,因此相對定位元素在標準流當中的空間不會釋放出來
相對定位元素是不脫離標準流的,因此相對定位元素區分塊狀，行內，行內塊狀
若是元素有margin/border/padding值,相對定位是在margin/border/padding值生效後起做用
相對定位元素主要用來對對元素進行微調和設置絕對定位的參考元素
2 絕對定位
position：absolute；
top/right/bottom/left：10px;
四條邊的移動距能夠寫一個,也能夠寫兩個,寫兩個的時候要注意在同一個方向的只能設置一個邊
絕對定位元素是脫離標準流的,因此絕對定位元素在標準流中的空間會被釋放出來
絕對定位元素是脫離標準流的,因此絕對定位元素不區分塊狀,行內,行內塊狀
3 絕對定位的參考點
絕對定位元素會參考離他最近的具備定位屬性的祖先元素,
若是祖先中沒有定位元素就參考body元素,
換句話說若是一個元素設置爲絕對定位,首先去找他的父元素,
看他的父元素有沒有position定位屬性,若是沒有就找他的父親的父親,直到找到第一個具備position屬性的祖先,
而後相對於該祖先發生位置移動,若是全部祖先都沒有position定位屬性,就相對於body發生位置的移動
具備position定位屬性指的是相對定位,絕對定位,固定定位,但不包括靜態定位
父元素的margin/border的值對絕對定位的子元素的位置沒有影響,絕對定位的子元素是從父元素的padding區域開始參考的,
但若是相對於body,始終至關於相對於瀏覽器的首屏的可視區域（至關整個瀏覽器的屏幕）
4 絕對定位的元素水平居中
left:50%
margin-left:-x；
相對於貼靠元素的50% 而後-元素寬度的一半
5 固定定位
position：fixed；
top/right/bottom/left：10px;
固定定位元素是脫離標準流的,因此固定定位元素在標準流中的空間會被釋放出來
固定定位元素是脫離標準流的,因此固定定位元素不區分塊狀,行內,行內塊狀
固定定位元素不會隨着滾動條的移動而移動
固定定位元素始終參考的都是body
6 靜態定位
默認狀態的定位
7 定位流中元素顯示的順序
默認狀況下,定位流中的元素會蓋住標準流中的元素默認狀況下,定位流中後面的元素會覆蓋住前面的元素
能夠經過z-index：1；來更改元素的覆蓋關係,值越大,顯示越靠前,默認值是0
父級元素的z-index屬性會影響到子元素的z-index,子元素的z-index屬性最終的值是全部父級元素中最頂層（程序最外面最大的）父級元素的z-index值
父子關係的z-index屬性之間不會相互覆蓋（無效）。

過分

transition-property: background-color,height;
transition-duration: 10s,8s;
transition-delay: 2s;
transition-timing-function: linear; 運行的方式
取值linear ease 默認的 ease-in ease-out ease-in-out cubic-bezier(x1,y1,x2,y2)*/
簡寫1 transition:width 3s linear 2s,background-color 3s linear 2s;屬性時間速度延遲時間
簡寫2 transition:width 3s,background-color 3s;
簡寫3 transition: all 3s

模塊的變化

旋轉
transform: rotate(15deg)
旋轉正值沿Z軸順時針
旋轉正值沿X軸上邊向裏，下邊向外
旋轉正值沿Z軸左邊向外，右邊向裏
transform: rotateX();/*沿x軸旋轉*/
xy軸旋轉配合加在父元素的透視perspective: xxpx;標籤使用
perspective意思爲人眼與旋轉的元素垂直距離的大小
transform: rotateY();/*沿y軸旋轉*/
transform: rotateZ();/*默認是Z*/
旋轉會改變座標系
旋轉寫在平移前面是在旋轉修改後的座標系下平移
平移後旋轉是在平移之後的位置默認中心點旋轉*/
平移
transform: translate(100px,100px)
(水平方向移動距離,垂直方向移動距離)可爲負數*/
縮放
transform: scale(1.5,1.5);
transform: scale(水平方向縮放比例,垂直方向縮放比例)
縮放比例若是是1表明不變,大於1表明放大,小於1表明縮小
若是水平和垂直方向上縮放比例同樣,能夠簡寫一個
複寫
transform: translate(200px,200px) rotate(20deg) scale(1.5,1.5);
透明度
opacity：0到1；
變化的基點
transform-origin: 50px 50px; 格式:水平方向移動距離垂直方向移動距離;
變化基點就是以哪一個點爲參考點進行變化
變化基點的移動參考點是元素的左上角頂點
默認狀況下全部的元素都是以本身的中心點做爲參考來旋轉的
移動距離能夠是具體的像素,百分比,和關鍵字水平方向上有left center right,在垂直方向上有top center bottom

動畫

animation-delay: 2s;
animation-timing-function: ; /*linear|ease 默認的|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2);執行速度*/
animation-iteration-count: ;/*具體的數字(默認是1)|infinite(無限循環);*/
animation-direction: ;/* normal(默認狀態不執行往返動畫)|alternate(執行往返動畫);*/
animation-play-state: ;/*running(默認狀態動畫執行)|paused(鼠標懸浮時動畫暫停)*/
animation-fill-mode: ;/*none(不作改變)|backwards(動畫等待時顯示動畫的第一幀)|
forwards(動畫執行結束保持顯示動畫的最後一幀)|both(動畫執行前顯示動畫的第一幀而且動畫執行結束顯示動畫的最後一幀*/
animation:bb 60s linear 2s infinite alternate;
/*動畫的名稱動畫的執行時間動畫的速度延遲時間動畫的執行次數是否執行往返動畫;*/
@keyframes bb{
0%{margin-left: 0px;
margin-top: 0px;
background: red;}
25%{margin-left: 400px;
margin-top: 0px;
background: yellow;}
50%{margin-left: 400px;
margin-top: 400px;
background: green;}
75%{margin-left: 0px;
margin-top: 400px;
background: blue;}
100%{margin-left: 0px;
margin-top: 0px;
background: red;}
}
@keyframes bb{
from{width: 500px;}
to{width: 1000px;}
}

3D轉化

.father{
width: 200px;
height: 200px;
background: yellow;
transform-style: preserve-3d;
/*flat讓子元素呈現2D展現；preserve-3d讓子元素呈現3D展現*/
3D使元素具備厚度
}
.son{
width: 100px;
height: 100px;
background: blue;
}

自定義字體

}
</style>
</head>
<body>
<p>祝賀你Congratulations個人字畫</p>
</body>

自定義字體改成圖標 https://fontawesome.com/

### Less介紹
/*Less是一門CSS預處理語言，它擴充了CSS語言，增長了諸如變量、混合（mixin）、函數等功能，讓CSS更易維護、方便製做主題、擴充。Less能夠運行在Node或瀏覽器端。*/

/*使用以前在sublime上裝一個less插件*/
### Less編譯
* 瀏覽器
```javascript

<link rel="stylesheet/less" type="text/css" href="less/001.less">
<script src="js/less.js" type="text/javascript"></script>
```

* 客戶端

> http://koala-app.com/

* 服務端

### Less語法
* 註釋
```css
//我是註釋一編譯被刪除
/*我是註釋二編譯被保留*/
```
* 變量
@變量名:值

* 混合(Mixin)

> * 基本混合,直接把選擇器寫在另一個選擇中
> * 帶參數
> * 帶參數有默認值

* 匹配模式
選擇符合條件的混合模式,根據傳入的參數來決定使用哪一個混合

* 嵌套
在選擇器中嵌套選擇器

* 運算
+-*/

* 避免編譯
屬性:~'css的值'

* !important關鍵字
在混合模式後添加!important關鍵字,會爲混合模式中的全部樣式添加!important

*混合參數作爲屬性和設置計算後的屬性值

.set(@attr,@val){
@{attr}:unit(@val/10,px);
}

//用rem來設置大小
@rem:32;
.rem(@attr,@px){
@{attr}:unit(@px/@rem,rem);
}
img{
.rem(width,120)
}
### 移動基礎
* 像素

>> * 設備的物理像素,屏幕的物理像素,任何設備的物理像素是固定的,例如電腦屏幕的分辨率是1366 X 768,表示在電腦屏幕上有1366 X 768個小格子,一個小格子表明一個物理像素

>> * CSS像素,又稱邏輯像素,是爲WEB開發者創造出來的一個抽象層
>>> * 只有在頁面不縮放的狀況下,一個CSS像素纔等於一個物理像素
>>> * 若是頁面放大,根據放大的比例,多個物理像素合成一個CSS像素
>>> * 若是頁面縮小,根據縮小的比例,一個物理像素分紅多個CSS像素
>>> * 由於像素的合成,當網頁放大後,CSS定義的像素並無改變,可是視覺效果上變大了

* DPI/PPI

> * DPI（Dot Per Inch）每英寸的墨汁點，多用於印刷行業

> * PPI（Pixels Per Inch）屏幕每英寸的物理像素數量，即單位英寸的物理像素密度

> * 1 英寸(inch)=25.4毫米(millimetres)=2.54釐米

* PPI值越高,一個實際1英寸上容納的物理像素就越多,就可以展現更多的畫面細節,也就意味着畫面更細膩

* DPR

> * 手機分辨率很高,但手機屏幕尺寸有限,因此可讓手機屏幕上的多個物理像素合成一個CSS像素來更好的顯示內容

> * DPR(device Pixel Ratio) 設備像素比 = 設備物理像素 / CSS像素,這個DPR就決定了多少個物理像素合成一個CSS像素

> * 以iPhone6爲例
>> * iPhone6 的分辨率爲1334X750
>> * iPhone6 的CSS像素爲667X375
>> * 因此iPhone6 的DPR爲 1336/667 = 2,即2個物理像素對應一個css像素
>> * DPR的設置是根據人體手臂的長度來設定的,也就是說將 1334X750的物理像素合成667X375的CSS像素,視覺效果是最好的

* 視口 viewport

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
```
>* width,設置視口的寬度,表示把移動設備的寬縮放爲多少個CSS像素,爲一個正整數,或字符串"device-width",device-width表示縮放到設備合成後的CSS像素
>* initial-scale 設置頁面的初始縮放值,爲一個數字,能夠帶小數
>* minimum-scale 容許用戶的最小縮放值,爲一個數字,能夠帶小數
>* maximum-scale 容許用戶的最大縮放值,爲一個數字,能夠帶小數
>* height,設置視口的高度
>* user-scalable,是否容許用戶進行縮放,值爲"no"或"yes", no 表明不容許,yes表明容許
>* 這些屬性能夠同時使用，也能夠單獨使用或混合使用，多個屬性同時使用時用逗號隔開

### 屏幕尺寸適配

* 像素px,絕對單位,因爲單位固定

> * 沒法作屏幕的適配

* 百分比%,相對於父元素的寬高

> * 能夠實現佈局的適配,可是字體不容易適配

* em,當前元素字體的大小,1em=當前元素可繼承的font-size

> * 能夠根據不一樣的屏幕來設置元素的font-size,再利用em來適配,可是元素的font-size能夠被繼承,同時js和css常常會修改font-size,若是用em來適配的話容易形成混亂

> * 注意:font-size最小值是12px;

* 1vw=當前設備寬度的1%,vh=當前設備高度的1%

> * 能夠適配佈局和文字,但兼容性很差

* rem,根元素字體的大小,默認值是16px
(function(win,doc){
//1.獲取根元素
var oRoot = doc.getElementsByTagName('html')[0];

function refreshFontSize(){
//2.獲取設備的物理元素的寬
var iWidth = doc.body.clientWidth || doc.documentElement.clientWidth;
//3.根據設備的寬計算出根元素的fontSize
var iFontSize = iWidth / 10;
oRoot.style.fontSize = iFontSize + 'px';
}

win.addEventListener('resize',refreshFontSize,false);
doc.addEventListener('DOMContentLoaded',refreshFontSize,false);

})(window,document);
> * 能夠根據不一樣的屏幕來設置根元素的font-size,再利用rem來適配
> * 根元素的font-size須要動態設置,通常有JS和媒體查詢兩種方法來動態設置

### 響應式佈局(Responsive)
* 媒體類型 (media type)

> * 媒體類型是從CSS2和HTML4開始,能夠根據設備的類型來決定使用什麼樣式
> * 使用方法一
```html
<link rel="stylesheet" media="print" href="css/print.css" >
<link rel="stylesheet" media="screen" href="css/screen.css" >
```
> * 使用方法二
```html
<style type="text/css">
@media screen{
h1{
color: blue;
}
}
@media print{
h1{
color: red;
}
}
</style>
```
> * 常見的媒體類型有(還有其餘的但基本已被拋棄,因此在此不在列舉)
>> screen 屏幕
>> print 打印機
>> all 全部

* 媒體查詢(media query)

> * 媒體查詢是由媒體類型(media type)和媒體特徵(media features)共通決定使用什麼樣式
> * 常見的媒體特徵有
>> * width, 瀏覽器窗口的寬度,能夠有min/max前綴
>> * height, 瀏覽器窗口的高度,能夠有min/max前綴
>> * device-width,分辨率寬度,能夠有min/max前綴
>> * device-height,分辨率高度,能夠有min/max前綴
>> * orientation,移動設備窗口的方向,portrait(縱向),landscape(橫向)
> * min/max的解釋
>> * (min-width:400px) 瀏覽器窗口的寬度最小是400px樣式生效,換句話說是大於等於400px時樣式生效
>> * (max-width:800px) 瀏覽器窗口的寬度最大是800px樣式生效,換句話說是小於等於800px時樣式生效

使用方法一

@media not print and () ... {...} //not-排除這種媒體以外的類型

@media only screen and () .... {....} //only-指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器;不加only會被別的媒體類型繼承

</style>