摘要:基本上,等高布局只能滿足欄的情況,除非正好是等比例的,那還可以使用實(shí)現(xiàn)最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內(nèi)聯(lián)元素與對(duì)齊
上一篇:《CSS世界》筆記一:流/元素/尺寸
下一篇:《CSS世界》筆記三:內(nèi)聯(lián)元素與對(duì)齊
在讀《CSS世界》第四章之前,粗淺的認(rèn)為盒模型無非是margin/border/padding/content而已,再多無非在不同box-sizing下的表現(xiàn)不同而已;但是書中記錄的替換元素與非替換元素、content的一些用法、margin合并等等,讓我對(duì)“盒模型四大家族”有了全新的認(rèn)識(shí)
一、替換元素與非替換元素根據(jù)“外在盒子”是內(nèi)聯(lián)還是塊級(jí)我們可以把元素分為內(nèi)聯(lián)元素和塊級(jí)元素,而根據(jù)是否具有可替換內(nèi)容,我們也可以把元素分為替換元素和非替換元素1.1 替換元素定義
通過修改某個(gè)屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”,常見的替換元素有:、、、或者表單元素和
內(nèi)容的外觀不受頁面上的 CSS 的影響;如單復(fù)選框的內(nèi)間距、背景色等樣式
有自己的尺寸;如、都有自己的尺寸
在很多 CSS 屬性上有自己的一套表現(xiàn)規(guī)則;vertical-align中,替換元素默認(rèn)為baseline(字母x下邊緣),替換元素的基線就被硬生生定義成了元素的下邊緣
1.3 替換元素的尺寸計(jì)算規(guī)則替換元素的尺寸從內(nèi)而外分為 3 類:固有尺寸、HTML 尺寸和 CSS 尺寸
固有尺寸指的是替換內(nèi)容原本的尺寸;例如,圖片、視頻、input作為一個(gè)獨(dú)立文件存在的時(shí) 候,都是有著自己的寬度和高度的;
HTML 尺寸,“HTML 尺寸”只能通過HTML原生屬性改變,這些HTML原生屬性包括的width和height屬性、 的size屬性、的cols 和 rows 屬性
CSS 尺寸特指可以通過 CSS 的width和height或者max-width/min-width和max-height/min-height設(shè)置的尺寸,對(duì)應(yīng)盒尺寸中的content box
尺寸計(jì)算優(yōu)先級(jí): CSS 尺寸 > HTML 尺寸 > 固有尺寸
1.4 替換元素與普通元素的轉(zhuǎn)換(理論上)猜想1:html中src屬性,img/video去掉src屬性后也就成了普通元素
猜想2:css中的content屬性,普通元素通過content屬性也可以展示元素中原本沒有的文字或圖片
注意,content屬性不僅能用于::before/::after中,還能用于元素中,不過有一定兼容性。
在 Chrome 瀏覽器下,所有的元素都支持 content 屬性,而其他瀏覽器僅在::before/::after 偽元素 中才有支持
案例1:基于偽元素的圖片內(nèi)容生成技術(shù)
原理:img標(biāo)簽有src時(shí)不支持偽類,沒有src時(shí)支持偽類;圖片沒有src時(shí),::before和::after可以生效;給圖片添加一個(gè)src地址時(shí),圖片從普通元素變成替換元素,原本都還支持的::before和::after此時(shí)全部無效
案例2:content 引入圖片
img { content: url(1.jpg); }
案例3:hover 實(shí)現(xiàn)圖片替換
img:hover { content: url(laugh-tear.png); }
案例4:優(yōu)雅實(shí)現(xiàn)h1的SEO
《CSS 世界》
h1 { width: 180px; height: 36px; background: url(logo.png); /* 隱藏文字 */ text-indent: -999px; }
案例5:加載中動(dòng)畫
正在加載中... dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: "...A..A."; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }
原理:content中有三行內(nèi)容,分別是‘...’,‘..’,‘.’;動(dòng)畫位移dot即可實(shí)現(xiàn)正在加載的效果
案例6:計(jì)數(shù)器(了解)
三、padding屬性padding 對(duì)內(nèi)聯(lián)元素水平和垂直方向上均有影響
padding 寬高百分比都是基于父元素的寬度計(jì)算
很多很多的前端同事有這么一個(gè)錯(cuò)誤的認(rèn)識(shí):內(nèi)聯(lián)元素的 padding 只會(huì)影響水平方向,不會(huì)影響垂直方向。這種認(rèn)知是不準(zhǔn)確的,內(nèi)聯(lián)元素的 padding 在垂直方向同樣會(huì)影響布局,影響視覺表現(xiàn)。 只是因?yàn)閮?nèi)聯(lián)元素沒有可視寬度和可視高度的說法(clientHeight 和 clientWidth 永遠(yuǎn)是 0),垂直方向的行為表現(xiàn)完全受 line-height 和 vertical-align 的影響,視覺上并沒有改變和上一行下一行內(nèi)容的間距,因此,給我們的感覺就會(huì)是垂直 padding 沒有起作用。
案例1:增大點(diǎn)擊區(qū)域
a { padding: .25em 0; }
案例2:任意高度的分隔符
登錄注冊(cè) a + a:before { content: ""; font-size: 0; padding: 10px 3px 1px; margin-left: 6px; border-left: 1px solid gray; }
案例3:等比例盒子
用于實(shí)現(xiàn)自適應(yīng)布局,如網(wǎng)頁banner等比例大小圖片
/* 矩形 */ div { padding: 50%; } /* 正方形 */ div { padding: 25% 50%; }
案例4:圖形繪制
/* 菜單 */ .icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; /* 默認(rèn)border-color:currentColor; */ border-top: 10px solid; border-bottom: 10px solid; /* 核心 */ background-color: currentColor; background-clip: content-box; }四、margin屬性
margin特點(diǎn):
與padding不同,margin可以為負(fù)值;
與padding相同,margin的百分比也是相對(duì)于其父元素的width
4.1 margin負(fù)值應(yīng)用(1)增大盒子尺寸
只有元素是“充分利用可用空間”狀態(tài)的時(shí)候,margin 才可以改變?cè)氐目梢暢叽?/strong>
/* 無法改變尺寸 */ .father { width: 300px; margin: 0 -20px; } /* .son 尺寸變化 */.father { width: 300px; } .son { margin: 0 -20px; }
(2)經(jīng)典無兼容兩欄布局
.column-box { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; }
布局原理:
默認(rèn)情況下,垂直方向塊級(jí)元素上下距離是 0,一旦 margin-bottom:-9999px 就意味著后面所有元素和上面元 素的空間距離變成了-9999px,也就是后面元素都往上移動(dòng)了 9999px。此時(shí),通過神來一筆 padding-bottom:9999px 增加元素高度,這正負(fù)一抵消,對(duì)布局層并無影響,但卻帶來了我們 需要的東西— 視覺層多了 9999px 高度的可使用的背景色4.2 margin合并
塊級(jí)元素的上外邊距(margin-top)與下外邊距(margin-bottom)有時(shí)會(huì)合并為單個(gè)外邊距,這樣的現(xiàn)象稱為“margin 合并”。
兩個(gè)條件:塊級(jí)元素和僅發(fā)生在垂直方向上
margin合并的3種場(chǎng)景
(1)相鄰兄弟元素 margin 合并。這是 margin 合并中最常見、最基本的
第一行
第二行
p { margin: 1em 0; }
(2)父級(jí)和第一個(gè)/最后一個(gè)子元素
(3)空塊級(jí)元素的 margin 合并
.father { overflow: hidden; } .son { margin: 1em 0; }
此時(shí).father所在的這個(gè)父級(jí) 如何阻止margin發(fā)生合并? 對(duì)于 margin-top 合并,可以進(jìn)行如下操作(滿足一個(gè)條件即可): 父元素設(shè)置為塊狀格式化上下文元素; 父元素設(shè)置 border-top 值; 父元素設(shè)置 padding-top 值; 父元素和第一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔。 對(duì)于 margin-bottom 合并,可以進(jìn)行如下操作(滿足一個(gè)條件即可): 父元素設(shè)置為塊狀格式化上下文元素; 父元素設(shè)置 border-bottom 值; 父元素設(shè)置 padding-bottom 值; 父元素和最后一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔; 父元素設(shè)置 height、min-height 或 max-height。 margin 合并的計(jì)算規(guī)則: “正正取大值”“正負(fù)值相加”“負(fù)負(fù)最負(fù)值” margin:auto 的填充規(guī)則如下 一側(cè)auto應(yīng)用 兩側(cè)auto,水平垂直居中 注意: 幾個(gè)特點(diǎn): border屬性值不支持百分比 border-style 默認(rèn)值為none border-color 默認(rèn)值為currentColor 應(yīng)用1:圖片上傳hover變色 應(yīng)用2:優(yōu)雅增加點(diǎn)擊區(qū)域 應(yīng)用3:三角形繪制 border能構(gòu)成三角形和梯形的原理如下: 通過改變width/height以及border-width在不同方位的尺寸,可以改變?nèi)切蔚膬A角方位和尺寸 應(yīng)用4:border等高布局 border等高布局的局限性: 由于 border 不支持百分比寬度,因此,適合至少一欄是定寬的布局 等高布局的欄目有限制?;旧希琤order 等 高布局只能滿足 2~3 欄的情況,除非正好是等比例的,那還可以使用 border-style:double 實(shí)現(xiàn)最多 7 欄布局 上一篇:《CSS世界》筆記一:流/元素/尺寸 文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/113556.html 摘要:一流體布局引出的幾種網(wǎng)頁布局方式布局方式描述特點(diǎn)場(chǎng)景靜態(tài)布局,傳統(tǒng)設(shè)計(jì),網(wǎng)頁上的所有元素的尺寸一律使用作為單位。世界中,提出了流體布局的概念所謂流體布局,指的是利用元素流的特性實(shí)現(xiàn)的各類布局效果。
下一篇:《CSS世界》筆記二:盒模型四大家族
寫在前面
初讀《CSS世界》還是在深圳,屬于換工作前的充能。那時(shí)候除了工作,其他時(shí)間基本都在這本書里了,因?yàn)樗拇_吸引人。之前看過《CSS揭密》... 摘要:上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中,內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求,但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的,而頭疼不已。
上一篇:《CSS世界》筆記二:盒模型四大家族下一篇:《CSS世界》筆記四:流的保護(hù)與破壞
寫在前面
在頁面布局中,內(nèi)聯(lián)元素的垂直對(duì)齊是比較常見和基礎(chǔ)的布局需求,但是我們往往會(huì)因?yàn)榇怪睂?duì)齊中的1px,2px而頭疼不已... 摘要:整理完了高性能這本書,往下就需要快速處理世界,這本講解特性的書非常值得一讀,內(nèi)容完整,重點(diǎn)突出,實(shí)戰(zhàn)性強(qiáng),就是語言啰嗦。由于全書內(nèi)容太多,而且需要一點(diǎn)一點(diǎn)的整理,所以放到了站點(diǎn)上,方便大家查看。
整理完了《高性能JavaScript》這本書,往下就需要快速處理《CSS世界》,這本講解CSS特性的書非常值得一讀,內(nèi)容完整,重點(diǎn)突出,實(shí)戰(zhàn)性強(qiáng),就是語言啰嗦。由于全書內(nèi)容太多,而且需要一點(diǎn)一... 摘要:每個(gè)元素都有一組樣式屬性,這些屬性涉及元素在文檔流中顯示時(shí)的不同方面,比如在文檔流中的位置邊框背景顏色等等。選擇符和要應(yīng)用的樣式構(gòu)成一條規(guī)則。上下文選擇器嚴(yán)格來講應(yīng)該叫后代組合式選擇器。
原文地址:http://justclear.github.io/css-stylin-with-css-note-1
由于 CSS 作用的對(duì)象是 HTML ,所以作者在這章主要先講了一些基本的 HTM... 摘要:流體布局下的寬度分離原則寬度分離原則就是將獨(dú)立占用一層標(biāo)簽而利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。為了不影響之前的布局我們需要重新計(jì)算的寬度。但是不支持屬性還是需要手動(dòng)計(jì)算值。使用不建議使用通配符設(shè)置盒模型。
css流體布局下的寬度分離原則
寬度分離原則就是將width獨(dú)立占用一層標(biāo)簽,而border、margin、padding利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。
為什么要寬度分離
分離是為了便于維護(hù)...
(1)如果一側(cè)定值,一側(cè) auto,則 auto 為剩余空間大小。
(2)如果兩側(cè)均是 auto,則平分剩余空間。.father {
width: 300px; height: 150px;
background-color: #f0f3f9;
position:relative;
}
.son {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 200px; height: 100px;
background-color: #cd0000;
margin: auto;
}
display 計(jì)算值 inline 的非替換元素的垂直 margin 是無效的。對(duì)于內(nèi)聯(lián)替換元素, 垂直 margin 有效,并且沒有 margin 合并的問題,所以圖片永遠(yuǎn)不會(huì)發(fā)生 margin 合并。
五、border屬性
.add {
color: #ccc;
border: 2px dashed;
}
.add:before {
border-top: 10px solid;
}
.add:after {
border-left: 10px solid;
}
/* hover變色 */
.add:hover {
color: #06C;
}
/* box-sizing非border-box時(shí) */
.icon-clear {
width: 16px;
height: 16px;
border: 11px solid transparent;
}
div {
width: 0;
border: 10px solid;
border-color: #f30 transparent transparent;
}
.box {
border-left: 150px solid #333;
background-color: #f0f3f9;
}
.box > nav {
width: 150px;
margin-left: -150px;
float: left;
}
.box > section {
overflow: hidden;
}
下一篇:《CSS世界》筆記三:內(nèi)聯(lián)元素與對(duì)齊相關(guān)文章
《CSS世界》筆記一:流/元素/尺寸
《CSS世界》筆記三:內(nèi)聯(lián)元素與對(duì)齊
CSS世界(文檔)
CSS 設(shè)計(jì)指南 學(xué)習(xí)筆記 一
讀《css世界》筆記(1)
發(fā)表評(píng)論
0條評(píng)論
閱讀 1098·2021-09-22 15:19
閱讀 1715·2021-08-23 09:46
閱讀 2238·2021-08-09 13:47
閱讀 1416·2019-08-30 15:55
閱讀 1421·2019-08-30 15:55
閱讀 1981·2019-08-30 15:54
閱讀 2809·2019-08-30 15:53
閱讀 719·2019-08-30 11:03