盒子模型:
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 四條邊三樣式,所有樣式都不能繼...