欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

目錄

柚子快報(bào)激活碼778899分享:前端 CSS-寬高自適應(yīng)

柚子快報(bào)激活碼778899分享:前端 CSS-寬高自適應(yīng)

http://yzkb.51969.com/

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)行兩欄布局

Document

(2)方法2:使用自適應(yīng)的方法來(lái)完成兩欄布局

Document

2、三欄布局

(1)方法1:使用calc函數(shù)來(lái)動(dòng)態(tài)計(jì)算進(jìn)行兩欄布局

Document

(2)方法2:使用自適應(yīng)的方法來(lái)完成三欄布局

----------------自適應(yīng)+定位完成----------------------

Document

----------------自適應(yīng)+浮動(dòng)----------------------

Document

四、偽元素選擇器

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)

http://yzkb.51969.com/

文章鏈接

評(píng)論可見(jiàn),查看隱藏內(nèi)容

本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。

轉(zhuǎn)載請(qǐng)注明,如有侵權(quán),聯(lián)系刪除。

本文鏈接:http://gantiao.com.cn/post/18812018.html

發(fā)布評(píng)論

您暫未設(shè)置收款碼

請(qǐng)?jiān)谥黝}配置——文章設(shè)置里上傳

掃描二維碼手機(jī)訪問(wèn)

文章目錄