CSS样式--盒模型（四）

CSS样式–盒模型（四）

---

前言

css盒模型是创建css布局基础，其中最主要的就是padding和margin了，盒模型图解如下：

可通过谷歌浏览器的调试工具查看元素的盒模型，鼠标悬浮上去可查看对应的padding、border等值。

框属性

1.白色框（padding + 虚线–content）表示元素大小
2.padding表示元素内部边距
3.border表示元素边框
4.margin表示元素外边距

MDN的描述如下：

width 和 height

width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框（我们默认设置的width和height就是指内容的宽和高）。

注意: 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height–（很有用：项目中有人把Button宽高写死了，但是更换按钮语言的时候字符边长，导致样式乱七八糟的）。

padding

padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。

border

CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：

1. border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。
2. border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。
3. 你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。

margin

外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

注意: 外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。
Html代码

/*Html代码*/
<div id="wrapper">
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</div>

CSS代码

/*CSS代码*/
/* General styles */
body {
  margin: 0;
}

#wrapper * {
  padding: 20px;
  font-size: 20px;
  border: 20px solid rgba(0,0,0,0.5);
}

/* specific boxes */

#wrapper header, #wrapper footer {
  background-color: blue;
  color: white;
}

#wrapper main {
  background-color: yellow;
}

#wrapper header {

}

#wrapper footer {

}

效果：

box-sizing属性

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。box-sizing默认值为content-box：也就是设置元素的width属性时其实是设置内存区域，如果元素有内边距或者border，那个元素的宽度 = width + padding + border。这很容易出现元素溢出的情况：

box-sizing 属性可以被用来调整这些表现:

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

高级的框操作

溢流

当绝对的值设置了框的大小，如果大小不合适，盒内存区域会溢流。这时可以使用overflow属性控制这种情况：

• auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
• hidden: 当内容过多，溢流的内容被隐藏。
• visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）
  

背景剪裁

一个元素设置了background-color, background-image属性后如何，背景色是如何处理的，处理方式是怎么样的，这些都由background-clip属性来控制。（TODO）

CSS框类型（display属性）

元素的框类型有很多种，通常我们说的块级元素和行内元素都是由display属性设定的。display最常见的属性值有：block, inline, and inline-block。

1. 块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）（body from select textarea h1-h6 html table button hr p ol ul dl cnter div默认是块级元素）
2. 行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。（eg：heda meat title lable span br a style em b i strong默认是行内元素）
3. 行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）
   eg：
   HTML代码

/*HTML代码*/
<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

CSS代码

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

效果：