摘要:基本上,等高布局只能滿足欄的情況,除非正好是等比例的,那還可以使用實現最多欄布局上一篇世界筆記一流元素尺寸下一篇世界筆記三內聯元素與對齊
上一篇:《CSS世界》筆記一:流/元素/尺寸
下一篇:《CSS世界》筆記三:內聯元素與對齊
在讀《CSS世界》第四章之前,粗淺的認為盒模型無非是margin/border/padding/content而已,再多無非在不同box-sizing下的表現不同而已;但是書中記錄的替換元素與非替換元素、content的一些用法、margin合并等等,讓我對“盒模型四大家族”有了全新的認識
一、替換元素與非替換元素根據“外在盒子”是內聯還是塊級我們可以把元素分為內聯元素和塊級元素,而根據是否具有可替換內容,我們也可以把元素分為替換元素和非替換元素1.1 替換元素定義
通過修改某個屬性值呈現的內容就可以被替換的元素就稱為“替換元素”,常見的替換元素有:、、、或者表單元素和
1.2 替換元素的特點內容的外觀不受頁面上的 CSS 的影響;如單復選框的內間距、背景色等樣式
有自己的尺寸;如、都有自己的尺寸
在很多 CSS 屬性上有自己的一套表現規則;vertical-align中,替換元素默認為baseline(字母x下邊緣),替換元素的基線就被硬生生定義成了元素的下邊緣
1.3 替換元素的尺寸計算規則替換元素的尺寸從內而外分為 3 類:固有尺寸、HTML 尺寸和 CSS 尺寸
固有尺寸指的是替換內容原本的尺寸;例如,圖片、視頻、input作為一個獨立文件存在的時 候,都是有著自己的寬度和高度的;
HTML 尺寸,“HTML 尺寸”只能通過HTML原生屬性改變,這些HTML原生屬性包括的width和height屬性、 的size屬性、的cols 和 rows 屬性
CSS 尺寸特指可以通過 CSS 的width和height或者max-width/min-width和max-height/min-height設置的尺寸,對應盒尺寸中的content box
尺寸計算優先級: CSS 尺寸 > HTML 尺寸 > 固有尺寸
1.4 替換元素與普通元素的轉換(理論上)猜想1:html中src屬性,img/video去掉src屬性后也就成了普通元素
猜想2:css中的content屬性,普通元素通過content屬性也可以展示元素中原本沒有的文字或圖片
注意,content屬性不僅能用于::before/::after中,還能用于元素中,不過有一定兼容性。
在 Chrome 瀏覽器下,所有的元素都支持 content 屬性,而其他瀏覽器僅在::before/::after 偽元素 中才有支持
案例1:基于偽元素的圖片內容生成技術
原理:img標簽有src時不支持偽類,沒有src時支持偽類;圖片沒有src時,::before和::after可以生效;給圖片添加一個src地址時,圖片從普通元素變成替換元素,原本都還支持的::before和::after此時全部無效
案例2:content 引入圖片
img { content: url(1.jpg); }
案例3:hover 實現圖片替換
img:hover { content: url(laugh-tear.png); }
案例4:優雅實現h1的SEO
《CSS 世界》
h1 { width: 180px; height: 36px; background: url(logo.png); /* 隱藏文字 */ text-indent: -999px; }
案例5:加載中動畫
正在加載中... 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中有三行內容,分別是‘...’,‘..’,‘.’;動畫位移dot即可實現正在加載的效果
案例6:計數器(了解)
三、padding屬性padding 對內聯元素水平和垂直方向上均有影響
padding 寬高百分比都是基于父元素的寬度計算
很多很多的前端同事有這么一個錯誤的認識:內聯元素的 padding 只會影響水平方向,不會影響垂直方向。這種認知是不準確的,內聯元素的 padding 在垂直方向同樣會影響布局,影響視覺表現。 只是因為內聯元素沒有可視寬度和可視高度的說法(clientHeight 和 clientWidth 永遠是 0),垂直方向的行為表現完全受 line-height 和 vertical-align 的影響,視覺上并沒有改變和上一行下一行內容的間距,因此,給我們的感覺就會是垂直 padding 沒有起作用。
案例1:增大點擊區域
a { padding: .25em 0; }
案例2:任意高度的分隔符
登錄注冊 a + a:before { content: ""; font-size: 0; padding: 10px 3px 1px; margin-left: 6px; border-left: 1px solid gray; }
案例3:等比例盒子
用于實現自適應布局,如網頁banner等比例大小圖片
/* 矩形 */ div { padding: 50%; } /* 正方形 */ div { padding: 25% 50%; }
案例4:圖形繪制
/* 菜單 */ .icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; /* 默認border-color:currentColor; */ border-top: 10px solid; border-bottom: 10px solid; /* 核心 */ background-color: currentColor; background-clip: content-box; }四、margin屬性
margin特點:
與padding不同,margin可以為負值;
與padding相同,margin的百分比也是相對于其父元素的width
4.1 margin負值應用(1)增大盒子尺寸
只有元素是“充分利用可用空間”狀態的時候,margin 才可以改變元素的可視尺寸
/* 無法改變尺寸 */ .father { width: 300px; margin: 0 -20px; } /* .son 尺寸變化 */.father { width: 300px; } .son { margin: 0 -20px; }
(2)經典無兼容兩欄布局
.column-box { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; }
布局原理:
默認情況下,垂直方向塊級元素上下距離是 0,一旦 margin-bottom:-9999px 就意味著后面所有元素和上面元 素的空間距離變成了-9999px,也就是后面元素都往上移動了 9999px。此時,通過神來一筆 padding-bottom:9999px 增加元素高度,這正負一抵消,對布局層并無影響,但卻帶來了我們 需要的東西— 視覺層多了 9999px 高度的可使用的背景色4.2 margin合并
塊級元素的上外邊距(margin-top)與下外邊距(margin-bottom)有時會合并為單個外邊距,這樣的現象稱為“margin 合并”。
兩個條件:塊級元素和僅發生在垂直方向上
margin合并的3種場景
(1)相鄰兄弟元素 margin 合并。這是 margin 合并中最常見、最基本的
第一行
第二行
p { margin: 1em 0; }
(2)父級和第一個/最后一個子元素
(3)空塊級元素的 margin 合并
.father { overflow: hidden; } .son { margin: 1em 0; }
此時.father所在的這個父級 如何阻止margin發生合并? 對于 margin-top 合并,可以進行如下操作(滿足一個條件即可): 父元素設置為塊狀格式化上下文元素; 父元素設置 border-top 值; 父元素設置 padding-top 值; 父元素和第一個子元素之間添加內聯元素進行分隔。 對于 margin-bottom 合并,可以進行如下操作(滿足一個條件即可): 父元素設置為塊狀格式化上下文元素; 父元素設置 border-bottom 值; 父元素設置 padding-bottom 值; 父元素和最后一個子元素之間添加內聯元素進行分隔; 父元素設置 height、min-height 或 max-height。 margin 合并的計算規則: “正正取大值”“正負值相加”“負負最負值” margin:auto 的填充規則如下 一側auto應用 兩側auto,水平垂直居中 注意: 幾個特點: border屬性值不支持百分比 border-style 默認值為none border-color 默認值為currentColor 應用1:圖片上傳hover變色 應用2:優雅增加點擊區域 應用3:三角形繪制 border能構成三角形和梯形的原理如下: 通過改變width/height以及border-width在不同方位的尺寸,可以改變三角形的傾角方位和尺寸 應用4:border等高布局 border等高布局的局限性: 由于 border 不支持百分比寬度,因此,適合至少一欄是定寬的布局 等高布局的欄目有限制。基本上,border 等 高布局只能滿足 2~3 欄的情況,除非正好是等比例的,那還可以使用 border-style:double 實現最多 7 欄布局 上一篇:《CSS世界》筆記一:流/元素/尺寸 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113556.html 摘要:一流體布局引出的幾種網頁布局方式布局方式描述特點場景靜態布局,傳統設計,網頁上的所有元素的尺寸一律使用作為單位。世界中,提出了流體布局的概念所謂流體布局,指的是利用元素流的特性實現的各類布局效果。
下一篇:《CSS世界》筆記二:盒模型四大家族
寫在前面
初讀《CSS世界》還是在深圳,屬于換工作前的充能。那時候除了工作,其他時間基本都在這本書里了,因為它的確吸引人。之前看過《CSS揭密》... 摘要:上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護與破壞寫在前面在頁面布局中,內聯元素的垂直對齊是比較常見和基礎的布局需求,但是我們往往會因為垂直對齊中的,而頭疼不已。
上一篇:《CSS世界》筆記二:盒模型四大家族下一篇:《CSS世界》筆記四:流的保護與破壞
寫在前面
在頁面布局中,內聯元素的垂直對齊是比較常見和基礎的布局需求,但是我們往往會因為垂直對齊中的1px,2px而頭疼不已... 摘要:每個元素都有一組樣式屬性,這些屬性涉及元素在文檔流中顯示時的不同方面,比如在文檔流中的位置邊框背景顏色等等。選擇符和要應用的樣式構成一條規則。上下文選擇器嚴格來講應該叫后代組合式選擇器。
原文地址:http://justclear.github.io/css-stylin-with-css-note-1
由于 CSS 作用的對象是 HTML ,所以作者在這章主要先講了一些基本的 HTM... 摘要:流體布局下的寬度分離原則寬度分離原則就是將獨立占用一層標簽而利用流動性在內部自適應呈現。為了不影響之前的布局我們需要重新計算的寬度。但是不支持屬性還是需要手動計算值。使用不建議使用通配符設置盒模型。
css流體布局下的寬度分離原則
寬度分離原則就是將width獨立占用一層標簽,而border、margin、padding利用流動性在內部自適應呈現。
為什么要寬度分離
分離是為了便于維護...
(1)如果一側定值,一側 auto,則 auto 為剩余空間大小。
(2)如果兩側均是 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 計算值 inline 的非替換元素的垂直 margin 是無效的。對于內聯替換元素, 垂直 margin 有效,并且沒有 margin 合并的問題,所以圖片永遠不會發生 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時 */
.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世界》筆記三:內聯元素與對齊相關文章
《CSS世界》筆記一:流/元素/尺寸
《CSS世界》筆記三:內聯元素與對齊
CSS 設計指南 學習筆記 一
讀《css世界》筆記(1)
發表評論
0條評論
閱讀 1083·2021-09-22 15:19
閱讀 1697·2021-08-23 09:46
閱讀 2226·2021-08-09 13:47
閱讀 1405·2019-08-30 15:55
閱讀 1408·2019-08-30 15:55
閱讀 1974·2019-08-30 15:54
閱讀 2795·2019-08-30 15:53
閱讀 713·2019-08-30 11:03