柚子快報(bào)激活碼778899分享:前端 CSS進(jìn)階
柚子快報(bào)激活碼778899分享:前端 CSS進(jìn)階
1. 盒子模型
分為 :邊框、外邊距、內(nèi)邊距、和 實(shí)際內(nèi)容
1.1 邊框(border)
1.邊框的使用
border可以設(shè)置元素的邊框。邊框有三部分組成:邊框?qū)挾?粗細(xì)) 邊框樣式 邊框顏色;語法:
border : border-width || border-style || border-color;
none:沒有邊框即忽略所有邊框的寬度(默認(rèn)值)solid:邊框?yàn)閱螌?shí)線(最為常用的)dashed:邊框?yàn)樘摼€dotted:邊框?yàn)辄c(diǎn)線
邊框的寫法
邊框簡(jiǎn)寫:
border: 1px solid red;
邊框分開寫法:
border-top:1px solid red;
2. 表格的細(xì)線邊框
border-collapse 屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。語法: border-collapse:collapse;
1.collapse 單詞是合并的意思 2.border-collapse: collapse; 表示相鄰邊框合并在一起
3.邊框會(huì)影響盒子實(shí)際大小
邊框會(huì)額外增加盒子的實(shí)際大小。因此我們有兩種方案解決:
測(cè)量盒子大小的時(shí)候,不量邊框。如果測(cè)量的時(shí)候包含了邊框,則需要 width/height 減去邊框?qū)挾?
1.2 內(nèi)邊距(padding)
1.內(nèi)邊距的使用
padding 屬性用于設(shè)置內(nèi)邊距,即邊框與內(nèi)容之間的距離。語法:
合寫屬性
padding: 5px 上下左右皆為5px
padding:5px 10px 上下為5px,左右為10px
padding:5px 10px 20px 上為5px ,左右為10px 下為20px
padding:5px 10px 20px 25px 上為5px ,右為10px 下為20px 左為25px (順時(shí)針)
分寫屬性
padding-left ,padding-right ,padding-top ,padding-bottom
2.內(nèi)邊距會(huì)影響盒子實(shí)際大小
如果盒子已經(jīng)有了寬度和高度,此時(shí)再指定內(nèi)邊框,會(huì)撐大盒子。如何盒子本身沒有指定width/height屬性, 則此時(shí)padding不會(huì)撐開盒子大小。解決方式:如果保證盒子跟效果圖大小保持一致,則讓 width/height 減去多出來的內(nèi)邊距大小即可。
1.3 外邊距(margin)
1.外邊距的使用
margin 屬性用于設(shè)置外邊距,即控制盒子和盒子之間的距離。
2.外邊距的應(yīng)用
外邊距可以讓塊級(jí)盒子水平居中的兩個(gè)條件:
盒子必須指定了寬度(width)。盒子左右的外邊距都設(shè)置為 auto 。
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:以上方法是讓塊級(jí)元素水平居中,行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align:center 即可。
3.外邊距合并
使用 margin 定義塊元素的垂直外邊距時(shí),可能會(huì)出現(xiàn)外邊距的合并。 主要有兩種情況:
相鄰塊元素垂直外邊距的合并: 當(dāng)上下相鄰的兩個(gè)塊元素(兄弟關(guān)系)相遇時(shí),如果上面的元素有下外邊距 margin-bottom,下面的元素有上外邊距 margin-top ,則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。 解決方案: 盡量只給一個(gè)盒子添加 margin 值。 嵌套塊元素垂直外邊距的塌陷 對(duì)于兩個(gè)嵌套關(guān)系(父子關(guān)系)的塊元素,父元素有上外邊距同時(shí)子元素也有上外邊距,此時(shí)父元素會(huì)塌陷較大的外邊距值。
注意:浮動(dòng)的盒子不會(huì)有塌陷問題。
解決方案:
可以為父元素定義上邊框??梢詾楦冈囟x上內(nèi)邊距??梢詾楦冈靥砑?overflow:hidden。
4.清除內(nèi)外邊距
網(wǎng)頁元素很多都帶有默認(rèn)的內(nèi)外邊距,而且不同瀏覽器默認(rèn)的也不一致。因此我們?cè)诓季智?,首先要清除下網(wǎng)頁元素的內(nèi)外邊距。
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
注意:行內(nèi)元素為了照顧兼容性,盡量只設(shè)置左右內(nèi)外邊距,不要設(shè)置上下內(nèi)外邊距。但是轉(zhuǎn)換為塊級(jí)和行內(nèi)塊元素就可以了
2. 其他樣式
2.1 圓角邊框
在 CSS3 中,新增了圓角邊框樣式,這樣我們的盒子就可以變圓角了。
border-radius 屬性用于設(shè)置元素的外邊框圓角。
border-radius:length;
參數(shù)值可以為數(shù)值或百分比的形式如果是正方形,想要設(shè)置為一個(gè)圓,把數(shù)值修改為高度或者寬度的一半即可,或者直接寫為 50%該屬性是一個(gè)簡(jiǎn)寫屬性,可以跟四個(gè)值,分別代表左上角、右上角、右下角、左下角分開寫:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius兼容性 ie9+ 瀏覽器支持, 但是不會(huì)影響頁面布局,可以放心使用
2.2 盒子陰影
CSS3 中新增了盒子陰影,我們可以使用 box-shadow 屬性為盒子添加陰影。
box-shadow: h-shadow v-shadow blur spread color inset;
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3) inset;
}
2.3 文字陰影
在 CSS3 中,我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。
text-shadow: h-shadow v-shadow blur color;
div {
font-size: 50px;
color: orangered;
font-weight: 700;
text-shadow: 10px 10px 10px blue;
}
3. 浮動(dòng)
3.1 傳統(tǒng)網(wǎng)頁布局的三種方式
CSS 提供了三種傳統(tǒng)布局方式(簡(jiǎn)單說,就是盒子如何進(jìn)行排列順序):
普通流(標(biāo)準(zhǔn)流)浮動(dòng)定位 這三種布局方式都是用來擺放盒子的,盒子擺放到合適位置,布局自然就完成了。 注意:實(shí)際開發(fā)中,一個(gè)頁面基本都包含了這三種布局方式 。
3.2 標(biāo)準(zhǔn)流(普通流/文檔流)
所謂的標(biāo)準(zhǔn)流: 就是標(biāo)簽按照規(guī)定好默認(rèn)方式排列
塊級(jí)元素會(huì)獨(dú)占一行,從上向下順序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行內(nèi)元素會(huì)按照順序,從左到右順序排列,碰到父元素邊緣則自動(dòng)換行。常用元素:span、a、i、em 等 以上都是標(biāo)準(zhǔn)流布局,我們前面學(xué)習(xí)的就是標(biāo)準(zhǔn)流,標(biāo)準(zhǔn)流是最基本的布局方式。
3.3 浮動(dòng)
3.3.1. 為什么使用浮動(dòng)
有很多的布局效果,標(biāo)準(zhǔn)流沒有辦法完成,此時(shí)就可以利用浮動(dòng)完成布局。 因?yàn)楦?dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式.
3.3.2. 浮動(dòng)最典型的應(yīng)用
可以讓多個(gè)塊級(jí)元素一行內(nèi)排列顯示。
3.3.3. 網(wǎng)頁布局第一準(zhǔn)則
多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流,多個(gè)塊級(jí)元素橫向排列找浮動(dòng)。
3.3.4 什么是浮動(dòng)
float 屬性用于創(chuàng)建浮動(dòng)框,將其移動(dòng)到一邊,直到左邊緣或右邊緣觸及包含塊或另一個(gè)浮動(dòng)框的邊緣。
選擇器 { float: 屬性值; }
3.3.5 浮動(dòng)特性
浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo):浮動(dòng)的盒子不再保留原先的位置) 浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊
注意: 浮動(dòng)的元素是互相貼靠在一起的(不會(huì)有縫隙),如果父級(jí)寬度裝不下這些浮動(dòng)的盒子,多出的盒子會(huì)另起一行對(duì)齊。
浮動(dòng)的特性浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性浮動(dòng)元素的大小根據(jù)內(nèi)容來決定浮動(dòng)的盒子中間是沒有縫隙的
3.3.6 浮動(dòng)元素經(jīng)常和標(biāo)準(zhǔn)流父級(jí)搭配使用
先用標(biāo)準(zhǔn)流父元素排列上下位置, 之后內(nèi)部子元素采取浮動(dòng)排列左右位置. 符合網(wǎng)頁布局第一準(zhǔn)側(cè)。
3.4 浮動(dòng)布局注意點(diǎn)
浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配。 先用標(biāo)準(zhǔn)流的父元素排列上下位置, 之后內(nèi)部子元素采取浮動(dòng)排列左右位置一個(gè)元素浮動(dòng)了,理論上其余的兄弟元素也要浮動(dòng)。 一個(gè)盒子里面有多個(gè)子盒子,如果其中一個(gè)盒子浮動(dòng)了,其他兄弟也應(yīng)該浮動(dòng),以防止引起問題。浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流,不會(huì)影響前面的標(biāo)準(zhǔn)流.
3.5 清除浮動(dòng)
3.5.1為什么清除浮動(dòng)
由于父級(jí)盒子很多情況下,不方便給高度,但是子盒子浮動(dòng)又不占有位置,最后父級(jí)盒子高度為 0 時(shí),就會(huì)影響下面的標(biāo)準(zhǔn)流盒子。
父級(jí)沒高度。子盒子浮動(dòng)了。影響下面布局了,我們就應(yīng)該清除浮動(dòng)了。
3.5.2 清除浮動(dòng)的本質(zhì)
清除浮動(dòng)的本質(zhì)是清除浮動(dòng)元素造成的影響:浮動(dòng)的子標(biāo)簽無法撐開父盒子的高度。
注意:
如果父盒子本身有高度,則不需要清除浮動(dòng)清除浮動(dòng)之后,父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。父級(jí)有了高度,就不會(huì)影響下面的標(biāo)準(zhǔn)流了
3.5.3 清除浮動(dòng)樣式
選擇器{clear:屬性值;}
我們實(shí)際工作中, 幾乎只用 clear: both; 清除浮動(dòng)的策略是: 閉合浮動(dòng).
3.5.4 清除浮動(dòng)的多種方式
額外標(biāo)簽法 :額外標(biāo)簽法也稱為隔墻法,是 W3C 推薦的做法。 使用方式: ? 額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽。
例如
,或者其他標(biāo)簽(如等)。
優(yōu)點(diǎn): 通俗易懂,書寫方便。 缺點(diǎn): 添加許多無意義的標(biāo)簽,結(jié)構(gòu)化較差。 ?注意: 要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素。
父級(jí)添加 overflow 屬性:可以給父級(jí)添加 overflow 屬性,將其屬性值設(shè)置為 hidden、 auto 或 scroll 。
overflow:hidden | auto | scroll;
優(yōu)點(diǎn):代碼簡(jiǎn)潔 缺點(diǎn):無法顯示溢出的部分 注意:是給父元素添加代碼
父級(jí)添加after偽元素 :after 方式是額外標(biāo)簽法的升級(jí)版。給父元素添加:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 專有 */
*zoom: 1;
}
優(yōu)點(diǎn):沒有增加標(biāo)簽,結(jié)構(gòu)更簡(jiǎn)單 缺點(diǎn):照顧低版本瀏覽器 代表網(wǎng)站: 百度、淘寶網(wǎng)、網(wǎng)易等
父級(jí)添加雙偽元素:給父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優(yōu)點(diǎn):代碼更簡(jiǎn)潔 缺點(diǎn):照顧低版本瀏覽器 代表網(wǎng)站:小米、騰訊等
4. 定位
定位模式是否脫標(biāo)移動(dòng)位置是否常用static 靜態(tài)定位否不能使用邊偏移很少relative 相對(duì)定位否 (占有位置)相對(duì)于自身位置移動(dòng)基本單獨(dú)使用absolute絕對(duì)定位是(不占有位置)帶有定位的父級(jí)要和定位父級(jí)元素搭配使用fixed 固定定位是(不占有位置)瀏覽器可視區(qū)單獨(dú)使用,不需要父級(jí)sticky 粘性定位否 (占有位置)瀏覽器可視區(qū)當(dāng)前階段少
4.1 為什么使用定位
1.浮動(dòng):可以讓多個(gè)塊級(jí)盒子一行沒有縫隙排列顯示, 經(jīng)常用于橫向排列盒子。 2.定位:則是可以讓盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置,并且可以壓住其他盒子。
4.2 定位組成
定位:將盒子定在某一個(gè)位置,所以定位也是在擺放盒子, 按照定位的方式移動(dòng)盒子 定位也是用來布局的,它有兩部分組成:
定位 = 定位模式 + 邊偏移 定位模式 用于指定一個(gè)元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。
4.2.1 邊偏移(方位名詞)
邊偏移 就是定位的盒子移動(dòng)到最終位置。有 top、bottom、left 和 right 4 個(gè)屬性。
邊偏移屬性示例描述toptop: 80px頂端偏移量,定義元素相對(duì)于其父元素上邊線的距離。bottombottom: 80px底部偏移量,定義元素相對(duì)于其父元素下邊線的距離。leftleft: 80px左側(cè)偏移量,定義元素相對(duì)于其父元素左邊線的距離。rightright: 80px右側(cè)偏移量,定義元素相對(duì)于其父元素右邊線的距離
定位的盒子有了邊偏移才有價(jià)值。 一般情況下,凡是有定位地方必定有邊偏移。
4.2.2 定位模式 (position)
在 CSS 中,通過 position 屬性定義元素的定位模式,語法如下:
選擇器 {
position: 屬性值;
}
定位模式是有不同分類的,在不同情況下,我們用到不同的定位模式。 定位模式?jīng)Q定元素的定位方式 ,它通過 CSS 的 position 屬性來設(shè)置,其值可以分為四個(gè):
值語義static靜態(tài)定位relative相對(duì)定位absolute絕對(duì)定位fixed固定定位
4.3 定位模式介紹
4.3.1. 靜態(tài)定位(static)
靜態(tài)定位是元素的默認(rèn)定位方式,無定位的意思。它相當(dāng)于 border 里面的none,靜態(tài)定位static,不要定位的時(shí)候用。
選擇器 {
position: static;
}
靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置,它沒有邊偏移。靜態(tài)定位在布局時(shí)我們幾乎不用的
4.3.2 相對(duì)定位(relative) - 重要
相對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它自己原來的位置來說的。
選擇器 {
position: relative;
}
相對(duì)定位的特點(diǎn):(務(wù)必記?。?1.它是相對(duì)于自己原來的位置來移動(dòng)的(移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來的位置)。 2.原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有 ,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它。 因此,相對(duì)定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對(duì)定位當(dāng)?shù)?。?/p>
4.3.3 絕對(duì)定位(relative) - 重要
1.絕對(duì)定位的介紹
絕對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它祖先元素來說的。語法:
選擇器 {
position: absolute;
}
完全脫標(biāo) —— 完全不占位置;父元素或祖先元素沒有定位:則以瀏覽器為準(zhǔn)定位(Document 文檔)。
父元素要有定位:元素將依據(jù)最近的已經(jīng)定位(絕對(duì)、固定或相對(duì)定位)的父元素(祖先)進(jìn)行定位。
絕對(duì)定位的特點(diǎn)總結(jié):(務(wù)必記?。?/p>
如果沒有祖先元素或者祖先元素沒有定位,則以瀏覽器為基準(zhǔn)定位(Document 文檔)。如果祖先元素有定位(相對(duì)、絕對(duì)、固定定位),則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。絕對(duì)定位不再占有原先的位置。所以絕對(duì)定位是脫離標(biāo)準(zhǔn)流的。(脫標(biāo))
2.定位口訣—子絕父相
子級(jí)定位是絕對(duì)定位的話,父級(jí)要用相對(duì)定位: ①子級(jí)絕對(duì)定位,不會(huì)占有位置,可以放到父盒子里面的任何一個(gè)地方,不會(huì)影響其他的兄弟盒子。 ②父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。 ③父盒子布局時(shí),需要占有位置,因此父親只能是相對(duì)定位。
總結(jié): 因?yàn)楦讣?jí)需要占有位置,因此是相對(duì)定位, 子盒子不需要占有位置,則是絕對(duì)定位 當(dāng)然,子絕父相不是永遠(yuǎn)不變的,如果父元素不需要占有位置,子絕父絕也會(huì)遇到。
4.3.4 固定定位(fixed) - 重要
固定定位:是元素固定于瀏覽器可視區(qū)的位置。(認(rèn)死理型) 主要使用場(chǎng)景: 可以在瀏覽器頁面滾動(dòng)時(shí)元素的位置不會(huì)改變。語法:
選擇器 {
position: fixed;
}
固定定位的特點(diǎn):(務(wù)必記?。?/p>
1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素。
跟父元素沒有任何關(guān)系不隨滾動(dòng)條滾動(dòng)。
2.固定定位不在占有原先的位置。
固定定位也是脫標(biāo)的,其實(shí)固定定位也可以看做是一種特殊的絕對(duì)定位。(認(rèn)死理型)
完全脫標(biāo)—— 完全不占位置; 只認(rèn)瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設(shè)置元素的位置;
跟父元素沒有任何關(guān)系;單獨(dú)使用的不隨滾動(dòng)條滾動(dòng)。
4.3.5 粘性定位(fixed) - 重要
粘性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合。 Sticky 粘性的語法:
選擇器 {
position: sticky;
top: 10px;
}
粘性定位的特點(diǎn): 1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素(固定定位特點(diǎn)) 2.粘性定位占有原先的位置(相對(duì)定位特點(diǎn)) 3.必須添加 top 、left、right、bottom 其中一個(gè)才有效 跟頁面滾動(dòng)搭配使用。 兼容性較差,IE 不支持。
4.4 堆疊順序 z-index
在使用定位布局時(shí),可能會(huì)出現(xiàn)盒子重疊的情況。此時(shí),可以使用 z-index 來控制盒子的前后次序 (z軸)語法:
選擇器 {
z-index: 1;
}
z-index 的特性如下:
1.屬性值:正整數(shù)、負(fù)整數(shù)或 0,默認(rèn)值是 0,數(shù)值越大,盒子越靠上; 2. 如果屬性值相同,則按照書寫順序,后來居上; 3. 數(shù)字后面不能加單位。 注意:z-index 只能應(yīng)用于相對(duì)定位、絕對(duì)定位和固定定位的元素,其他標(biāo)準(zhǔn)流、浮動(dòng)和靜態(tài)定位無效。
4.5 定位(position)的拓展
4.5.1 絕對(duì)定位的盒子居中
注意:加了絕對(duì)定位/固定定位的盒子不能通過設(shè)置 margin: auto 設(shè)置水平居中。 但是可以通過以下計(jì)算方法實(shí)現(xiàn)水平和垂直居中,可以按照下圖的方法:
4.5.2 定位特殊特性
絕對(duì)定位和固定定位(脫標(biāo))也和浮動(dòng)類似
行內(nèi)元素添加絕對(duì)或固定定位,可以直接設(shè)置高度和寬度行內(nèi)元素添加絕對(duì)或固定定位,如果不給寬度和高度,默認(rèn)大小是內(nèi)容大小。
display 是 顯示模式,可以改變顯示模式有以下方式:
添加display:inline-block 轉(zhuǎn)換為行內(nèi)塊可以利用浮動(dòng)float轉(zhuǎn)換為行內(nèi)塊(脫標(biāo))利用絕對(duì)定位或固定定位也和浮動(dòng)類似,默認(rèn)轉(zhuǎn)換為行內(nèi)塊元素。
所有一個(gè)行內(nèi)的盒子,如果添加了浮動(dòng)、絕對(duì)或固定定位,不要轉(zhuǎn)換,就可以對(duì)盒子進(jìn)行設(shè)置寬度和高度。
4.5.3 脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷
浮動(dòng)元素、**絕對(duì)定位(固定定位)**元素的都不會(huì)觸發(fā)外邊距合并的問題。 (我們以前是用padding border overflow解決的)
也就是說,我們給盒子改為了浮動(dòng)或者定位,就不會(huì)有垂直外邊距合并的問題了。
4.5.4 絕對(duì)定位(固定定位)會(huì)完全壓住盒子
浮動(dòng)的元素不同,只會(huì)壓住它標(biāo)準(zhǔn)流的盒子,但是不會(huì)壓住標(biāo)準(zhǔn)流盒子中的文字(圖片)。但是絕對(duì)定位(固定定位)會(huì)壓住標(biāo)準(zhǔn)流的內(nèi)容浮動(dòng)之所以不會(huì)壓住文字,是因?yàn)楦?dòng)的最初目的是為了做文字環(huán)繞的,文字圍繞浮動(dòng)元素。
5. 網(wǎng)頁布局的總結(jié)
通過盒子模型,html就是一個(gè)盒子 通過CSS浮動(dòng)、定位 可以讓每個(gè)盒子排列成為網(wǎng)頁。 一個(gè)完整的網(wǎng)頁,是標(biāo)準(zhǔn)流、浮動(dòng)、定位一起完成布局的,每個(gè)都有自己的專門用法。
5.1. 標(biāo)準(zhǔn)流
可以讓盒子上下排列或者左右排列,垂直的塊級(jí)盒子顯示就用標(biāo)準(zhǔn)流布局。
5.2. 浮動(dòng)
可以讓多個(gè)塊級(jí)元素一行顯示或者左右對(duì)齊盒子,多個(gè)塊級(jí)盒子水平顯示就用浮動(dòng)布局
5.3. 定位
定位最大的特點(diǎn)是有層疊的概念,就是可以讓多個(gè)盒子前后疊壓來顯示。如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局。
7. 元素的顯示與隱藏
目的:讓一個(gè)元素在頁面中消失或者顯示出來場(chǎng)景: 類似網(wǎng)站廣告,當(dāng)我們點(diǎn)擊關(guān)閉就不見了,但是我們重新刷新頁面,會(huì)重新出現(xiàn)!
屬性區(qū)別用途display 顯示 (重點(diǎn))隱藏對(duì)象,不保留位置配合后面js做特效,比如下拉菜單,原先沒有,鼠標(biāo)經(jīng)過,顯示下拉菜單, 應(yīng)用極為廣泛visibility 可見性 (了解)隱藏對(duì)象,保留位置使用較少overflow 溢出(重點(diǎn))只是隱藏超出大小的部分1. 可以清除浮動(dòng) 2. 保證盒子里面的內(nèi)容不會(huì)超出該盒子范圍
7.1 display 顯示(重點(diǎn))
display 設(shè)置或檢索對(duì)象是否及如何顯示
display: none 隱藏對(duì)象
display:block 除了轉(zhuǎn)換為塊級(jí)元素之外,同時(shí)還有顯示元素的意思。
特點(diǎn):
display 隱藏元素后,不再占有原來的位置。搭配 JS 可以做很多的網(wǎng)頁特效。實(shí)際開發(fā)場(chǎng)景:
配合后面js做特效,比如下拉菜單,原先沒有,鼠標(biāo)經(jīng)過,顯示下拉菜單, 應(yīng)用極為廣泛
7.2 visibility 可見性 (了解)
visibility 屬性用于指定一個(gè)元素應(yīng)可見還是隱藏。
visibility:visible ; 元素可視
visibility:hidden; 元素隱藏
特點(diǎn):
visibility 隱藏元素后,繼續(xù)占有原來的位置。(停職留薪)如果隱藏元素想要原來位置, 就用 visibility:hidden如果隱藏元素不想要原來位置, 就用 display:none (用處更多 重點(diǎn))
7.3 overflow 溢出(重點(diǎn))
overflow 屬性指定了如果內(nèi)容溢出一個(gè)元素的框(超過其指定高度及寬度) 時(shí),會(huì)發(fā)生什么。
屬性值描述visible不剪切內(nèi)容也不添加滾動(dòng)條hidden不顯示超過對(duì)象尺寸的內(nèi)容,超出的部分隱藏掉scroll不管超出內(nèi)容否,總是顯示滾動(dòng)條auto超出自動(dòng)顯示滾動(dòng)條,不超出不顯示滾動(dòng)條
一般情況下,我們都不想讓溢出的內(nèi)容顯示出來,因?yàn)橐绯龅牟糠謺?huì)影響布局。但是如果有定位的盒子, 請(qǐng)慎用overflow:hidden 因?yàn)樗鼤?huì)隱藏多余的部分。
實(shí)際開發(fā)場(chǎng)景:
清除浮動(dòng)隱藏超出內(nèi)容,隱藏掉, 不允許內(nèi)容超過父盒子。
11. CSS屬性書寫順序(重點(diǎn))
布局定位屬性:display / position / float / clear / visibility / overflow(建議 display 第一個(gè)寫,畢竟關(guān)系到模式)自身屬性:width / height / margin / padding / border / background文本屬性:color / font / text-decoration / text-align / vertical-align / white- space / break-word其他屬性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
border-radius: 10px;
}
實(shí)際開發(fā)中問題
1.導(dǎo)航欄注意點(diǎn):
實(shí)際開發(fā)中,我們不會(huì)直接用鏈接 a,而是使用li包含鏈接li+a
柚子快報(bào)激活碼778899分享:前端 CSS進(jìn)階
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明,如有侵權(quán),聯(lián)系刪除。