《HTML5与CSS3基础教程》第11、14-16、18章

第十一章 用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>