巩固框模型

今天继续巩固一些CSS知识点，我所记的都是我平时容易忽略或者记得不是非常熟悉的知识点，要想看全面的知识点的话可以去看我前面的CSS笔记博文，上面就是一系列比较详细的知识点，第二次所学的系列里面都是比较零散的知识点。

框模型

文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下:

width 和 height

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

padding

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

border

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

1
2

border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。
border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。

也可以单独设置某一个边的三个不同属性，如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）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。

完全改变盒模型

一个盒子的总宽度是指它的内容宽度（width）、边内距（padding）、边界（border值之和，如果想要一个盒子的总宽度为某个值，并且包括所有的边距和边界值之和，那我们就可以用属性box-sizing调整盒模型。用值border-box，它将盒模型更改为这样新的模型。该模型的特点是总宽度等于上面一种情况的内容宽度，这里的总宽度也是包括内容、内边距和边界值，不过是宽度值一定，把属于内容以外的其他值都加在了宽度里面，即这里的width不仅仅指内容，还指padding和border的值。

盒子的显示模型

display可以有很多种不同的值, 其中三种常见的值为block, inline, 和 inline-block。

块盒(block box)是被定义为堆放在其它盒子之上的盒子（即盒子之前以及之后的内容出现在不同的行上），并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。
行内盒（inline box）与块盒相反：它跟随文档的文本流堆放（即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行）。宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。
行内块盒（inline-block box）介于前两者之间：它会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行（对于一行文本容纳不下的行内盒，会落到第二行上，因为第一行上没有足够的空间容纳它，并且不会跨两行换行）。块级元素默认设置为display: block; ，行内元素默认设置为 display: inline; 。

不常见的值：
同时， display 属性也有一些不常用的值，在以后你将会遇到。其中一些已经出现了有一段时间，并且可以很好的被支持, 而另一些则比较新，不能够被很好的支持。这些值通常是为了使创建网页/网页应用更简单而被创造出来。最被关注的有这些:

1
2
3

display: table — 允许你像处理table布局那样处理非table元素，而不是滥用HTML的< table>标签来达到同样的目的。了解更多相关信息请查看。
display: flex — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
display: grid — 给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架。

溢流

当使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用overflow属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：

1
2
3

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

背景裁剪（Background clip）

框的背景是由颜色和图片组成的，它们堆叠在一起（background-color, background-image）。它们被应用到一个盒子里，然后被画在盒子的下面。默认情况下，背景延伸到了边界外沿。这通常是OK的，但是在一些情况下比较讨厌（假使你有一个平铺的背景图，你只想要它延伸到内容的边沿会怎么做？），该行为可以通过设置盒子的background-clip属性来调整。

轮廓(Outline)

最后，还有重要的一点，一个框的 outline 是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）

浮动float

float具有包裹性，如果定义一个普通的div块，它的宽度会随着页面布满，即它的宽度等于页面的宽度，但是在div块里面添加float属性以后，该块里面宽度会随着该块里面的内容而决定。所以float属性具有包裹性。同时float属性还具有清空格的特点，如

img{
  width：50px；
  border：1px solid white：
}
img<src="...">
img<src="...">
img<src="...">

该代码中的三张图片排列的时候中间会有空格，但是如果加了float属性以后，图片排列之间没有空格，紧致排列：

img{
  width：50px；
  border：1px solid white；
  float：left；
}
img<src="...">
img<src="...">
img<src="...">

“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没关系的，它就尽量的往一边去靠拢，能靠多近就靠多近，这就是清空格的本质。

清除浮动

现在我们已经知道了关于 float 属性的一些有趣事实，不过很快就能够碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。有一种简单的方法可以解决这个问题—— clear 属性。当我们把这个应用到一个元素上时，它主要意味着”此处停止浮动”——这个元素和源码中后面的元素将不浮动，除非稍后将一个新的float声明应用到此后的另一个元素。
clear 可以取三个值：

1
2
3

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动

clear 属性被用于控制浮动。比较下面两个例子：

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}
<div class="box">...</div>
<section class=“.after-box”>...</section>

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。

对于清除浮动（clearfix hack），当图片比包含它的元素还高，

1
2
3

img {
  float: right;
}

而且它是浮动的，于是它就会溢出到容器外面！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）.
让我们加入一些新的CSS样式：

1
2
3

.clearfix {
  overflow: auto;
}

浮动问题

1、整个宽度可能难以计算

如果给我们的这些浮动框加上样式时，比如添加背景、外边距、内边距等等，问题就来了。我们原来的布局已经损坏，由于内边距和边界引入的额外宽度，可能会使我们原有的布局损坏掉。
有两个方法可以解决问题，最好的方法是给html加上下面的css：

1
2
3

{ box-sizing: border-box;
} box-sizing 通过更改盒模型来拯救我们，盒子的宽度取值为 content + padding + border，
而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。

2、浮动项目的背景高度

如果我们给每一个浮动框都加一个固定的高度，我们可以通过给所有的框的列定义一个固定高度来实现。
然而在许多情况下这并不理想——它使设计呆板。如果能保证列中总是有相同数量的内容，这是可以的，但这并不总是如此——在很多类型的网站上，内容也会定期更改。

这正是像flexbox这样的新布局技术所解决的问题。Flexbox可以自动地延长列，这样他们就会像最长的一列一样。

也可以考虑：

将这些列的背景颜色设置为父元素的背景颜色，这样您就不会看到高度是不同的。这是目前最好的选择。
将它们设置为固定的高度，并使内容滚动overflow (参见我们溢流部分的示例。)
使用一种叫做伪列（faux columns）的技术——这包括将背景(和边界)从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景一样。不幸的是，这将无法处理列边界。

3、清除浮动会很复杂

布局变得更加复杂清理（clearing）也会变得更加复杂。需要确保所有的浮动都能尽快清除，以避免它们给下方的内容制造麻烦。如果没有一个方便的容器来进行清理，那么在必要的时候使用clearfix块。

4、注意

如果是要调整两个浮动块的相对位置的话，不能用margin，只能用width：x%，且用百分数来表示的话更直观，因为每个屏幕的尺寸不一样，但是百分数都是表示在屏幕长度的百分之几，这样也比较直观。

心得体会

今天按照网页上面给布置的作业题，写了三个非常简单的简历，主要是运用今天和前几天所学的浮动和表格的相关内容，整个给我最大的感触就是，虽然看着一个简历可能很简单，就是由几个行列组成而已，但是真正实施起来还是有一定的繁琐度的，比如尺寸的选择，颜色的确定，边界线的显示与否，等等等。第一个做的简历是非常基本的，什么也没用到，主要运用的是排版结构，第二个就是稍微复杂一点，用到了今天所复习的浮动，最后一个是最复杂的，看起来很简单，它只是一个表格，但是写起来却是最复杂的，需要考虑空元素，行列元素，还要考虑在表格元素里面再添加表格等等问题，但是通过自己亲手一点一点的写代码最后组建了一个跟网页上相似的简历的时候，成就感还是非常大的，今天学到了很多东西，对类选择器和id选择器的运用更加熟练了，对浮动的定义和运用也更加深入了，总之今天收获满满！