css

css

選擇器

• #id
• .class
• *
• h1.class 交集選擇
• h1>img 直接子代
• h1+p緊鄰,同父的下一個 ~全部兄弟
• :first-child 元素的直接第一個子元素
• :last-child 元素的直接最後一個子元素
• :nth-child(n)指定的,even偶數odd奇數
• :first-of-type 只計算當前標籤,其他同上
• :last-of-type
• :nth-of-type
• a[href][type]
• [title = "title"]
• [attribute]
• [attribute = value]
• [attribute ~= value]包含value
• [attribute |= value]開頭value且整個單詞或加-
• [attribute ^=value]開頭value的全部
• [attribute $= value]結尾value的全部
• [attribute *= value]包含value全部
• :not(選擇器)否認僞類選擇
• 優先級權重
  • 內聯樣式    1000
  • id選擇器     100
  • 類和僞類    10
  • 元素選擇器 1
  • !important最高優先級(避免)
  • 相同後覆蓋
  • 並集選擇器單獨算優先級
  • 低級累加不會超太高級

引用

• <link rel = "stylesheet" type = "text/css" href = "mycss.css" />

背景(不繼承)

• background
• background-color:
• background-image:url(/images/image.jpg)
• background-repeat:repeat-x  repeat-y  no-repeat
• background-position:(center  top組合9位置)  px  %(默認0 0)
• background-attachment:fixed   固定圖片背景(上面的position就相對於瀏覽器了,類fixed,經常使用設置給body)
• background-size
• 全部背景都是不繼承的,默認透明
• 背景覆蓋content,padding

文本

• text-indent:  塊級首行縮進
• text-align:center  left  right  justify
• word-spacing:字間隔
• letter-spacing:字母間隔
• text-transform:uppercase大寫  lowercase小寫  capitalize首大
• text-decoration: none  overline  underline  through-line
• direction:ltr  rtl  書寫方向

字體

• color:
• font-size: 1em = 1字體大小(默認16)
• font-weight: bold  100~900(也許不必定準,精度不夠)
• font-family:字體
• font-style:italic斜體  oblique傾斜
• font:30px "微軟雅黑" //後兩個必寫(注意默認行高問題)

連接

• <a href="http://www.baidu.com"></a>

 列表

• list-style:
• list-style-type:none  square
• list-style-image: url(image/image.jpg)
• list-style-position:outside(默認)  inside

 表格

• border: 1px solid blue
• border-collapse:collapse去除重複邊框
• border-spacing:設置表格間距離(collapse設置了自動失效)

 輪廓

• outline:
• outline-color:
• outline-style:
• outline-width:

框模型

• 內容
• 內邊距
  • 背景包含內容和內邊距
  • padding: %相對於父元素的寬度百分比
• 邊框
  • border-width:
  • border-style:
  • border-color:
• 外邊距
  • 透明
  • margin:auto
    • margin-left(right)的auto左(右)邊距最大
    • margin-top(bottom)的auto爲零
    • margin的auto居中
  • 塊級的相鄰垂直外邊距取二者最大,定位,浮動,行內不受影響
    • 兄弟相鄰取最大
    父子相鄰,子會傳給父
    • 設置父的border和padding可避免
    • 因此儘可能設置父親的padding不用子的margin
• 瀏覽器會爲不少元素自動設置margin和padding    *{}性能不太好
• visibility
  • hidden(仍佔位)
• display
  • none(不佔位)
  • inline  無寬高,有水平內外邊距,邊框(影響佈局),有豎直內邊距邊框(但不影響佈局),無豎直外邊距,至關於字,注意多個之間的換行變空格
  • block  
  • inline-block 能夠設置寬高的行內元素(img)

定位

• position:
  　　- absolute 相對最近的定位的祖先元素(至瀏覽器),因此通常設父元素相對定位,提高一個z層級,脫離文檔流(內聯變塊,隨着被內容撐開),
  　　- relative 不脫離文檔流(性質不變),提高一個z層級
  　　- fixed 固定定位:相對瀏覽器的絕對定位,不隨滾動條變化
  left: //切記：默認值是auto，不是0(因此上面相鄰有元素不會重疊)
  top:
  z-index:-1   只有開啓定位的有效,父元素高不過子元素

• 相對於其包含塊定位(已定位祖先元素)
• 生成的必定是塊級框

浮動

• 向上爬
• float:none left right
  • 浮動到父元素邊框,兄弟塊元素或者其餘浮動元素(行內元素會超過)
  • 浮動元素不會超過上面的浮動元素,最多對齊
  • 浮動元素不會蓋住文字
  • 浮動元素塊元素默認寬高爲0,脫離文檔流內聯元素變成塊元素
  • 高度坍塌問題(父元素未設高,子元素全浮動)
    • 隱藏屬性BFC
    • 父元素設置inline-block便可跟隨浮動子元素的高,可是寬丟失
    • 推薦父元素overflow:hidden(非visible),ie6不行
    • 在這個父元素:after僞類添加{content:"",display:"block",clear:both} ,運用clear原理
• 清除浮動的影響
  • clear:left right both
  • 假設浮動元素是塊,避免浮動元素對他的影響,進而不坍塌

 僞類

• a:link  未訪問
• a:visited  已訪問
• a:hover 鼠標在 在link.visited以後
• a:active 點擊時 在hover以後
  • 以上四者優先級同樣,有重疊狀況
  • 避免覆蓋,link和visited在前兩個,hover在active以前在後兩個
• :focus 得到焦點以後
• ::selection 文字選中時

 僞元素

• :first-line首行文本
• :first-letter首字母
• :before元素前
  • 默認指元素前面的空地方
  • content屬性表示這塊
• :after元素後
  • 同上

 行尺寸

• line-height:   
  • 百分比相對於字體,數值相對於字體倍數
  • font:30px/50px 默認自動設置了一個行高,混用注意覆蓋
• max-height:
• min-height:
• max-width:
• min-width:
• height:
• width:

 

 透明度

• opacity:0.4

 

CSS3

邊框

• border-radius:10px;圓角邊框
• box-shadow:10px 10px 10px color //x,y,模糊度，顏色
• border-image:

背景

• background-size:10px 20px;//背景圖大小
• background-origin:border-box padding-box content-box背景圖區域
• background-clip:同上，裁剪
• background-image:url(path),url(path)多重背景

 文本

• text-shadow:10px 10px 10px color//x,y,模糊度，顏色
• white-space:nowrap不換行(normal，pre，pre-wrap，pre-line)
• word-wrap:break-word不準單詞內斷句，會換行(寬度不夠另起一行斷句）
• word-break:break-all 詞內超出直接斷詞換行

 2D轉換

• transform:translate(10px,10px) rotate(30deg) scale(2,4) skew(30deg,30deg)平移 旋轉 縮放 翻轉
• matrix()
• transform-origin:20% 40%基準點位置

 3D轉換

• transform:translate3d(x,y,z) translateX() translateY() translateZ() rotate3d() rotateX(30deg) rotateY(30deg) scale3d()

 過渡

•  transition:width 2s linear 2s,height 2s linear 2s;屬性 時間 勻時 延遲
  • transition-property transition-duration transition-timing-function transition-delay

 動畫

• @keyframes myfirst{
  from {color:red;}
  to {color:blue;}
  }
• @keyframes myfirst{
  0% {color:red;}
  50% {color:blue;}
  100% {color:yellow;}
  }
• animation:myfirst 5s;其餘屬性同上

多列

• column-count:4;列個數
• column-gap:10px;列距離
• column-rule:3px outset red列間，顏色樣式，寬度

用戶界面

• resize:both自定義
  overflow
  • visible默認溢出框外(不影響其餘佈局)
  • hidden溢出隱藏修剪
  • scroll永存滾動
  • auto自動判斷添加滾動條
  • no-display
  • no-content
• box-sizing:border-box padding-box content-box;
• outline:2px solid red;
  outline-offset:15px;

 高度坍塌與外邊界重合問題

元素:after { //高度坍塌
    content:"",
    display:block,
    clear:both
}

元素:before { //外邊距重疊
    content:"",
    display:"table",
}
//有須要能夠整合在一塊兒

 Flex佈局

https://zhuanlan.zhihu.com/p/25303493 

Less

npm i -g less
lessc 文件名.less 文件名.css
    - @a定義變量,可運用計算,&表示本身
    - 嵌套規則
    - 混入引用名便可直接使用(&:.extend(.類名))
    - 導入@import "文件名"
    - 循環等等
    - less-loader

 

 默認值問題

    - 默認auto：position:absolute的left，top
    - 默認auto：width，height默認不是100%
    - margin，padding默認0
    - 百分比：height爲包含塊的height，其他爲width參照

 

 

 

 

-moz-火狐

-webkit-

單位px,百分比,em(等於1當前元素的font-size)

避免屢次請求,資源合一方法:多個圖片合成一張 (CSS-Sprite雪碧圖)

 全部簡寫屬性沒寫的都會設置成默認值(以前寫過的當心被覆蓋)

 

未完待續~~