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. 链接伪类选择器

 1 <style>
 2         div{
 3             width: 210px;
 4             height: 110px;
 5             background-color:red;
 6             border: red double 1px;
 7             /*设置圆角*/
 8             border-radius: 5px;
 9             /*设置阴影（外，内）*/
10             box-shadow: 1px 0px 3px black,inset 1px 1px 3px black;
11             /*文字居中*/
12             text-align: center;
13             /*文字阴影*/
14             text-shadow: 0px 0px 2px black;
15             /*字体颜色*/
16             color:red;
17             /*字体的上下位置（=div高度时为上下居中）*/
18             line-height: 110px;
19         }
20     </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.  

     未完待续。。。。。。

html 盒子模型

原文：https://www.cnblogs.com/Sky-Jasmine/p/12422790.html