成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

構(gòu)建靜態(tài)頁面 之 [ 盒子模型 ]

coordinate35 / 1866人閱讀

摘要：盒子模型描述每一個元素都可以叫做是盒子模型盒子模型的組成內(nèi)容區(qū)元素中內(nèi)容文本圖片等等內(nèi)邊距內(nèi)容區(qū)到邊框的距離邊距內(nèi)容區(qū)的邊界外邊距盒子與盒子之間的距離屬性表示設(shè)置元素的邊框?qū)傩允呛唽憣傩钥梢苑譃楸硎具吙虻膶挾缺硎具吙虻臉邮?/p>

盒子模型 描述

每一個元素都可以叫做是盒子模型

盒子模型的組成

內(nèi)容區(qū) - 元素中內(nèi)容（文本、圖片、等等）

內(nèi)邊距 - 內(nèi)容區(qū)到邊框的距離

邊距 - 內(nèi)容區(qū)的邊界

外邊距 - 盒子與盒子之間的距離

border屬性

表示設(shè)置元素的邊框

border屬性是簡寫屬性,可以分為

border-width - 表示邊框的寬度

border-style - 表示邊框的樣式

border-color - 表示邊框的顏色

簡寫順序: 邊框?qū)挾?邊框樣式 邊框顏色

border屬性也可以按照上、右、下、左四個方向進(jìn)行劃分來分別設(shè)置

分別設(shè)置邊框時，設(shè)置的順序固定不變的：上、右、下、左


    
    邊框
border-radius屬性

表示設(shè)置元素邊框的圓角

屬性值表示為圓的半徑

當(dāng)屬性值等于元素寬度的一半時,會得到一個圓形

也可以寫多個屬性值,順序為: 左上角 右上角 右下角 左下角


    
    邊框的圓角
padding屬性

表示設(shè)置元素內(nèi)邊距

內(nèi)邊距可以分上、右、下、左、四個方向進(jìn)行設(shè)置

也可以同時寫多個值分別設(shè)置，設(shè)置的順序固定不變的：上、右、下、左

內(nèi)邊距無法設(shè)置顏色，會顯示與背景相同的顏色

設(shè)置內(nèi)邊距時會改變元素本身的大小


    
    內(nèi)邊距
margin屬性

表示設(shè)置外邊距

外邊距也可以分上、右、下、左、四個方向來分別進(jìn)行設(shè)置

在設(shè)置上外邊距和左外邊距時會影響到元素本身的顯示位置

在設(shè)置下外邊距和右外邊距時會影響到下一個相鄰元素的顯示位置


    
    外邊距
外邊距的重疊

兩個垂直方向排列的相鄰元素分別設(shè)置上外邊距和下外邊距時，顯示出的效果并不是兩個數(shù)值相加，而是只顯示兩個數(shù)值中大的

在水平方向排列的相鄰元素分別設(shè)置左外邊距和右外邊距時，不會出現(xiàn)外邊距重疊的效果


    
    外邊距的重疊
外邊距的傳遞

表示在父子結(jié)構(gòu)中，如果子級設(shè)置上外邊距，父級也會一起調(diào)整顯示位置

外邊距傳遞的效果只會在父子結(jié)構(gòu)中子級設(shè)置“上外邊距”才會出現(xiàn)

解決方法

通過為父級設(shè)置上內(nèi)邊距來調(diào)整子級想要顯示的位置

因為：子級的上外邊距等于父級的上內(nèi)邊距

注意：在設(shè)置內(nèi)邊距時會改變元素本身的顯示大小


    
    外邊距的傳遞
元素的水平居中

外邊距也可以用來實現(xiàn)元素的水平方向居中

margin: 0 auto; - 固定寫法

auto - 表示自適應(yīng)

外邊距水平方向的屬性值必須為 auto ， 垂直方向的屬性值可以根據(jù)需求來設(shè)置

在設(shè)置時，目標(biāo)元素的寬度不能等于父級元素的寬度


    
    元素水平居中
box-shadow屬性

表示設(shè)置盒子模型的陰影

屬性值有

水平方向偏移量

垂直方向偏移量

模糊度

顏色


    
    盒子模型
box-sizing屬性

表示改變盒子模型的類型

content-box屬性值

表示標(biāo)準(zhǔn)盒子類型（默認(rèn)值）

會改變元素的顯示大小

最終顯示寬度 = 寬度 + 內(nèi)邊距（左、右） + 邊框（左、右）

最終顯示高度 = 高度 + 內(nèi)邊距（上、下） + 邊框（上、下）

border-box屬性值

表示怪異盒子類型

不會改變元素的顯示大小

最終顯示寬度 = 寬度

最終顯示高度 = 高度


    
    盒子模型的類型

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52931.html

相關(guān)文章

  • 構(gòu)建靜態(tài)頁面 之 [ 盒子模型 ]

    摘要：盒子模型描述每一個元素都可以叫做是盒子模型盒子模型的組成內(nèi)容區(qū)元素中內(nèi)容文本圖片等等內(nèi)邊距內(nèi)容區(qū)到邊框的距離邊距內(nèi)容區(qū)的邊界外邊距盒子與盒子之間的距離屬性表示設(shè)置元素的邊框?qū)傩允呛唽憣傩钥梢苑譃楸硎具吙虻膶挾缺硎具吙虻臉邮? 盒子模型 描述 每一個元素都可以叫做是盒子模型 盒子模型的組成 內(nèi)容區(qū) - 元素中內(nèi)容（文本、圖片、等等） 內(nèi)邊距 - 內(nèi)容區(qū)到邊框的距離 邊距 - 內(nèi)容區(qū)的...

    teren 評論0 收藏0

  • 【靜態(tài)頁面架構(gòu)】CSS之盒子模型

    摘要：架構(gòu)盒子模型以內(nèi)容區(qū)顯示文本和圖像內(nèi)邊距內(nèi)容區(qū)至邊距的距離邊距內(nèi)容區(qū)的邊界外邊距元素的邊框之間的距離邊距屬性簡寫屬性用來設(shè)置邊距的上右下左。 CSS架構(gòu) 盒子模型； 以內(nèi)容區(qū)(顯示文本和圖像) 內(nèi)邊距(內(nèi)容區(qū)至邊距的距離) 邊距(內(nèi)容區(qū)的邊界) 外邊距(元素的邊框之間的距離) 1.邊距； border屬性； 簡寫屬性用來設(shè)置邊距的上(top)右(right)下(bottom)左(lef...

    fanux 評論0 收藏0

  • CSS學(xué)習(xí)筆記(六) 元素定位

    摘要：方法一為父元素添加方法二同時浮動元素方法三添加非浮動的清除元素定位布局的核心是屬性，對元素盒子應(yīng)用這個屬性，可以相對于它在常規(guī)文檔流中的位置重新定位。絕對定位絕對定位會把元素徹底從文檔流中拿出來，然后相對于其他元素默認(rèn)是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見版式模型（visual formattin...

    浠ラ箍 評論0 收藏0

  • CSS入門指南-3：定位元素

    摘要：靜態(tài)定位下，每個元素在處在常規(guī)文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素在定位。事實上，一個相對定位元素同時設(shè)置了和位移屬性值，實際上優(yōu)先級高于。 這是《CSS設(shè)計指南》的讀書筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

    paulquei 評論0 收藏0

  • CSS入門指南-3：定位元素

    摘要：靜態(tài)定位下，每個元素在處在常規(guī)文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素在定位。事實上，一個相對定位元素同時設(shè)置了和位移屬性值，實際上優(yōu)先級高于。 這是《CSS設(shè)計指南》的讀書筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

    DesGemini 評論0 收藏0

發(fā)表評論

0條評論

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