HTML - 盒子模型的基本属性

HTML - 盒子模型

1. 边框样式（border-style）
   属性值：
   none：没有边框
   solid：边框为单实线
   dashed：边框为虚线
   dotted：边框为点线
   double：边框为双实线

   综合属性： 上右下左 顺时针方向
   border-style:solid ; /四边均为实线/
   border-style:solid dotted ; /上下实线、左右点线/
   border-style:solid dotted dashed; /上实线、左右点线、下虚线/

2. 边框颜色（border-color）
   颜色值，例：red、green
   #十六进制色值，例：#ccc 实际工作中最常用
   rgb(r,g,b)，例：rgb(30,0,0)
   rgb(r%,g%,b%)
   综合属性同上
   边框综合属性（border）
   border:宽度,样式,颜色
   宽度、样式、颜色顺序任意，不分先后

3. 圆角边框（border-radius）
   圆角边框属性是CSS3新增属性
   border-radius:参数1/参数2
   border-radius属性同样遵循值复制的原则，其水平半径（参数1）和垂直半径（参数2）均可以设置1-4个参数值，用来表示四角圆角半径的大小。
   例：border-radius: 20px 30px 10px;

4. 边距属性
   “内边距”和“外边距”两种
   内边距（padding）不允许使用负值
   padding-top:上边距;
   padding-right:右边距;
   padding-bottom:下边距;
   padding-left:左边距;
   复合属性
   padding：四边内边距;
   外边距（margin）
   注意：和内边距不同，外边距margin允许使用负值
   margin-top:上外边距;
   margin-right:右外边距;
   margin-bottom:下外边距;
   margin-left:左外边距;
   符合属性
   margin:四边外边距;

5. 定位 position
   定位模式
   1.静态定位 static
   默认位置 偏移无效果
   2.相对定位 relative
   相对于文档流的位置来定位，处理后保留原来位置
   3.绝对定位 absolute
   将元素依据已经定位的父元素进行定位，没有父元素时依据body，处理后不保留原来位置
   4.固定定位 fixed
   相对于浏览器窗口来定位