CSS3學習筆記 7 CSS盒模型 上

2021-08-03 19:58:07 字數 1354 閱讀 8723

本節學習元素的尺寸、元素的邊距以及內容溢位等問題。

元素尺寸

①weight寬度。②height高度。③min-width最小寬度。④min-height最小高度。⑤max-width最大寬度。⑥max-height最大高度。

最大最小主要是應對可能動態產生元素尺寸變大變小的問題,從而限制它的最大和最小。

元素內邊距(會擴充總長度,而不是向內縮)

①padding-top向上。②padding-bottom向下。③padding-left向左。④padding-right向右。

簡寫形式,只寫乙個padding。則乙個引數表示上下左右,兩個引數表示上下和左右,三個引數表示上和左右和下,四個引數表示上和右和下和左。

元素外邊距

①margin-top上邊。②margin-bottom下邊。③margin-left左邊。④margin-right右邊。

簡寫形式,只寫乙個margin。則乙個引數表示上下左右,兩個引數表示上下和左右,三個引數表示上和左右和下,四個引數表示上和右和下和左。

處理溢位

①overflow-x設定水平方向溢位。②overflow-y設定垂直方向溢位。③overflow簡寫屬性。

溢位的處理主要由四種處理值:①auto如有溢位顯示滾動條,否則不顯示。②hidden如有溢位直接減掉。③scroll不管是否溢位都顯示滾動條。④visible不管是否溢位都顯示,亦是預設。

*測試**

lang="zh-cn">

css盒模型 上title>

charset="utf-8">

rel="stylesheet"

type="text/css"

href="style.css">

head>

我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,div>

body>

html>

@charset

"utf-8"

;div

執行結果:

學習CSS盒模型和CSS3彈性盒模型

css盒模型本質是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...

CSS3 盒模型設計

一 彈性盒模型 a 注意在使用彈性盒模型的時候父元素必須要加display box 或 display inline box 例 b box orient 定義盒模型的布局方向 i.horizontal 水平顯示 ii.vertical 垂直方向 例 doctype html html head m...

css3 彈性盒模型

1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定,兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...