国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

cikenerd / 1755人閱讀

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

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

盒模型的顯隱




    
    盒子的顯隱

定位

相對定位




    
    相對定位布局
    

    



    
1

絕對定位




    
    絕對定位布局

固定定位




    
    固定定位

z-index 屬性




    
    z-index
    


    

        
1

        
2

        
3

        
4

        
5

    
`

流式布局思想




    
    流式布局思想

hover 父子懸浮

總結(jié)

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

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

二.盒子的顯隱

display: none;
在頁面中不占位, 采用定位布局后, 顯示隱藏都不會影響其他標簽布局, 不需要用動畫處理時

opacity: 0;
在頁面中占位, 采用定位布局后, 顯示隱藏都不會影響其他標簽布局, 需要采用動畫處理時

三.定位布局

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

四.流式布局思想

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1454.html

相關(guān)文章

  • css之盒模型

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

    SKYZACK 評論0 收藏0

  • 前端知識歸納

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

    sixleaves 評論0 收藏0

  • 前端知識歸納

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

    NotFound 評論0 收藏0

  • 前端知識歸納

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

    魏憲會 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<