在html中，任何元素都可以看做乙個盒子
這個「盒子」的作用就是用來包裹頁面中的內容，比如、文字等等
在w3c的規定下，盒子模型（標準盒子模型）從內到外的基本組成為
margin
border
padding
content
如圖所示，
**見水印
在w3c下，在任一方向新增margin，border，padding都會使元素整體占用的空間變大
除此之外，通過一些設定，可以將普通盒子模型變成**盒子模型（非標準盒子模型）和彈性盒子模型
在標準盒子模型中，寬（width）高（height）的設定對內容區（content）有效
非標準盒子模型中，是對整個盒子所佔空間的設定
**盒子模型：
通過設定 style 樣式 box-sizing: border-box;
新增完這個屬性值以後，當前的盒子模型就不再是預設的盒子模型了，
而是變成乙個非標準的盒子模型
彈性盒子：display設定為flex的盒子模型
注意：彈性盒子基本上是新增給父元素，為的是其中的子元素可以按照彈性盒子的規則進行布局
如果子元素中還有孫子元素需要按照彈性盒子的規則進行布局，那麼子元素也要新增
display
：flex
而如果父元素新增了
display
：flex
，那麼子元素中
float
、clear
等屬性會失效
彈性盒子css設定：
<style
>
#container
#inner1
#inner2
#inner3
style
>
body布局：
<divid="container"
>
<divid="inner1"
>div
>
<divid="inner2"
>div
>
<divid="inner3"
>div
>
div
>
盒子模型 筆記
images cssbase.css layout.css index.css 脫離文件流 寬度不夠會掉下來 行內元素支援寬高 塊元素會根據內容撐開寬高 文字環繞 用到浮動必須清浮動 不要用inline block，用浮動 相對定位 根據自己定位 不會脫離文件流 絕對定位 脫離文件流 根據父級定位 ...
盒子模型筆記
border 1px solid ccc 第乙個表示邊框粗細 第二個表示邊框線型 第三個表示邊框顏色 border width 邊框粗細 border style 邊框線型 border color 邊框顏色 負責兩個盒子之間的距離 margin 10px 上下左右都為10px margin top...
盒子模型（自學筆記）
把網頁元素比如文字等等，放入盒子，然後利用css擺盒子的過程，就是網頁布局 屬性作用 值border width 邊框粗細 畫素值border style 邊框樣式 solid 實線 dashed 虛線 dotted 點線 border color 邊框顏色 red blue等 連寫一般按照以下順序...