背景、行高、盒模型、字體圖標等

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

作用:定義行內內容居中。
作用元素:行內元素的塊級父元素。
生效元素:行內元素和inline-block元素。

IE 盒模型和W3C盒模型有什么區別?

box-sizing屬性用于更改計算元素寬度和高度的盒子模型。

  • IE盒模型box-sizing: border-box;
    width = 左右border + 左右padding + 內容區 width;
    height = 上下border + 上下padding + 內容區 height;
  • W3C盒模型(又叫標準盒模型)box-sizing: content-box;(默認值):
    width = 內容區 width;
    height = 內容區 height;

所以IE 盒模型和W3C盒模型區別在于寬高的計算方式
下圖可以直觀地看出二者計算結果的區別:

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

把標準盒模型轉換為IE盒模型,告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。
好處:設置后,即使padding或者border發生了改變,盒子寬高不會發生變化,只會重繪,不會回流。結論: 減少回流

line-height: 200%和line-height: 2有什么區別?

line-height:200%——值200%是一個百分比,與元素自身的字體大小有關,計算值是給定的百分比值乘以元素計算出的字體大小。
line-height:2——值2是一個數字值number,沒有單位,并不是一個CSS尺寸,大多數情況下,使用number設置line-height是首選方法,在繼承情況下不會有異常的值。
有沒有感覺以上概念看不懂啊^ - ^,先上一段代碼~

—————————————————————————————————————————————————————————————————————————— html代碼
<div class="dad">
        我是爸爸
    <div class="son">
            我是兒子<br /> 喜歡籃球
    </div>
</div>
—————————————————————————————————————————————————————————————————————————— css代碼1
<style>
        .dad {
            line-height: 200%;
            font-size: 16px;
            background: yellowgreen;
        }

        .son {
            font-size: 30px;
            background: pink;
        }
</style>
1-1
1-2
—————————————————————————————————————————————————————————————————————————— css代碼2
<style>
        .dad {
            line-height: 2;
            font-size: 16px;
            background: yellowgreen;
        }

        .son {
            font-size: 30px;
            background: pink;
        }
</style>
2-1
2-2

所以結論是,200%是按照聲明line-height:200%的元素的font-size計算的;2是按照元素繼承或聲明的font-size計算的,其中2叫縮放因子,子元素會繼承父元素的縮放因子并乘以子元素自身的font-size值動態計算出最終的值。

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

1、特性和去除縫隙詳見我的博客
2、頂端對齊vertical-align: top;

CSS sprite 是什么?

CSS sprite直譯過來就是CSS精靈。通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”。
css sprites是什么通俗解釋:把網頁中一些背景圖片整合拼合成一張圖片中,再利用CSS的背景定位技巧,如“background-image",“background- repeat,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片在布局盒子對象位置。

讓一個元素"看不見"有幾種方式?有什么區別?

詳見我的博客

代碼

1、CSSsprite實現
2、字體圖標實現

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容