CSS常見樣式(下)

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

text-align樣式的定義就是塊狀元素中的inline內容(包括inline,inline-block的元素,文本)的對齊方式。
text-align: center:作用設置文本或img標簽等一些內聯對象(或與之類似的元素)的居中。
作用在塊狀元素中的inline的內容上,能讓文本和inline元素的水平居中。

text-align:取值:
描述
left 把文本排列到左邊。默認值:由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。
inherit 規定應該從父元素繼承 text-align 屬性的值。

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

什么是IE盒模型

IE盒模型

什么是標準盒模型

標準盒模型

區別:

W3C標準中padding、border所占的空間不在width、height范圍內,大家俗稱的IE的盒模型width包括content尺寸+paddingborder

ie678怪異模式(不添加 doctype)使用 ie 盒模型,寬度=邊框+padding+內容寬度
image.png
chrome, ie9+, ie678(添加 doctype) 使用標準盒模型, 寬度= 內容寬度
image.png

使用css3新樣式box-sizing

box-sizing: content-box:w3c標準盒模型
box-sizing: border-box:“IE盒模型”

<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"></div>

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

該屬性是讓當前頁面所有的元素寬高屬性都按照IE的盒子模型的方式來計算

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

line-height: 2 為本身文字的高度的2倍;
line-height: 200%為父元素文字的高度的兩倍;

繼承問題:父元素的line-height有單位(px、%),那么繼承的值則是換算后的一個具體的px級別的值;
屬性值沒有單位,則瀏覽器會直接繼承這個“因子(數值)”,而非計算后的具體值,此時它的line-height會根據本身的font-size值重新計算得到新的line-height 值。
參考

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

特性:既有inline特性(不占據一整行,寬度由內容寬度決定),又有 block特性(可設置寬高,內外邊距)
去除縫隙:可先將具有inline-block特性的元素標簽加一個空的div塊包裹,將其font-size設置為0,同時在將inline-block對應的元素標簽字體在css中恢復原來樣式,這樣可以巧妙的出去兩個inline-block之間的空字符所產生的間隙
頂端對齊:添加CSS樣式vertical-align:top;

CSS sprite 是什么?

精靈圖
指將不同的圖片/圖標合并在一張圖上。
使用CSS Sprite 可以減少網絡請求,提高網頁加載性能。

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

  • display: none:元素消失,不占位置
  • opacity: 0:元素透明度為0,還占有位置
  • visibility: hidden:與opacity: 0類似
  • background-color: rgba(0,0,0,0):背景色透明

鼠標經過
字體圖標實現

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

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • text-align: center的作用是什么,作用在什么元素上?能讓什么元素水平居中 text-align: ...
    饑人谷_二釉閱讀 252評論 0 0
  • 1.text-align:center的作用是什么?作用在什么元素上?能讓什么元素水平居中 text-align:...
    BAWScipes閱讀 398評論 0 0
  • text-align text-align 屬性規定元素中的文本的水平對齊方式可能的值 text-align: c...
    cccccccc7355608閱讀 212評論 0 0
  • 雨歇燕棲枝,花間笑語盈。 天朗煙輕裊,何任醉春風。
    一抹驪歌閱讀 193評論 1 3