亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

《css世界》- 詳細(xì)重點(diǎn)筆記與技巧

MasonEast / 1487人閱讀

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。

概述 
在《css世界》這本書中有一些“黑魔法”給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲?。?！
以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等;

ps: 特別是 “l(fā)ine-height、vertical-align”內(nèi)容需要反復(fù)仔細(xì)研究閱讀

何為“流” 
成為文檔流，將窗體自上而下分成一行一行，并在每行中按從左至右依次排放元素 （引導(dǎo)元素排列和定位）
什么是流體布局 
利用元素“流”的特性實(shí)現(xiàn)的各類布局效果。因?yàn)椤傲鳌北旧砭哂凶赃m應(yīng)特性，所以“流體布局”往往都是具有自適應(yīng)性。
元素寬度按照分辨率寬度進(jìn)行長(zhǎng)度、寬度的調(diào)整，但布局不變。
“未定義行為” 
當(dāng)某個(gè)瀏覽器中出現(xiàn)與其他瀏覽器不一樣的行為或樣式表現(xiàn)；
Web應(yīng)用場(chǎng)景千變?nèi)f化，Web標(biāo)準(zhǔn)也是不可能面面俱到的，也會(huì)存在規(guī)范描述以外的場(chǎng)景，此時(shí)，各大瀏覽器廠家只能根據(jù)自己的理解與喜好去實(shí)現(xiàn)，一旦個(gè)性化就會(huì)出現(xiàn)差異
currentColor 變量 
當(dāng)前的文字顏色;凡事需要使用顏色值的地方，都可以使用currentColor替換，比方說背景色 – background-color, 漸變色 – gradient, 盒陰影 – box-shadow, SVG的填充色 – fill等等
div { color:#3c3c3c; border: 1em solid currentColor; }

currentColor-CSS3超高校級(jí)好用CSS變量

塊級(jí)元素 
默認(rèn)情況下，塊級(jí)元素會(huì)新起一行;占據(jù)其父元素（容器）的整個(gè)空間

塊級(jí)盒子負(fù)責(zé)結(jié)構(gòu)

內(nèi)聯(lián)盒子負(fù)責(zé)內(nèi)容

應(yīng)用 
正是由于“塊級(jí)元素”具有換行特性，因此理論上它都可以配合clear屬性來清除浮動(dòng)帶來的影響
.clear:after {
　 content: "";
   display: table;　// 也可以是block，或者是list-item
　 clear: both;
}
為什么 list-item 元素會(huì)出現(xiàn)項(xiàng)目符號(hào) 
list-item（“附加盒子”）名“標(biāo)記盒子”；因?yàn)樯闪艘粋€(gè)附加的盒子，學(xué)名“標(biāo)記盒子”（marker box），專門用來放圓點(diǎn)、數(shù)字這些項(xiàng)目符號(hào)；
display:inline-block 或者 display:xx-xx 理解（容器盒子） 
元素都兩個(gè)盒子，外在盒子和內(nèi)在盒子；
外在盒子：外在的“內(nèi)聯(lián)盒子”（inline）
內(nèi)在盒子：內(nèi)在的“塊級(jí)容器盒子”（block）
深藏不露的 width:auto 充分利用可用空間 
、
這些元素的寬度默認(rèn)是100%于父級(jí)容器的
收縮與包裹 
浮動(dòng)、絕對(duì)定位、inline-block元素或table元素
收縮到最小 
出現(xiàn)在table-layout為auto的表格中；當(dāng)每一列空間都不夠的時(shí)候，文字能斷就斷，但中文是隨便斷的，英文單詞不能斷
超出容器限制 
內(nèi)容很長(zhǎng)的連續(xù)的英文和數(shù)字，或者內(nèi)聯(lián)元素被設(shè)置了white-space:nowrap
“內(nèi)部尺寸”和“外部尺寸” 
“內(nèi)部尺寸”:尺寸由內(nèi)部元素決定
“外部尺寸”:寬度由外部元素決定
外部尺寸與流體特性 正常流寬度 
、
這些元素的寬度默認(rèn)是100%于父級(jí)容器；display:block;
流動(dòng)性 
寬度100%顯示，
margin/border/padding和content內(nèi)容區(qū)域自動(dòng)分配水平空間
格式化寬度
觸發(fā)條件

“絕對(duì)定位?！保?strong>position屬性值為absolute或fixed的元素中）

表現(xiàn)
絕對(duì)定位元素的寬度表現(xiàn)是“包裹性”，寬度由內(nèi)部尺寸決定
特殊

當(dāng)left/top或top/bottom對(duì)立方位的屬性值同時(shí)存在，元素的寬度表現(xiàn)為“格式化寬度”，

其寬度大小相對(duì)于最近的具有定位特性（position屬性值不是static）的祖先元素計(jì)算 

div { position: absolute; left: 20px; right: 20px; } 
div { position: absolute; top: 20px; bottom: 20px; } // 但不知道為什么不行
內(nèi)部尺寸與流體特性 包裹性 
除了“包裹”（max-width:100%），還有“自適應(yīng)性（元素尺寸由內(nèi)部元素決定，但永遠(yuǎn)小于“包含塊”容器的尺寸）”

著名的“按鈕”元素：極具代表性的inline-block元素

按鈕上的文字個(gè)數(shù)比較有限，沒機(jī)會(huì)換行