内外边距,盒子模型-第九天

padding

• 取值从上开始顺时针,没有值看对面

margin

• 取值从上开始顺时针,没有值看对面
• margin:auto 盒子居中 必须设置width属性 元素必须是块级元素
• 行内元素设置垂直方向内外边距无效
• 上下块级元素同时设置了垂直外边距,中间的距离只会取大值
• 互相嵌套的块级元素,给子元素设置外边距,会导致父元素一起掉下来
  • 解决方法
    • 设置边框:border-top:1px
    • 设置内边距pidding-top:1px
    • 溢出隐藏 overflow:hidden
    • 把父元素设置行内块元素:display:inline-block

清除内外边距

• 使用通配符 *
• 标签选择器

盒子的实际大小

• 内容+边框+内边距

盒子模型

• 标准盒子模型:box-sizing:content-box

  • border跟padding会影响盒子大小为标准盒子模型w3c盒子

• css3盒子模型: 自动内减模式 box-sizing:border-box

  • width跟height就是盒子实际大小