常見的盒子模型

標準盒模型（content-box）

怪異盒模型（IE盒模型）

IE盒模型和怪異盒模型的區別

標準盒模型的width = content-box；標準盒模型的寬度指的是內容寬度，不包括padding和border的寬度。
IE盒模型的width = border-box；IE盒模型的寬度包括padding和border。

利用css畫出三角形以及梯形以及其餘圖形

css畫其餘圖形

設置寬高，而且展現四個border

#div{
    width:20px;
    height:20px;
    margin:0 auto;
    border-top:100px solid red;
    border-bottom:100px solid green;
    border-left:100px solid black;
    border-right:100px solid yellow;
}
複製代碼

不設置寬高，展現四個border

#div{
    width:0px;
    height:0px;
    margin:0 auto;
    border:100px solid;
    border-color:red green yello black;
}
複製代碼

css畫三角形

#div{
    width:0px;
    height:0px;
    margin:0 auto;
    border:100px solid;
    border-color:transparent transparent yellow transparent;
}
複製代碼

css畫梯形

width:60px;
    margin:0 auto;
    border:100px solid;
    border-color:transparent transparent yellow transparent;
}
複製代碼

css畫圓

width:100px;
    height:100px;
    margin:0 auto;
    border-radius:100%;
    background:red;
}
複製代碼

css畫扇形

#div{
    width:0px;
    height:0px;
    border:100px solid;
    border-color:transparent transparent yellow transparent;
    border-radius:100%;
}
複製代碼

CSS選擇器

CSS1和CSS2選擇器

類選擇器(.class)：選擇全部類名爲class的元素
ID選擇器（#main）：選擇全部ID爲main的元素
通配符選擇器（*）：選擇全部元素
元素選擇器（p）：選擇全部p元素；
分組選擇器（div，p）：選擇全部的div和p元素
子代選擇器（div>p）:選擇父元素爲div的全部p元素
相鄰兄弟選擇器（div+p）：緊鄰在div的p元素，必須是兄弟關係
（div p ）:選擇在div內部的全部p元素
屬性選擇器
- [target]:選擇帶有target屬性的全部元素
- [src = imgUrl]：選擇帶有src屬性且等於imgUrl的全部元素
- [class ~=hello ]:選擇帶有class屬性，且屬性值等於hello的全部元素
- [class |= h]:選擇帶有class屬性且值以h開頭的全部元素
a連接選擇器
- a:link:未被訪問的全部a連接
- a:visited：已經被訪問的全部a連接
- a:active:被選擇的a連接
:hover:鼠標移上的元素
:fous:鼠標的點擊焦點
p:before:在每一個p元素裏面的最前加入內容
p:after:在每一個p元素裏面的最後面加入內容

CSS常見屬性概括

overflow有哪些屬性值，分別表明什麼意思

overflow:visible（默認）。內容不會被修剪，超出內容會呈如今元素外
overflow:hidden；內容被修剪，超出部分隱藏。
overflow:auto;若是內容超出，則出現滾動條，若是沒有超出則不出現滾動條
overflow:scroll,內容超不超出都會出現滾動條

CSS3常見知識概括

##calc函數css

calc函數是c3新增的新功能，可使用calc計算border、margin、padding、font-size、等屬性設置動態值。
須要注意的是：
- 運算符先後都須要保留一個空格
- calc函數支持 + - * / 運算

#div{
    width:calc( (100% - 10px) * 2 )
}
複製代碼

僞類和僞元素

僞類：僞類的意義是經過選擇器找到不能被常規css選擇器獲取的元素;li中的第一個元素，first-child。以及獲取不存在Dom樹中的信息，好比a標籤中的link，hover等等。簡單理解只有一個:的大部分都是僞類

經常使用的僞類
- p:first-of-type:第一個p元素。
- p:last-of-type:最後一個p元素。
- nth-child(n):第n個元素。
- nth-last-child(n):從後面數第n個元素。
- a:link未被訪問的a連接
- a:visited已經被訪問的a連接
- a:active被選中的a連接

僞元素

僞元素：用於建立一些不在Dom樹中的元素，併爲其添加樣式，例如咱們能夠經過:before來在一個元素前增長一些文本。
建立的僞元素
- ::before在元素的前面插入內容，配合content使用
  - 注意：一、第一個子元素
  - 二、建立的的行內元素
  - 支持css樣式
- ::after在元素的最後main插入內容，配置content使用，注意和::before同樣。
- ::first-line選中塊級元素的第一行文本
- ::first-letter選中塊級元素的文本的首字母設置特殊樣式；注意只能是塊級元素
- ::selection定義被選中的部分，通常用於文本選中修改顏色背景色等等。

CSS3經常使用的新增屬性

border-radius：圓角
box-shadow:h-shadow(水平陰影) v-shadow(垂直陰影) bulr(模糊距離) color(顏色) 盒子陰影
border-image:url()圖片地址 left top定位 no-repeat不覆蓋
- 多張圖片組合用逗號分隔
text-show:h-shadow(水平陰影) v-shadow(垂直陰影) bulr(模糊距離) color(顏色) 文本陰影同上
文本超出部分以省略號的形式展現：
- white-space:nowrap超出文本不換行 // wrap換行
- overflow:hidden 超出部分隱藏
- text-overflow:ellipsis文本超出以省略號的形式展現 ///clip直接隱藏
非中日韓文本的換行：word-break
- word-break:keep-all以-拆分換行
- word-break:break-all直接拆分換行
全部文本換行word-wrap:break-word

CSS3，transform轉換

transform2D轉換：
- transform：translate(x,y)從當前位置頂部沿X軸和Y軸移動
- tansform: rotate(30deg)從當前位置的中心旋轉30°
- transform: skew(x,y)從當前位置沿X軸和Y軸傾斜
- transform:scale(x,y)x軸的縮放放大，y軸的縮放放大
transform3D轉換
- transform:translate3d(x,y,z),
- transform:rotate3d(x,y,z,angle)x,y,z的值是0到1；angle爲角度

CSS3過渡 transition

transition all 2s ease 0s
- 第一個參數表示：須要過渡的屬性，默認all，全部屬性都過渡；基本上全部屬性都能過渡，除了float、漸變。
- 第二個參數：過渡時間
- 第三個參數：緩衝描述；ease逐漸變慢、linear勻速、ease-in先慢後快、ease-out先快後慢、ease-in-out先慢後快再慢。
- 第四個參數：延遲時間。
執行單個transform轉換

.box{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s,height 2s,transform 2s;
}
.box:hover{
    width:200px;
    height:200px;
    transform:rotate(180deg);
}
複製代碼

執行多個transform轉換

.box{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s,height 2s,all 2s;
}
.box:hover{
    width:200px;
    height:200px;
    transform:rotate(180deg) translate(100px,100px)
}
複製代碼

CSS3動畫 animation

@keyframes建立動畫；再經過animation來執行動畫
- animation屬性
  - animation-name:動畫屬性
  - animation-duration:動畫持續時長
  - animation-timing-function:定義動畫的速率；ease、ease-in、linear、ease-in-out、ease-out等等
  - animation-delay:延遲時間
  - animation-interation-count:播放次數；infinite無限次
  - animation-fill-mode:forwards停留在最後一幀、backwards停留在第一幀、both輪流

.box {
    width:100px;
    height:100px;
    background:red;
    animation:rotate 1s infinite linear;
}
@keyframes rotate {
    0% {
        color:aqua;
    }
    50% {
        color:bisque;
    }
    100% {
        background:yellow;
    }
}
複製代碼

infinite無限次循環播放
linear 開始到結束的速度一致

animation和transition有什麼區別，animation如何停留在最後一幀

transition通常用來過渡，沒有時間軸概念，經過事件觸發，沒中間狀態，只有開始和結束。過渡的開銷比較小，通常用於簡單的頁面交互。
animation通常是作動效的，有時間軸概念（幀可控），能夠重複觸發，有中間狀態。

CSS3flex佈局

flex佈局後其全部的子元素都會自動變成flex項目；子元素的float、clear、vertical-align屬性都會失效。
塊級元素display:flex;行內元素則爲display:inline-flex;

flex的屬性介紹

flex容器屬性

flex-direction設置主軸的方向
- row（默認值）：主軸的方向爲水平方向，起點在左邊
- row-reverse:主軸的方向爲水平方向，起點在右邊
- column：主軸的方向爲垂直方向，起點在上沿
- column-reverse：主軸的方向爲垂直方向，起點在下沿
flex-wrap設置在軸線上的項目若是排不下如何換行
- nowrap(默認)：不換行
- wrap：換行，第一行在上方
- wrap-reverse：換行，第一行在下方
flex-flow是flex-direction和flex-wrap的簡寫形式；默認值爲row nowrap
justify-content屬性決定了主軸的對齊方式；下面假設flex-direction:row;
- flex-start:左對齊
- center：居中
- flex-end:右對齊
- space-between:兩端對齊，項目之間的間隔相等
- space-around:每一個項目之間的間隔相等，因此兩個項目之間的間隔是最左、右邊的兩倍
align-items屬性決定交叉軸上的對齊方式;假設交叉軸爲垂直方向
- flex-start：上對齊
- center：居中對齊
- flex-end：下對齊
- baseline：項目的第一行文字的基線對齊
- stretch(默認):若是項目未設置高度或者設爲auto，將佔滿整個容器的高度
align-content屬性決定了多跟項目軸線的對齊方式，意思就是項目換行產生的多跟水平軸線，顧必須有flex-wrap:wrap屬性，才能生效，若是隻有一根軸線該屬性不生效。
- flex-start: 上對齊
- center：居中對齊
- flex-end:下對齊
- space-between:上下兩端對齊，項目間隔相等
- space-around:項目之間的間隔相等，最上、下的兩個項目是其餘間隔的二分之一
- space-evenly:全部項目的間隔相等。

項目屬性

order：默認0；用整數值來定義排列順序，數值小的排在前面，能夠爲負值。
- 默認值order:0時
- 將中間的一個或者某些移到最前面的方法
flex-grow屬性定義的是項目的放大比例，默認值爲0；即若是由剩餘控件也不放大。
- 若是flex-grow爲1，項目將等分剩餘空間；若是其中一個項目爲2，其餘都爲1，則這個項目比其餘的項目佔據的空間多一倍。
flex-shrink定義了項目的縮小比例；默認值爲1。值必須是正值
flex-basis屬性定義了項目佔據的主軸空間；默認值是auto，即項目原本的大小
- 它能夠設爲和width或者height同樣的值，好比200px
flex 屬性是flex-grow、flex-shrink、flex-basis的簡寫，默認值是0 1 auto；後兩個屬性可寫
- flex屬性有兩個快捷值，auto(1 1 auto)、none(0 0 auto)
align-self屬性容許單個項目與其餘項目不同的對齊方式；可覆蓋align-items屬性，默認值爲auto表明繼承父元素的align-items屬性
- auto：繼承父級的align-items，若是沒有父級值則爲stretch（佔滿整個容器的高度）
- flex-start：上對齊
- flex-and；下對齊
- center：居中對齊
- baseline：項目的第一行文字基線對齊
- stretch：佔滿整個容器的高度

CSS媒體查詢

在css中直接寫入
@media screen(媒體類型) and (min-width:100px)(媒體功能){ .hello{ color:red } }
媒體類型
all適用於全部設備
screen 適用於電腦屏幕、平板電腦、智能手機
speech 適用於屏幕閱讀器等發聲設備
媒體功能
- max-width 設置輸出設備最大頁面可見寬度
- min-width 定義設備最小的可見寬度
- width 定義輸出設備頁面的最大可視寬度
- min-height定義設備頁面的最小高度
- max-height 定義設備的頁面的最大高度
經過link引入媒體查詢定義的樣式
- <link rel="stylesheet" media="screen and|not|only (max-width:300px)" href="mystylesheet.css">

css常見面試題總結

文本超過隱藏，並以省略號的方式展現

white-space:nowrap 超出文本不換行
overflow:hidden 超出部分隱藏
text-overflow:ellipsis

塊級元素水平垂直居中

定寬高

子元素用絕對定位，設置寬高，top：50%；left：50%；再利用margin：-寬度一半 0 0 -高度一半

.father{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 100px;
}
複製代碼

未知寬高

定位實現;子元素設置絕對定位，上左各50%，tranform tranlate -50%。

.father{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    tranform: translate(-50%, -50%);
    background: yellow;
}
複製代碼

flex佈局實現;父級元素display:flex;justify-content:center;align-items:center

.father{
    width: 400px;
    height: 400px;
    background: red;
    diapaly: flex;
    justify-content: center;
    align-item: center;
}
複製代碼

模擬表格實現；父級display:table-cell;text-align:center;vertical-align:center;子元素設置display:inline-block

.father{
      width: 400px;
      height: 400px;
      background: red;
      diapaly: teble-cell;
      text-align: center;
      vertical-align: center;
  }
  .son{
      display: inline-block;
  }
複製代碼

兩邊寬度固定，中間自適應的三欄佈局

利用calc函數

.left{
    width: 200px;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
}
.content{
    width: calc(100% - 200px - 200px);
    position: absolute;
    height: 100%;
    background: yellow;
    left: 200px;
    top: 0;
}
.right{
    width: 200px;
    height: 100%;
    background: aqua;
    position: absolute;
    right: 0;
    top: 0;
}
複製代碼

利用浮動和margin和padding

.main{
    overflow: hidden;
    padding: 0 200px;
}
.left{
    float: left;
    width: 200px;
    height: 100vh;
    margin-left: -200px;
    background: red;
}
.content{
    float: left;
    width: 100%;
    height: 100vh;
    background: yellow;
}
.right{
    float: left;
    width: 200px;
    height: 100vh;
    margin-right: -200px;
    background: aqua;
}
複製代碼

CSS box-sizing屬性決定了用哪一種盒子模型的解析模式

box-sizing = content-box標準盒模型 --默認
box-sizing = border-box IE盒模型

css有哪些選擇器；哪些屬性能夠繼承

css選擇器有：id選擇器、類選擇器、組合選擇器(div,p)、子代選擇器（ul>li）、僞類選擇器(:hover,li:neh-child(2))、屬性選擇器([src = imgUrl])、通配符選擇器、標籤選擇器（div p span）
可繼承的屬性
- font-size、font-family、color
不可繼承的屬性
- width、height、padding、border

CSS優先級怎麼計算的

元素選擇符：1 通配符*;div.hello 類名爲div的標籤
類選擇器：10
ID選擇器：100
元素的標籤：1000
!important聲明的樣式優先級最高
若是優先級相同，則選擇最後的樣式
繼承獲得的樣式的優先級最低

dispaly有哪些值，都有什麼做用

dispaly:none；隱藏元素，而且不保留元素的現實空間。
display:inline; 將元素定義爲行內元素；行內元素不可定義寬高；寬高是內容撐開的寬高
dispaly:inline-block;將元素定位爲行內塊元素；使得這個元素能夠設置寬高。可是注意行內塊元素不支持margin：auto;margin只支持塊級元素。
display:block；將元素定義爲塊級元素；元素繼承父級寬度；獨佔一行

常見的兼容性問題

不一樣瀏覽器的標籤默認的margin和padding不一樣；能夠用*{margin:0;padding:0}來取消margin、padding不一樣的問題

爲何要初始化css樣式

由於瀏覽器兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒有對css初始化會出現瀏覽器之間的頁面差別

display:none和visibility有什麼區別

display:none;不顯示其元素，在文檔中不保留分配的空間；（迴流+重繪）
visibility:none；不顯示其元素，在文檔中保留分配的空間（重繪）

頁面的迴流和重繪

迴流：元素因規模尺寸、佈局的改變須要從新構建頁面時，稱爲迴流。迴流必然伴隨着重繪
重繪：更新元素的屬性，並且這些屬性隻影響元素的顏色，外觀等稱爲重繪。重繪不必定有迴流，例如改變顏色

說說你對BFC的理解

BFC的佈局規則

內部的box盒子會在垂直方向，一層一層的接着放置
box盒子垂直方向的距離由margin決定，屬於同一個BFC元素的相鄰盒子的margin會發生重疊。
每一個盒子的margin-left都與它的父元素的border相接觸，及時存在浮動也同樣；
- 不存在浮動
- 存在浮動
BFC區域不會與float盒子發生重疊。
BFC在頁面上就是一個獨立的容器，他裏面的元素不會影響到外部的元素，反之如此。
計算BFC的高度時，浮動元素也參與計算。

如何建立BFC元素

float值不等於none；
display的值等於inline-block、table-cell、flex、inline-flex
position的值不等於static、relative
overflow的值不等於visible

BFC的做用

避免同一個BFC元素的margin重疊
自適應兩欄佈局：左浮動，右邊加個overflow:hidden
清除浮動；利用BFC計算高度時會將浮動的高度也進行計算。

爲何會出現浮動,清除浮動的方式有哪些

浮動是由於給一個元素設置浮動後，他將脫離文檔流，影響父級高度的計算。
清除浮動的方式
- 給父級設置一個固定的高度
- 在最後一個浮動的元素加空div，並添加clear:both
- 在父級元素添加overflow:hidden

塊級元素、行內元素、空（void）元素有哪些

塊級元素:p、div、ul、li、header、footer等等。
行內元素：span、img、input、a
void元素：hr、br

link和@import的區別

link屬於HTML標籤，而@import是css提供的，頁面被加載時，link會同時加載，而@import引用的css會等到頁面加載完再加載
@import只在IE5以上才能被識別，而link是HTML標籤，沒有兼容性問題。
link的權重高於@import

讓元素隱藏的方法

visibility:hidden;//元素隱藏，可是不會改變佈局，綁定的事件不能觸發。
display:none;/元素隱藏，而且頁面佈局會改變
opcity:0;//元素隱藏，佈局不會改變，綁定的事件仍然能夠觸發
z-index:-100;//將元素置於其餘元素之下

行內塊元素之間的空白怎麼解決

行內塊之間出現空白的緣由：元素被當成行內排版的時候，元素之間的空白符、回車都會被瀏覽器處理，根據white-space的處理方式（默認normal，合併多餘空白），原來html代碼中的回車會被轉成一個空白符，因此元素之間出現了空隙，這些元素之間的空隙會隨着字體大小而變化。
行內元素之間沒有設置margin的狀況下也會出現空白間隙。
如何去除他們之間的空白方式有如下幾種
- 之全部有空白間隙是由於有換行符、tab、空格等，咱們能夠經過上一個元素的閉合標籤和下一個元素的開始標籤寫在同一行，或者兩個inline-block元素以前加上空白註釋。
```
<div>
  <a>行內塊元素</a
  ><a>排行榜</a>
</div>
//或者
<div>
  <a>你好</a><a>世界</a>
</div>
複製代碼
```
- 父元素的font-size設置爲0，子元素單獨設置font-size
```
.father{
    font-size:0;
}
.son{
    font-size:16px
}
複製代碼
```
- 用浮動代替樣式
```
p{float:left}
複製代碼
```
- 用彈性盒子代替樣式;將其dispaly:flex

CSS經常使用基礎概括

常見的盒子模型

標準盒模型（content-box）

怪異盒模型（IE盒模型）

IE盒模型和怪異盒模型的區別

利用css畫出三角形以及梯形以及其餘圖形

css畫其餘圖形

css畫三角形

css畫梯形

css畫圓

css畫扇形

CSS選擇器

CSS1和CSS2選擇器

CSS常見屬性概括

overflow有哪些屬性值，分別表明什麼意思

CSS3常見知識概括

僞類和僞元素

僞類：僞類的意義是經過選擇器找到不能被常規css選擇器獲取的元素;li中的第一個元素，first-child。以及獲取不存在Dom樹中的信息，好比a標籤中的link，hover等等。簡單理解只有一個:的大部分都是僞類

僞元素

CSS3經常使用的新增屬性

CSS3，transform轉換

CSS3過渡 transition

CSS3動畫 animation

animation和transition有什麼區別，animation如何停留在最後一幀

CSS3flex佈局

flex的屬性介紹

flex容器屬性

項目屬性

CSS媒體查詢

css常見面試題總結

文本超過隱藏，並以省略號的方式展現

塊級元素水平垂直居中

定寬高

未知寬高

兩邊寬度固定，中間自適應的三欄佈局

CSS box-sizing屬性決定了用哪一種盒子模型的解析模式

css有哪些選擇器；哪些屬性能夠繼承

CSS優先級怎麼計算的

dispaly有哪些值，都有什麼做用

常見的兼容性問題

爲何要初始化css樣式

display:none和visibility有什麼區別

頁面的迴流和重繪

說說你對BFC的理解

BFC的佈局規則

如何建立BFC元素

BFC的做用

爲何會出現浮動,清除浮動的方式有哪些

塊級元素、行內元素、空（void）元素有哪些

link和@import的區別

讓元素隱藏的方法

行內塊元素之間的空白怎麼解決