[TOC]
CssNotes
1、HTML5樣式嵌入方法
外部（推薦）<link>標簽 <link rel="stylesheet" type="text/css" href="css/layout.css">
內(nèi)部 在html中使用<style></style>
內(nèi)聯(lián)（不推薦）在標簽內(nèi)部，寫style=“background: red; border-radius:256px;”
2、css優(yōu)先級
1 內(nèi)聯(lián)style
2 id選擇器
3 class選擇器
4 標簽
3、css長度單位
1 px
2 em
4、css選擇器
1 常用選擇器
> 標簽選擇器 span {}
> id選擇器 #id {}
> 類選擇器 .class {}
> 關聯(lián)選擇器 由父類里面找子類的子類，使用空格
> 組合選擇器 使用“,” 選擇多個不同的父類里面的子類
2 基本選擇器
> :first-child 第一個元素
> :first-letter 第一個字符
> :first-line 第一行
> :last-child 最后一個元素
> :nth-child(2) 第幾個元素，括號內(nèi)可以選擇
3 層級選擇器
> a,b 組合
> a b 后代中所有的
> a>b 子元素（不包括孫子級別）
> a+b 后面的（不是里面的）
4 偽類選擇器
> :hover 當鼠標移動到其上方的時候，其樣式進行改變
> :focus 獲取焦點 如input
> ::selection 被選擇的時候，如文本的選擇時可以進行操作
5 屬性選擇器
> [id] 該標簽含有該屬性就夠了，如input[name] {}指的是，選擇input標簽中含有name屬性的標簽
> [id=use1] 該標簽的屬性為，如：input[name=username]{}
> [name*=us] 該屬性中含有后面的字符的，如：input[name*=us]{}，指的是name屬性中包含有"us"字符的
> [name^=en] 選擇該屬性以“en”開頭的
> [name$=en] 選擇該屬性以“en”結束的
。。。還有很多，具體參考API文檔
5、常見的樣式屬性和值
1 字體與顏色
font-family 字體類型，如： 宋體、黑體、微軟雅黑，默認為宋體
font-size 字體大小，
font-style 字體樣式，是正常，還是斜體 normal、italic
font-weight 字體粗細，bold為粗體，默認為正常
可以自定義字體，如下，自定義了font-family為“zcx”的字體類型
@font-face {
font-family:zcx;
src:url('zcx.ttf');
}
2 背景屬性
background-color
background-image
background-repeat 重復，比如圖比較小，可以使用多個 可以為 no-repeat
background-attachment fiexed（固定） scroll（跟著滾動）適用于body對div不兼容
background-position
水平:left center right ，垂直:top center bottom
50% 50%
500px 700px
可以縮寫，對其顏色 no-repeat 位置等進行一行寫完。
3 文本屬性
letter-spacing 字間距
word-spacing 詞間距
text-decorationg none、underline、overline、line-through
text-align 文本居中，left、center、right
text-index p標簽段落首行縮進
line-height 文本的高
color 文本顏色
word-break 自動換行，中文會自動換行，英文不會，因此可以使用break-all
*若文本溢出文本框，則可以使用 overflow:auto,可以自動出現(xiàn)滾動條
4 邊框屬性
border-style none、hidden、dotted、dashed、solid、double、groove（凹進去）、ridge（凸出來）、inset(凹進去的)、outset（凸出來的）
border-width
border-color
border-bottom 設置底部邊框的樣式
border-left 設置左側邊框的樣式
border-right
border-top
5 鼠標光標屬性 cursor:
crosshair 十字形狀
pointer 小手形狀
text 文本形狀
wait 等待形狀
default 默認形狀
help 幫助形狀
6 列表樣式 <ul> <li>
list-style-type: none、disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha
定寬、定高的效果：min-width（當再更小的時候，會出現(xiàn)滾動條）
textarea文本域【cols 和 rows 表示 寬 和 高 】
resize：none 文本框不能拖動調(diào)動大小 可設置width 和 height
樣式繼承：
文字樣式、顏色、大小繼承【文本屬性】可以繼承
表格：<table> <tr> <th> <td> border、width、cellspacing
border-collaps: collaps表格邊框是否合并
border-spacing 表格邊框之間的距離
7 定位屬性
position：【脫離文檔流】
absolute 不占位置 坐標系為瀏覽器左上角
relative 占位置 坐標系為自己左上角
實現(xiàn)div絕對位置方法：父div的position為relative，子div的position為absolute
【即為：若absolute外層為relative，則其位置top，left為相對于外層relative的位置，否則為相對于瀏覽器的位置】
top left z-index
8 內(nèi)外邊距
外邊距 margin
內(nèi)邊距 padding
9 浮動和清除浮動
float: 浮動 脫離文檔流，不占位
塊標簽，設置float值，則不會自動變行 可以使用ul設置導航菜單。
例子：ul中所有的li都設置為浮動，若不設置ul標簽的高度，ul會自動設置高度為0，此時在ul中添加一個div標簽，并設置“style='clear:both'”即可。
clear: 一般用于clear：both，在盒子所有的子盒子都浮動起來的時候，將盒子撐開。
10 滾動條
overflow: scroll、auto、hidden
11 顯示和隱藏
display:
none 看不見，且不占位
block 以塊標簽進行顯示
inline 以行標簽進行顯示
visibility: hidden 看不見，但占位 visible
12 CSS3
邊框樣式：
border-radius 圓角直徑（1個值 2個值 3個值 4個值）
box-shadow 右下角陰影（5個值 前兩個為位置，第三個為模糊值，第四個為外延值，第五個為顏色）
border-image: url('b.png') 26 26 round ，不要忘了加上“border 26px solid transparent”
背景樣式：
background-size 背景圖的大小
background-origin : padding-box、border-box、content-box
文本樣式：
text-shadow 字的陰影
word-wrap break-world 折行
字體樣式：
可以自定義字體，如下，自定義了font-family為“zcx”的字體類型
@font-face {
font-family:zcx;
src:url('zcx.ttf');
}
2D樣式：transform
translate() 相對移動
rotate() 自身旋轉 70deg 若translate和rotate結合，則斜著走
scale() 比例，x、y分別變?yōu)樵瓉淼膸妆?，從中心變大? 3D樣式：transform
rorateX()
rorateY()
過渡樣式：
transition 改變寬高的時間 width 2s
分欄樣式：對文本進行分欄
column-count: 分欄數(shù)目
column-gap: 分欄中間距離
column-rule: 分欄中間線
輪廓樣式：
outline: 2px solid #00f
outline-offset: 離邊框的距離
============================================================================================
1、盒子模型
邊框：border
內(nèi)填充：padding
高度：height
寬度：width
外邊距：margin
/* padding 內(nèi)邊距
padding: 10px; 四個邊都是
padding: 10px 20 px; 上下10px 左右20px
padding: 10px 20px 30px; 上10px 左右20px 下30px
padding: 10px 20px 30px 40px; 上 右 下 左
padding-top
padding-left
padding-right
padding-bottom
*/
同理，margin外邊距也是一樣的
IE瀏覽器 的內(nèi)容并不是正確的，而是width-border*2 -（padding-left*2），可加一個"!important"字段進行標記，IE選擇下面一個，而普通瀏覽器選擇important
2、頁面布局相關屬性
position屬性
為absolute時，其位置為相對于瀏覽器的絕對位置，需要配合top、left來使用【一般結合js來使用，漂浮的廣告來用=。=】
為relative時，位置為相對位置其本來默認的位置。
static（靜態(tài)）為position默認值
fixed（固定），頁面上下滑動的時候，其位置不發(fā)生任何的變化
z-index
text-align: left right center 【內(nèi)容】橫向居中
line-height: 100px【此時不使用height，直接使用line-height 【內(nèi)容】垂直居中（或者內(nèi)加padding）
display屬性
block：當span這種非塊級區(qū)域的標簽要進行換行時可以使用
inline：當div這種塊級標簽想要不換行時可以使用，兩個都要用【現(xiàn)在沒用？？？？】
none: 隱藏，其該元素的位置沒了
visibility屬性
inherit 子層繼承父層的可見性
visible 無論父層是否可見，子層都可見
hidden 無論父層是否可見，子層都不可見
overflow屬性
hidden 超出框的部分隱藏
scroll 超出部分加上滾動條
auto 若超出，則加滾動條，不超出，則不加滾動條
float屬性 漂浮
left right 上層有空間就在上層，如果沒有，會自動下去 會自動換行
clear屬性
left right both
清除指定元素的指定方向的漂浮
3、多列浮動
1 設置一列浮動，一列div盒子居中：讓左右自動
margin-left：auto margin-right：auto
margin：0 auto
2 設置兩列浮動
float: left right
3 設置三列浮動
float: left right，同時設置 margin-left或者margin-right的距離 【千萬不要忘了float】
4 設置多列浮動
float都設置為left
display: block;和display: inline;的區(qū)別
block元素特點：
1.處于常規(guī)流中時，如果width沒有設置，會自動填充滿父容器 2.可以應用margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規(guī)流中的子元素 4.處于常規(guī)流中時布局時在前后元素位置之間（獨占一個水平空間） 5.忽略vertical-align
inline元素特點
1.水平方向上根據(jù)direction依次布局 2.不會在元素前后進行換行 3.受white-space控制 4.margin/padding在豎直方向上無效，水平方向上有效 5.width/height屬性對非替換行內(nèi)元素無效，寬度由元素內(nèi)容決定 6.非替換行內(nèi)元素的行框高由line-height確定，替換行內(nèi)元素的行框高由height,margin,padding,border決定 6.浮動或絕對定位時會轉換為block 7.vertical-align屬性生效
link與@import的區(qū)別
link是HTML方式， @import是CSS方式
link最大限度支持并行下載，@import過多嵌套導致串行下載，出現(xiàn)FOUC
link可以通過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早于@import，可以使用@import對老瀏覽器隱藏樣式
@import必須在樣式規(guī)則之前，可以在css文件中引用其他文件
溢出省略“...”
.ellipsis{display:block !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
text-overflow屬性僅是注解，當文本溢出時是否顯示省略標記。并不具備其它的樣式屬性定義。我們想要實現(xiàn)溢出時產(chǎn)生省略號的效果。
還必須定義：強制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實現(xiàn)溢出文本顯示省略號的效果。
