柚子快報邀請碼778899分享：css3 盒子，布局

Shoprite跨境優(yōu)選店綜合2025-05-05420

http://yzkb.51969.com/

十、盒子模型

10.1 初識盒子模型

10.2 盒子模型相關(guān)樣式

10.3 盒子模型類型

10.4 display屬性

10.5 盒子模型擴(kuò)展

十一、網(wǎng)頁布局

9.1 標(biāo)準(zhǔn)流布局

9.2 浮動布局

9.3 定位布局

十、盒子模型

10.1 初識盒子模型

什么是盒子模型

盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是用來存儲其他元素的容器盒子模型的應(yīng)用

網(wǎng)頁本質(zhì)：網(wǎng)頁元素放入盒子內(nèi)，通過CSS將網(wǎng)頁中的一個個盒子排列起來(網(wǎng)頁布局) 盒子模型結(jié)構(gòu)

width和height設(shè)置了內(nèi)容框的寬/高 padding屬性設(shè)置內(nèi)邊距的寬度 border屬性設(shè)置邊界的寬度、樣式和顏色 margin屬性設(shè)置包圍CSS盒子外部區(qū)域的寬度，這個屬性用來設(shè)置與布局中其他的CSS盒子距離

10.2 盒子模型相關(guān)樣式

內(nèi)容

width height 內(nèi)填充 padding 邊框 border 外邊距 marign

margin解決塊級元素居中

Document

10.3 盒子模型類型

塊級盒子

塊級盒子可以設(shè)置高度和寬度，占用當(dāng)前行行內(nèi)盒子

跟隨文檔的文本流堆放，寬度和高度設(shè)置對行內(nèi)盒子無效，在行內(nèi)盒上的所有內(nèi)邊距、外邊距和邊界設(shè)置會改變周圍文本的位置，但是不會影響周圍塊盒的位置行內(nèi)塊盒子

同行內(nèi)盒子類似，跟隨周圍的文本流堆放，不會在其前后創(chuàng)建換行，支持寬度和高度

Document

水平居中

情況-1: text-align (文本居中)

text-align

情況-2: margin

10.4 display屬性

功能

用來設(shè)置元素的顯示方式，如塊級元素、行級元素、行級塊元素或隱藏等常用屬性

block? 塊 inline 行 inline-block? 行塊 none? 無 ...

Document

display:決定元素的顯示或顯示類型(行/塊/行塊)

10.5 盒子模型擴(kuò)展

內(nèi)容溢出

什么是溢出

當(dāng)用絕對的值設(shè)置盒子的大小時（固定像素的 width 和 height），內(nèi)容可能會超出設(shè)置的大小，此時內(nèi)容就會溢出盒子。要控制這時候發(fā)生的事情，我們可以使用 overflow 屬性元素沒有指定高度時，元素的高度是由內(nèi)容決定(自適應(yīng)) 元素提字height,當(dāng)內(nèi)容高度超出height高度時，出現(xiàn)內(nèi)容溢出通過overflow解決溢出

visible hidden ：隱藏溢出, 超出部分不顯示 scroll: 滾動 auto：溢出時出現(xiàn)滾動寬與高

height與min-height width與min-width 盒子模型計算方式

怪異模式： box-sizing: border-box 標(biāo)準(zhǔn)模式: box-sizing: content-box

Document

溢出：盒子子元素超出盒子的高度或?qū)挾?/h1>
溢出：盒子子元素超出盒子的高度或?qū)挾?/p>
hello,world
Document
十一、網(wǎng)頁布局
9.1 標(biāo)準(zhǔn)流布局
什么是標(biāo)準(zhǔn)流布局
標(biāo)準(zhǔn)流也叫普通流，就是一個網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右順序排列案例
單列布局樹型導(dǎo)航
Document
9.2 浮動布局
什么是浮動布局
浮動布局最早用來解決圖文排列的問題浮動技術(shù)允許元素浮動到另外一個元素的左側(cè)或右側(cè)，而不是默認(rèn)的一個堆疊另一個。通過float實現(xiàn)多列排版或文字環(huán)繞圖片案例
兩列布局三列布局菜單導(dǎo)航實現(xiàn)方法
float
left right
浮動元素通常都要添加width，浮動元素默認(rèn)情況下，是沒有width,實際寬度是由內(nèi)容來決定子元素如果都浮動，父元素就沒高度，
父元素
父元素 {
? ? overflow:hidden
}
? ? ? ? ? ?
偽元素:
::after {
? ? /* 清除浮動
? ? clear:left|right|both
? ? /
? ? content: '';
? ? height: 0;
? ? display: block;
? ? clear: both;
}
/ 兩列布局方法一，兩列都浮動 /
Document
A
/ 兩列浮動方法二，浮動一列，另一列自適應(yīng) /
Document
/ 三列布局，三個都浮動*/
Document

三列布局: 全左浮動

/* 方法2：三列，左右兩列向左向右浮動，中間自適應(yīng) */

Document

三列布局-兩列浮動，中間不浮動

9.3 定位布局

什么是定位布局

讓某個元素固定在父元素或頁面的固定位置案例

彈出框遮蓋層實現(xiàn)方法

position：位置

static：默認(rèn)值 relative:相對定位

當(dāng)前元素position:relative時，元素相對原始的位置可以通過left|top|right|bottom來進(jìn)行調(diào)整 absolute? ? /*絕對定位相對與body或者父類而言若父類未定位則默認(rèn)body，若父類定位了則相對于父類，父類一般設(shè)為相對定位*/ fixed? ? 固定定位相對于屏幕，無論界面如何滑動，其在屏幕的位置固定不動

/*絕對定位和固定定位*/

Document

Helloworld