css进阶

标签：back   body   就会   文本   简单的   简单   它的   div   border   

• 默认的border-color 边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
• margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

• CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

  • 如果缺少左外边距的值，则使用右外边距的值。
  • 如果缺少下外边距的值，则使用上外边距的值。
  • 如果缺少右外边距的值，则使用上外边距的值。

  下图提供了更直观的方法来了解这一点：

  

  换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

  利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：

  h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
  h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
  p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */
  

  这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：

  p {margin: 20px 30px 30px 20px;}

  这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。

  再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：

  p {margin: auto auto auto 20px;}

  同样的，这样才能得到你想要的效果。问题在于，键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距，请使用单边外边距属性。

• 可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
• 外边距合并：简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
• 对应网址：

http://www.w3school.com.cn/css/css_margin_collapsing.asp

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

css浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

css进阶

标签：back   body   就会   文本   简单的   简单   它的   div   border   

原文地址：https://www.cnblogs.com/He-tao-yuan/p/9600226.html