先祝大家新年快乐～～其实年前已经看完了老版视频的，但因为内容比较多事情也比较多总结就耽搁了，后来看到新版的教程，想巩固一遍再总结，结果发现新增的css3很多全新的内容，比如动画、简单的过渡动效，一下子也难以吸收，就还是尽早把已学的做个巩固吧，并且我会将新版教程的相关内容也总结其中。

这一周信息量比较大，涉及到了css很重要的内容，主要是盒子模型，一些重要属性，另外还有表格表单等，所以还是分上下进行整理。

---

在总结主要内容前先总结下html的两种元素类型特点和区别，块元素和行内元素。

块元素（block element）：独占一行，即它下面的元素自动换行显示，可以用css设置块元素的宽和高

行内元素（inline element）:只占自身大小，不会占用一整行，不可以设置宽和高

一般来说，可以用块元素嵌套行内元素和块元素，行内元素不能包含块元素，

但是块元素<p>不可以包含任何块元素；行内元素<a>可以包含任何元素，除了它本身。

---

一.盒子模型（框模型）

css处理网页时会把每一个元素看作是一个盒子，网页布局其实就是摆放一个个盒子，在盒子里摆放元素就会涉及几个概念，可以想象现实生活中，大盒子里放小盒子，小盒子间有距离，小盒子里装的东西之间也有距离，在css中就是外边距（margin）、内边距（padding），还有盒子本身的边框（border），以及小盒子里容纳东西的地方为内容区（content）。

框模型

1.内容区Content

元素是盛放在内容区中的，块元素可以设置height、width来控制大小，行内元素可以通过display属性转换为块元素或行内块元素来设置宽和高。

2.内边距Padding

内边距是盒子内容区与边框之间的距离，会影响可见框的大小。有四个方向分别是padding-top、padding-right、padding-bottom、padding-left，可以给指定方向的padding设置距离，简写属性padding可以指零到四个值：

指定四个值，方向按顺时针即上右下左的顺序指定；

指定三个值，分别设置给 上 左右均分 下；

指定两个值，分别设置给 上下均分 左右均分；

指定一个值，则四个方向均设置为这个值。

框模型的padding、border和margin都按照这个规则指定值。

3.边框Border

边框是当前盒子的边界，会影响可见框的大小。设置元素border有三个属性：

border-width，设置元素边框宽度

border-color，设置元素边框颜色

border-style，设置元素边框样式，常用可选值有

（1）none  默认值，无边框

（2）solid  实线

（3）dotted  点状边框

（4）dashed  虚线

（5）double  双线

简写border属性时，边框的三个属性：宽度、颜色、样式的值都要写，每个属性用空格隔开，没有顺序要求。

4.外边距Margin

外边距是指当前盒子和其他盒子之间的距离，不会影响可见框的大小，会影响到盒子的位置。

使用简写属性margin，左右的外边距可以设置成auto：

-如果只指定左或者右外边距为auto，则会将外边距设置为最大值；

-垂直方向外边距如果设置为auto，则外边距默认为0（一般不会设置给垂直方向）；

-如果左右外边距同时设置为auto，则会将两侧外边距设置为相同的值，就可以使元素在父元素中水平居中，即margin：0 auto  

5.水平方向

在盒子模型中水平方向必须满足一个等式：

其父元素内容区的宽度=

子元素的margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

如果设置的值不满足这个等式则浏览器会自动调整未设置的值，使其满足等式，默认调整margin-right的值，如果margin-left 、margin-right  、width中有值设置了auto，则：

-一个值设为auto，则调这个值使等式成立；

-宽度和一个外边距设为auto，则宽度会调整到最大，设置为auto的那个外边距会自动为0；

-两个外边距设为auto，宽度固定，则外边距设为相同的值（水平居中）

6.垂直方向

子元素都是在父元素的内容区排列的，默认情况下，父元素的高度会被子元素撑开，如果父元素也设置了高度，而子元素大小超出了父元素，则超出部分就会从父元素中溢出。

针对溢出部分内容，css中可以用overflow属性来处理，用overflow-x可以单独处理水平方向的溢出内容，overflow-y单独处理垂直方向的溢出内容。该属性可选值有：

-visible 默认值，默认不做处理任凭溢出

-hidden 溢出内容会被修剪，不会显示

-scroll 增加滚动条，通过拖动滚动条查看溢出内容，但是该属性无论有无内容溢出，都会增加水平垂直两方向的滚动条

-auto 根据内容，按需求自动添加滚动条（推荐）

7.行内元素的盒子模型

正如一开始总结的那样，元素类型有块元素和行内元素，它们有明显的区别，对应的盒子模型也有些许不同：

-内联元素不能设置width和height，他的高度和宽度由内容决定，被内容撑开

-padding：可以设置水平方向内边距padding-left，padding-right；可以设置垂直方向内边距，有显示效果，但是不会影响页面布局（溢出的不显示）

-border：可以设置水平方向的border；垂直边框不会影响页面布局

-margin：可以设置水平方向margin，并且相邻的不会重叠（相加）；垂直外边距同样不会影响页面布局。

8.属性display和属性visibility

（1）属性display

通过该属性可以修改元素类型，可选值有：

-block：可将一个元素转换为块元素显示

-inline：可以将一个元素转换为行内元素显示

-inline-block：可以将一个元素转换为行内块元素，即一个元素既有行内元素特点又有块元素特点，既可以设置宽高，又不会独占一行（比如img标签），尽量避免使用

-table：可以将一个元素设置为表格显示

-none：不显示元素，并且元素不会在页面中占有位置，可以用来设置下拉菜单

（2）属性visibility

用来设置元素的隐藏和显示状态，可选值：

-visible：默认值，元素会默认显示

-hidden：元素会被隐藏，但仍会占据位置

9.可见框大小

默认情况下可见框的大小是由内容区、内边距、边框共同决定的，属性box-sizing可以用来设置盒子尺寸的计算方式，可选值有：

-content-box  默认值，设置的高度和宽度作用于内容区，

-border-box  宽度和高度作用于整个盒子的可见框大小，自动调整内容区的大小，使整个可见框的大小等于设置的宽度和高度。

10.float属性

元素默认是在文档流中排列，其特点有：

-块元素从上至下排列，独占一行，默认宽度是父元素的全部，即撑满父元素，默认高度被内容撑开；

-内联元素自左向右水平排列，只占自身大小，宽度和高度被内容撑开，不可设置；

-文档流的层级处于最底层。

因此要灵活设置布局，需要使元素脱离文档流，可以设置float属性来使元素脱离文档流，块元素将水平并排，可选值：

-none 默认值，元素默认在文档流中排列

-left 元素会立即脱离文档流，向页面左侧浮动

-right 元素会立即脱离文档流，向页面右侧浮动

当为一个元素设置浮动以后：

（1）元素会立即脱离文档流，该元素下边的元素会向上移动，元素浮动以后会尽量向页面左上或右上漂浮，直到遇到父元素的边框或者其他浮动元素为止；

（2）如果浮动元素上边为块元素，则浮动元素不会超过块元素；

（3）浮动元素不会超过它上边的兄弟元素；

（4）浮动元素不会盖住文字，文字自动环绕在浮动元素周围，可以通过浮动设置文字环绕图片效果；

（5）当元素设置浮动后，会完全脱离文档流，没有块元素和内联元素区别，都变成块元素；

（6）块元素脱离文档流后，高度和宽度都会被内容撑开；

（7）内联元素脱离文档流后，会变成块元素，宽度高度可以设置，都被内容撑开。

11.垂直外边距折叠和高度塌陷问题

（1）垂直外边距折叠

原因：相邻的垂直方向外边距会发生重叠现象

1）兄弟元素之间的相邻外边距，如果都设置了，一般不会相加：

-都是正值，会取一个较大值

-特殊情况：一正一负，取和；两负值，取绝对值大的

兄弟元素之间外边距的重叠，一般不需要处理。

2）父子元素间的相邻外边距，子元素上外边距会传递给父元素，会影响页面整体布局，必须进行处理。

3）解决方式

让父子元素不相邻，选择父元素before伪类，添加空内容，再用display将其转换成块元素，值选择table，这样既转换为了块元素，也不增加距离，结构上也没有增添内容以，此使两个元素不相邻，解决高度折叠问题。

（2）浮动元素高度塌陷问题

原因：在文档流中，父元素一直适应子元素高度，但是当子元素浮动，因为文档流层级最低，所以子元素高度不会撑开父元素，导致父元素高度塌陷，由于父元素的高度塌陷了，所有该父元素下的子元素都会向上移动，导致布局紊乱

解决方式：通过after伪类，选中高度塌陷的父元素后边，添加一个空内容，用display转换为一个块元素，再用clear清除浮动，几乎没有副作用，完美解决

---

ps：clear属性来清除其他浮动元素对当前元素的影响，可选值：

（1）none 默认值不清除浮动

（2）left 清除左侧浮动元素对当前元素的影响

（3）right 清除右侧浮动元素对当前元素的影响

（4）both 清除两侧中对他影响最大的浮动元素对当前元素的影响

---

（3）解决垂直外边距折叠和高度塌陷问题的代码

既可以解决高度塌陷又可以确保父元素和子元素的垂直外边距不会重叠：

.clearfix::before,

.clearfix::after{

content:"";

display:table;

clear:both;}

在出现问题的父元素中增添这个clearfix类名即可。