G5德軍

一、盒子模型

盒子模型的組成以及注意事項

（1）border 邊框

　　①樣式

　　border-style：solid(實線)

　　border-style:  dashed (虛線)

　　border-style:  dotted(點線)

　　②顏色

　　border-color:   

　　③寬高

　　border-width

　　④邊框簡寫

　　border: 1px solid red;(無順序)

　　　　1)邊框分開寫法

　　border-top:  5px solid pink;(上邊框);

　　border-bottom: 5px dotted red(下邊框);

　　boder-left:  5px solid blue;

　　border-right: 5px solid blue;

　　　　2)邊框合并:border-collapse:collapse

　　　　3)`邊框會影響盒子實際大小(測量時要去除邊框大小)

（2）content 內容

（3）padding內邊距(盒子邊框與內容的距離)

　　padding-left,padding-right,padding-bottom,padding-top

　　簡寫:padding:1px 2px 3px 4px(上右下左)

　　　　padding:1px 2px 3px (上左右下)

　　　　padding:5px

　(4)當我們給盒子指定padding值之后,發生了2件事

　　①內容和邊框有了距離,添加了內邊距

　　②padding影響實際大小

　　　　有了高度、寬度會撐大盒子

（5）margin外邊距

　　 ①作用:

　　　　控制盒子與盒子之間的距離

　　　　margin-left,margin-right,margin-top,margin-bottom

　　②簡寫

　　　　和padding一樣

　　　　margin:一個數值(上下左右一樣)

　　　　margin:x y z h;(上右下左)

　　　　margin:x y z(上左右下)

　　(6)   ①讓塊級元素水平居中:margin: 0 auto;

　　　　②行內元素,行內塊元素

　　　　　　讓父元素用text-align:center

　　(7)外邊距合并(垂直塌陷解決方案)

　　①給父元素設置邊框(transparent)

　　②定義內邊距 padding

        ③overflower:hidden;

　　(8)清除內外邊距

　　①讓* {padding和margin}都設置為0

　　②行內元素時* {設置左右邊距為0}

二、PS的基本操作(未下載)

文件→打開

視圖→標尺

Ctr+R:可以打開

三、圓角邊框

border-radius:10px;

border-radius:x y z h;(上左,上右,下右,下左)

border-radius:x y (對角線 上左下右x，上右下左y)

四、盒子陰影

box-shadow:h-ahadow v-ahadow 

bo-shadow:x(水平移動) y(垂直移動) z(模糊距離) h(陰影的尺寸)

盒子陰影不占空間

五、文字陰影

使用text-shadow屬性將陰影

text-shadow:水平移動  垂直移動  模糊距離