03 第三章 盒模型解析

1、盒子模型

盒子模型是HTML是网页中一个非常重要的知识点，也是学习HTML的基础

image.png

2.边框线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会改变盒子大小

2.1.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-透明度

3.margin 外边距

单样式:

• margin-top :顶部外距离
• margin-right :右边外距离
• margin-bottom :底部外距离
• margin-left :左边外距离
  复合样式：
• 四个值： margin :上 右 下 左
• 三个值： margin :上 左右 下
• 二个值： margin :上下 左右
• 一个值： margin : 四个方向相同的值；
  盒子水平居中：

    margin: auto || margin:top auto || margin:top auto bottom

• 默认文档流都是从右往左，从小往上排列的

  
  image.png

1 . 外边距的垂直方向会发生合并，水平方向不会！

2. 兄弟关系的第一个盒子的margin-bottom会和第二个盒子的margin:-top会重叠，谁的值大听谁的。

3. 父子关系的第一个盒子的margin-top会和第二个盒子的margin:-top会重叠，谁的值大听谁的。

4. 解决父子关系的垂直方向的方法：给父级加一个

   overflow:hidden 
   或者
   border-top:1px solid #000;
   或者
   padding-top:1px;
   

4.内边距

单样式:

• padding-top :顶部内距离
• padding-right :右边内距离
• padding-bottom :底部内距离
• padding-left :左边内距离
  复合样式：
• 四个值： padding :上 右 下 左
• 三个值： padding :上 左右 下
• 二个值： padding :上下 左右
• 一个值： padding : 四个方向相同的值；
  =>padding会改变盒子大小

5.盒子模型计算公式

盒子宽度 = 左border+左padding+width+右padding +右border 盒子高度 = 上border+上padding+height+下padding+下border

6、box-sizing 盒模型解析模式

content-box 标准盒模型(和css2一样的计算)

image.png

宽度和高度之外绘制元素的内边距和边框 width,height外绘制padding,border，盒子大小变大

• border-box 怪异盒模型
  从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
  width,height内绘制padding,border，盒子大小不变