盒子模型

盒子模型（CSS重点）

1.盒子边框（border）

• 语法：

  border:border-width || border-style || border-color
  

  属性	作用
  border-width	定义边框粗细，单位是px
  border-style	边框的样式
  border-color	边框颜色

  • 边框的样式：
    • none：没有边框即忽略所有边框的宽度（默认值）
    • solid：边框为单实线（最为常用的）
    • dashed：边框为虚线
    • dotted：边框为点线

2.边框综合设置

border:border-width || border-style || border-color

例如：

border:1px solid red;  /*没有顺序*/

3.盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border-bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border-bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top：宽度 样式 颜色;	border-bottom：宽度 样式 颜色;	border-left：宽度 样式 颜色;	border-right：宽度 样式 颜色;