html 盒子模型

任務：制作如下圖片

 

 

 

學到的語句：

1. 設置邊框  border:A B C   (A B C分別代表樣式，寬度，顏色，三者順序不做要求 ，按照自己習慣排列
2. 邊框樣式分為四種 solid(實線) dotted(點) dashed(虛線) double(雙線)
3. 設置邊框圓角 border-radius：npx;(不難想象 當盒子為正方形&n==盒子邊長的一半時，呈現效果為圓)
4. 設置邊框陰影box-shsdow: Apx Bpx Cpx D(此為外陰影)（A—》水平方向偏移量 B—》豎直方向偏移量 C—》模糊半徑 D—》陰影顏色）
5. 內陰影 box-shadow: inset Apx Bpx Cpx D;
6. 內外陰影都有 box-shsdow: Apx Bpx Cpx D，inset Apx Bpx Cpx D;
7. 盒子內文字顏色 color:red;
8. 文字陰影 text-shadow:Apx Bpx Cpx D文字位置——水平（居中）—》text-align:center;|豎直位置 line-height:npx(n==盒子高度 上下居中)
9. 鏈接偽類選擇器

<style>
 div{
 width: 210px;
 height: 110px;
 background-color:red;
 border: red double 1px;
            /*設置圓角*/
 border-radius: 5px;
            /*設置陰影（外，內）*/
 box-shadow: 1px 0px 3px black,inset 1px 1px 3px black;
            /*文字居中*/
 text-align: center;
            /*文字陰影*/
 text-shadow: 0px 0px 2px black;
            /*字體顏色*/
 color:red;
            /*字體的上下位置（=div高度時為上下居中）*/
 line-height: 110px;
        }
    </style>

其他：

1. 顏色 rgb(A,B,C)   rgba(A,B,C,D) D為透明度 0<=D<=1
2. 

3.  

    padding:Apx Bpx Cpx Dpx(ABCD 分別代表上 右 下 左的數值 )

4. padding:Apx Bpx Cpx(上 左&右 下)
5. padding: Apx Bpx(上&下 左&右)
6. padding：Apx(上下左右均為A)
7. 盒子寬度/高度=width/height+border+padding
8. margin類padding 有margin-top|right|bottom|left:Apx用法 指定一邊
9. 字體 text-decoration: none  —》可以消除鏈接的下划線 underline—》文本下划線 overline—》文本上划線 line-through—》穿過文本的線
10. 

11.  

     未完待續。。。。。。