前端基礎第5天(盒子模型)

2021-08-21 13:03:53 字數 1509 閱讀 8640

盒子模型:

margin:外邊距

border:邊框

padding:內邊距

邊框 border

border-top

-style: solid 實線

dotted 點線

dashed 虛線

border-top

-color 邊框顏色

border-top

-width 邊框粗細

**演示

.box

效果圖:

邊框合併

border-collapse

:collapse;

**演示:

table

td

效果圖:沒合併前:

合併後:

內邊距

padding-left | right | top | bottom

**演示:

.box

◆padding連寫

padding: 20px; 上右下左內邊距都是20px

padding: 20px 30px; 上下20px 左右30px

padding: 20px 30px 40px; 上內邊距為20px 左右內邊距為30px 下內邊距為40

padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

外邊距

margin-left | right | top | bottom

.box

◆外邊距連寫

margin: 20px; 上下左右外邊距20px

margin: 20px 30px; 上下20px 左右30px

margin: 20px 30px 40px; 上20px 左右30px 下 40px

margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px

web前端基礎 盒子模型

盒子模型的概念 盒子模型用來 放 網頁中的各種元素。網頁設計中內容,如文字 等元素,都可是盒子 div巢狀 寬度屬性 寬度 width 長度值 百分比 auto 最大寬度 max width 長度值 百分比 auto 最小寬度 min width 長度值 百分比 auto 高度屬性 高度 heigh...

前端 盒子模型

盒模型分為兩種 標準模型和ie模型,主要了解標準模型 盒模型示意圖 盒子模型的屬性 width 內容的寬度 height 內容的高度 padding 內邊距,邊框到內容的距離 border 邊框,就是指盒子的寬度 margin 外邊距,盒子邊框到附近最近盒子的距離 盒模型的計算 盒子的真實寬度 wi...

前端基礎十一 盒子模型

1 盒子模型也稱框模型,方便完成網頁的布局。盒子分為四個部分 內容區 content 內容區的大小可以通過 width和height來進行設定,而整個盒子可見區的大小 內容區的大小 border 的大小 padding的大小 內邊距 padding 邊框 border 四條邊三樣式,所有樣式都不能繼...