奔跑的akuan05：盒模型

图示：

基础概要归纳

• width 和height 设置了内容框的宽/高
• padding 家族属性设置内边距的宽度(别忘了普通属性比如 padding-bottom ，一次设置一个边).
• border 家族属性设置边界的宽度、样式和颜色(许多可用的普通边界属性还有很多)。
• margin 家族属性设置包围CSS盒子外部区域的宽度，这个属性推开布局中其他的CSS盒子（也有许多可用的普通属性比如 margin-bottom ）。

• 其它一些值得记住的点：

• 如果盒子的高度被设置为百分比长度，那么盒子高度不会遵循这个设置了的百分比长度，而是总会采用盒子内容的高度，除非给它设置了一个绝对高度（例如，像素或者 em）。这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便。
• 边界（border）也会忽略百分比宽度设置。
• 外边距（margin）有一个特殊的行为，称为 外边距塌陷： 当两个盒子挨在一起时，二者之间的距离为两个挨着的外边距中最大的那个值，而不是二者的和。

padding

一次性写四个属性。也可以分开写：padding-top、padding-right、padding-bottom、padding-left

border

简写属性——  border:1px solid black;

分开写：

border-top, border-right, border-bottom, border-left

其他样式属性：

border-width, border-style, border-color：分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。

单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。 

border-style样式包括：

solid	dotted	dashed	double
inset	outset	ridge	groove

设置边框不可见：none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

margin

单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

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

 

溢流（Overflow）

最常用的是：

• auto：如果内容太多，那么超出盒子大小的内容会被隐藏，滚动条显示出来，从而可以让用户滚动看到所有内容。
• hidden：如果内容太多，那么超出盒子大小的内容被隐藏了。
• visible：如果内容太多，超出盒子大小的内容显示在盒子之外（这通常是默认的行为）。

默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

背景剪裁（Background clip）

浮动

 

 

[额外]

CSS3 :nth-of-type() Selector

指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：

p:nth-of-type(2)
{
background:#ff0000;
}

三列布局css样式

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
div:nth-of-type(1) {
  width: 33%;
  float: left;
}
div:nth-of-type(2) {
  width: 33%;
  float: left;
}
div:nth-of-type(3) {
  width: 33%;
  float:right;
}

清除浮动

因为有了浮动，下面本来不浮动的元素也会跟着浮动，所以需要额外设置清除浮动。

footer {
  clear: both;
}

clear 可以取三个值：

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

闭合浮动和清除浮动

https://www.zhihu.com/question/19915431

解决受影响的不浮动模块：清除浮动和闭合浮动的区分

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。
两者的区别 请看优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。

结论：用闭合浮动比清除浮动更加严谨，所以后文中统一称之为：闭合浮动。

 

 

闭合的几个方法

（.......略）

闭合的几个方法-小结
通过对比，我们不难发现，其实以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。

作者：一丝
链接：https://www.zhihu.com/question/19915431/answer/14840690
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

 清除浮动的简单方法：http://zh.learnlayout.com/clearfix.html

.clearfix {
  overflow: auto;
}