前端基础学习笔记 盒模型

边框线border

border 边框：元素边框的样式

单样式:

• border-width 大小
• border-style 样式
• border-color 颜色

复合样式:大小 类型 颜色

• border :width style color

边框类型 ： border-style

• solid 实线
• dashed 虚线 （有兼容问题）
• dotted 点线 （有兼容问题）
• double 双边框

边框类型：

• border-top 左边框
• border-right 右边框
• border-bottom 下边框
• border-left 左边框

去除边框: border:none ;
=>padding会改变盒子大小

color颜色:的多种值

十六进制 （ #00ff99 ）
rgb（ 0-255,0-255,0-255 ） -三个值 r-red红 g-green绿 b-blue蓝
rgba( 0-255,0-255,0-25,0-1 ) 四个值 r-red红 g-green绿 b-blue蓝 a-透明度

margin  外边距

单样式:

• margin-top :顶部外距离
• margin-right :右边外距离
• margin-bottom :底部外距离
• margin-left :左边外距离

复合样式：

• 四个值： margin :上 右 下 左
• 三个值： margin :上 左右 下
• 二个值： margin :上下 左右
• 一个值： margin : 四个方向相同的值；
• 盒子水平居中：
  margin:  auto || margin:top  auto || margin:top  auto bottom

padding 内边距

单样式:

• padding-top :顶部内距离
• padding-right :右边内距离
• padding-bottom :底部内距离
• padding-left :左边内距离

复合样式：

• 四个值： padding :上 右 下 左
• 三个值： padding :上 左右 下
• 二个值： padding :上下 左右
• 一个值： padding : 四个方向相同的值；

=>padding会改变盒子大小

盒子模型计算公式

盒子宽度 = 左border+左padding+width+右padding +右border

盒子高度 = 上border+上padding+height+下padding+下border