6. 盒子模型 margin，boder，padding，content

盒子模型：margin，boder，padding，content

content

• min-width：底线宽度
• max-width：最大宽度，看浏览器
• min-height：底线高度
• max-height：最大高度
  默认宽度：当没有给 width 属性时候

内容区=父的content-自身的左右margin-自身左右border-自身左右padding
总宽度=父的content-自身的左右margin

盒子的内边距 padding

• 左侧内边距：padding-left:20px
• 右侧内边距：padding-right:20px
• 上内边距：padding-top
• 底边内边距：padding-bottom
• 复合属性
  • padding: 10px 20px 30px (上边距 左右边距 下边距)
  • padding: 10px 20px 30px 40px (上边距 右边距 下边距 左边距)
  • padding: 10px 20px (上边距 下边距)

ps：行内元素的行下内边距可能不会完美设置，可能与块元素会重叠

盒子的边框 broder

默认边框的宽度是 3

• 左边框宽度：border-left-width 同理 右上下
• 右边框颜色：border-right-color 同理 左上下
• 上样式：border-right-style 同理 左右下
• 三个属性相同方向的复合：broder-left: 10px soild red 同理 上下左右

盒子的外边距 margin

• margin-left，margin-right，margin-top``margin-bottom，复合margin
• 子元素的 margin，是从父元素的 content 开始算
• 上、左 margin 会影响自身位置，下、右 margin 会影响兄弟位置
• 行内元素设置上下margin是无效的
• 对于块内元素，左右margin 值均是 auto，效果上水平居中
• margin 值可以为负值

margin 的塌陷问题：
给第一个儿子元素一个margin-top，之后竟然其父元素在动，子元素并没有达到原来效果；给最后一个子元素 margin-bottom，也被父元素抢走。
解决：给父元素增加溢出文字的显示属性：overflow：hidden；

margin 的合并问题
相邻上下元素的 margin 会出现合并现象，上元素的下边距和下元素的上边距，左右边距不会出现合并

处理内容的溢出问题

overflow: 属性值

• visable：显示默认
• auto：自动显示滚动条，内容不溢出不显示
• scroll：不管溢出，会出现滚动条
• hidden：隐藏
  overflow-x 和 overflow-y 不建议使用，不可以一个 hidden 一个 visable

样式继承：与盒子模型无关的会继承，与盒子模型相关不会继承