Day5前端学习之路——盒模型和浮动

• 盒子模型
• 浮动float

一、盒子模型

（1）content内容区

width和height是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其他框，也可以使用min-width、max-width、min-height、max-height来设置最低/最高限度的width和height。默认情况下，width和height只包括内容区域的宽和高，不包括border、padding、margin。使用box-sizing可以使其包含content、padding、border

box-sizing的值:

/* 默认值，标准盒子模型，只含内容区 */
box-sizing:content-box;
/* width 和 height 属性包括内容，内边距和边框，但不包括外边距 */
box-sizing:border-box;

如果内容区过大，将会溢出，此时可使用overflow

overflow的值:

/* 默认值。内容不会被修剪，会呈现在元素框之外  */
overflow: visible;
/* 内容会被修剪，并且其余内容不可见  */
overflow: hidden;
/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容  */
overflow: scroll;
/* 由浏览器定夺，如果内容被修剪，就会显示滚动条  */
overflow: auto;

（2）margin外边框

外边距塌陷: 块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者

1. 相邻兄弟元素margin合并
2. 父级和第一个/最后一个子元素
3. 空块级元素的margin合并

（3）border边框

（4）padding内边框

（5）框类型

值	说明
block	块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
inline	行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
inline-block	行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。
table	像处理table布局那样处理非table元素，而不是滥用HTML的<table>;标签来达到同样的目的。
flex	处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
grid	给出一种简单实现CSS网格系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网格框架

二、浮动(float)

（1）多列浮动布局

• 两列布局

• 三列布局

（2）清除浮动

 clear 属性。当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另一个元素。

clear 可以取三个值：

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