CSS

1. box-sizing

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

  • content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高
  • border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content
    應(yīng)用場景：統(tǒng)一風(fēng)格的表單元素 表單中有一些input元素其實還是展現(xiàn)的是傳統(tǒng)IE盒模型，帶有一些默認的樣式，而且在不同平臺或者瀏覽器下的表現(xiàn)不一，造成了表單展現(xiàn)的差異。此時我們可以通過box-sizing屬性來構(gòu)建一個風(fēng)格統(tǒng)一的表單元素。

2. 水平垂直居中的方法

  1. 行內(nèi)布局
    line-height + text-align vertical-align + text-align

  2. 塊布局

  • position absolute + margin auto
  • position absolute + negative margin
  • position absolute + translate(-50%, -50%)
  1. 父容器子容器不確定寬高的塊級元素，做上下居中
  • flex
#wrap{    display:flex;    justify-content:center;    align-items:center;}
  • tabel
.parent {
  text-align: center;//水平居中
  display: table-cell;
  vertical-align: middle;//垂直居中
}
.child {
   display: inline-block;//防止塊級元素寬度獨占一行，內(nèi)聯(lián)元素可不設(shè)置
}
  • absolute+transform 水平垂直居中
<div class="parent">
 <div class="child">Demo</div>
</div>

<style>
 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
</style>
  • webkit-box
//對父級元素設(shè)置
position: relative;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

3. 實現(xiàn)左邊定寬右邊自適應(yīng)效果

1.table(父級元素)與tabel-cell（兩個子集元素）
2.flex(父級元素)+flex :1（右邊子元素）
3.左邊定寬，并且左浮動；右邊設(shè)置距離左邊的寬度
4.左邊定寬，左邊設(shè)置position:absolute；右邊設(shè)置距離左邊的寬度

4. 三列布局（中間固定兩邊自適應(yīng)寬度）

  1. 采用浮動布局（左邊左浮動，右邊右浮動，中間margin：0 寬度值）
  2. 絕對定位方式（左右絕對定位，左邊left0右邊right0，中間上同）

5. BFC（Block Formatting Contexts）塊級格式化上下文

塊格式化上下文（block formatting context） 是頁面上的一個獨立的渲染區(qū)域，容器里面的子元素不會在布局上影響到外面的元素。它是決定塊盒子的布局及浮動元素相互影響的一個因素。

下列情況將創(chuàng)建一個塊格式化上下文：

① float

② overflow

③ display（display為inline-block、table-cell）

④ position（absolute 或 fixed）

BFC的作用

  • 清除內(nèi)部浮動：對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。

  • 上下margin重合問題，可以通過觸發(fā)BFC來解決

6. 清除浮動元素的方法和各自的優(yōu)缺點

清除浮動，實際上是清除父元素的高度塌陷。因為子元素脫離了父元素的文檔流，所以，父元素失去了高度，導(dǎo)致了塌陷。要解決這個問題，就是讓父元素具有高度。

浮動元素的特性： 在正常布局中位于該浮動元素之下的內(nèi)容，此時會圍繞著浮動元素，填滿其右側(cè)的空間。浮動到右側(cè)的元素，其他內(nèi)容將從左側(cè)環(huán)繞它（浮動元素影響的不僅是自己，它會影響周圍的元素對其進行環(huán)繞。float仍會占據(jù)其位置，position:absolute不占用頁面空間 會有重疊問題 ）

1.在浮動元素末尾添加空標簽清除浮動 clear:both （缺點：增加無意義標簽）
<div style="clear:both;"></div>
2.給父元素設(shè)置 overflow:auto屬性
3.after偽元素

7. css實現(xiàn)自適應(yīng)正方形

方案一：CSS3 vw 單位
方案二：設(shè)置垂直方向的padding撐開容器
方案三：利用偽元素的 margin(padding)-top 撐開容器

8. position的值

  1. absolute :生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進行定位。
  2. fixed （老IE不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進行定位。
  3. relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。
  4. static 默認值。沒有定位，元素出現(xiàn)在正常的流中
  5. sticky 生成粘性定位的元素，容器的位置根據(jù)正常文檔流計算得出

9. 如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？

1、map+area或者svg
2、border-radius
3、純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

10. 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區(qū) 別： IE的content部分把 border 和 padding計算了進去;

11. CSS選擇符有哪些？哪些屬性可以繼承？

  • 基本選擇器
  1. * 通用元素選擇器，匹配任何元素
  2. E 標簽選擇器，匹配所有使用E標簽的元素
  3. .info class選擇器，匹配所有class屬性中包含info的元素
  4. #footer id選擇器，匹配所有id屬性等于footer的元素
  • 多元素的組合選擇器
  1. E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔
  2. E F 后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔
  3. E > F 子元素選擇器，匹配所有E元素的子元素F
  4. E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F
  • CSS 2.1 屬性選擇器
  1. E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如"[cheacked]"。以下同。）
  2. E[att=val] 匹配所有att屬性等于"val"的E元素
  3. E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于"val"的E元素
  4. E[att|=val] 匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"val"開頭的E元素，主要用于lang屬性，比如"en"、"en-us"、"en-gb"等等
  • CSS 2.1中的偽類
  1. E:first-child 匹配父元素的第一個子元素
  2. E:link匹配所有未被點擊的鏈接
  3. E:visited 匹配所有已被點擊的鏈接
  4. E:active 匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
  5. E:hover 匹配鼠標懸停其上的E元素
  6. E:focus 匹配獲得當前焦點的E元素
  7. E:lang(c) 匹配lang屬性等于c的E元素
  • CSS 2.1中的偽元素
  1. E:first-line 匹配E元素的第一行
  2. E:first-letter 匹配E元素的第一個字母
  3. E:before 在E元素之前插入生成的內(nèi)容
  4. E:after 在E元素之后插入生成的內(nèi)容
  • CSS 3的同級元素通用選擇器
  1. E ~ F 匹配任何在E元素之后的同級F元素
  • CSS 3 屬性選擇器
  1. E[att^="val"] 屬性att的值以"val"開頭的元素
  2. E[att$="val"] 屬性att的值以"val"結(jié)尾的元素
  3. E[att*="val"] 屬性att的值包含"val"字符串的元素
  • CSS 3中與用戶界面有關(guān)的偽類
  1. E:enabled 匹配表單中激活的元素
  2. E:disabled 匹配表單中禁用的元素
  3. E:checked 匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素
  4. E::selection 匹配用戶當前選中的元素
    -CSS 3中的結(jié)構(gòu)性偽類
  5. E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
  6. E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
  7. E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1
  8. E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
  9. E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
  10. E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
  11. E:first-of-type匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
  12. E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
  13. E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
  14. E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
  15. E:empty 匹配一個不包含任何子元素的元素，注意，文本節(jié)點也被看作子元素
  • CSS 3的反選偽類
  1. E:not(s) 匹配不符合當前選擇器的任何元素
  • CSS 3中的 :target 偽類
  1. E:target 匹配文檔中特定"id"點擊后的效果
    可繼承的樣式： font-size font-family color, UL LI DL DD DT;
    不可繼承的樣式：border padding margin width height ;

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

  • 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準;
  • 載入樣式以最后載入的定位為準;

優(yōu)先級為:
同權(quán)重: 內(nèi)聯(lián)樣式表（標簽內(nèi)部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高

13. CSS3新增偽類有那些？

舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。

::after 在元素之前添加內(nèi)容,也可以用來做清除浮動。
::before 在元素之后添加內(nèi)容
:enabled
:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。

14. display有哪些值？說明他們的作用。

block 塊類型。默認寬度為父元素寬度，可設(shè)置寬高，換行顯示。
none 缺省值。象行內(nèi)元素類型一樣顯示。
inline 行內(nèi)元素類型。默認寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
inline-block 默認寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
table 此元素會作為塊級表格來顯示。
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。

15. CSS3有哪些新特性？

新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform）
縮放,定位,傾斜,動畫,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

16.請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

一個用于頁面布局的全新CSS3功能，F(xiàn)lexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。
較為復(fù)雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現(xiàn)。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。
它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應(yīng)。
在布局上有了比以前更加靈活的空間。

17. 用純CSS創(chuàng)建一個三角形的原理是什么？

把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）

 #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

18. 一個滿屏 品 字布局 如何設(shè)計?

簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可

19. css多列等高如何實現(xiàn)？

利用padding-bottom|margin-bottom正負值相抵；
設(shè)置父容器設(shè)置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時的高度，
當它里面的任 一列高度增加了，則父容器的高度被撐到里面最高那列的高度，
其他比這列矮的列會用它們的padding-bottom補償這部分高度差。

20.經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

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

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

  • IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。

  • 浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
    這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個符號只有ie6會識別)

    漸進識別的方式，從總體中逐漸排除局部。

    首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
    接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。

   css
       .bb{
           background-color:red;/*所有識別*/
         background-color:#00deff\9; /*IE6、7、8識別*/
         +background-color:#a200ff;/*IE6、7識別*/
         _background-color:#1e0bd1;/*IE6識別*/
       }

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

  • IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
    Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
    解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

  • Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,
    可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

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

21. li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

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

22. 為什么要初始化CSS樣式。

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

  • 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

淘寶的樣式初始化代碼：

  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

23. absolute的containing block(容器塊)計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構(gòu)成。
如果都找不到，則為 initial containing block。

補充：

  1. static(默認的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）
  2. absolute: 向上找最近的定位為absolute/relative的元素
  3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

24. CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？

對于普通元素visibility:collapse;會將元素完全隱藏,不占據(jù)頁面布局空間,與display:none;表現(xiàn)相同. 如果目標元素為table,visibility:collapse;將table隱藏,但是會占據(jù)頁面布局空間. 僅在Firefox下起作用,IE會顯示元素,Chrome會將元素隱藏,但是占據(jù)空間.

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

如果元素的display為none,那么元素不被渲染,position,float不起作用,如果元素擁有position:absolute;或者position:fixed;屬性那么元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文檔流,根據(jù)float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin折疊.

26. 什么是外邊距合并？

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
w3school介紹網(wǎng)址： http://www.w3school.com.cn/css/css_margin_collapsing.asp

27. zoom:1的清除浮動原理?

清除浮動，觸發(fā)hasLayout；
Zoom屬性是IE瀏覽器的專有屬性，它可以設(shè)置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
譬如外邊距（margin）的重疊，浮動清除，觸發(fā)ie的haslayout屬性等。
來龍去脈大概如下：
當設(shè)置了zoom的值之后，所設(shè)置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發(fā)生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。
Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標準化，出現(xiàn)在 CSS 3.0 規(guī)范草案中。
目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現(xiàn)元素的縮放呢？
可以通過css3里面的動畫屬性scale進行縮放。

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

關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標元素的部分）；
如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹配它們了）；
提取項目的通用公有樣式，增強可復(fù)用性，按模塊編寫組件；增強項目的協(xié)同開發(fā)性、可維護性和可擴展性;
使用預(yù)處理工具或構(gòu)建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優(yōu)雅降級）；

29. position:fixed;在android下無效怎么處理？

fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，
原來的網(wǎng)頁還好好的在那，fixed的內(nèi)容也沒有變過位置，
所以說并不是iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

30. 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

多數(shù)顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

31. display:inline-block 什么時候會顯示間隙？(攜程)

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

32. 有哪項方式可以對一個DOM設(shè)置它的CSS樣式？

外部樣式表，引入一個外部css文件
內(nèi)部樣式表，將css代碼放在 <head> 標簽內(nèi)部
內(nèi)聯(lián)樣式，將css樣式直接定義在 HTML 元素內(nèi)部

33. 超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？

被點擊訪問過的超鏈接樣式不再具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

34.什么是Css Hack？ie6,7,8的hack分別是什么？

針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。
示例如下：

test{

    background-color:yellow;    /*ie8*/
    +background-color:pink;        /*ie7*/
    _background-color:orange;       /*ie6*/    }

更好的方式是使用IE條件判斷語句：
<!–[if lte IE 6]>
內(nèi)容
<![endif]–>
等

35.什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計算規(guī)則：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。

36.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能實現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會繼承透明效果?。?/p>

37.px和em的區(qū)別

px和em都是長度單位，區(qū)別是：
px值固定，容易計算。
em值不固定，是相對單位，其相對應(yīng)父級元素的字體大小會調(diào)整

38.描述一個”reset”的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？

Reset樣式的目的是清除瀏覽器某些默認樣式，方便css書寫，例如：
*｛margin:0;padding:0;list-style:none;｝

Normalize的理念與reset不同，它并不清除瀏覽器默認樣式，而是盡量將所有瀏覽器的默認樣式統(tǒng)一。

39. Sass、LESS是什么？大家為什么要使用他們？

他們是CSS預(yù)處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態(tài)樣式語言. 將CSS賦予了動態(tài)語言的特性，如變量，繼承，運算， 函數(shù). LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運行 (借助 Node.js)。
為什么要使用它們？
結(jié)構(gòu)清晰，便于擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復(fù)處理，減少無意義的機械勞動。
可以輕松實現(xiàn)多重繼承。
完全兼容 CSS 代碼，可以方便地應(yīng)用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。

40.為什么要初始化樣式？

用于瀏覽器默認css樣式的存在并且不同瀏覽器對相同HTML標簽的默認樣式不同，若不初始化會造成不同瀏覽器之間的顯示差異。

41. html常見兼容性問題？

1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
4.IE z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解決辦法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; / for IE 8*/
}

  1. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

42. 對WEB標準以及W3C的理解與認識

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。

43. 行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

塊級元素(block)特性：
總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會自動換行），有哪些？
<input> 、<img> 、<button> 、<textarea> 、<label>

44.什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計算規(guī)則：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。

45.知道css有個content屬性嗎？有什么作用？有什么應(yīng)用？

css的content屬性專門應(yīng)用在 before/after 偽元素上，用來插入生成內(nèi)容。最常見的應(yīng)用是利用偽類清除浮動。
//一種常見利用偽類清除浮動的代碼
.clearfix:after {
content:"."; //這里利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after偽元素通過 content 在元素的后面生成了內(nèi)容為一個點的塊級素，再利用clear:both清除浮動。

46. css計數(shù)器（序列數(shù)字字符自動遞增）嗎？如何通過css content屬性實現(xiàn)css計數(shù)器？

答案：css計數(shù)器是通過設(shè)置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 偽類實現(xiàn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 1.1CSS 基礎(chǔ)與選擇器初識 | CSS 1. CSS 加載方式有幾種？ CSS樣式加載一共有四種方式： 1、行...
    沒糖_cristalle閱讀 964評論 0贊 0
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,434評論 2贊 66
  • # CSS樣式規(guī)則overflow 使用HTML時，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對網(wǎng)頁進...
    低調(diào)迷人的反派角色閱讀 1,081評論 0贊 1
  • 課程目標: 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握C...
    桃花蘭島主閱讀 610評論 0贊 1
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,172評論 0贊 1

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