页面布局第四天:盒模型

113 阅读2分钟

盒模型的组成

举例

1.jpg

盒子的外壳---------border

盒子的泡沫---------padding

盒子中的物品--------内容

盒子与盒子之间的距离---------margin

万物皆盒子

页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间。这个盒子由内容(content)、内填充(padding)、边框(border)和外边距(margin)组成;

2.jpg 3.png

  • 标准盒子模型中,width(height): content
  • ie盒子模型中,width(height):content + padding + border

padding 内填充

1.含义:在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。

取值:遵循原则(上右下左),缺省的值找反义词的值

padding:10px 5px 15px 20px; 上 右 下 左

padding-方位

  • 方位: left、right、top、bottom

padding-top:30px;

注意点:

  • padding不可以为负值
  • 背景会从padding的区域开始摆放,说明background-position:0 0;在padding的左上角

margin 外边距

取值:遵循原则(上右下左),缺省的值找反义词的值

margin:10px 5px 15px 20px; 上 右 下 左

margin-方位

  • 方位: left、right、top、bottom

margin-top:30px;

注意点:

(1)margin区域不应用背景;

(2)margin可以为负数。

特别注意

  1. 不要行内元素设置上下的margin 和padding,上下margin和padding会被忽略。左右margin和padding会起作用。

  2. 外边距合并

    • 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
    • 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

请看下图:

4.jpg

  1. margin塌陷现象:

    若一个大盒子中包含一个小盒子,给小盒子设margin-top,大盒子会一起向下平移。

    解决方案:

    • 给大盒子加一个边框
    • 给大盒子设置一个overflow属性。overflow: hidden;
    • 浮动也可以