text-align:center旋讹;
可繼承鲫惶,讓行內元素水平居中顯示(文本,img)
盒模型的區(qū)別
當聲明<!DOCTYPE>后瀏覽器解析的盒模型是W3C標準盒模型(CSS3中為box-sizing:content-box琼懊,默認值)為:
width=content所以盒子的總寬度是width+padding+border盒子會被撐大
而IE盒模型(CSS3也可在盒子添加屬性box-sizing:border-box):
width=content+padding+border盒子內容會被壓小
line-height
具有繼承性但2和200%繼承上有區(qū)別
當line-height:2皱埠;時2是子元素本身字體大小的兩倍
當line-height:200%肮帐;時200%代表子元素的父元素字體大小的兩倍
inline-block
有行內元素的特性:在一行上顯示,同時具有塊級元素屬性可以設置寬高
當書寫個inline-block元素時边器,如果他們中間有留白训枢,瀏覽器會默為一個空格,因此頁面渲染上也有有一個空格的間隙忘巧,出現(xiàn)以上情況當需要去除間隙可以在書寫時兩個元素緊挨著寫不要留有空白或者將他倆套在一個盒子里并給盒子設置font-size:0恒界;
高度不一樣的inline-block元素當需要對其時可以設置:
vertical:top/middle/bottom
CSS Sprites
精靈圖:當一個頁面上有多個小圖標時,如果一個一個去請求會造成web服務器負擔過重砚嘴,也會讓客戶端頁面加載變慢十酣,所以合成一張圖只需要一次請求。
元素看不見(隱藏或透明)
opacity:0际长;元素透明度為0耸采,會包含子元素一起變化
visibility:hidden;同上
dispaly:none工育;消失虾宇,不占位置
background-color:rgba(0,0如绸,0嘱朽,0.2)讓背景變得透明
js bin今天有問題
代碼1
代碼2