1. 盒子模型
（1）border：边框，border-width边框粗细，单位px；border-style边框样式，none默认值，没有边框即忽略所有边框的宽度，solid单实线（常用），dashed虚线，dotted点线，double双实线；border-color边框颜色。
也可以单独设置上top、下bottom、左left、右right的边框，例如border-top-width。还可以综合设置样式，border-top，border-bottom，border-left，border-right，border：宽度 样式 颜色。
border-collapse：collapse；表示将相邻的边框合并在一起。
border-radius：圆角边框（css3），可以设置1~4个值，可以是单位为px的数值，也可以是百分数，依次设置左上角、右上角、右下角、左下角的radius。
（2）padding：padding-top padding-right padding-bottom padding-left，盒子内边距，可以设置1~4个值，数值单位为px，设置为0即可清除内边距。
（3）margin：margin-top margin-right margin-bottom margin-left，外边距，在元素之间创建“空白”，可以设置1~4个值，数值单位为px，当给左右的外边距都设置为auto时，可以使带有宽度的块级元素水平居中，设置为0即可清除外边距。
行内元素只有左右外边距，没有上下外边距；相邻块元素垂直外边距的合并（也称外边距塌陷），垂直间距取两者之间的较大值；对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并，可以为父元素定义1px的上边框或上内边距，也可以为父元素添加overflow:hidden来解决这个问题。
（4）content宽度和高度：外盒尺寸即元素空间尺寸计算，element空间高度 | 宽度 = content height | width + padding + border + margin；内盒尺寸即元素实际大小计算，element空间Height | Width = content height | width + padding + border；其中height和width通过属性值设置。
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效；计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况；如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;/*情况默认内外边距*/
padding: 0;
}
ul {
list-style: none;/*取消列表自带的小点*/
}
.searchPic {
width: 238px;
height: 294px;
border: 1px solid #D9E0EE;
border-top: 3px solid #FF8400;/*位于border之后*/
margin: 100px;
}
.searchPic h3 {
height: 35px;
line-height: 35px;/*垂直居中*/
border-bottom: 1px solid #D9E0EE;
font-weight: normal;/*粗体不加粗*/
font-size: 16px;
padding-left: 12px;/*继承父亲宽度*/
}
.searchPic img {
margin: 7px 0 0 8px;
}
.searchPic ul li a {
font-size: 12px;
color: #666;
text-decoration: none;/*取消下划线*/
}
.searchPic ul {
margin-left: 8px;
}
.searchPic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;
background: url(images/square.png) no-repeat left center;
}
.searchPic ul li a:hover {
text-decoration: underline;
color: #FF8400;
}
</style>
</head>
<body>
<div class="searchPic">
<h3>搜索趣图</h3>
<img src="images/img01.jpg" width="218">
<ul>
<li><a href="#">这是链接1</a></li>
<li><a href="#">这是链接2</a></li>
<li><a href="#">这是链接3</a></li>
</ul>
</div>
</body>
</html>（5）box-sizing（css3）：指定盒模型，取值为content-box时，盒子大小为width + padding + border；取值为border-box时，盒子大小为width，即padding和border是包含到width里面的。
（6）box-shadow：水平位置h-shadow 垂直位置v-shadow 模糊距离blur 阴影尺寸spread 阴影颜色color 内外阴影inset，默认是outset，不需要设置，例如box-shadow：0 15px 30px rgba（0，0，0，0.4)；省略阴影尺寸。
2. css定位机制
（1）普通流 / 标准流 / 文档流：网页内标签元素正常从上到下、从左到右排列，块级元素独占一行，行内元素按顺序依次前后排列。
（2）float浮动：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程，此时元素具有行内块元素的特性，浮动的目的是为了让多个块级元素在同一行上显示，取值有left、right、none三种，浮动首先创建包含块（即父级元素），浮动的元素总是找离它最近的父级元素对齐，但是不会超过内边距的范围。一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其它子级都需要浮动，这样才能一行对齐显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
/*注意两个div是否设置了float:left的区别*/
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>当父元素没有设置高度，父元素高度默认为0，子元素设置了浮动时，后面的元素会上浮占据原来的位置，清除浮动即把浮动的盒子圈到里面，让父盒子闭合出口和入口不让它们出来影响其它元素，以下有几种方法用来清除浮动造成的影响。
① 额外标签法：在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>，clear还可以取值left，right，但不常用，此方法通俗易懂，书写方便，但是会添加许多无意义的标签，结构化较差。
② 给父级元素添加overflow属性：添加overflow：hidden | auto | scroll；都可以实现，代码简介，但内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。
③ 使用after伪元素清除浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:after {
content: ".";/*内容为小点，尽量不为空，否则旧版本浏览器有空隙*/
display: block;/*转换为块级元素*/
height: 0;/*高度为0*/
visibility: hidden;/*隐藏盒子*/
clear: both;/*清除浮动*/
}
.clearfix {/*ie6、7浏览器的处理方式*/
*zoom: 1;
/** 代表ie6、7能识别的特殊符号，带有*的属性，只有ie6、7才执行
zoom是ie6、7清除浮动的方法*/
}
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
section:last-child {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<section class="clearfix"><!-- 父元素盒子不设置高度 -->
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>④使用before和after双伪元素清除浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:before,.clearfix:after {
content: "";
display: table;/*触发BFC清除浮动*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
div:first-child {
background-color: pink;
width: 200px;
height: 200px;
float: left;
}
div:last-child {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
/*注意两个div是否设置了float:left的区别*/
section:last-child {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<section class="clearfix"><!-- 父元素盒子不设置高度 -->
<div></div>
<div></div>
</section>
<section></section>
</body>
</html>（3）定位：元素的定位属性主要包括定位模式和边偏移两部分。
① 边偏移：top，bottom，left，right。
② 定位模式：选择器{position：属性值；}，属性值常见取值有static、relative、absolute、fixed四种。
A. 静态定位static：所有元素的默认定位方式，即标准流的特性，此状态下无法通过边偏移属性（top、bottom、left、right）来改变元素的位置，一般用来消除其它定位方式的影响。
B. 相对定位relative：通过边偏移移动位置，但是原来所占的位置继续占有；每次移动的位置，都是以自己的左上角为基点移动；仍在标准流中，后面的盒子仍以标准流方式对待它；其主要价值就是移动位置，让盒子到我们想要的位置上去。
C. 绝对定位absolute：可以通过边偏移移动位置，但是完全脱标，不占位置；如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位；若所有父元素都没有定位，则以浏览器为基准对齐；若父级元素有定位，则将元素依据最近的已经定位（absolute、relative或fixed）的父元素进行定位。
子绝父相：子级元素是绝对定位时，父级元素要用相对定位。
绝对定位的盒子水平/垂直居中：此时普通盒子左右margin为auto无效，须设置left：50%或者top：50%，即父盒子的一半大小，然后外边距margin-lef或margin-topt负的自己盒子宽度/高度的一半即可。
D. 固定定位fixed：当对元素设置固定定位后（需设置宽度和高度，或者有内容撑开），它将脱离标准文档流的控制，和父元素没有任何关系，不占位置，始终依据浏览器窗口来定义自己的显示位置，不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
z-index：用来调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0，没有单位，默认值为0，取值越大，定位元素在层叠元素中越居上；如果取值相同，则根据书写顺序后来居上；只有当position设置为relative、absolute、fixed有此属性，其余标准流、浮动、静态定位均无此属性。
元素添加了绝对定位和固定定位之后，与浮动一样，元素模式会转换为行内块模式（行内元素和块元素均如此），因此不需添加display：block。
| 定位模式 |
是否脱标占有位置 |
是否可以使用边偏移 |
移动位置基准 |
|---|---|---|---|
| 静态static |
不脱标，正常模式 |
不可以 |
正常模式 |
| 相对定位relative |
不脱标，占有位置 |
可以 |
相对于自身位置移动（自恋性） |
| 绝对定位absolute |
完全脱标，不占有位置 |
可以 |
相对于定位的父级元素移动位置（拼爹型） |
| 固定定位fixed |
完全脱标，不占有位置 |
可以 |
相对于浏览器移动位置 |
3. 布局
（1）网页布局流程：确定页面的版心（可视区，网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px），分析页面中的行模块，以及每个行模块中的列模块，制作html结构，css初始化，运用盒子模型，通过div + css布局来控制网页的各个模块。
（2）伸缩布局（css3）
父级元素设置display：flex；子元素设置flex：num；num表示所占份数，瓜分父元素，也可以直接指定像素值，不指定flex属性则不参与伸缩分配。
① flex-direction：主轴（flex容器的主轴主要用来配置flex项目，默认是水平方向）、侧轴（与主轴垂直，默认是垂直方向）、方向（默认主轴从左到右，侧轴从上到下，可以通过flex-direction：row | column | row-reverse | column-reverse；改变）。
② min-width和max-width：可以限制最小/大宽度。
③ justify-content：调整主轴对齐（水平），取值有5种，flex-start让子元素从父容器的开头开始紧挨着排序但是盒子顺序不变，flex-end让子元素从父容器的后面开始紧挨着排序但是盒子顺序不变，center让子元素在父容器中间紧挨着显示，space-between左右的盒子贴近父盒子，中间的平均分布空白边距，space-around各个子元素前后都有空白间距。
④ align-items：调整侧轴对齐（一行垂直），stretch让子元素的高度拉伸适用父容器（子元素不给高度的前提下），center垂直居中，flex-start以父元素顶部为基准垂直对齐，即上对齐，flex-end以父元素底部为基准垂直对齐，即下对齐。
⑤ flex-wrap：当子盒子中宽度多于父盒子的时候控制是否换行，取值有3种，nowrap默认值（常用），规定不换行或不拆列，即收缩（压缩）强制一行内显示，wrap必要时拆行或拆列，wrap-reverse必要时拆行或拆列，但是以相反的顺序。
⑥ align-content：针对flex容器多行的情况，必须对父元素设置display：flex；排列方式flex-direction：row；并设置换行flex-wrap：wrap才会起作用，取值有6种，stretch，center，flex-start，flex-end，space-between，space-around。
⑦ flex-flow：flex-direction flex-wrap的合并简写方式。
⑧ order：num；控制子元素的排列顺序，正序方式排列，从小到大，数值小的排在前面，可以为负值，默认值为0。
4. BFC（块级格式化上下文）
（1）概念：独立的渲染区域，只有块级元素参与，规定了内部的块级元素如何布局，并且与这个区域外部毫不相干，这个区域有宽度和高度、外边距margin、内边距padding、边框border，不是所有元素模式都能产生BFC，display属性为block、list-item、table的元素会产生BFC。
（2）触发BFC的条件：① float属性不为none；② position为absolute或fixed；③ display为inline-block、table-cell、table-caption、flex、inline-flex；④ overflow不为visible。
（3）BFC元素所具有的特性：① 在BFC中，盒子从顶端开始垂直地一个接一个地排列；② 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠；③ BFC中，每一个盒子的左外边缘margin-left会触碰到容器的左边缘border-left；④ BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；⑤ 计算BFC的高度时，自然也会检测浮动的盒子高度。
（4）BFC的主要用途：
① 清楚元素内部浮动：常见的在父元素上设置overflow：hidden；防止子元素浮动而使得父元素高度为0。
② 解决外边距合并问题：盒子垂直方向的距离由margin决定，属于同一个BFC的两个垂直相邻的盒子，上面盒子的margin-bottom和下面盒子的margin-top会合并，取两者中较大值，解决方法可用一个盒子包裹其中一个盒子，并设置overflow：hidden。
③ 制作右侧自适应的盒子：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘，普通流体元素（例如含文字的div）BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。
