CSS常見樣式 2

一、text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中

text-align: center是讓其子元素或者文本水平居中,該樣式可繼承。作用在行內(nèi)元素、內(nèi)聯(lián)塊狀元素、文本上,并讓它們水平居中。

二、IE 盒模型和 W3C 盒模型有什么區(qū)別?

首先,盒子指的是 HTML 中所有的元素,盒子模型就是這些元素占據(jù)空間的規(guī)則。盒子由四個(gè)部分組成 content(內(nèi)容) padding(內(nèi)邊距) border(邊框) margin(外邊距)。接下來就區(qū)分一下兩種盒子模型:

1. IE 盒模型

IE 盒子對(duì)于寬高的計(jì)算是

width = contentX + paddingLeft + paddingRight + borderLeft + borderRight
height = contentY + paddingTop + paddingBottom + borderTop + borderBottem

什么意思呢?就是說,當(dāng)你定義了一個(gè)<div>width: 200px;height: 200px時(shí),這里就默認(rèn)包含了paddingborder為 0 。之后增加paddingborder時(shí),都是往里面擠了。

2. W3C 盒模型

W3C 盒子寬高是

width = contentX
height = contentY

所以說, W3C 盒模型寬高只和本身內(nèi)容有關(guān),當(dāng)你后續(xù)添加paddingborder時(shí),它就會(huì)往外擠。

3. 總結(jié)

相對(duì)來說, W3C 盒模型更符合我們的認(rèn)知,寬高就應(yīng)該由內(nèi)容決定嘛,與其他屬性掛什么鉤。但在實(shí)際使用上,反而 IE 盒模型更方便。舉個(gè)例子:

  <style>
    div {
      display: inline-block;
      margin: 0 20px;
      vertical-align: top;
      color: #fff;
      text-align: center;
    }
    .div1 {
      box-sizing: content-box;
      width: 200px;
      height: 200px;
      background-color: red;
      border: 5px solid #000;
      padding: 20px;
    }
    
    .div2 {
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      background-color: green;
      border: 5px solid #000;
      padding: 20px;
    }
    .div {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
  <div class="div1"> W3C 盒子</div>
  <div class="div2">IE 盒子</div>
  <div class="div">盒子,只有寬高</div>

在線演示

在上面的例子可以看到,當(dāng)使用 W3C 盒模型時(shí),容器最后占據(jù)的空間會(huì)隨著paddingbordermargin增大而增大;使用 IE 盒模型時(shí),容器最后占據(jù)的空間只隨margin增大而增大。兩者相比,IE 盒模型明顯更好控制,我只需要知道margin,就可以為這個(gè)容器布局了;而 W3C 盒模型還需要你去計(jì)算最終占據(jù)空間大小content + padding + border + margin,太麻煩。因此,開發(fā)中往往更喜歡用 IE 盒模型。

三、*{ box-sizing: border-box;}的作用是什么?

設(shè)置所有容器為 IE 盒模型。

四、line-height: 2line-height: 200%有什么區(qū)別?

line-height: 2不帶單位的行高,是繼承父元素的縮放因子,子元素的行高等于自身字體大小的倍數(shù),lineHeight = selfFontSize * n。line-height: 200%帶上單位的行高,是直接繼承父元素的行高,子元素的行高為lineHeight = parentFontSize * n,以上。

五、inline-block有什么特性?如何去除縫隙?高度不一樣的inline-block元素如何頂端對(duì)齊?

當(dāng)用戶想讓元素在同一行顯示,但又能設(shè)置寬高時(shí),就用inline-block??p隙的存在是因?yàn)榭瞻鬃址拇嬖?,正常情況下,瀏覽器會(huì)把連續(xù)的空白字符合并成一個(gè),所以這里就有一個(gè)小小的空白。一個(gè)解決辦法是在父元素設(shè)置字體為零,因?yàn)槟呐率强瞻鬃址彩亲煮w,設(shè)置為 0 之后,就不占空間了。然后再在具體的inline-block里面再設(shè)置字體大小,如下:

  <style>
    div {
      font-size: 0;
    }
  span {
    border: 1px solid;
    font-size: 16px;
  }
  </style>
  <div>
    <span>1</span>
    <span>2</span>
  </div>

在線演示

用了inline-block之后,就有一個(gè)新的 CSS 屬性可以使用了:vertical-align,類似與text-align,不過是垂直方向的,常用有三個(gè)值top middle bottom,分別是頂端對(duì)齊、垂直居中、底部對(duì)齊。

六、CSS sprite 是什么?

CSC sprite,CSS 精靈圖,江湖人稱雪碧圖。是為了減少小圖片、小圖標(biāo)的請(qǐng)求次數(shù),而把這些合并到一張圖片的技術(shù),這樣可以減少不必要的請(qǐng)求。在使用上配合background-size: x y來對(duì)這張合并圖位移,選中需要的小圖。缺點(diǎn)是:1.無法二次調(diào)整小圖的尺寸。2.需要知道每張小圖的位置。

七、讓一個(gè)元素"看不見"有幾種方式?有什么區(qū)別?

  1. 保留元素位置
div {
  /* 選擇讓元素 可見 還是 不可見 */
  visibility: hidden;

  /* 透明度,剛好透明度為 0 的時(shí)候,相當(dāng)于不可見 */
  opacity: 0;
}
  1. 不再保留元素位置。
div {
  /* 相當(dāng)于當(dāng)前元素不再存在 */
  display: none;
}

在線演示

八、編程任務(wù)

代碼演示地址 | GitHub

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,784評(píng)論 1 92
  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 1、當(dāng)作用于塊級(jí)元素時(shí),...
    我要認(rèn)真學(xué)前端閱讀 649評(píng)論 0 1
  • text-align text-align CSS 屬性定義行內(nèi)內(nèi)容,如何相對(duì)它的塊元素對(duì)齊。并不控制快元素自己的...
    nianxiaoge閱讀 258評(píng)論 0 0
  • 一、text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 text 文本 a...
    任少鵬閱讀 339評(píng)論 0 0
  • 先上一幅完全臨摹版,發(fā)現(xiàn)靜心真的獲得很多~謝謝老師。 辛苦老師點(diǎn)評(píng)~ 老師說要學(xué)會(huì)的是自己的創(chuàng)意,這次看來很多素材...
    翾萱寶寶閱讀 195評(píng)論 3 5