盒子模型的計算公式及使用技巧

padding是內邊距,會影響我們在瀏覽器中看到的元素的實際大小,內邊距會讓元素的內容增大，和其他元素沒有關係!

margin是外邊距,不會影響我們在瀏覽器中看到的元素的實際大小,外邊距不會讓元素的內容增大，是和另乙個元素的間距!

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style 
type
="text/css"
>7/*
盒子的實際寬高大小是多少?*/8
.content
16/*
實際寬度:100+30+10+30=170px
*/17
/*實際高度:250+10+10+10+10=290px
*/18
style
>
19head
>
20<
body
>
21<
div 
class
="content"
>
div>
22body
>
23html
>

css盒子模型的計算:

元素的實際寬度=寬度width+padding-left/padding-right+border-left/border-right

元素的實際高度=高度height+padding-top/padding-bottom+border-top/border-bottom

口號:元素的實際大小只會受padding和border的影響跟margin沒有關係,如果加了padding和margin值,要在width和height的值上減去padding和margin的值,否則內容會溢位

08 CSS盒子模型及使用技巧

設定寬高width 200px 設定盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度 難點 height 200px 設定盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度 難點 設定邊框border top 10px solid red border 10px solid red 設定內...

CSS 盒子模型的計算

1 標準盒子的尺寸計算 盒子自身的尺寸 內容的寬高 兩側內邊距 兩側邊框 盒子在頁面中佔位的尺寸 內容的寬高 兩側內邊距 兩側邊框 兩側外邊距 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 盒子自身尺寸 title...

盒子模型及box sizing的理解

部落格 盒子模型 標準盒子模型和怪異 ie 盒模型 寬度 width content內容區寬度 width 高度 height 也是內容區的高度 width 盒子的大小 margin paading border width 兩個盒子的之間的padding值的計算 上面盒子的padding bott...