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.  

     未完待续。。。。。。