国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS2-盒模型、背景圖片

yuanzhanghu / 953人閱讀

摘要：合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。雪碧圖的使用背景圖與元素的原點重合。白色框是元素，綠色框是背景圖片。

盒模型屬性

margin外邊距（top,right,bottom,left）
border邊框(top,right,bottom,left)
padding內邊距(top,right,bottom,left)
content內容區(width,height)
margin,border,padding值的書寫方法：
margin-top/-right/-bottom/-left
margin:10px 11px 12px 13px; 上右下左的順序
margin:10px 12px;簡寫即上下10px,左右12px;
margin:10px; 即4個方向都是10px

關于margin的合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

IE 盒模型和W3C盒模型的區別

W3C盒模型（box-sizing:content-box）,寬度width=內容區content的寬度


IE盒模型（box-sizing:border-box）,寬度width=border+padding+content內容寬度


沒有DOCTYPE的怪異模式，IE瀏覽器默認使用“IE盒模型”，IE8及以下也使用IE盒模型。

CSS Sprite(雪碧圖|精靈圖)

CSS Sprite圖是把多個icon圖標圖片或頁面會重復用到的小圖片合并放在一張圖里面，通過background-position這個屬性調整背景圖片的位置來顯示合并大圖中的某個局部圖像區域。
作用是減少網絡請求，讓頁面加載更快，圖片只需請求一次，以后使用都調用緩存內的圖片。與此類似減少請求另一種方法是把圖片（只適用于很小的圖標例如icon）轉換成base64的編碼，url直接引用這個編碼就能看見圖片。base64適用在圖標加載響應要求較高的場景下使用。
雪碧圖的使用：背景圖與元素的原點重合。好比把床單的左上角與桌子的左上角對齊，多余的部分不要。（0，0）坐標原點位置，即外層塊元素的左上角，background-position位置設定是指圖片與坐標原點的偏移量。白色框是元素，綠色框是背景圖片。X坐標值為正則圖片左上角向右平移，為負則圖片左上角向左平移，Y坐標值為正則圖片左上角向下平移，為負則圖片左上角向上平移。

背景小技巧：在開發過程中用圖片做背景的同時，往往還要用圖片的主色調來作用元素的背景色，目的是背景圖片丟失的時候防止視覺效果變化太大。

img標簽和CSS背景使用圖片的區別

頁面上固定不變的東西如圖標icon、logo等用CSS背景圖片
對于經常會改變的內容（圖片是和內容相關的），用戶img標簽圖片，比如VIP會員頭像等。

background: url(abc.png) 0 0 no-repeat;

background-image:url(http://xxx.jpg) 這里是url引用，而不是src引入要引號
background-position:0px 0px; 圖片偏移位置水平垂直均為0
background-repeat:repeat-x/repeat-y/no-repeat(水平重復/垂直重復/不重復)

background-size的作用

background-size指定背景圖片實際顯示區域大小。
屬性值：像素值/百分比/cover/contain
cover圖片會覆蓋整個背景區域,不會留下邊白,即小于背景區域的圖片會放大充滿整個背景區域。contain圖片自適應最好的顯示效果并被包裹在背景區域里，有可能會留下空白。

div元素水平居中，img圖片水平居中

塊級元素水平居中：margin：0 auto; 不考慮上下margin值時而直接使用:
margin-left:auto;
margin-right:auto;
圖片水平居中：對img標簽先包裹一個塊級父容器，再對塊級父容器使用text-align:center實現居中。text-align:center;設置元素內的文本水平居中對齊。只對塊級元素里面的行內元素生效（a,img,input,span）,注意這里居中是參照該行內元素的父容器元素生效。text-align有5個值：left/right/center/justify/inherit，左對齊/右對齊/居中對齊/兩端對齊/繼承父元素align值。justify兩端對齊的時候，每行中的字間距可能不一致。

設置元素透明

使用opacity屬性來設置元素的透明度，值從 0.0 （完全透明）到 1.0（完全不透明）。兼容性

opacity和 rgba設置透明的區別

opacity:0.5;（0～1）使元素內所有內容透明度為0就像消失，但是所占據的空間還在，不會改變頁面布局,opacity屬性可繼承。
background-color: rgba(0,0,0,0.5); 這種加alpha通道值設透明度只能對元素的顏色或者背景色設置透明度，rgba設置的透明屬性無法繼承。

title和 alt屬性的區別

title是補充的額外信息即鼠標懸停標簽上的額外說明信息。alt則是替代信息而不是提供額外說明，alt可以用來替換說明加載失敗時的img或a鏈接。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113394.html

相關文章

  • CSS規范 > 9 視覺格式化模型 Visual Formatting Model

    摘要：盒的類型會影響其在視覺格式化模型中的表現。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內。 視覺格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎上...

    魏憲會 評論0 收藏0

  • CSS2中盒模型與布局的一些概念關系

    摘要：的一些名詞和概念用來幫你更明確地去描述世界的事物。具體信息可以參考盒模型的解釋，這里暫且不作展開。的位置和大小時根據一個稱為的邊界進行計算的。其它情況，依據設定的值進行處理指定值最終表現值與指定值相同 CSS的一些名詞和概念 用來幫你更明確地去描述HTML/CSS世界的事物。 box 在CSS中，一個元素就可以看作一個box。具體信息可以參考盒模型的解釋，這里暫且不作展開。 conta...

    happyhuangjinjin 評論0 收藏0

  • 讀后總結--精通css高級web標準解決方案（第二版）

    摘要：無論是否移動，元素仍然占據原來的空間。絕對定位絕對定位使元素的位置與文檔流無關，因此不占據空間。 為啥讀這本書 現在前端圈子過于浮躁，掌握基礎無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘 當然，根本原因還是覺得自己掌握不好 開始總結吧~ 一. 基礎知識 經過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...

    leone 評論0 收藏0

  • CSS規范里的一些事(一)

    摘要：規范里的一些事前言以下內容總結于規范，一盒子模型以上圖形說的是盒子模型中的邊界。，，和屬性失效盒的位置是根據常規流計算的被稱為常規流中的位置，然后盒相對于其常規位置偏移。 CSS規范里的一些事 前言：以下內容總結于CSS2.1規范，http://www.ayqy.net/doc/css2-1/cover.html 一、盒子模型 showImg(https://segmentfault...

    neu 評論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<