前端第三課--盒模型

標準盒模型

設置div的大小後，如果放入的內容太多也會溢出來

盒子邊框設置:

solid:直線邊框 dashed:虛線邊框

dotted:點線邊框 double:雙實線邊框

border:20px solid black;（整邊框設置樣式）

border-top-style:dashed;（單邊框設置樣式）

border-top-color:red;（單邊框設置顏色）

**內邊距：**拉開內容邊框有的距離

padding-top:30px(和margin用法一樣)

怪異盒模型：

box-sizing:content-box;(默認值)

box-sizing:border-box;(設置爲怪異盒)

怪異盒從裏到位：content ->border ->padding ->width;（寬的角度）

父子元素外邊距合併現象（處理高度塌陷問題）：

1.給父級加邊框

border:1px solid transparent;(透明邊框）

border:1px solid red；(有色邊框)

2.給父級設置內邊距：

padding:1px;

3.溢出隱藏（內容多餘邊框的部分被隱藏）：

overflow:hidden;

兄弟元素外邊距合併（兩個外邊距合併，只留下一個大的）