塊級元素和行內(nèi)元素
常用塊級元素：div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
常用行內(nèi)元素：em strong span a br img button input label select

區(qū)別：

• 塊級元素獨占一行空間（即便設(shè)置了寬度也不例外呐芥，太霸道了）闰蚕，默認撐滿父容器苇侵。行內(nèi)元素只獨占自身內(nèi)容空間（增加內(nèi)邊距padding岔绸，內(nèi)邊距撐大的空間也不是自己的秉溉，屬于非法占用）
• 塊級元素內(nèi)可包含其他塊級元素和行內(nèi)元素吻育。行內(nèi)元素只能包含文本和行內(nèi)元素
• 塊級元素可設(shè)置寬width高height。行內(nèi)元素設(shè)置寬高無效。
• 行內(nèi)元素設(shè)置左右外邊距邊距margin有效余蟹，設(shè)置上下外邊距margin無效。行內(nèi)元素設(shè)置內(nèi)邊距padding子刮，會將背景色撐開威酒，撐開的空間重疊占據(jù)其他元素的空間。而塊級元素內(nèi)外邊距設(shè)置都有效挺峡，增加的空間都是獨占葵孤。

使用案例：

塊級元素居中設(shè)置：

margin: 0 auto;/*對自身元素生效。效果是在父元素內(nèi)居中（塊級元素默認獨占一整行橱赠，居中顯示需要先設(shè)置width）尤仍，內(nèi)部元素布局不變*/

行內(nèi)元素（或者inline-block）居中設(shè)置：

text-align: center;/*對content生效。content是文本狭姨，則文本居中宰啦；content是行內(nèi)元素，則行內(nèi)元素居中饼拍；content是塊級元素赡模，則塊級元素的內(nèi)容居中*/

對比實例鏈接

css繼承
css繼承是指：子元素繼承了父元素的CSS樣式。

• 能繼承的屬性：
  • 字體：font-family师抄，font-size漓柑，font-weight，line-height
  • 文本：letter-spacing叨吮，word-spacing辆布，text-align, text-indent
  • 列表：list-style、list-style-type茶鉴、list-style-position谚殊、list-style-image
  • 顏色：color

注：a標簽不能繼承父元素的字體顏色，原因是a標簽自己有默認字體顏色蛤铜，會覆蓋掉繼承自父元素的字體顏色嫩絮。

• 不能繼承的屬性：
  • display
  • float
  • border
  • padding和margin
  • width和height
  • background

注：以上屬性的使用時，長期驗證中

css盒模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容围肥、內(nèi)邊距剿干、邊框 和 外邊距的方式。

css盒模型

背景應(yīng)用于由內(nèi)容和內(nèi)邊距谬盐、邊框組成的區(qū)域甸私。

css常見屬性設(shè)置

• display

取值：inline | block | list-item | inline-block | table | inline-table | table-row |    table-cell | none | inherit
初始值：inline
適用范圍：所有元素
可繼承否：不可繼承

元素的display屬性設(shè)置為inline-block，則該元素具有inline和block的雙重屬性

• border

.box { 
    border-width: 1px;  /*邊框?qū)挾?/
    border-color: red; /*邊框顏色*/
    border-style: solid; /* 邊框樣式飞傀，eg：dotted皇型、dash*/
}
/* 簡寫 */
.box2 { 
    border: 1px dotted #ccc;/*取值無順序差異*/
}

使用案例：

• 三角形

  tr.png

• 正方形

  sq.png

• 漏斗

  ld.png

• 橢圓

  ty.png

• font

p { 
    line-height: 1.5; /*行高，可以用百分比砸烦、倍數(shù)或者固定尺寸*/
    font-size: 14px; /*字體大小*/
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; /*宋體弃鸦、微軟雅黑、Arial等*/
    font-weight: bold;/*文字粗度幢痘，常用的就是默認值regular和粗體bold*/
}
/* 簡寫 */
body { 
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;/*取值無順序差異*/
}

1. 字體大小為12px唬格，行高是字體大小的1.5倍，
   tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif是瀏覽器在解析網(wǎng)頁字體時需要在用戶主機上查找的字體庫颜说，按順序查找购岗，找到為止。

2. line-height和height改變的都是element的高度脑沿。設(shè)置line-height藕畔，單行相當(dāng)于垂直居中。
3. 用引號包裹是因為字體的名字中包含空格等特殊符號庄拇，避免瀏覽器解析時候把它解析成多個詞匯注服，出現(xiàn)亂碼。
4. '\5b8b\4f53'是Unicode碼措近。Unicode碼（統(tǒng)一碼溶弟、萬國碼、單一碼）瞭郑，為每種語言中的每個字符設(shè)定了統(tǒng)一并且唯一的二進制編碼辜御，以滿足跨語言、跨平臺進行文本轉(zhuǎn)換屈张、處理的要求擒权。查找方法：在開發(fā)者工具中點開Console控制臺，輸入escape("字體名") 阁谆，回車碳抄，獲得字符串。eg：escape("宋體")回車得到"%u5B8B%u4F53" 场绿，然后將字符串中所有“%u”替換為“\”剖效，即可獲得最終Unicode碼。
5. font這個綜合屬性，簡寫的時候必須寫字體大小和字體類型這兩個屬性值璧尸。如果只是font:12px咒林；這樣寫是沒效果的，必須至少寫font:12px arial;才會有效爷光。

• 文本

text-align：文本對其方式 left垫竞、center、right瞎颗、justify
text-indent：文案第一行縮進距離
text-decoration： none件甥、underline捌议、line-through哼拔、overline
color：文字顏色
text-transform：改變文字大小寫none、uppercase瓣颅、lowercase倦逐、capitalize
word-spacing：可以改變字（單詞）之間的標準間隔
letter-spacing：字母間隔修改的是字符或字母之間的間隔

使用案例：

ellipsis.png

• line-height
  設(shè)置line-height時，可使用絕對值宫补，也可使用相對值檬姥。
  相對值的使用有兩種方式。都是自身元素字體大小的倍數(shù)粉怕。區(qū)別在元素繼承上

  1. line-height: 2  /*先繼承父元素設(shè)置的倍數(shù)值健民，后根據(jù)自身元素字體大小折算實際大小*/
  2. line-height: 200% /*在父元素里根據(jù)父元素的字體大小折算實際大小，再繼承*/

推薦鏈接

• background

  • background-color 設(shè)置元素的背景顏色
  • background-image 把圖像設(shè)置為背景
  • background-repeat 設(shè)置背景圖像是否及如何重復(fù)

    取值：no-repeat（背景圖片在規(guī)定位置）贫贝、repeat-x（圖片橫向重復(fù)）秉犹、
    repeat-y（圖片縱向重復(fù)）、repeat（全部重復(fù)）

  • background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
  • background-position 設(shè)置背景圖像的起始位置稚晚，先水平后垂直
  • background-size 設(shè)置背景的大小
    • 像素值（先水平后垂直崇堵，圖像比例根據(jù)設(shè)置會發(fā)生變化）
    • contain（圖像比例不發(fā)生變化，最長的兩邊剛好放進元素窗口客燕，最短的兩邊可能不能鋪滿窗口）
    • cover（圖像比例不發(fā)生變化鸳劳，最短的兩邊剛好放進元素窗口，最長的兩邊可能被窗口遮擋也搓，顯示不全）

.box {
    background-color: #F00;
    background-image: url(background.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
}
/*簡寫*/
.box2{
    background: #f00 url(background.gif) no-repeat fixed 0 0;/*習(xí)慣順序*/
}

使用常識

• 顏色

  表示方式：
  1. 單詞: red, blue, pink, yellow, white, black
  2. 十六進制: #000000, #fff, #eee, #ccc, #666, #333,#f00, #0f0, #00f
  3. rgb: rgb(255, 255, 255), rgb(0, 255, 0)
  4. rgba: rgba(0,0,0,0.5)

取色方法：
在瀏覽器的檢查元素中操作赏廓。在element.style里面分別輸入color和red（熟悉的顏色名），回車傍妒，red前出現(xiàn)選框幔摸，點擊選框，有下圖

qs.png

• 單位：

px： 固定單位
百分比：相對單位
em: 相對單位，相對于父元素字體大小
rem: 相對單位庆亡，相對于根元素(html)字體大小
vw vh: 相對單位匾乓，1vw 為屏幕寬度的1%

文章著作權(quán)歸本人所有，轉(zhuǎn)載須說明來源