柚子快報(bào)激活碼778899分享:前端 CSS-寬高自適應(yīng)
CSS-寬高自適應(yīng)
一、寬高自適應(yīng)
1、窗口自適應(yīng)
(1)概念:元素的大小使用百分單位能根據(jù)屏幕窗口大小來(lái)改變大小
(2)前提:
必須使用CSS代碼為:
html,body{
height:100%;
}
若不使用以上代碼,則增加了百分比的高度會(huì)默認(rèn)繼承父元素高度的百分比,也就是body高度的百分比,即0px
2、寬度自適應(yīng)
(1)概念:元素不設(shè)置寬度,寬度默認(rèn)是被子元素或者是文本撐開(kāi):width默認(rèn)值為:auto
(2)寬度自適應(yīng)情況:
寬度自適應(yīng)的第一種情況是自適應(yīng)窗口的寬度:塊級(jí)元素默認(rèn)占瀏覽器的一整行寬度自適應(yīng)的第二種情況是繼承父元素的寬度:父元素的自適應(yīng)
注意: width:auto; (寬度自適應(yīng))和 width:100%; (寬度百分百),以上兩種書(shū)寫(xiě)實(shí)現(xiàn)效果是不是一致? 答: (1)如果沒(méi)有添加盒子模型時(shí),二者實(shí)現(xiàn)效果一致; (2)如果添加了盒子模型,auto+數(shù)值=auto,不會(huì)把盒子撐大;100%+數(shù)值>100% 會(huì)把盒子撐大
3、高度自適應(yīng)
概念:元素不設(shè)置高度,高度默認(rèn)是被子元素或者是文本撐開(kāi): height默認(rèn)值為:auto
二、最大最小寬高
動(dòng)態(tài)計(jì)算寬高
1、作用:calc() 函數(shù)是用來(lái)動(dòng)態(tài)計(jì)算長(zhǎng)度值的。
2、使用方法:用于動(dòng)態(tài)的計(jì)算寬度和高度,里面有兩個(gè)參數(shù)calc(參數(shù)1 - 參數(shù)2)
3、注意事項(xiàng):
(1)任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算;
(2)calc()函數(shù)支持 “+”,“-”,“*”,“/” 運(yùn)算;
(3)寬度和高度的應(yīng)用案例。
三、應(yīng)用場(chǎng)景
1、兩欄布局
(1)方法1:使用calc函數(shù)來(lái)動(dòng)態(tài)計(jì)算進(jìn)行兩欄布局
(2)方法2:使用自適應(yīng)的方法來(lái)完成兩欄布局
2、三欄布局
(1)方法1:使用calc函數(shù)來(lái)動(dòng)態(tài)計(jì)算進(jìn)行兩欄布局
(2)方法2:使用自適應(yīng)的方法來(lái)完成三欄布局
----------------自適應(yīng)+定位完成----------------------
----------------自適應(yīng)+浮動(dòng)----------------------
四、偽元素選擇器
1、匹配元素內(nèi)的第一行文本
(1)基本語(yǔ)法:
.box::first-line {
//CSS修飾語(yǔ)句
}
(2)實(shí)現(xiàn):只影響第一行的文本
2、匹配元素內(nèi)文本中的第一個(gè)字符
(1)基本語(yǔ)法:
.box::first-letter {
//CSS修飾語(yǔ)句
}
(2)實(shí)現(xiàn):只影響第一個(gè)字符
3、向元素內(nèi)正前方插入內(nèi)容
(1)基本語(yǔ)法:
選擇器::before {
content:"文本";
}
(2)實(shí)現(xiàn):向元素的正前方追加一個(gè)內(nèi)容,但無(wú)法選中該內(nèi)容
4、向元素內(nèi)正后方插入內(nèi)容
(1)基本語(yǔ)法:
選擇器::after {
content:"文本";
}
(2)實(shí)現(xiàn):向元素的正后方追加一個(gè)內(nèi)容,但無(wú)法選中該內(nèi)容
追加進(jìn)來(lái)的元素類型為行內(nèi)元素,無(wú)法實(shí)現(xiàn)寬高
五、高度塌陷
引起高度塌陷的原因:
父元素不設(shè)置高度,默認(rèn)的高度是被子元素?fù)伍_(kāi)的,如果子元素添加浮動(dòng),父元素的高度會(huì)降低,這種降低的效果被稱為高度塌陷—會(huì)影響布局
解決高度塌陷的方法
1、給父元素添加一個(gè)高度
添加的元素:min-height
缺點(diǎn):過(guò)于死板,若子元素內(nèi)容較多,則會(huì)產(chǎn)生溢出
2、給補(bǔ)位的盒子添加一個(gè)不讓補(bǔ)位的效果—即清除浮動(dòng)
添加的元素:clear:left/right/both
3、父元素底下只有一個(gè)子元素或者多個(gè)子元素都浮動(dòng)導(dǎo)致高度塌陷解決辦法
前提:父元素里面只有一個(gè)子元素或者多個(gè)子元素都浮動(dòng)
解決方法:
(1)自己手動(dòng)補(bǔ)一個(gè)元素,給這個(gè)補(bǔ)位的元素清除浮動(dòng)(補(bǔ)位元素必須為塊級(jí)元素)
如果是行內(nèi)元素,則無(wú)法清除浮動(dòng),因此手動(dòng)加的話,必須加塊級(jí)元素
(2)給父元素添加overflow:hidden
---會(huì)觸發(fā)BFC機(jī)制,會(huì)讓浮動(dòng)的元素繼續(xù)參與高度計(jì)算,用于解決高度塌陷問(wèn)題
4、解決高度塌陷的最優(yōu)方法
使用偽元素的方法來(lái)完成解決高度塌陷的問(wèn)題
方法:給父元素追加一個(gè)行內(nèi)元素,再將其轉(zhuǎn)化為塊級(jí)元素,最后給該元素清除浮動(dòng)即可
.wnqc:after {
/*必須值,基本語(yǔ)法*/
content: "";
/*追加進(jìn)來(lái)是行內(nèi)元素*/
display: block;
/*清除浮動(dòng)帶來(lái)的影響*/
clear: both;
width: 0px;
height: 0px;
font-size: 0px;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
柚子快報(bào)激活碼778899分享:前端 CSS-寬高自適應(yīng)
文章鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明,如有侵權(quán),聯(lián)系刪除。