笔记2017.12.18

盒子模型内外边距和边框介绍

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

边框

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

样式包括：

你也可以通过设置样式为 none 或 hidden 来明确地移除边框。

如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。

下面的规则设置了一个标题元素的背景色和顶部边框：

h3 {    border-top: 4px solid #7c7; /* 中绿 */    background-color: #efe; /* 浅绿 */    color: #050; /* 深绿 */}

结果如下：

外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。用margin属性或者 padding 属性分别设置外边距和内边距的宽度。

• 如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

• 如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

• 你也可以按照顺序指定四个宽度： 上、右、下、左。

下面的规则通过给元素四周设置红色边框，标记出了类名为 remark 的段落元素。

p.remark {border: 2px solid red;padding: 4px;margin-left: 24px;}

结果如下：

注意：

• 外边距margin可以为负，内边距不可以为负。
• 行内元素设置上下边距不影响行高。
• 边框是可见的，边距是不可见的，只能看到对其他元素的影响。

简写属性：

我们可以根据规定顺序，简写属性：

• 设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
• 设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框属性。
• 设置四个值，一次表示上右下左边框的属性。
  例如：

h1{margin:10px 0px 15px 5px}

行内元素的盒子模型

• 行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。

如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。

• 综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。

元素盒子属性的默认值

• 大多HTML元素的盒子属性默认值都为0。

• 少部分HTML元素盒子属性存在默认值，如：body,p,ul,li,form标签等，因此我们在需要的时候可以先初始化他们的属性为0。

• 盒子模型内外边距和边框介绍

  当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。
  

  边框

  用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

  样式包括：

  

  你也可以通过设置样式为 none 或 hidden 来明确地移除边框。

  如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。

  下面的规则设置了一个标题元素的背景色和顶部边框：

  h3 {    border-top: 4px solid #7c7; /* 中绿 */    background-color: #efe; /* 浅绿 */    color: #050; /* 深绿 */}

  结果如下：
  

  外边距和内边距

  使用外边距和内边距调整元素的位置，并在其周围创建空间。用margin属性或者 padding 属性分别设置外边距和内边距的宽度。

  • 如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

  • 如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

  • 你也可以按照顺序指定四个宽度： 上、右、下、左。

  下面的规则通过给元素四周设置红色边框，标记出了类名为 remark 的段落元素。

  p.remark {border: 2px solid red;padding: 4px;margin-left: 24px;}

  结果如下：
  

  注意：

  • 外边距margin可以为负，内边距不可以为负。
  • 行内元素设置上下边距不影响行高。
  • 边框是可见的，边距是不可见的，只能看到对其他元素的影响。

  简写属性：

  我们可以根据规定顺序，简写属性：

  • 设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
  • 设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框属性。
  • 设置四个值，一次表示上右下左边框的属性。
    例如：

  h1{margin:10px 0px 15px 5px}

  行内元素的盒子模型

  • 行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。

  如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。

  • 综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。

  元素盒子属性的默认值

  • 大多HTML元素的盒子属性默认值都为0。

  • 少部分HTML元素盒子属性存在默认值，如：body,p,ul,li,form标签等，因此我们在需要的时候可以先初始化他们的属性为0。