資訊專欄INFORMATION COLUMN
摘要：解決方法使用負(fù)將其往下拉或者設(shè)置為來避免生成行框。對(duì)于浮動(dòng)或絕對(duì)定位元素，計(jì)算值與聲明值可能不同。浮動(dòng)元素必須包含其所有的浮動(dòng)子元素使用屬性清除浮動(dòng)時(shí)，例如，實(shí)際上是為設(shè)置屬性的元素增加。
- 僅作用于塊級(jí)元素的屬性
width，height（這倆可用于替換元素）
text—align， text—indent， vertical—align（也可用于表單元格和替換元素如input/img）
background-position(注意百分?jǐn)?shù)和絕對(duì)值的區(qū)別，同時(shí)這個(gè)屬性會(huì)影響平鋪效果)
［基本視覺格式化］
1. 框模型：
－ background包括內(nèi)容框、內(nèi)邊距和邊框，外邊距通常是透明的，顯示父元素的背景；
2. 水平屬性：
－子元素的左（右）margin，左（右）padding，左（右）border和內(nèi)容框width的值加起來必須等于父元素的內(nèi)容框width；
－如果設(shè)置margin—left,margin-right,width（只有這三個(gè)值可以設(shè)置為auto）之中的兩個(gè)為特定值，余下的那個(gè)為auto，則設(shè)置為auto的屬性值會(huì)自動(dòng)計(jì)算以填充父元素的width：
＊ 如果三個(gè)值都為非auto的特定值（over constrained），那么margin-right會(huì)被強(qiáng)制設(shè)置為auto； ＊ 如果margin中某一個(gè)設(shè)置為auto，另一個(gè)設(shè)置特定值，width設(shè)置為auto，則設(shè)置為auto的margin會(huì)被置為0； ＊ 如果width設(shè)置為特定值，兩個(gè)margin設(shè)置為auto，則會(huì)**水平居中**！！
－ 父元素的padding會(huì)跟子元素的margin疊加；
－ 非替換元素的默認(rèn)寬度由其內(nèi)容決定；為替換元素設(shè)置width為auto（如img），那么其值將會(huì)是其本來的寬度；如果只設(shè)置width，那么height會(huì)等比例變化，反之亦然。
3. 垂直屬性：
與水平屬性類似，不同點(diǎn)／注意點(diǎn)：
－ 如果將margin-top或margin-bottom設(shè)置為auto，則會(huì)被默認(rèn)為0，因此不能垂直居中囧，除非用特定值顯示設(shè)置；
－ 使用百分?jǐn)?shù)設(shè)置子元素height時(shí)，如果沒有顯示設(shè)置父元素的height值，那么子元素height會(huì)默認(rèn)為auto；
－ 如果父元素只包含子塊級(jí)元素，那么父元素的height將不包含子元素的margin，除非父元素有border或padding??！為什么呢，因?yàn)榇怪狈较蛏系膍argin會(huì)重疊。由此看來，要避免重疊，就需要使用border和padding來講相鄰margin隔開哦；
行內(nèi)元素：
－ line-height（行框高度）對(duì)于替換元素而言，就是其內(nèi)容的高度。因此替換元素?zé)o行間距（line-height － font-size）；對(duì)于非替換元素而言，是其內(nèi)容框高度加上行間距;
－ 對(duì)于只包含文本的行，能改變其行間距離的只有l(wèi)ine-height, font-size, vertical-align。
非替換元素：
－ 當(dāng)line-height值小于font-size時(shí)可能會(huì)產(chǎn)生文本重疊，為避免此現(xiàn)象可設(shè)置line-height為1 em（需設(shè)置font-size）或1（根據(jù)font-size的縮放因子），此外它會(huì)繼承父元素的計(jì)算值而不是字面值，除非顯式定義；
－ 行內(nèi)元素的內(nèi)邊距、外邊距和邊框都不會(huì)影響行高。其中外邊距只有左右有效，上下無效；但如有正的內(nèi)邊距且有背景，則有可能覆蓋鄰行（仍不影響行高和布局，就是說設(shè)置了內(nèi)邊距行高也不會(huì)變高）；
替換元素：
－ 行內(nèi)元素的內(nèi)邊距、外邊距和邊框會(huì)影響行高，且上下margin有效。
－ 為img設(shè)置一個(gè)height值，會(huì)影響行高，但其line-height的有效值不會(huì)改變，有些屬性例如vertical-align仍然是使用line-height有效值進(jìn)行計(jì)算；
－ 如果一個(gè)替換元素是一個(gè)塊級(jí)元素或表格單元格中的唯一后代，那么就會(huì)被放到基線上，例如div中的img。解決方法：使用負(fù)margin將其往下拉或者設(shè)置display為block來避免生成行框。
4. 其他
－ display屬性：
* 設(shè)置元素display屬性為inline-block時(shí)， 其表現(xiàn)類似行內(nèi)替換元素；如果沒有顯式定義width，則它會(huì)自動(dòng)收縮以適應(yīng)內(nèi)容寬度，也就是說會(huì)使其寬度剛好能包含所有內(nèi)容且沒有多余； * 設(shè)置元素display屬性為run-in，表示如果該元素后面是一個(gè)display為block的元素，則該元素表現(xiàn)為行內(nèi)元素放在后面那個(gè)元素的開頭，否則其本身將顯示為塊級(jí)元素。 * 對(duì)于浮動(dòng)或絕對(duì)定位元素，計(jì)算值與聲明值可能不同。除inline-table之外大部分聲明值（包括inline，inline-block，run-in）都會(huì)被計(jì)算為block。
［border、margin、padding］
margin
－ 如果使用百分?jǐn)?shù)，則計(jì)算值是相對(duì)于父元素的width值（not height）而言。哪怕是margin-top也是！
border
－ 不指定的值會(huì)使用默認(rèn)值, e.x.:
{ border: solid 1px dotted;
border: 1px;
}
此處第二條border設(shè)置會(huì)覆蓋第一條，由于在第二條中沒有設(shè)置border-style，默認(rèn)為none，所以將不會(huì)有border；
［浮動(dòng)和定位］
浮動(dòng)：
浮動(dòng)元素的margin不會(huì)合并；
假設(shè)要使一個(gè)非替換元素浮動(dòng)，需要為其指定一個(gè)width，否則會(huì)按瀏覽器規(guī)定的最小width浮動(dòng)；
浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論這個(gè)元素本身是什么；
浮動(dòng)元素的頂端不能比其父元素或之前所有浮動(dòng)元素的頂端更高；
當(dāng)浮動(dòng)元素與文檔流中的元素重疊時(shí)：
（1）如果是塊級(jí)元素，則其內(nèi)容會(huì)在浮動(dòng)元素之上，而邊框和背景則在之下；
（2）如果是行內(nèi)元素，則其內(nèi)容、邊框和背景都在浮動(dòng)元素之上，即不會(huì)被覆蓋。
這與元素出現(xiàn)在文檔流中的先后順序無關(guān)。
浮動(dòng)元素必須包含其所有的浮動(dòng)子元素；
使用clear屬性清除浮動(dòng)時(shí)，例如clear: left，實(shí)際上是為設(shè)置clear屬性的元素增加margin-top。因此，有可能即使該元素設(shè)置了margin-top，也會(huì)與浮動(dòng)元素緊緊相連，除非margin-top的值足夠大。要使兩者之間有間隔，可以設(shè)置浮動(dòng)元素的margin-bottom。
定位：
絕對(duì)定位
*如果父元素是塊級(jí)元素且position的值為非static，則子元素absolute定位是其外邊距外界相對(duì)于父元素的邊框界定區(qū)域定位；
*通過指定top, bottom, left, right的值，可以隱式指定元素的寬高；
*除bottom外被設(shè)置成auto的屬性，會(huì)默認(rèn)與元素靜態(tài)位置的對(duì)應(yīng)值一致；
*水平／垂直方向上，當(dāng)元素過度受限時(shí)（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），會(huì)忽略right／bottom的值。如果有設(shè)置為auto的屬性，則改變其值來滿足前等式，如果兩個(gè)則平分，所以可以用來做居中（margin設(shè)為auto，其他值均為0）！
*假設(shè)一個(gè)元素有設(shè)置z-index值，那么其所有子元素都是相對(duì)于這個(gè)疊放上下文來放置，并且css2.1中規(guī)定所有元素絕對(duì)不能放在其疊放上下文的背景之下，但可以在其內(nèi)容之下；
固定定位
*right的值總是等于－left，bottom的值總是等于－top。
持續(xù)更新中。。。。。
本文參考 《css權(quán)威指南》
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116406.html
摘要：剖析新版，為你所用大漠第二個(gè)議題是大漠老師的，大漠老師是的站長(zhǎng)，著有圖解核心技術(shù)與案例實(shí)戰(zhàn)。自定義屬性大漠老師多次強(qiáng)調(diào)，這叫做自定義屬性，不叫變量。 前言 對(duì)于我來講，雖然做前端那么多年，但對(duì) CSS 的探索非常少，很多 CSS 知識(shí)還是在畢業(yè)之前積累下來。揣著一本《精通CSS:高級(jí)Web標(biāo)準(zhǔn)解決方案(第二版)》（現(xiàn)在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：在學(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)部樣式，外部...
閱讀 1271·2021-09-30 09:47
閱讀 3839·2021-09-06 15:02
閱讀 1850·2021-09-01 10:46
閱讀 2428·2019-08-30 15:52
閱讀 695·2019-08-29 15:28
閱讀 1925·2019-08-29 15:08
閱讀 1223·2019-08-29 13:28
閱讀 2627·2019-08-29 12:19
