HTML

圖片語義化

1.alt屬性與tittle屬性。

2.figure元素與figcaption元素望浩。

<figure>
    <img src="" alt="" title="">
    <figcaption></figcaption>
</figure>

表單分組

fieldset標簽瀑晒、legend標簽

<fieldset>
    <legend></legend>
    <input >
</fieldset>

優(yōu)點：1.增強表單語義
     2.可定義fieldset元素的disabled屬性來禁用整個組的表單元素

其他

• br：只適合用于p標簽內(nèi)換行
• del標簽清蚀、ins標簽：定義刪除和更新后的文本
• img標簽：
  • 圖片作為HTML一部分泡孩，想被搜索引擎識別，應使用img
  • 反之粟誓，應使用背景圖片

CSS

CSS單位

• 絕對單位：cm\mm\in\pt\pc 多用于平面印刷
• 相對單位：
  • px
  • % ：
    • width height font-size相對于父元素『相同屬性』的值來計算
    • line-height相對于父元素font-size值來計算
    • vertical-align相對于當前元素的line-height值來計算
  • em ：
    • 當前元素的font-size的px值奏寨，如果當前元素font-size未定義，會繼承父元素
    • 瀏覽器默認font-size為16px
    • 小技巧：首行縮進text-indent: 2em;
  • rem:

CSS特性

• 具有繼承性的屬性有三大類
  1. 文本相關：font-family font-size font-style font-weight font
     line-height texxt-align text-indent word-apacing
  2. 列表相關屬性：list-sytle-image list-sytle-position list-sytle-type
     list-style
  3. 顏色：color
     • a標簽默認顏色樣式優(yōu)先級更高鹰服，不會繼承父元素顏色樣式

CSS優(yōu)先級

應用方式?jīng)_突

行內(nèi)樣式 > (內(nèi)部樣式 = 外部樣式)

繼承方式?jīng)_突

最近的祖元素獲勝

指定樣式?jīng)_突

樣式權值高獲勝病瞳，權值只針對指定樣式，不用于繼承

• 通配符 0
• 偽元素 元素選擇器 1
  • 偽元素只有四個：
    • ::before 悲酷、::after 套菜、 ::first-letter 、::first-line
• class選擇器 偽類 屬性選擇器 10
• id選擇器 100
• 行內(nèi)樣式 1000

繼承樣式和指定樣式?jīng)_突

指定樣式獲勝

!important

會覆蓋任何其他樣式

CSS選擇器

• 層次選擇器
  • M N 后代選擇器舔涎，選擇M元素內(nèi)部后代所有N元素
  • M>N 子代選擇器笼踩，選擇M元素內(nèi)部子代所有N元素
  • M~N 兄弟選擇器，選擇M元素后所有同級N元素
  • M+N 相鄰選擇器亡嫌，選擇M元素相鄰的下一個元素N
    • 技巧：li元素之間添加一橫線

      li+li{border-top:1px solid red;}
      /*最后一個li元素沒有相鄰，沒有可選去的*/
      

CSS規(guī)范

CSS命名規(guī)范（適用于開發(fā)階段掘而，發(fā)布階段css文件都合并壓縮）

1. CSS文件命名
   • reset.css重置樣式挟冠，清除默認樣式
   • global.css全局樣式，定義公共袍睡、基礎樣式（導航知染、底部、全局字體斑胜、文字顏色）
   • themes.css主題樣式
   • module.css模塊樣式
   • masster.css模板樣式控淡，用于母版頁的樣式
   • columns.css專欄樣式
   • forms.css表單樣式
   • mend.css補丁樣式
   • print.css 打印樣式
2. id和class命名
   • 避免class命名重復嫌吠，命名取父元素class名為前綴
   • 頁面常見部分命名規(guī)范

網(wǎng)頁主體部分命名

網(wǎng)頁細節(jié)部分命名

導航命名

其他

書寫規(guī)范

<!-- 例子 -->

#main {
    /*影響文檔流屬性*/
    display             : inline-block    ;
    position            : absolute        ;
    top                 : 0               ;
    left                : 0               ;

    /*盒子模型屬性*/
    width               : 100px           ;
    height              : 100px           ;
    border              : 1px solid gray  ;

    /*文本屬性*/
    font-size           : 15px            ;
    font-weight         : bold            ;
    text-indent         : 2em             ;

    /*裝飾屬性*/
    color               : #000            ;
    background-color    : #fff            ;

    /*其他屬性*/
    cursor              : pointer         ;
}

功能代碼

具有某一特殊功能的代碼塊應該集中放置一起

<!-- 舉例 -->
#main {

    /*單行文本居中方法需要使用2個屬性實現(xiàn)，就將其寫在一起*/
    height              : 50px              ;
    line-height         : 50px              ;

}

注釋規(guī)范

1. 頂部注釋

/*
    *@sescription:  文件說明
    *@author     :  作者
    *@update     :  更新時間
*/

2. 模塊注釋

/*導航部分掺炭，開始*/
...
/*導航部分辫诅，結束*/

3. 防止代碼壓縮刪除注釋，將需要保留的注釋加 ! 符號

/*! 這條注釋不會被壓縮刪掉 */

CSS reset

重置瀏覽器默認的CSS樣式

• 避免使用*{...}涧狮，性能底下炕矮，需更具個人具體需求定義。

CSS盒子模型

1. 內(nèi)容區(qū)
   • width
   • height
   • overflow
2. 內(nèi)邊距
   • padding-top
   • padding-right
   • padding-bottom
   • padding-left
3. 邊框
   • border-width
   • border-style
   • border-color
4. 外邊距
   • margin-top
   • margin-right
   • margin-bottom
   • margin-left
   • margin可指定負數(shù)者冤，盒子向負值相反方向移動

border

border:0和border:none差異

• border : 0
  • 0px雖然看不見肤视，但是瀏覽器還是會渲染，占內(nèi)存
• border : none
  • 不占內(nèi)存

padding

margin

外邊距疊加

初衷是為了對文章更好排班涉枫，第一段外邊距顯示和其他段落外邊距相等邢滑。

1. 同級元素
   • 會發(fā)生合并
2. 父子元素
   • 當父元素沒有padding、border把外邊距分隔開愿汰，父元素和子元素相鄰上下外邊距會合并
3. 空元素
   • 自身沒有padding殊鞭、border把外邊距分隔開，上下外邊距會疊加尼桶，再碰到其他元素外邊距再次疊加

負margin

1. margin-top操灿、margin-left為負時，當前元素拉向指定方向
2. margin-botton泵督、marin-right為負時趾盐，后續(xù)元素拉向指定方向

負margin使用技巧

• 圖片文字居中
  • vertical-align : text-bootom
  • img{margin: 0 3px -3px 0 ;}
• 自適應兩列布局

<!-- HTML -->

   <div class="content"><p>主體，寬度自適應</p></div>
   <div class="sidebar"><p>側邊欄小腊，固定寬度</p></div>

<!-- CSS  -->
   div{
       float: left;
   }

   .content{
       width: 100%;
       /* 將sidebar向左拉sidebar自身寬度的舉例*/
       /*否則sidebar會被content的width百分百擠到下一行 */
       margin-right: -200px;
       background-color: green;
   }
   .content > p{
       /* 防止瀏覽器寬度不足救鲤，兩列發(fā)生重疊 */
       /* siderbar自身寬度+兩列間距10px */
       margin-right: 210px;
   }

   .sidebar{
       width: 200px;
       background-color: red;
   }

• 元素垂直居中
  1. 父元素position: relative;
  2. 需垂直居中元素
     • position: absolute;
     • top: 50%;
     • left: 50%;
     • margin-top: /* height 的一半 */
     • margin-left: /* width 的一半 */
• tab選項標簽
  • margin-top: -1px; 解決tab切換問題。

overflow

display

inline行內(nèi)元素

無法定義height秩冈、width,
無法定義margin-top本缠、margin-bottom.
不能容納block塊元素

inline-block行內(nèi)塊元素

可定義height、width
可與其他inline行內(nèi)元素同行

常見inline-block元素

• img
• input

display: none ;

與visibility: hidden;的區(qū)別

• display: none隱藏入问，不占據(jù)原來位置
• visibility: hidden隱藏丹锹，原來位置保留

display: table-cell ;

可以讓元素以表格單元形式呈現(xiàn)

1. 大小不固定的圖片垂直居中于元素

父元素{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
子元素{
    vertical-align: middle;
}

2. 等高布局
3. 自動平均劃分元素

父元素{display: tabel ;}
子元素{display: table-cell ;}

去除inline-block元素間距

父元素{font-size: 0 ;}