第十一章 用CSS进行布局
1、盒模型：如果设置了box-sizing:border-box,则宽度和高度就包含了除外边距以外的所有元素
2、元素的显示类型：display:block（块级）/inline（行内）/inline-block（显示为行内元素同时具有块级元素的特征）/list-item（对于li元素）/none;设置为inline的元素会忽略任何width、height、margin-top和margin-bottom设置
3、元素的可见性：visibility:visible/hidden;
4、元素的高度和宽度（不继承）： 让宽度和高度包含内边距和边框，设置*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}；可以用min-width代替width，用min-height代替height。
5、内边距（不继承）：padding/padding-top/padding-right/padding-bottom/padding-left:px，就是元素内容周围、边框以内的空间。使用一个值，这个值就会应用于全部四个边；使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边；使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边；使用四个值，它们会按照顺时针方向依次应用于上、右、下、左边。
6、边框（不继承）：
1）边框风格：border-style:none/dotted（点线）/dashed（虚线）/solid（实线）/double（双线）/groove（槽线）/ridge（脊线）/inset（凹线）/outset（凸线）；
2）边框宽度：border-width：px;
3）边框颜色：border-color；
4）同时设置所有的边框属性：border/ border-top/ border-right/ border-bottom/ border-left。
border简写属性及各个边框属性均可接受一至四个值。
7、外边距（不继承）：margin/margin-top/margin-right/margin-bottom/margin-left:px，就是元素和相邻元素之间的透明空间。Margin属性可接受一至四个值。margin属性的auto值依赖于width属性的值。当em值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是性对于父元素的字体大小的。
8、浮动（不继承）：float:left/right/none，就是使元素浮动在文本或其他元素上。浮动元素不影响父元素的高度。
9、清除浮动：clear:left/right/both/none，而clearfix和overflow方法是应用于浮动元素的父元素和祖先元素的。
10、相对定位（不继承）：position:relative;top/right/bottom/left:px;
11、绝对定位（不继承）：position:absolute;top/right/bottom/left:px;；对希望成为绝对定位参照体的祖先的祖先元素添加position:relative;；对元素设置position:static将覆盖position:relative/absolute
12、固定定位（不继承）：position:fixed;
13、在栈中定位元素（不继承）：z-index的值越大，元素在栈中就越高。
14、溢出：overflow:visible/hidden/scroll/auto
15、垂直对齐：vertical-align:baseline（基准线与父元素的基准线对齐）/middle （位于父元素的中央）/sub（成为父元素的下标）/super（成为父元素的下标）/text-top（顶部对齐父元素的顶部）/text-bottom（底部对齐父元素的底部）/top（顶部对齐当前行里最高元素的顶部）/bottom（底部对齐当前行里最高元素的底部）
16、鼠标样式：cursor:default/pointer/crosshair/move/wait/help/text/progress/auto
第十四章
1、浏览器兼容性
2、厂商前缀：-webkit-（Webkit/Safari/旧版本的Chrome）、-moz-（Firefox）、-ms（Internet Explore）、-o-（Opera）
3、（不继承）圆角：border-radius:r；椭圆形圆角：border-radius:x/y；为了避免元素的背景透过圆角，设置background-clip:padding-box；旧版本的Android、Mobile Safari和Safari浏览器需要使用厂商前缀-webkit-。
4、（继承）为文本添加阴影：text-shadow:x-offset（水平偏移量） y-offset（垂直偏移量） blur-radius（模糊半径，可选） color/none；多重阴影：ext-shadow:x-offset（水平偏移量） y-offset（垂直偏移量） blur-radius（模糊半径，可选） color,x-offset y-offset blur-radius color;；不需要使用厂商前缀。
5、（不继承）为其他元素添加阴影：text-box:x-offset（水平偏移量） y-offset（垂直偏移量） blur-radius（模糊半径，可选） spread（收缩或扩张阴影，可选） color/none；内阴影：text-box:inset x-offset y-offset blur-radius spread color；多重阴影：text-box:(inset) x-offset y-offset blur-radius spread color,(inset) x-offset y-offset blur-radius spread color；旧版本的Android、Mobile Safari和Safari浏览器需要使用厂商前缀-webkit-。
6、多重背景：background:background-color background-image(url(image.png)) background-position(x-offset y-offset) background-repeat(repeat-x/repeat-y/no-repeat)
7、渐变背景
1）线性渐变：background:linear-gradient(to top/to right/to left/to bottom right/to bottom left/to top right/to top left/deg , color)
2）径向渐变：background:radial-gradient(circle/ellipse, size(closest-side/ farthest-side/ closest-corner/farthest-corner,pos(at top/at right/at left/at bottom right/at bottom left/at top right/at top left/at px px/at % %/at % px),color)
8、不透明度（不继承）：opacity:0.00~1.00;
9、生成内容：就是通过CSS创建的内容，而不是HTML生成的，:before/:after{content:” ”}。
10、拼合图像
第十五章 列表
1、有序列表
<ol><li></li></ol>，在ol标签中定义属性start表示列表的初始值，在li标签中属性value表示该列表项目的值
2、无序列表
<ul><li></li></ul>
3、标记list-style-type:disc（圆点）/circle（圆圈）/square（方块）/decimal（数字）/upper-alpha（大写字母）/lower-alpha（小写字母）/upper-roman（大写罗马数字）/lower-roman（小写罗马数字）/none
4、（继承）标记位置list-style-position:inside（缩排）/outside
5、同时设置所有的列表样式属性：list-style:list-style-type list-style-position list-style-image(url(image.png))
6、描述列表
<dl><dt><dd></dd></dt></dl>
第十六章 表单
1、创建表单：<form method=”get/post” action=”script.url”></form>，其中若method=”get”，则表单提交后，表单中的数据会显示在浏览器的地址栏里，通常如果希望表单提交后从服务器得到信息就使用get；若method=”post”，则表单提交后，表单中的数据不会显示在浏览器的地址栏里，通常如果希望在数据库中保存、添加和删除数据就使用post。
2、处理表单
3、对表单元素进行组织：<fieldset><legend>标题</legend></fieldset>
4、文本框：<lable for=”dataid”></lable><input type=”text” name=”dataname” id=”dataid” value=”default” placeholder=”hinttext” required=”required” autofocus=”autofocus” readonly=”readonly” size=”n” maxlength=”n”/>
5、标签：<lable for=”dataid”></lable>
6、密码框：<lable for=”dataid”></lable><input type=”password” name=”dataname” id=”dataid” required=”required” autofocus=”autofocus” size=”n” maxlength=”n”/>
7、电子邮件框：<lable for=”dataid”></lable><input type=”email” name=”dataname” id=”dataid” value=”default” placeholder=”hinttext” required=”required” autofocus=”autofocus” multiple=”multiple” size=”n” maxlength=”n”/>
8、搜索框：<lable for=”dataid”></lable><input type=”search” name=”dataname” id=”dataid” value=”default” placeholder=”hinttext” required=”required” autofocus=”autofocus” size=”n” maxlength=”n”/>
9、电话框：<lable for=”dataid”></lable><input type=”phone” name=”dataname” id=”dataid” value=”default” placeholder=”hinttext” required=”required” autofocus=”autofocus” size=”n” maxlength=”n”/>
10、URL框：<lable for=”dataid”></lable><input type=”url” name=”dataname” id=”dataid” value=”default” placeholder=”hinttext” required=”required” autofocus=”autofocus” size=”n” maxlength=”n”/>
11、单选按钮：<input type=”radio” name=”radioset” id=”dataid” value=”data” checked=”checked”/><lable for=”dataid”></lable>
12、复选框：<input type=”checkbox” name=”boxset” id=”dataid” value=”data” checked=”checked”/><lable for=”dataid”></lable>
13、文本区域：<textarea name=”dataname” id=”dataid” maxlength=”n” cols=”n” rows=”n” placeholder=”hinttext”></textarea>
14、选择框：<select name=”dataname” id=”dataid” size=”n” multiple=”multiple”><optgroup lable=”submenutitle”> <option value=”optiondata” selected=”selected”></option> </optgroup> <optgroup lable=”submenutitle”> <option value=”optiondata” selected=”selected”> </option> </optgroup> </select>
15、文件：<form method=”post” action=”upload.url” enctype=”multipart/form-data”><lable for=”dataid”></lable><input type=”file” name=”dataname” id=”dataid” size=”n” multiple=”multiple”/></form>
16、隐藏字段：<input type=”hidden” name=”dataname” value=”data” />
17、提交按钮：<input type=”submit” value=”data” formnovalidate/>；带图像的提交按钮：<input type=”image” src=”image.url” alt=”description” disabled/>；结合文本和图像的提交按钮：<bottom type=”submit”><img src=”image.png” alt=”alternate text”/></bottom>；重置按钮：<bottom type=”reset”></bottom>
18、根据状态为表单设置样式
第十八章 表格
1、结构化表格：<table><caption></caption><tr><th scope=”scopetype”> </th></tr><tr><td> </td></tr></table>
2、让单元格跨越多列：<td colspan=”n”></td>
3、让单元格跨越多行：<td rowspan=”n”></td>