柚子快報邀請碼778899分享：css3 盒子，布局
柚子快報邀請碼778899分享：css3 盒子，布局
目錄
十、盒子模型
10.1 初識盒子模型
10.2 盒子模型相關樣式
10.3 盒子模型類型
10.4 display屬性
10.5 盒子模型擴展
十一、網(wǎng)頁布局
9.1 標準流布局
9.2 浮動布局
9.3 定位布局
十、盒子模型
10.1 初識盒子模型
什么是盒子模型
盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是用來存儲其他元素的容器 盒子模型的應用
網(wǎng)頁本質：網(wǎng)頁元素放入盒子內，通過CSS將網(wǎng)頁中的一個個盒子排列起來(網(wǎng)頁布局) 盒子模型結構
width和height設置了內容框的寬/高 padding屬性設置內邊距的寬度 border屬性設置邊界的寬度、樣式和顏色 margin屬性設置包圍CSS盒子外部區(qū)域的寬度，這個屬性用來設置與布局中其他的CSS盒子距離
10.2 盒子模型相關樣式
內容
width height 內填充 padding 邊框 border 外邊距 marign
margin解決塊級元素居中
10.3 盒子模型類型
塊級盒子
塊級盒子可以設置高度和寬度，占用當前行 行內盒子
跟隨文檔的文本流堆放，寬度和高度設置對行內盒子無效，在行內盒上的所有內邊距、外邊距和邊界設置會改變周圍文本的位置，但是不會影響周圍塊盒的位置 行內塊盒子
同行內盒子類似，跟隨周圍的文本流堆放，不會在其前后創(chuàng)建換行，支持寬度和高度
水平居中
情況-1: text-align (文本居中)
text-align
text-align
情況-2: margin
10.4 display屬性
功能
用來設置元素的顯示方式，如塊級元素、行級元素、行級塊元素或隱藏等 常用屬性
block? 塊 inline 行 inline-block? 行塊 none? 無 ...
display:決定元素的顯示或顯示類型(行/塊/行塊)
A
B
10.5 盒子模型擴展
內容溢出
什么是溢出
當用絕對的值設置盒子的大小時（固定像素的 width 和 height），內容可能會超出設置的大小，此時內容就會溢出盒子。要控制這時候發(fā)生的事情，我們可以使用 overflow 屬性 元素沒有指定高度時，元素的高度是由內容決定(自適應) 元素提字height,當內容高度超出height高度時，出現(xiàn)內容溢出 通過overflow解決溢出
visible hidden ： 隱藏溢出, 超出部分不顯示 scroll: 滾動 auto： 溢出時出現(xiàn)滾動 寬與高
height與min-height width與min-width 盒子模型計算方式
怪異模式： box-sizing: border-box 標準模式: box-sizing: content-box
溢出：盒子子元素超出盒子的高度或寬度
溢出：盒子子元素超出盒子的高度或寬度
十一、網(wǎng)頁布局
9.1 標準流布局
什么是標準流布局
標準流也叫普通流，就是一個網(wǎng)頁內標簽元素正常從上到下，從左到右順序排列 案例
單列布局 樹型導航
9.2 浮動布局
什么是浮動布局
浮動布局最早用來解決圖文排列的問題 浮動技術允許元素浮動到另外一個元素的左側或右側，而不是默認的一個堆疊另一個。通過float實現(xiàn)多列排版或文字環(huán)繞圖片 案例
兩列布局 三列布局 菜單導航 實現(xiàn)方法
float
left right
浮動元素通常都要添加width，浮動元素默認情況下，是沒有width,實際寬度是由內容來決定 子元素如果都浮動，父元素就沒高度，
父元素
父元素 {
? ? overflow:hidden
}
? ? ? ? ? ?
偽元素:
::after {
? ? /* 清除浮動
? ? clear:left|right|both
? ? */
? ? content: '';
? ? height: 0;
? ? display: block;
? ? clear: both;
}
/* 兩列布局方法一，兩列都浮動 */
/* 兩列浮動方法二，浮動一列，另一列自適應 */
/* 三列布局，三個都浮動*/
三列布局: 全左浮動
/* 方法2：三列，左右兩列向左向右浮動，中間自適應 */
三列布局-兩列浮動，中間不浮動
9.3 定位布局
什么是定位布局
讓某個元素固定在父元素或頁面的固定位置 案例
彈出框 遮蓋層 實現(xiàn)方法
position：位置
static：默認值 relative:相對定位
當前元素position:relative時，元素相對原始的位置可以通過left|top|right|bottom來進行調整 absolute? ? /*絕對定位相對與body或者父類而言 若父類未定位則默認body，若父類定位了則相對于父類，父類一般設為相對定位*/ fixed? ? 固定定位相對于屏幕，無論界面如何滑動，其在屏幕的位置固定不動
/*絕對定位和固定定位*/
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
Helloworld
/*相對定位*/
昨天面板練習補充：
柚子快報邀請碼778899分享：css3 盒子，布局
參考鏈接
本文內容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Shoprite跨境優(yōu)選店
