成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css屬性總結(jié)

JellyBool / 2448人閱讀

摘要：解決方法使用負(fù)將其往下拉或者設(shè)置為來避免生成行框。對于浮動或絕對定位元素，計算值與聲明值可能不同。浮動元素必須包含其所有的浮動子元素使用屬性清除浮動時，例如，實際上是為設(shè)置屬性的元素增加。

- 僅作用于塊級元素的屬性

width，height（這倆可用于替換元素）

text—align， text—indent， vertical—align（也可用于表單元格和替換元素如input/img）

background-position(注意百分?jǐn)?shù)和絕對值的區(qū)別，同時這個屬性會影響平鋪效果)

［基本視覺格式化］

1. 框模型：
－ background包括內(nèi)容框、內(nèi)邊距和邊框，外邊距通常是透明的，顯示父元素的背景；

2. 水平屬性：

－子元素的左（右）margin，左（右）padding，左（右）border和內(nèi)容框width的值加起來必須等于父元素的內(nèi)容框width；

－如果設(shè)置margin—left,margin-right,width（只有這三個值可以設(shè)置為auto）之中的兩個為特定值，余下的那個為auto，則設(shè)置為auto的屬性值會自動計算以填充父元素的width：

 ＊ 如果三個值都為非auto的特定值（over constrained），那么margin-right會被強(qiáng)制設(shè)置為auto；
 ＊ 如果margin中某一個設(shè)置為auto，另一個設(shè)置特定值，width設(shè)置為auto，則設(shè)置為auto的margin會被置為0；
 ＊ 如果width設(shè)置為特定值，兩個margin設(shè)置為auto，則會**水平居中**??！

－ 父元素的padding會跟子元素的margin疊加；

－ 非替換元素的默認(rèn)寬度由其內(nèi)容決定；為替換元素設(shè)置width為auto（如img），那么其值將會是其本來的寬度；如果只設(shè)置width，那么height會等比例變化，反之亦然。

3. 垂直屬性：

與水平屬性類似，不同點／注意點：

－ 如果將margin-top或margin-bottom設(shè)置為auto，則會被默認(rèn)為0，因此不能垂直居中囧，除非用特定值顯示設(shè)置；
－ 使用百分?jǐn)?shù)設(shè)置子元素height時，如果沒有顯示設(shè)置父元素的height值，那么子元素height會默認(rèn)為auto；
－ 如果父元素只包含子塊級元素，那么父元素的height將不包含子元素的margin，除非父元素有border或padding??！為什么呢，因為垂直方向上的margin會重疊。由此看來，要避免重疊，就需要使用border和padding來講相鄰margin隔開哦；

行內(nèi)元素：
－ line-height（行框高度）對于替換元素而言，就是其內(nèi)容的高度。因此替換元素?zé)o行間距（line-height － font-size）；對于非替換元素而言，是其內(nèi)容框高度加上行間距;
－ 對于只包含文本的行，能改變其行間距離的只有l(wèi)ine-height, font-size, vertical-align。

非替換元素：

－ 當(dāng)line-height值小于font-size時可能會產(chǎn)生文本重疊，為避免此現(xiàn)象可設(shè)置line-height為1 em（需設(shè)置font-size）或1（根據(jù)font-size的縮放因子），此外它會繼承父元素的計算值而不是字面值，除非顯式定義；

－ 行內(nèi)元素的內(nèi)邊距、外邊距和邊框都不會影響行高。其中外邊距只有左右有效，上下無效；但如有正的內(nèi)邊距且有背景，則有可能覆蓋鄰行（仍不影響行高和布局，就是說設(shè)置了內(nèi)邊距行高也不會變高）；

替換元素：

－ 行內(nèi)元素的內(nèi)邊距、外邊距和邊框會影響行高，且上下margin有效。
－ 為img設(shè)置一個height值，會影響行高，但其line-height的有效值不會改變，有些屬性例如vertical-align仍然是使用line-height有效值進(jìn)行計算；
－ 如果一個替換元素是一個塊級元素或表格單元格中的唯一后代，那么就會被放到基線上，例如div中的img。解決方法：使用負(fù)margin將其往下拉或者設(shè)置display為block來避免生成行框。

4. 其他

－ display屬性：

   * 設(shè)置元素display屬性為inline-block時， 其表現(xiàn)類似行內(nèi)替換元素；如果沒有顯式定義width，則它會自動收縮以適應(yīng)內(nèi)容寬度，也就是說會使其寬度剛好能包含所有內(nèi)容且沒有多余；
   * 設(shè)置元素display屬性為run-in，表示如果該元素后面是一個display為block的元素，則該元素表現(xiàn)為行內(nèi)元素放在后面那個元素的開頭，否則其本身將顯示為塊級元素。
   * 對于浮動或絕對定位元素，計算值與聲明值可能不同。除inline-table之外大部分聲明值（包括inline，inline-block，run-in）都會被計算為block。

［border、margin、padding］

margin
－ 如果使用百分?jǐn)?shù)，則計算值是相對于父元素的width值（not height）而言。哪怕是margin-top也是！

border
－ 不指定的值會使用默認(rèn)值, e.x.:

{ border: solid 1px dotted;
  border: 1px;
}

此處第二條border設(shè)置會覆蓋第一條，由于在第二條中沒有設(shè)置border-style，默認(rèn)為none，所以將不會有border；

［浮動和定位］

浮動：

浮動元素的margin不會合并；

假設(shè)要使一個非替換元素浮動，需要為其指定一個width，否則會按瀏覽器規(guī)定的最小width浮動；

浮動元素會生成一個塊級框，而不論這個元素本身是什么；

浮動元素的頂端不能比其父元素或之前所有浮動元素的頂端更高；

當(dāng)浮動元素與文檔流中的元素重疊時：
（1）如果是塊級元素，則其內(nèi)容會在浮動元素之上，而邊框和背景則在之下；
（2）如果是行內(nèi)元素，則其內(nèi)容、邊框和背景都在浮動元素之上，即不會被覆蓋。
這與元素出現(xiàn)在文檔流中的先后順序無關(guān)。

浮動元素必須包含其所有的浮動子元素；

使用clear屬性清除浮動時，例如clear: left，實際上是為設(shè)置clear屬性的元素增加margin-top。因此，有可能即使該元素設(shè)置了margin-top，也會與浮動元素緊緊相連，除非margin-top的值足夠大。要使兩者之間有間隔，可以設(shè)置浮動元素的margin-bottom。

定位：

絕對定位

*如果父元素是塊級元素且position的值為非static，則子元素absolute定位是其外邊距外界相對于父元素的邊框界定區(qū)域定位；
*通過指定top, bottom, left, right的值，可以隱式指定元素的寬高；
*除bottom外被設(shè)置成auto的屬性，會默認(rèn)與元素靜態(tài)位置的對應(yīng)值一致；
*水平／垂直方向上，當(dāng)元素過度受限時（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），會忽略right／bottom的值。如果有設(shè)置為auto的屬性，則改變其值來滿足前等式，如果兩個則平分，所以可以用來做居中（margin設(shè)為auto，其他值均為0）！
*假設(shè)一個元素有設(shè)置z-index值，那么其所有子元素都是相對于這個疊放上下文來放置，并且css2.1中規(guī)定所有元素絕對不能放在其疊放上下文的背景之下，但可以在其內(nèi)容之下；

固定定位
*right的值總是等于－left，bottom的值總是等于－top。

持續(xù)更新中。。。。。

本文參考 《css權(quán)威指南》

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116406.html

相關(guān)文章

  • 《第五屆中國CSSConf開發(fā)者大會》參會總結(jié)

    摘要：剖析新版，為你所用大漠第二個議題是大漠老師的，大漠老師是的站長，著有圖解核心技術(shù)與案例實戰(zhàn)。自定義屬性大漠老師多次強(qiáng)調(diào)，這叫做自定義屬性，不叫變量。 前言 對于我來講，雖然做前端那么多年，但對 CSS 的探索非常少，很多 CSS 知識還是在畢業(yè)之前積累下來。揣著一本《精通CSS:高級Web標(biāo)準(zhǔn)解決方案(第二版)》（現(xiàn)在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...

    TerryCai 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • CSS語法總結(jié)

    摘要：在學(xué)習(xí)的過程中，了解并掌握的語法是至關(guān)重要的，在這里總結(jié)一下相關(guān)的語法。一寫法代碼選擇器屬性名屬性值二寫在什么地方有三種方式，分別為行內(nèi)樣式，內(nèi)部樣式，外部樣式。 在學(xué)習(xí)CSS的過程中，了解并掌握CSS的語法是至關(guān)重要的，在這里總結(jié)一下相關(guān)的語法。 一、CSS寫法： css 代碼 選擇器{ 屬性名：屬性值 } 二、寫在什么地方： 有三種方式，分別為：行內(nèi)樣式，內(nèi)部樣式，外部...

    godlong_X 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<