第六章 盒模型

盒模型

• 内容区(content) 显示文字/图片/视频等的区域，宽高确定内容区
• 内填充(padding)
  • padding值的设置
    • 一个值 padding:10px 四周
    • 两个值 padding:10px 20px; 上下 左右
    • 三个值 padding: 10px 20px 30px; 上 左右 下
    • 四个值 padding: 10px 20px 30px 40px; 上 右 下 左
    • 单方向 padding-方向(left/right/top/bottom): 数值+px;
  • padding值的特点
    • 会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值
    • padding值不能设置负数
    • 背景图/色可以在padding区域显示
    • 可以用来调整内容区到盒子边缘的位置
• 边框(border) 边框也会撑大盒子，设计图从边框里面开始量取
• 外边距(margin)
  • margin值的设置和padding值是一样的
  • margin值的特点
    • margin值不会撑大盒子，但是会影响到旁边的元素
    • margin可以设置负数
    • 背景图和背景色不在margin区域显示
    • 调整自己和别的元素之间的距离
    • margin:auto; auto: 浏览器会根据当前窗口的宽，减去元素的宽，将剩余的空间进行一个自动的平均分配，实现左右的居中，垂直是不生效的
  • margin的bug
    • margin的传递：给元素的第一个子元素添加上边距的时候，边距会错误加在父元素的身上
      1. 使用padding
      2. 给父元素添加边框
      3. 给父元素或者是该元素添加浮动
      4. 给父元素添加overflow:hidden(溢出隐藏)
    • margin的重叠：给上面的元素设置下边距，给下面的元素设置了上边距，边距会产生重叠，并且以两个值的最大值显示，左右的间距是不会出现重叠的
      1. 只给一个盒子添加外边距

去掉标签自带的行高

• 设置line-height(行高)和font-size(字体大小)值为一样