摘要：控制表單控件的禁用狀態。老不支持生成絕對定位的元素，相對于瀏覽器窗口進行定位。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。

項目已經開源：https://github.com/nanhupatar... 歡迎PR

關注我們的公眾號

相同： 它們都能讓元素不可見

區別：

display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見

display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility:hidden;是繼承屬性，子孫節點消失由于繼承了 hidden，通過設置 visibility: visible;可以讓子孫節點顯式

修改常規流中元素的 display 通常會造成文檔重排。修改 visibility 屬性只會造成本元素的重繪

讀屏器不會讀取 display: none;元素內容；會讀取 visibility: hidden 元素內容

原理：利用不同瀏覽器對 CSS 的支持和解析結果不一樣編寫針對特定瀏覽器樣式。常見的 hack 有 1）屬性 hack。2）選擇器 hack。3）IE 條件注釋

IE 條件注釋：適用于[IE5, IE9]常見格式如下

選擇器 hack：不同瀏覽器對選擇器的支持不一樣

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

屬性 hack：不同瀏覽器解析 bug 或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }

/* IE7, IE8 */
#veinte { color/***/: blue9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

link 是 HTML 方式， @import 是 CSS 方式

link 最大限度支持并行下載，@import 過多嵌套導致串行下載，出現 FOUC

link 可以通過 rel="alternate stylesheet" 指定候選樣式

瀏覽器對 link 支持早于@import ，可以使用 @import 對老瀏覽器隱藏樣式

@import 必須在樣式規則之前，可以在 css 文件中引用其他文件

總體來說：link 優于@import

關于文字排版的屬性如：

font

word-break

letter-spacing

text-align

text-rendering

word-spacing

white-space

text-indent

text-transform

text-shadow

line-height

color

visibility

cursor

如果 display 為 none，那么 position 和 float 都不起作用，這種情況下元素不產生框

否則，如果 position 值為 absolute 或者 fixed，框就是絕對定位的，float 的計算值為 none，display 根據下面的表格進行調整

否則，如果 float 不是 none，框是浮動的，display 根據下表進行調整

否則，如果元素是根元素，display 根據下表進行調整

其他情況下 display 的值為指定值 總結起來：絕對定位、浮動、根元素都需要調整 display

外邊距重疊就是 margin-collapse

相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個多帶帶的外邊距。 這種合并外邊距的方式被稱為折疊，結合而成的外邊距稱為折疊外邊距

折疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值

兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值

兩個外邊距一正一負時，折疊結果是兩者的相加的和

有兩種， IE 盒子模型、W3C 盒子模型；

盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；

標準(W3C)盒模型：元素寬度 = width + padding + border + margin

怪異(IE)盒模型：元素寬度 = width + margin

區 別： IE 的 content 部分把 border 和 padding 計算了進去;

標準瀏覽器通過設置 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高

id 選擇器（ # myid）

類選擇器（.myclassname）

標簽選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（ * ）

屬性選擇器（a[rel = "external"]）

偽類選擇器（a:hover, li:nth-child）

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。

:after 在元素之前添加內容,也可以用來做清除浮動。

:before 在元素之后添加內容

:enabled 選擇器匹配每個已啟用的元素（大多用在表單元素上）。

:disabled 控制表單控件的禁用狀態。

:checked 單選框或復選框被選中

如果需要居中的元素為常規流中 inline 元素，為父元素設置 text-align: center;即可實現

如果需要居中的元素為常規流中 block 元素，1）為元素設置寬度，2）設置左右 margin 為 auto。3）IE6 下需在父元素上設置 text-align: center;,再給子元素恢復需要的值

    

    aaaaaa aaaaaa a a a a a a a a
    

如果需要居中的元素為浮動元素，1）為元素設置寬度，2）position: relative;，3）浮動方向偏移量（left 或者 right）設置為 50%，4）浮動方向上的 margin 設置為元素寬度一半乘以-1

    

    aaaaaa aaaaaa a a a a a a a a
    

如果需要居中的元素為絕對定位元素，1）為元素設置寬度，2）偏移量設置為 50%，3）偏移方向外邊距設置為元素寬度一半乘以-1

    

    aaaaaa aaaaaa a a a a a a a a
    

如果需要居中的元素為絕對定位元素，1）為元素設置寬度，2）設置左右偏移量都為 0,3）設置左右外邊距都為 auto

    

    aaaaaa aaaaaa a a a a a a a a
    

絕對定位居中

如果居中的是行內元素，可以設置父級 height 與 line-height 相等

設置 margin/padding 居中

相對位置偏移居中

flex 居中 設置 align-items:center 即可

block 象塊類型元素一樣顯示。

none 缺省值。象行內元素類型一樣顯示。

inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。

list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

table 此元素會作為塊級表格來顯示

inherit 規定應該從父元素繼承 display 屬性的值

absolute 生成絕對定位的元素，相對于值不為 static 的第一個父元素進行定位。

fixed （老 IE 不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。

relative 生成相對定位的元素，相對于其正常位置進行定位。

static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right - z-index 聲明）。

inherit 規定從父元素繼承 position 屬性的值

新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

彈性盒模型 display: flex;

多列布局 column-count: 5;

媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}

個性化字體 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}

顏色透明度 color: rgba(255, 0, 0, 0.75);

圓角 border-radius: 5px;

漸變 background:linear-gradient(red, green, blue);

陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

倒影 box-reflect: below 2px;

文字裝飾 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

邊框效果 border-image:url(bt_blue.png) 0 10;

平滑過渡 transition: all .3s ease-in .1s;

動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

轉換

旋轉 transform: rotate(20deg);

傾斜 transform: skew(150deg, -10deg);

位移 transform: translate(20px, 20px);

縮放 transform: scale(.5);

// 把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

簡單的方式：

上面的 div 寬 100%，

下面的兩個 div 分別寬 50%，

然后用 float 或者 inline 使其不換行即可

png24 位的圖片在 iE6 瀏覽器上出現背景，解決方案是做成 PNG8.

瀏覽器默認的 margin 和 padding 不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一

IE 下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用 getAttribute()獲取自定義屬性;

Firefox 下,只能使用 getAttribute()獲取自定義屬性。解決方法:統一通過 getAttribute()獲取自定義屬性

IE 下,even 對象有 x,y 屬性,但是沒有 pageX,pageY 屬性

Firefox 下,event 對象有 pageX,pageY 屬性,但是沒有 x,y 屬性

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為 0，就沒有空格了

移除空格、使用 margin 負值、使用 font-size:0、letter-spacing、word-spacing

相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產生間距

非 inline-block 水平元素設置為 inline-block 也會有水平間距

可以借助 vertical-align:top; 消除垂直間隙

可以在父級加 font-size：0; 在子元素里設置需要的字體大小，消除垂直間隙

把 li 標簽寫到同一行可以消除垂直間隙，但代碼可讀性差

// 以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下/// 例子是演示各種定義的權重值：

//權重為1
div{}

//權重為10
.class1{}

//權重為100
#id1{}

//權重為100+1=101
#id1 div{}

//權重為10+1=11
.class1 div{}

//權重為10+10+1=21
.class1 .class2 div{}

// 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現

優先級就近原則，同權重情況下樣式定義最近者為準

載入樣式以最后載入的為準

優先級為: !important > id > class > tag important 比 內聯優先級高

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上

解決方法

父級 div 定義偽類：after 和 zoom (推薦使用，建議定義公共類，以減少 CSS 代碼)

   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}

在結尾處添加空 div 標簽 clear:both

    
Left
    
Right
    



.left {float:left}
.clearfloat{clear:both}

父級 div 定義 height

父級 div 定義 overflow:auto

父級 div 定義 overflow:hidden

父級 div 也一起浮動

父級 div 定義 display:table

結尾處加 br 標簽 clear:both

參考鏈接幾種常用的清除浮動方法

box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果

box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果

box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在

opacity: 0; CSS3 屬性，設置 0 可以使一個元素完全透明

position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外

display: none; 元素會變得不可見，并且不會再占用文檔的空間。

transform: scale(0); 將一個元素設置為縮放無限小，元素將不可見，元素原來所在的位置將被保留

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

$(window).resize(function () {
    screenRespond();
});

screenRespond();

function screenRespond(){

    var screenWidth = $(window).width();

    if(screenWidth <= 1800){
        $("body").attr("class", "w1800");
    }

    if(screenWidth <= 1400){
        $("body").attr("class", "w1400");
    }

    if(screenWidth > 1800){
        $("body").attr("class", "");
    }
}

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

a:hover {color: #FF00FF}
p:first-child {color: red}

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

下載 下載

  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener("touchstart", stopScrolling, false);
      document.addEventListener("touchmove", stopScrolling, false);
  });

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

  -webkit-font-smoothing: antialiased;

• 上一篇：圖解一下啥是CSS堆疊上下文，啥是CSS堆疊層疊順序，讓你對css的疑惑少一點?
• 下一篇：前端進階系列(六):盒模型