产精久久久AV,国产精品逼视频,亚洲久艹视频

寫在前面的，整理了自己認為需要理解的內(nèi)容。
需要持續(xù)更新...

CSS 盒子模型，box-sizing 屬性的理解

1> CSS 盒模型分為兩種：

W3C 標準盒模型：由 margin、border、padding、content 組成；盒寬度是 content 內(nèi)容的寬度；
IE 傳統(tǒng)盒模型：由 margin、border、padding、content 組成；盒寬度包括了 content、padding、border 寬度。

2> box-sizing 屬性：
用來控制元素的盒子模型的解析模式，默認為content-box。

content-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統(tǒng)盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

什么是響應式設計，響應式設計的基本原理是什么

響應式網(wǎng)站設計是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。頁面頭部必須有 meta 聲明的 viewport。

CSS 解析規(guī)則

規(guī)則：
CSS選擇器是從右向左解析。
若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進行回溯，會損失很多性能。
若從右向左匹配，先找到所有的最右節(jié)點，對于每一個節(jié)點，向上尋找父節(jié)點直到找到根元素或者滿足條件的匹配規(guī)則，則結束這個分支的遍歷。
兩種匹配規(guī)則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點），而從左向右的匹配規(guī)則的性能都浪費在了失敗的查找上面。

闡述一下 CSS Sprites

定義：
將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用 CSS 的 background-image，background- repeat，background-position 的組合進行背景定位。
優(yōu)點 ：
（1）利用 CSS Sprites 能很好地減少網(wǎng)頁的 http 請求，從而大大的提高頁面的性能；
（2）CSS Sprites 能減少圖片的字節(jié)。
缺點：
（1）圖片合并時需預留好足夠空間，寬屏、高分辨率的屏幕下易出現(xiàn)背景斷裂；
（2）開發(fā)較麻煩，測量繁瑣；
（3）維護麻煩，背景少許改動有可能影響整張圖片，使得字節(jié)增加還要改動css。

常見的兼容性問題？

不同瀏覽器的標簽默認的 margin 和 padding 不一樣。
```
   * { margin:0; padding:0; }
```
IE6 雙邊距 bug：
塊屬性標簽 float 后，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設置的大。
```
  /* 將其轉(zhuǎn)化為行內(nèi)屬性。*/
  display:inline;
```
漸進識別的方式：
從總體中逐漸排除局部。首先，巧妙的使用 “9” 這一標記，將 IE 瀏覽器從所有情況中分離出來。接著，再次使用 “+” 將 IE8 和 IE7、IE6 分離開來，這樣 IE8已經(jīng)獨立識別。
```
{
  background-color: #f1ee18; /*所有識別*/
  .background-color: #00deff\9;  /*IE6、7、8識別*/
  +background-color: #a200ff; /*IE6、7識別*/
  _background-color: #1e0bd1;  /*IE6識別*/
}
```

設置較小高度標簽（一般小于10px），在 IE6，IE7 中高度超出自己設置高度。

  /* 1. 給超出高度的標簽設置*/
  overflow:hidden;
  /* 2. 設置行高 line-height 小于你設置的高度 */。

IE 下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性
解決方法：
統(tǒng)一通過 getAttribute() 獲取自定義屬性。

Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示

p { font-size:10px; -webkit-transform:scale(0.8); }
/* -webkit-text-size-adjust: none; 這個屬性值可能會有些問題 */

超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不再具有 hover 和 active 了。
解決方法：
改變CSS屬性的排列順序：L-V-H-A ( love hate ):
a:link {} a:visited {} a:hover {} a:active {}

為什么要初始化CSS樣式

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

CSS3有哪些新特性

顏色：新增 RGBA、HSLA模式
文字陰影：text-shadow
邊框：border-radius【圓角】，border-image【邊框圖片】，box-shadow【邊框陰影】
盒子模型：box-sizing
背景：background-size【背景圖片的尺寸】，background-origin【設置背景圖片的原點】，background-clip【設置背景圖片的裁剪區(qū)域】，以“，”分隔可以設置多背景，用于自適應布局
漸變：linear-gradient(to direction, color, ...)、radial-gradient
過渡：transition可實現(xiàn)動畫
自定義動畫：animation
在CSS3中唯一引入的偽元素是 ::selection
實現(xiàn)媒體查詢 @media，多欄布局 Flex
2D轉(zhuǎn)換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D轉(zhuǎn)換

CSS3 新增偽類？

p:first-of-type
p:last-of-type
p:only-of-type
p:only-child
p:nth-child(2)
:enabled
:disabled
:checked

CSS優(yōu)化、提高性能的方法有哪些

移除空的 CSS 規(guī)則
抽象提取公共樣式，減少代碼量
不在選擇符中使用 ID 標識符
盡量減少頁面重排、重繪：正確使用 display 的屬性
不濫用浮動、web字體
不聲明過多的 font-size
遵守盒模型規(guī)則

說一下 CSS 預處理器，Less 帶來的好處？

CSS預處理器：
為 CSS 增加了編程特性的拓展語言，可以使用變量、簡單邏輯判斷、函數(shù)等基本編程技巧。CSS 預處理器編譯輸出依舊是標準的 CSS 樣式。
解決問題：
（1）CSS 語法不夠強大，因為無法嵌套導致有很多重復的選擇器；
（2）沒有變量和合理的樣式機制，導致邏輯上相關的屬性值只能以字面量的形式重復輸出，難以維護。
優(yōu)點：
（1）容易維護：減少了大量的重復選擇器，避免了一些樣式的低級錯誤；
（2）提高復用性：使用變量維護某個屬性值，修改方便；
（3）減少代碼：常用代碼使用代碼塊；
（4）生成更加復雜的樣式：提供了顏色函數(shù)（lighten，darken 等），mixins，loops 等方法，使 CSS 更像編程語言，能夠讓開發(fā)者生成更復雜的 CSS 樣式。
缺點
編譯需要一定的時間
補充
Less、Sass 都是動態(tài)的樣式語言，是 CSS 預處理器， CSS 上的一種抽象層。
Less 變量符號是 @，Sass 變量符號是 $ 。

CSS 偽類和偽元素？

偽類：
（1）用于當元素處于某個狀態(tài)時，為其添加對應的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的，功能類似于 class。但它是基于 DOM 樹之外的信息，所以叫偽類。例如：:hover active
（2）用單冒號(:)來表示
偽元素：
（1）DOM 樹沒有定義的虛擬元素，通常用來創(chuàng)建不存在于文檔中的元素。比如：::after ::before
（2）起初，是用單冒號(:)表示；后來被規(guī)范成雙冒號(::)表示

CSS選擇器有哪些？哪些屬性可以繼承？

CSS選擇器：
(1) id選擇器
(2) 類選擇器
(3) 標簽選擇器
(4) 相鄰選擇器（h1 + p）
(5)子選擇器（ul > li）
(6) 后代選擇器（li a）
(7) 通配符選擇器（*）
(8) 屬性選擇器（a[rel="external"]）
(9) 偽類選擇器（a:hover，li:nth-child）
可繼承的屬性：
1> 字體系列屬性：
font，font-family， font-weight，font-size，font-style，font-variant；
2> 文本系列屬性：
text-indent‘，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
3> 元素可見性：
visibility
4> 表格布局屬性：
caption-style，border-collapse，border-spacing，empty-cells，table-layout
5> 列表屬性：
list-style-type，list-style-position，list-style
6> 光標屬性：
cursor
7> 引用：
quotes
不可繼承的屬性：border，padding，margin，width，height
1> display
2> 文本屬性：
vertical-align，text-decoration
3> 盒子模型屬性：
height，width，padding，margin，border
4> 背景屬性：
背景圖片，顏色，位置；
5> 定位屬性：
float，clear（清除浮動），position，
6> 生成內(nèi)容：
content，counter-reset，counter-increment
7> 輪廓樣式屬性：
outline-style，outline-width，outline-color，outline
8> 頁面樣式屬性：
size，page-break-before，page-break-after

CSS優(yōu)先級算法如何計算？

可以給選擇器假設權重值：
id選擇器權重假設為 100
class/偽類選擇器假設為 10
標簽選擇器假設為 1

注意點：
(1) important 聲明的樣式優(yōu)先級最高，其次是行內(nèi)樣式；
(2) 如果優(yōu)先級相同，則選擇最后出現(xiàn)的樣式。
(3) 繼承得到的樣式的優(yōu)先級最低。

元素豎向的百分比設定是相對于容器的高度嗎？

當按百分比設定一個元素寬度時，它是相對于父容器的寬度計算的；
對于一些表示豎向距離的屬性，例如 padding-top，padding-bottom，margin-top，margin-bottom 等，當按百分比設定它們時，依據(jù)的也是父容器的寬度，而不是高度。

上下 margin 重合問題？

解決方法：在重合元素外包裹一層容器，并觸發(fā)該容器生成一個BFC

  <div class="aside"></div>
  <!-- 給盒子 main 外面再包一層 div -->
  <div class="text">
    <div class="main"></div>
  </div>

.aside {
  margin-bottom: 100px;
  width: 100px;
  height: 150px;
  background: #f66;
}
/* 通過改變此 div 的屬性使兩個盒子分屬于兩個不同的 BFC，以此來阻止margin 重疊 */
.main {
  margin-top: 100px;
  height: 200px;
  background: #fcc;
}
.text {
  overflow: hidden;
}

清除浮動，什么時候需要清除浮動，清除浮動都有哪些方法

浮動的元素是脫離文檔標準流的，如果不清除浮動，就會造成父元素高度塌陷，影響頁面布局。

清除浮動方法：

（1）為父元素設置高度；

（2）父容器設置 overflow: hidden或者auto。

<div style="overflow: hidden;">
  <div style="float:left;width:45%;"></div>
  <div style="float:right;width:45%;"></div>
</div>

（3）在浮動元素下方添加一個非浮動元素

<div>
  <div style="float:left;width:45%;"></div>
  <div style="float:right;width:45%;"></div>
  <div style="clear:both;"></div>
</div>

（4）為父元素添加偽元素(推薦)

.clear::after { 
     content:""; 
     display:block; 
     clear:both;
}

display: inline-block 什么時候會顯示間隙？

（1）有空格時候會有間隙。解決：刪除除空格
（2）margin 正值的時候。解決：margin 使用負值
（3）使用 font-size 時候。解決：font-size: 0、letter-spacing、word-spacing

position 跟 display、overflow、float 這些特性相互疊加后會怎么樣？

屬性介紹：
display 屬性：規(guī)定元素應該生成的框的類型；
position 屬性：規(guī)定元素的定位類型；
float 屬性：是一種布局方式，定義元素在哪個方向浮動。
效果：類似于優(yōu)先級機制：
position：absolute/fixed 優(yōu)先級最高，當使用了定位后，float 不起作用，display 值會被調(diào)整為 block。
注意：float 或者 absolute 定位的元素，只能是塊元素或表格。

如何讓一個不定寬高的盒子水平垂直居中

HTML 頁面結構

    <div class="father">
      <div class="son">inner</div>
    </div>

flex布局

  .father {
      display: flex;
      justify-content: center;
      align-items: center;
  }

定位 + transform

  .father {
      position: relative;
  }
  .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

如何實現(xiàn)一個最大的正方形？

    width: 100%;
    padding-bottom: 100%;
    border: 1px solid;

如何畫三角形？

原理：
首先，需要把元素的寬度、高度設為0。然后設置邊框樣式。
頁面：
```
    <div class="triangle"></div>
```

樣式：

    .triangle {
      width: 0;
      height: 0;
      border-top: 50px solid blue;
      border-right: 50px solid red;
      border-bottom: 50px solid green;
      border-left: 50px solid yellow;
    }

上述的代碼可以產(chǎn)生的效果如下：

如果想要三角形，則只需要將其余邊變成透明即可；

  .triangle{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
   }

一行水平居中，多行水平居左？

html

<div>
  <p>文字描述性信息</p>
<div>

css

div {
    width: 300px;
    text-align: center;
    border: 1px solid;
}
div p {
    display: inline-block;
    text-align: left;
}

Flex 布局？

我曾經(jīng)寫過的一篇文章：Flex 布局

兩欄布局，左邊固定，右邊自適應，左右不重疊？

首先定義布局的 html 代碼如下：

  <div class="wrapper">
    <div class="left">左邊內(nèi)容：寬度固定</div>
    <div class="right">右側內(nèi)容：自適應，并且不重合</div>
  </div>

(1) 雙 inline-block 布局

    .wrapper {
      box-sizing: border-box;
      font-size: 0;
    }
    .wrapper > div {
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      border: 1px solid green;
    }
    .wrapper .left {
      width: 120px;
    }
    .wrapper .right {
      width: calc(100% - 120px);
    }

(2) 雙 float: left 布局

      .wrapper {
        /* 清除浮動 */
        overflow: auto; 
      }
      .wrapper > div {
        box-sizing: border-box;
        float: left;
        border: 1px solid green;
      }
      .wrapper .left {
        width: 120px;
      }
      .wrapper .right {
        width: calc(100% - 120px);
      }

(3) 左側 float，右側 margin-left

      .wrapper {
        /* 清除浮動 */
        overflow: hidden;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        float: left;
        width: 120px;
      }
      .wrapper .right {
        margin-left: 120px;
      }

(4) 左側使用定位，右側使用margin-left

      .wrapper {
        position: relative;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        position: absolute;
        width: 120px;
      }
      .wrapper .right {
        margin-left: 120px;
      }

(5) 使用 float 與 BFC

      .wrapper {
        /* 清除浮動 */
        overflow: auto;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        float: left;
      }
      .wrapper .right {
        overflow: auto;
      }

(6)使用 flex

      .wrapper {
        display: flex;
      }
      .wrapper > div {
        box-sizing: border-box;
        border: 1px solid green;
      }
      .wrapper .left {
        width: 120px;
      }
      .wrapper .right {
        flex: 1;
      }

position 值有哪些？

默認：static：
按照正常文檔流進行排列；
相對定位：relative
對象不可層疊，不脫離文檔流，參考自身靜態(tài)位置進行定位。
絕對定位：absolute
脫離文檔流。選取最近一個具有定位設置的父級標簽進行絕對定位。如果父級對象都沒有設置定位，則參考 body 坐標原點進行定位。
固定定位：fixed
脫離文檔流，相對于瀏覽器窗口進行定位。

粘性定位：sticky
主要用在對 scroll 事件的監(jiān)聽上，可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。

  #wrapper { position: sticky; top: 10px; }
  /* 在 viewport 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。
     之后，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值以下。 */

還有一些不常用：inherit，initial

display: none與visibility：hidden的區(qū)別?

display：none：元素不占據(jù)空間位置；會引起 reflow，repaint
visibility： hidden：元素依舊占據(jù)空間位置；會引起 repaint；

行內(nèi)元素和塊級元素的區(qū)別？

塊級元素：div, p, h1-h6, form, ul, li ...
（1）各占一行，垂直方向排列；
（2）可以包含其他塊級或者行內(nèi)元素；
（3）高度、行高以及外邊距和內(nèi)邊距都可控制；
（4）默認寬度是它本身父容器的100%（和父元素的寬度一致），與內(nèi)容無關。
行內(nèi)元素：span, a, label, input, img, strong, em
（1）水平方向排列，不會自動換行；
（2）不可以包含塊級元素，但是可以包含其他行內(nèi)元素或者文本；
（3）行內(nèi)元素設置width、height無效(可以設置line-height)，margin和padding上下無效；
（4）寬度就是它的文字和圖片的寬度，不可改變。
互相轉(zhuǎn)化：
display: inline：轉(zhuǎn)為行內(nèi)元素
display: block：轉(zhuǎn)為塊級元素
補充
display: inline-block: 顧名思義，匯集了兩種特性；不換行，又可以設置對應屬性。
空元素：<br> <hr> <img> <link> <meta>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS 小知識

CSS 小知識

CSS 盒子模型，box-sizing 屬性的理解

什么是響應式設計，響應式設計的基本原理是什么

CSS 解析規(guī)則

闡述一下 CSS Sprites

常見的兼容性問題？

為什么要初始化CSS樣式

CSS3有哪些新特性

CSS3 新增偽類？

CSS優(yōu)化、提高性能的方法有哪些

說一下 CSS 預處理器，Less 帶來的好處？

CSS 偽類和偽元素？

CSS選擇器有哪些？哪些屬性可以繼承？

CSS優(yōu)先級算法如何計算？

元素豎向的百分比設定是相對于容器的高度嗎？

上下 margin 重合問題？

清除浮動，什么時候需要清除浮動，清除浮動都有哪些方法

display: inline-block 什么時候會顯示間隙？

position 跟 display、overflow、float 這些特性相互疊加后會怎么樣？

如何讓一個不定寬高的盒子水平垂直居中

如何實現(xiàn)一個最大的正方形？

如何畫三角形？

一行水平居中，多行水平居左？

Flex 布局？

兩欄布局，左邊固定，右邊自適應，左右不重疊？

position 值有哪些？

display: none與visibility：hidden的區(qū)別?

行內(nèi)元素和塊級元素的區(qū)別？

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS 小知識

CSS 盒子模型，box-sizing 屬性的理解

什么是響應式設計，響應式設計的基本原理是什么

CSS 解析規(guī)則

闡述一下 CSS Sprites

常見的兼容性問題？

為什么要初始化CSS樣式

CSS3有哪些新特性

CSS3 新增偽類？

CSS優(yōu)化、提高性能的方法有哪些

說一下 CSS 預處理器，Less 帶來的好處？

CSS 偽類和偽元素？

CSS選擇器有哪些？哪些屬性可以繼承？

CSS優(yōu)先級算法如何計算？

元素豎向的百分比設定是相對于容器的高度嗎？

上下 margin 重合問題？

清除浮動，什么時候需要清除浮動，清除浮動都有哪些方法

display: inline-block 什么時候會顯示間隙？

position 跟 display、overflow、float 這些特性相互疊加后會怎么樣？

如何讓一個不定寬高的盒子水平垂直居中

如何實現(xiàn)一個最大的正方形？

如何畫三角形？

一行水平居中，多行水平居左？

Flex 布局？

兩欄布局，左邊固定，右邊自適應，左右不重疊？

position 值有哪些？

display: none與visibility：hidden的區(qū)別?

行內(nèi)元素和塊級元素的區(qū)別？

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS 盒子模型，box-sizing 屬性的理解

什么是響應式設計，響應式設計的基本原理是什么

常見的兼容性問題？

CSS3 新增偽類？

說一下 CSS 預處理器，Less 帶來的好處？

CSS 偽類和偽元素？

CSS選擇器有哪些？哪些屬性可以繼承？

元素豎向的百分比設定是相對于容器的高度嗎？

上下 margin 重合問題？

清除浮動，什么時候需要清除浮動，清除浮動都有哪些方法

display: inline-block 什么時候會顯示間隙？

position 跟 display、overflow、float 這些特性相互疊加后會怎么樣？

如何畫三角形？

一行水平居中，多行水平居左？

Flex 布局？

兩欄布局，左邊固定，右邊自適應，左右不重疊？

position 值有哪些？