CSS的布局属性——盒子模型、浮动、清除浮动、溢出、显示、定位、块级元素、内联元素、内联块级元素、固定宽度与最大宽度、水平垂直对齐

边框

为什么把边框归类于布局的属性呢？
因为在布局的时候常常看不到效果，这个时候如果使用边框显示元素的位置，就比较容易知道自己布局的效果，方便学习布局
另外，边框属于盒子模型的一部分

html标签也有边框，并且是最外面的边框
body是仅次于html第二层的边框
默认有的浏览器html标签与body标签之间会有边距，可以将body的外边距设置为0，这是一个好习惯。

元素高度和宽度

设置元素的高度和宽度，仅仅是指元素内容本身的高度和宽度，不包括内边距，边框的宽度以及外边距

最大宽度最小宽度以及最大高度最小高度
在当屏幕大小发生变化的时候固定显示的大小，假如当设置最小宽度为800px的时候调整浏览器窗口大小小于800的时候就会出现水平滚动条，当设置最大宽度的时候，尽管屏幕大于800，钙元素的显示宽度仍然是800，不会变大。

外边距

外边距margin-top margin-right margin-bottom margin-left

外边距的属性值可以是：auto inherit px 百分比

提示：允许使用负值。

margin:auto; 将元素水平居中

auto您可以将margin属性设置为auto以自动将元素在其容器中水平居中。

然后，元素将占据指定的宽度，剩余空间将在左右外边距之间平均分配。

外边距崩溃
常识似乎表明<h1>和<h2>之间的垂直边距总计为70像素（50像素+ 20像素）。 但是由于边距崩溃，实际边距最终为50px。

内边距

CSS填充属性用于在任何定义的边框内，在元素内容周围生成空间。

内边距像外边距一样除了没有auto值，其他值都有，另外就是内边距不支持负数值，而外边距支持负数值

内边距和元素的宽度之间的关系
CSS width属性指定元素内容区域的宽度

如果希望内边距不影响整个元素的宽度大小，若要将宽度保持为300px，无论填充量如何，都可以使用box-sizing属性。 这将导致元素保持其宽度。 如果增加填充，则可用的内容空间将减少。

使用属性box-sizing: border-box;将内边距包含进元素宽度中

盒子模型

盒子模型包括外边距，边框，内边距，元素本身的高度或者宽度

CSS框模型实质上是一个盒子。 它包括：页边距，边框，填充和实际内容。 下图说明了盒子模型：

• 内容content-盒子里面的内容，其中显示文本和图像
• 填充padding-清除内容周围的区域。 填充是透明的
• 边框border-围绕内边距和内容的边框
• 边距margin-清除边界border外的区域。 边距是透明的

重要提示：使用CSS设置元素的width和height属性时，你只是设置了内容区域的宽度和高度。 要计算元素的完整大小，还必须添加填充，边框和边距。

元素的总宽度应这样计算：

元素总宽度=宽度+左填充+右填充+左边框+右边框+左空白+右空白

元素的总高度应如下计算：

元素总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距

溢出属性overflow

有时，元素内的内容更多，这会导致内容在元素外溢出。 CSS溢出属性允许我们通过隐藏溢出内容或向元素添加滚动条来处理溢出内容。

溢出属性可以具有以下值：

• 可见（visible）→这是默认值。 在这种情况下，不会对溢出的内容采取任何措施，并且在元素外部也可以看到它。
• 隐藏(hidden)→在这种情况下，元素外部的溢出内容将变得不可见，即被隐藏。
• 滚动(scroll)→在这种情况下，滚动条将添加到元素，因此允许其在其中保留所有内容。
• 自动(auto)→如果内容较少，则此行为类似于可见内容，但随着内容开始向外溢出，此属性将开始像滚动一样，并向元素添加滚动条。

默认情况下，所有HTML标签都是自动调整的，即它们可以增长到无限的高度并可以容纳所有内容。 但是，在固定高度元素的情况下，需要溢出属性。

Position定位

静态定位

静态位置是定位的默认属性==
任何页面元素的默认值都是静态的。 静态表示该元素将像往常一样适合页面。 显式指定static的情况很少见，可用于摆脱任何继承的位置值。

静态定位的元素不受top，bottom，left和right属性的影响。

相对位置

相对位置是相对于自身定义的==
这个位置是相对于自己的意思。 将元素的位置设置为相对，但不指定其他任何属性（例如top，bottom，left或right），则不会对元素的位置产生特殊影响。 但是指定一个bottom属性为bottom：20px; 会将元素与其正常位置相比向上移动20像素。

将位置设置为相对会使该元素显示在其区域中任何其他静态元素的顶部。 其他内容将不进行调整以适合元素留下的任何间隙。

相对定位不会更改页面的结构，不会使得元素脱离文档标准流

绝对位置

绝对位置是相对于父元素定义的==
此值使您可以将元素精确放置在想要放置的位置。 定位属性top，bottom，left和right用于确定确切位置。 这些元素相对于最后一个父元素放置。 如果没有父元素，则将这些元素设置为相对于页面本身，即滚动时它与页面一起移动。

绝对位置会更改页面的结构，使得元素脱离文档标准流

固定位置

固定位置是相对于视口定义的==
这种定位很少见，但肯定有其用途。
固定位置元素是相对于视口或浏览器窗口本身而不是相对于父元素或其同级元素放置的。 滚动窗口时，视口不会改变，因此固定位置的元素将保持在滚动页面时的位置。

重叠定位

当我们进行大量定位时，可能会出现元素相互重叠的情况。 因此，在重叠的情况下，哪个元素会出现在另一个元素的顶部？

z-index定义元素的堆叠顺序。 具有较高z-index的元素将始终位于具有较低z-index的元素之上。 元素可以具有正或负的z-index值。

决定元素的层叠显示顺序

浮动float

（略）

清除浮动clear

• none-允许两面都浮动。 这是默认值
• 左侧-左侧不允许有浮动元素
• 右侧-右侧不允许使用浮动元素
• 两者-左侧或右侧均不允许使用浮动元素
• 继承-元素继承其父元素的清除值

以等宽等高并排浮动盒子布局

如果要将浮动等宽度盒子的高度设置为相同的，可以将他们的高度设置为固定的高度

但是，这不是很灵活。 如果可以保证盒子中始终有相同数量的内容，那是可以的。 但是很多时候，内容是不一样的。 如果您在手机上尝试上述示例，则会看到第二个框的内容将显示在框的外部。 这是CSS3 Flexbox派上用场的地方-因为它可以自动拉伸框使其与最长的框一样长：

元素显示display visibility

display属性是用于控制布局的最重要的CSS属性。

display属性指定是否以及如何显示元素。

显示方式

每个HTML元素都有默认的显示值，具体取决于它的元素类型。 大多数元素的默认显示值为block或inline。
display:block(块级显示)
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
display:inline(内联显示)
内联元素不会从新行开始，仅占用必要的宽度。
display:none(不显示)
display：none； 通常与JavaScript一起使用，以隐藏和显示元素，而不删除和重新创建它们。

覆盖默认display显示值

如前所述，每个元素都有一个默认的显示值。 但是，您可以覆盖它。
将内联元素更改为block元素显示，反之亦然

A common example is making inline

• elements for horizontal menus:
  li 列表项原本是块级标签
  使用display可以将它设置为行内标签

• 注意：设置元素的显示属性仅会更改元素的显示方式，而不会更改元素的种类。 因此，带有display：block;的内联元素 不允许在其中包含其他块元素。

  visibility:hidden; also hides an element.
  但是使用visibility，该元素仍将占用与以前相同的空间。 元素将被隐藏，但仍会影响布局

  块级元素、内联元素、内联块级元素

  块级元素可以设置大小，可以设置宽度和高度
  内联元素不可以设置大小，不可以设置宽度和高度

  块级元素默认占用一整行
  就算设置快级元素的宽度小于屏幕的宽度，但是该块级元素仍然占用那一整行，快级元素始终占用一整行，除非浮动快级元素，后面的元素才会漂上来。

  内联块级元素
  与display：inline相比，主要区别在于display：inline-block允许在元素上设置宽度和高度。
  另外，在display：inline-block中，将遵守各个方向的外边距和内边距，但在display：inline中，则不遵守。inline内联元素仅支持左右的外边距，不支持上下的外边距，支持上下左右的内边距。

  内联块级元素与display：block相比，主要区别在于display：inline-block不会在元素后添加换行符，因此该元素可以位于其他元素旁边。

  常常使用内联块创建水平的导航栏

  固定宽度与最大宽度

  当设置元素的宽度为固定宽度的时候缩小屏幕大小，使得当前屏幕小于元素的宽度的时候就会出现滚动条
  当设置元素的宽度为最大宽度的时候缩小屏幕大小，使得当前屏幕小于元素的宽度的时候不会出现滚动条

  CSS布局-水平和垂直对齐

  盒子水平居中
  要水平放置块元素（例如<div>），请使用margin：auto;
  设置块级元素的宽度将防止其延伸到容器的边缘。
  然后，元素将占据指定的宽度，剩余空间将在两个外边距之间平均分配：
  注意：如果未设置块级元素的width属性（或将其设置为100％），则margin：auto;中心对齐无效。

  文本水平居中
  如果有一个div盒子，盒子中有文本等元素，则在div中加上属性text-align: center居中其中的文本

  图片水平居中
  要使图像居中，请将左右外边距设置为auto并将其设置为块元素

  左右对齐-使用绝对定位

  对齐元素的一种方法是使用position：absolute ;

  注意：绝对定位的元素将从正常流中删除，并且可能与元素重叠。

  左右对齐使用浮动
  （略）
  垂直居中-使用填充
  当盒子没有高度的时候需要垂直居中可以使用上下内边距垂直居中盒子中的元素
  当盒子没有大小，直接设置他的上下内边距，那么它所包含的元素就会自动垂直居中

  同时水平和垂直居中
  同时使用 padding 和text-align: center:

  使用行高垂直居中
  另一个技巧是使用line-height属性，其值等于height属性
  这个方法是在盒子有高度的情况下使用

  使用position&&transform
  If padding and line-height are not options, another solution is to use positioning and the transform property:（此处略）

  使用Flexbox
  （此处略）