亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端（六）之盒模型顯隱、定位與流式布局思想

cikenerd / 1829人閱讀

摘要：前端之盒模型顯隱定位與流式布局思想前端之盒模型顯隱定位與流式布局思想盒模型的顯隱盒模型的顯隱盒子的顯隱通過(guò)控制盒子的顯示方式來(lái)隱藏盒子該隱藏方式在頁(yè)面中不占位通過(guò)控制盒子的透明度來(lái)隱藏盒子該隱藏方式在頁(yè)面中占位注一般顯隱操作的盒子都是采用

前端之盒模型顯隱、定位與流式布局思想

盒模型的顯隱




    
    盒子的顯隱

定位

相對(duì)定位




    
    相對(duì)定位布局
    

    



    
1

絕對(duì)定位




    
    絕對(duì)定位布局

固定定位




    
    固定定位

z-index 屬性




    
    z-index
    


    

        
1

        
2

        
3

        
4

        
5

    
`

流式布局思想




    
    流式布局思想

hover 父子懸浮

總結(jié)

一.浮動(dòng)布局的總結(jié)

1.同一結(jié)構(gòu)下, 如果采用浮動(dòng)布局,所有的同級(jí)別兄弟標(biāo)簽都要采用浮動(dòng)布局
2.浮動(dòng)布局的盒子寬度在沒(méi)有設(shè)定時(shí)會(huì)自適應(yīng)內(nèi)容寬度

二.盒子的顯隱

display: none;
在頁(yè)面中不占位, 采用定位布局后, 顯示隱藏都不會(huì)影響其他標(biāo)簽布局, 不需要用動(dòng)畫處理時(shí)

opacity: 0;
在頁(yè)面中占位, 采用定位布局后, 顯示隱藏都不會(huì)影響其他標(biāo)簽布局, 需要采用動(dòng)畫處理時(shí)

三.定位布局

什么是定位布局: 可以通過(guò)上下左右四個(gè)方位完成自身布局的布局方式
  • 相對(duì)定位
參考系: 自身原有位置
position: relative;  => 打開(kāi)了四個(gè)定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影響自身原有位置
4.不脫離文檔流
  • 絕對(duì)定位
參考系: 最近的定位父級(jí)
position: absolute;  => 打開(kāi)了四個(gè)定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父級(jí)必須自己設(shè)置寬高
3.完全離文檔流
  • 固定定位
參考系: 頁(yè)面窗口
position: fixed;  => 打開(kāi)了四個(gè)定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相對(duì)于頁(yè)面窗口是靜止的
3.完全脫離文檔流
  • z-index
修改顯示層級(jí)(在發(fā)生重疊時(shí)使用), 值取正整數(shù), 值不需要排序隨意規(guī)定, 值大的顯示層級(jí)高

四.流式布局思想

1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1454.html

相關(guān)文章

  • css之盒模型

    摘要：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。規(guī)定應(yīng)該從父元素繼承屬性的值。盒模型 1.定義 1.任意一個(gè)元素都可以當(dāng)作盒模型 2.盒子的大小由內(nèi)容寬高(width/height)+邊距(padding)+邊框(border) 3.盒子由外邊距(margin),影響盒子的位置 廣義盒模型:文檔中所有功能性及內(nèi)容性標(biāo)簽,及文檔中所有顯示性標(biāo)簽. 狹...

    SKYZACK 評(píng)論0 收藏0

  • 前端知識(shí)歸納

    摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲(chóng)和...

    魏憲會(huì) 評(píng)論0 收藏0

  • 前端知識(shí)歸納

    摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲(chóng)和...

    sixleaves 評(píng)論0 收藏0

  • 前端知識(shí)歸納

    摘要：繼承性子標(biāo)簽會(huì)繼承父標(biāo)簽樣式優(yōu)先級(jí)行內(nèi)樣式選擇器類選擇器標(biāo)簽選擇器通配符繼承機(jī)制創(chuàng)建了的元素中，在垂直方向上的會(huì)發(fā)生重疊。 技能考察： 一、關(guān)于Html 1、html語(yǔ)義化標(biāo)簽的理解; 結(jié)構(gòu)化的理解; 能否寫出簡(jiǎn)潔的html結(jié)構(gòu); SEO優(yōu)化 a、理解：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí) 讓瀏覽器的爬蟲(chóng)和...

    NotFound 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<