关于前端学习:CSS样式盒子模型

理解盒模型根本组成

1. 外间距：margin
2. 内间距：padding
3. 边框：border
4. 内容区域：content

• 元素大小蕴含了边框
• 背景色填充只到边框（包含边框）
• 文字在 content 区域增加

理解内间距

1. 用于调整子元素与父元素之间空隙大小
2. padding 设置时，会撑大盒子宽高，设置盒子宽高时须要减去 padding 的值，或者设置 box-sizing 为 border-box
3. padding 不反对正数，也不反对 auto
4. 当盒子不设置宽高时，由内容撑开时，不须要减去 padding 的值
5. padding 的设置，不影响背景图

设置内间距

1. 繁多方向设置：

 上内间距：padding-top: 数值
下内间距：padding-bottom: 数值
左内间距：padding-left: 数值
右内间距：padding-right: 数值 

2. 复合写法：

 示意周围都设置：padding：10px 
示意高低、左右设置：padding：10px 20px
示意上、左右、下设置：padding：10px 20px 30px
示意上、右、下、左设置：padding：10px 20px 30px 40px

理解外间距

1. 用于调整元素与元素之间的间距
2. margin 不影响盒子大小
3. margin 反对正数和 auto
4. margin:0 auto 时，示意盒子程度居中

设置外间距

1. 繁多方向设置：

 上外间距：margin-top: 数值
下外间距：margin-bottom: 数值
左外间距：margin-left: 数值
右外间距：margin-right: 数值 

2. 复合写法：

 示意周围都设置：margin：10px 
示意高低、左右设置：margin：10px 20px
示意上、左右、下设置：margin：10px 20px 30px
示意上、右、下、左设置：margin：10px 20px 30px 40px

盒模型尺寸计算形式

box-sizing:content-box

  1. 默认计算形式，盒子尺寸不包含边框、内间距、内容：content-box
  2. 内减计算形式，盒子尺寸包含边框、内间距、内容：border-box
  3. 继承父元素盒尺寸计算方法：inherit

margin 存在问题与解决

1. margin-top 传递问题：

   • 当父元素内的子元素设置 margin-top 时，这个间距将传递给父元素
   • 解决：
     给父元素增加 overflow:hidden
     给父元素增加一个通明边框

2. 两个元素之间高度塌陷问题：

   • 当下面元素设置 margin-bottom，并且上面元素设置 margin-top 时，浏览器解析时，他们之间的间距取外间距最大的值
   • 解决：
     给上面元素增加一个父元素，并给父元素增加 overflow：hidden
     只给一个元素设置 margin 值