1.标题标签h1~h6
2.文字标签对齐方式 align=“left center right”left（默认）
3.段落标签 <p>段落正文内容</p>
4.文字颜色标签<p style="color 颜色代码"> </p>
5.换行标签 <br>
6.水平标签 <hr>默认水平线；<hr 属性="属性值">
7.水平线高度和宽度<hr width="水平线宽度” size=“水平线高度”/>
8.水平线颜色 <hr color="颜色代码"/>
9.水平线对齐方式 <hr aligh="对齐方式"/> left，right,center（默认）
10.去掉水平线阴影 <hr noshade="noshade"/>
11.加粗文字标签<b>要以粗体显示的文字</b> <strong>要以粗体显示的文字</strong>
12.图片标签<img src="路径" alt="提示信息" align="对齐方式" border="边框大小" width=“宽度” height="高度"/>
13.图片与文本的对齐方式 <img align="属性"/> 属性=top,bottom,middle,left,right
14.超链接标签
相对路径 a.<a href="a.html"> 相对路径的超链接</a>
b.<a href=".../a.html">相对路径的超链接</a>
c. <a href="html/a.html">相对路径的超链接</a>
绝对路径 <a href="http://www.qq.com">绝对路径的超链接</a>
15.列表标签
a.无序列表 <ul> <li>文字</li> </ul>
b.有序列表 <ol> <li>文字</li> </ol>
c.自定义列表 <dl> <dt>名词1<dd>解释1 </dl>
16.容器类标签 <div> </div>作为组合其他 HTML 元素的容器，默认情况下，div标签将占满一行，当存在多个div标签时，将按照从上到下的方式排列。
<span> </span>作为文本的容器。默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
1~16总结:HTML 是 Hypertext Markup Language（超文本标记语言）的缩写。超文本使网页之间具有跳转的能力，是一种信息组织的方式，使浏览者可以选择阅读的路径，从而可以不需要按顺序阅读。
HTML5标签所有内容都在 <html></html> 标签之内；<head></head> 内放的是头部信息，是对页面的描述，不会直接显示在页面中，<head> 内的 <title> 中设置的是页面的标题，<title> 只能放在 <head> 中；<body> 是页面的主体，大部分显示内容都定义在这里。
在 HTML 中，常用标签有：标签标签(<h1> ~ <h6>)、段落标签（<p>）、换行标签（<br/>）、强调标签（<b> 或 <strong>）、图像标签（<img />）和链接标签（<a></a>）。
17.表格 <table> </table> 表格的开始和结束
18.表格行 <tr> </tr> 有几组<tr>就表示该表格有几行
19.表格列 <td> </td> 既表示单元格，也表示一行中包含几列
20.表格边框宽度 border
21.表格合并：在 td 中加入 rowspan 或 colspan 属性，colspan 表示跨越的列数，rowspan 表示跨越的行数。
colspan: <table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
rowspan: <table>
<tr>
<td rowspan=“所跨的行数”> 单元格内容 </td>
</tr>
<table>
22.表格的宽度，高度，边框
<table width=“宽度” height=“高度” border=“边框宽度” </table>
width 属性和 height 属性用于设置表格的宽度和高度，可以用像素表示，也可以用百分比（与浏览器窗口相比的大小比例）表示。其中，width 属性不仅能够设置表格的宽度，也可以设置 td 的宽度，height 属性border 属性用于设置表格边框的宽度，只能使用像素表示
23.表格的背景颜色.字体颜色和图片
<table bgcolor=“背景颜色” background=“背景图片的地址”> <table>
通过以上两个属性不仅能够设置表格的背景，还可以设置行、单元格的背景。
<font color="字体颜色"></font> 设置字体颜色
24.单元格的填充和间距
<table cellspacing=“单元格间距” cellspadding=“单元格填充”> <table>
在设置单元格的填充以及间距时，需要注意的是，默认情况下单元格的填充和间距不为0，若要消除单元格的填充和间距，则手动设置 cellspacing 属性和 cellpadding 属性均为 0 即可。
17~24总结：在 HTML5 中提供了 audio 标签和 video 标签用于支持在页面中播放音频和视频文件，在使用这些标签时，可以通过设置标签的 src 属性或内部的 source 标签指定要播放的文件路径。
HTML5 中常见的列表标签包括无序列表、有序列表和定义列表。
div 标签作为组合其他 HTML 元素的容器，默认情况下，div 元素将占满一行，当存在多个 div 元素时，将按照从上到下的方式排列。
span 标签可作为文本的容器。默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。
在这些页面中都使用了表格，使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。
表格的美化修饰即从多方面对表格属性进行设置，使表格看起来更漂亮、更美观、更合理。
25.创建表单 <form name=“表单名字” action=“URL” method=“get(默认)/post”>表单元素</form>
26.表单元素概述
<input name=“表单元素名称” type=“类型” value=“值” size=“显示宽度”
maxlength=“能输入的最大字符长度” checked=“是否选中”/>
type ：指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text
name ：指定表单元素的名称
value ：指定表单元素的初始值
size：指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位
maxlength：指定可在 text 或 password 元素中输入的最大字符串，默认无限制
checked：此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性
readonly：当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改
27. 单行文本输入框 <input type="text"> 使用的是 input 标签和 type 属性 例：<input name=“表单元素名称” type=“text” value=“值” />
文本框提示 <input type="text" placeholder="文本框提示（不必更改）">
28.地址 <input type="submit">将表单中的信息提交给表单中 action 属性所指向的地址
29.复选框 <input type ="checkbox" name="名称" checked=" checked "/> 用 checked 属性表示缺省已选的选项，写法是：
<input type="checkbox" name="fruit" value ="orange" checked>桔子。
桔子选项将默认为选中状态。
30.单选钮 <input type ="radio" name="名称" value ="" checked=" checked "/> 用 checked 属性表示缺省已选的选项：<input type=“radio” name=“fruit” value = “Orange” checked> 桔子。桔子选项将默认为选中状态。
31.密码输入框 <input type="password">（输入的文字用 * 表示）例：<input type=“password”id=“userPwd” name=“userPwd”/>
32.下拉框 <select name="指定列表的名称“ size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
……
</select>
33.多行文本输入框 <textArea> 例：<textarea name="指定名称" cols="列数" rows="行数">文本域的内容</textarea>
34.重置、提交与普通按钮
<input type="submit" value="提交按钮的显示值" name="名称"/>
<input type="reset" value="重置按钮的显示值" name="名称"/>
<input type="button" value="普通按钮的显示值" name="名称"/>
35.图片按钮
<input type="image" src ="logo.gif" alt = "提交" name="imgsubmit" /> input标签的type="image"类似于type="submit"，不同的是，type="image"以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
36.必填验证 <input type=“text” name=“usr_name” required=“required” />
37.type属性 ： e-mail 在提交表单时，会自动验证值是否符合 e-mail 格式要求在提交表单时，会自动验证值是否符合 e-mail 格式要求
url 在提交表单时，会自动验证值是否符合 url 格式要求
number 在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定
range 在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及step属性进行数值的限定，显示为滑动条
date 用于选取年、月、日
38.自定义错误消息 oninvalid="setCustomValidity('自定义错误信息 ')"οninput="setCustomValidity('')" required>
39.表单元素使用页面内容方向
（1）真实姓名使用表单元素 <input type=“text”> 实现。
（2）年龄、手机号码使用表单元素 <input type=“number”> 实现。
（3）生日使用表单元素 <input type=“date”> 实现。
（4）个人主页使用表单元素 <input type=“url”> 实现。
（5）电子邮箱使用表单元素 <input type=“email”> 实现。
25~39总结：
表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。
表单数据提交的有两种方式：get 方式和 post 方式。
表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其用法统一
文本输入控件包括文本框、密码框以及多行文本域。
选择型控件包括复选框、单选钮、下拉框和数据列表。
按钮型控件包括提交按钮、图片按钮。
在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
CSS3 基本语法
40.CSS3基本语法
<style type="text/css">
选择器 {
属性1：属性值1;
属性2：属性值2;
……
}
</style>
41. 外部样式表
（1）链接外部样式
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>
（2）导入样式表
<head>
<style type="text/css">
@import "css/style.css";
</style>
</head>
42.内嵌样式表
<head>
<style type=”text/css”>
选择符 {样式属性：属性值;......}
选择符 {样式属性：属性值;......}
......
</style>
</head>
43.行内样式表
<标签名 style=”样式属性：属性值;”>......</标签名>
44.类选择器
（1）<style type="text/css">
.类名 {
属性1：属性值1;……}
</style>
<标签名 class=“类名”>标签内容</标签名>
（2）<style type="text/css">
#ID标识名 {
属性1：属性值1;
属性2：属性值2;
……
}
</style>
<标签名 id=“标识名”>标签内容</标签名>
45.选择器
(1).组合选择器（也称为并集选择器）
将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组，它的选择范围是各选择器范围的并集。任何形式的选择器都可以作为并集选择器的一部分，使用选择符组时，各选择器用逗号连接。
(2).包含选择器(也称为后代选择器)
主要用于选择元素的后代元素，所谓后代元素即该标签内的元素，经常称外层的标签为父标签，内层的标签为子标签。使用后代选择器比较灵活，且能较精确地选择页面元素。
例：后代选择器“#header ul li a”表示选择 id 为“header”标签下的 ul，ul 下的 li 标签，li 标签下的 a 标签。使用后代选择器比较灵活，且能较精确地选择页面元素。
(3).交集选择器
交集选择器由两个选择器之间的连接构成，其结果是选中两者各自元素访问的交集。其中，第一个必须是标签选择器，第二个必须是类选择器或 id 选择器。这两个选择器之间不能有空格，必须连续书写。
例：该代码中的“p.red”即为交集选择器，该选择器的范围是选中 p 标签中 class 属性值为 red 的所有元素。
46.伪类选择器
标签名:伪类名{属性：属性值;}
伪类
含义
应用场景
a:link
未单击访问时的超链接样式
常用，超链接主样式
a:visited
单击访问后的超链接样式
区分是否已被访问
a:hover
鼠标悬浮在超链接上的样式
常用，实现动态效果
a:active
鼠标单击未释放的超链接样式
少用，通常与 link 一致
47.CSS继承性
在该示例中，p元素包含在元素body中，因此标签p中的内容会继承body定义的属性，即示例中的段落文字同样会以斜体的12像素大小的文字显示，除非定义新的样式。
注意：但是在某些特殊的情况下，内部选择符不继承包含它的选择符的属性值。例如，CSS 3上边界属性值是不会继承的。
48.CSS层叠性和优先级
CSS的处理原则如下：
1.如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
2.如果多个选择器定义的样式规则发生了冲突，则 CSS 按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
CSS样式优先级从高到低为：行内样式>ID样式>类样式
CSS 规定选择器总原则是：越特殊的样式，优先级越高。
（1）CSS3 的选择符优先级从高到低依次为：id 选择符优先级最高，其次是类选择符，最后是元素选择符。
（2）CSS3 的定义优先级依照后定义优先的原则，依次为：优先级最高的是内嵌样式，其次是内部样式表，链入外部样式表和内部样式表之间则根据定义的先后顺序评定，即最后定义的优先级高。
总结：
CSS是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，简称为“样式表”，利用CSS样式可以定义页面样式，将会大大减少设计工作量。
CSS根据样式表的书写位置，可以将样式表分为外部样式表、内嵌样式表以及行内样式表。选择器是一种模式，用于选择需要添加样式的元素。常用的选择器有标签选择器、类选择器、ID选择器、组合选择器、包含选择器、交集选择器以及伪类选择器等。
CSS的处理层叠性的原则是：
1.如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式。
2.如果多个选择器定义的样式规则发生了冲突，则CSS按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式。
CSS规定选择器的优先级从高到低为：行内样式→ID样式→类样式→标签样式。其总原则是：越特殊的样式，优先级越高。
常用的样式属性
49.字体属性
属性名
说明
举例
font
设置字体的所有样式属性
font:bold 12px 宋体
font-family
定义字体类型
font-family: 宋体
font-size
定义字体大小
font-size:12px
font-weight
定义字体的粗细
font-weight:bold
color
字体颜色
color:red;( 颜 色 取 值 可 以 为
颜 色 的 英 文 单 词， 也 可 以 采 用
#000000-#FFFFFF 之间的取值）
50.文本属性
属性名
说明
应用场景
line-height
设置行高（即行间距），常用取值为 25px、28px
布局多行文本
text-align
设 置 对 齐 方 式， 常 用 的 取 值 为left、right 以及 center
各种元素对齐
letter-spacing
设 置 字 符 间 距， 常 用 的 取 值 为3px、8px
加大字符间间隔
text-decoration
设 置 文 本 修 饰， 常 用 的 取 值 为
underline（下划线）、none
加下划线，中划线等
51.边距和填充
- 边距
边距是指页面中元素与元素之间的间距，margin 分为上、下、左、右 4 个方向，可以单独设置 margin-top、margin-left、margin-right、margin-bottom，也可以使用复合属性 margin 进行设置。
使用复合属性 margin 设置边距时，存在 4 种方式。
- 仅设置一个值，则应用于所有的四个边距。
- 设置两个值，则表示上下、左右边距。
- 设置 3 个值，则对应上、左右、下边距。
- 设置四个值，则按照上、右、下、左的顺序分别对应其边距。
- 填充
元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向，可通过padding-top、padding-left、padding-right、padding-bottom分别设置四个方向的内边距，也可以通过复合属性padding设置。
52.border属性
CSS3 常见的边框属性有 border-style 属性、border-width 属性、border-color 属性和复合属性 border 属性。
属性名
说明
示例
border-style
设置边框的样式，取值：none 无边框、solid 实线以及 dashed 虚线等
border-style:solid
border-width
设置边框的宽度
border-width:1px
border-color
设置边框的颜色
border-color:red
border
border
复合属性，用于设置边框宽度、样
式以及颜色
border:1px solid red
53.border-radius属性
在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。border-radius属性通过设置圆角的半径实现圆角边框，其中半径的像素值越大，圆角边框的效果越明显。
语法
说明
border-radius：参数 1
参数 1：4 个角
border-radius：参数 1 参数 2
参数 1：左上角、右下角
参数 2：左下角、右上角
border-radius：参数 1 参数 2 参数 3
参数 1：左上角
参数 2：左下角、右上角
参数 3：右下角
border-radius：参数 1 参数 2 参数 3 参数 4
4个参数对应左上角、右上角、右下角和左下角
54.列表属性
列表属性主要用于设置列表项的样式，包含 list-style-type 属性、list-style-image 属性、list-style-position属性和 list-style 属性。
属性名
说明
list-style-type
用于设定列表项的符号，取值：None（无）、Disc（实心圆）、Circle（空心圆）、Square（实心方块）。
list-style-image
用于设定图像作为列表项目符号，其值为图像对应的url。
list-style-position
用于设定项目符号在列表项的位置，取值：inside、outside（默认值）。
list-style
复合属性，用于设置列表属性，其顺序为：list-style-type、list-style-position、list-style-image。
55.垂直菜单的实现
- 横向菜单
- 垂直菜单
- 弹出式菜单
总结
- CSS3 的常用样式属性主要包括字体属性、文本属性、边距属性、填充属性、边框属性以及列表属性。
- 字体属性包含font-family、font-size、font-weight、color和font。
- 文本属性包含line-height、text-align、letter-spacing和text-decoration。
- 使用复合属性margin或padding设置边距或填充时，存在四种方式。
- 使用border-width、border-style以及border-color属性分别设置边框的宽度、样式以及颜色。
- 使用复合属性border属性设置边框各种样式属性，其顺序为边框宽度、样式以及颜色。
- 列表属性主要用于设置列表项的样式，包含 list-style-type 属性、list-style-image 属性、list-style-position属性和 list-style 属性
- 目前主流的网站所使用的菜单主要是：横向菜单、垂直菜单和弹出式菜单。
第六章 背景和阴影
56.背景属性
一般可以通过设置页面元素的背景颜色或背景图片，来实现网页整体丰富的视觉效果。CSS3中提供以下几种背景样式属性来方便设置背景样式。
属性
说明
background-color
用于设置元素的背景颜色
background-image
用于设置元素的背景图片
background-repeat
用于设置元素的背景图片重复方式
background-position
用于设置元素的背景图片位置
background-size
用于设置元素的背景图片大小
background
复合属性，用于设置元素的背景效果
57.背景图片
background-image: url(图片的url)
在设置元素背景图像的同时设定元素的背景颜色，浏览器会优先显示背景图片，当浏览器不能载入图片时，则显示背景颜色。
58.背景图片的重复方式
默认情况下，背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个区域。设置背景图片平铺可以使用 background-repeat 属性来控制。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数
说明
repeat
默认值，表示背景图像在纵向和横向上平铺
no-repeat
表示背景图像不平铺
repeat-x
表示背景图像只在水平方向上平铺
repeat-y
表示背景图像只在垂直方向上平铺
59.background-position(位置) 属性
默认情况下，背景图片都是从设置了 background 属性的元素的左上角开始出现，可以通过 background-position 属性轻松地调整背景图片的位置
background-position: 关键字 | 百分比 | 像素值
取值
说明
关键字
水平方向：left、center、right；垂直方向：top、center、bottom。
百分比
使用百分比表示背景位置，常用的数值：
水平方向：0%（左） 50%（中） 100%(右)
垂直方向：0%（上） 50%（中） 100%(下)
像素值
背景图片左顶点相对于元素左顶点的偏移量，当为正值时，水平向右、垂直向下偏移，当为负值时，水平向左、垂直向上偏移。
60.背景的渐变
（1）线性渐变
创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定义终止色，终止色是平滑过渡后的颜色
- background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);
取值
说明
<angle>
通过角度来确定渐变的方向。角度是指水平线和渐变线之间的角度，逆时针方向计算。
<direction>
通过代表方向的关键词来确定渐变的方向。
<color_stop>
用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变。
例如：background:linear-gradient(to right/60deg/to right bottom,颜色1，颜色2……)； （至少两种颜色）
- 重复线性渐变
Background:repeating-linear-gradient(to right,颜色一 0px,颜色一 20px,颜色二 20px,颜色二 40px);
（2）径向渐变
CSS3 径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。
- background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);
取值
说明
<position>
主要用来定义径向渐变的圆心位置。
<shape>
主要用来定义径向渐变的形状。包括两个值“circle”（圆形）和“ellipse”（椭圆形）。
<size>
主要用于设置渐变半径的大小，从而用来确定径向渐变的结束形状大小。可以设置数值、百分比以及关键字。
<color_stop>
径向渐变线上的终止色
- 重复线性渐变
Background:repeating-radial-gradient(to right,颜色一 0px,颜色一 20px,颜色二 20px,颜色二 40px);
Transparent 透明
61.阴影
（1）文字阴影
在CSS3中，可以使用text-shadow属性对页面上的文字直接添加阴影效果。
- text-shadow: text-shadow: h-shadow v-shadow blur color;
取值
说明
h-shadow
必需，阴影的水平距离。
v-shadow
必需，阴影的垂直距离。
blur
可选，阴影的模糊半径。
color
可选，阴影的颜色。
（2）盒子阴影
盒子阴影指的就是 div 产生的阴影。在 CSS3 中，可以用 box-shadow 属性让 div 标签产生阴影效果。
- box-shadow: h-shadow v-shadow blur spread color;
取值
说明
h-shadow
必需，阴影的水平距离。
v-shadow
必需，阴影的垂直距离。
blur
可选，阴影的模糊半径。
spread
可选，阴影的大小
color
可选，阴影的颜色。
总结
- CSS3 的颜色样式包括颜色属性和背景颜色属性，用于设置文字颜色，以及为标签的背景设置颜色。
- CSS3 的图片样式包括背景图片属性、背景图像的平铺属性，这些属性用于设置标签的背景图像显示效果，并且可以设置背景图像是否随标签内容滚动，指定背景图像在页面中显示的位置，以及背景图像的显示大小等。其中，background 属性可以使用连续的多个属性值
- 在 CSS3 中新增加了标签的阴影显示效果，其中 text-shadow 属性用于创建文字的阴影，box-shadow 属性可以创建 div 的阴影效果。
盒子(box)模型
62.盒子模型简要概述:
（1）每个盒子都有边界（margin）、边框（border）、填充（padding）和内容（content）4 个属性，其中填充、边框、边界属性分别由 CSS3 的 padding、border、margin 属性设定，而内容属性宽度和高度则由 width 属性和 height 属性设定。
（2）每个 HTML 元素均可以看作一个盒子，盒子存在 4 条边，因此边框、填充和边界属性均包含 4 个部分，分别是上（top）、右（right）、下（bottom）、左（left），这 4 个部分可以同时设置，也可以分别设置。
63.盒子的大小
（1）在 CSS 中，可以通过设置 width 和 height 属性的值来控制内容content 所占据的大小，但值得注意的是，盒子还有其他 3 个属性 border、padding 以及 margin，这些属性的设置都将影响到盒子的实际尺寸以及所占据空间的大小。
64.盒子之间的关系
1.垂直盒子 2.水平盒子 3.重叠盒子
margin 不同于 border 和 padding 只能取正数，margin 的值可以设置为负数。
65.标准文档流概述
标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式，在这种标准方式中，浏览器会根据读取到标签的先后顺序来排列HTML元素，在显示网页时，元素按照从左到右、自上而下的顺序进行排列。
a.常见的块状标签
标题（<h1>~<h6>）、
段落（<p>）、
水平线（<hr/>）、
列表（<ul>、<ol>、<li>、<dl>、<dt>、<dd>）、
表格（<table>）、
层（<div>）、
表单 (<form>)
b.常见的行内标签
图像（<img>）、范围（<span>）、换行（<br/>）、超链接（<a>）
- 行内标签与块状标签的区别
- 排序方式不同
行内元素按照从左到右的方式进行排列，多个行内元素显示在同一行，只有当一行排列完毕后，
才会开始一个新行。块状元素各占据一行，则按照自上而下的方式进行排列。
- 内嵌方式不同
块状元素可以包含行内元素和块状元素。行内元素不能包含块状元素，只能包含文本或者其
他行内元素。
- 属性设置不同
行内元素与块状元素的属性设置不同，主要体现在盒子模型中，行内元素设置 width 属性、height 属性时无效，但可以设置 line-height 属性，再设置 margin 属性、padding 属性时，对于上下方向上的设置无效。
- 样式规则中所设置的样式属性对于块状元素全部有效，而对于行内元素来说，width 属性、
- height 属性未能影响元素的大小，padding-top 属性以及 margin-top 属性设置也无效。
66.display属性
CSS 中 display 可以隐藏 HTML 元素包括 div 层
display:none|block；
- 隐藏div
<div style="display:none;"></div>
- 显示div
<div style="display:block;"></div>
- 隐藏 HTML 元素是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域。
67.visibility属性
CSS 中 visibility 可以隐藏/显示 html 元素包括 div 层
visibility：hidden|visible;
- 隐藏div
<div style="visibility:hidden;"></div>
- 显示div
<div style="visibility:visible;"></div>
- display 和 visibility 控制的分别是 HTML 元素是否存在和是否显示，display 的属性定义该元素存在或不存在，而 visibility 的属性只是控制该元素是否显示出来，实际上还是存在的。
68.盒子浮动/float属性
浮动定位是网页中最为重要的定位方式，浮动定位使用float属性，常用于div等块状结构元素的浮动布局。
float : none | left |right
参数
说明
left
表示文本或图像会移动到父元素的左侧
right
表示文本或图像会移动到父元素的右侧
none
是默认值，表示文本或图像会显示于它在文档中出现的位置
69.清除浮动
浮动产生的副作用：背景不能显示2边框不能撑开3margin padding设置值不能正确显示
方法一： 对父级设置适合 CSS 高度
方法二：在父级“</div>”结束前加此div引入“clear:both”样式即可清除浮动。
（常用）方法三：对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
70.盒子定位
（1）静态定位：position: static; 说明：position 属性的默认值static表示 CSS 文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左到右布局。
（2）相对定位：position: relative; 说明：相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。
（3）固定定位：position: fixed;（常用） 说明：固定定位生成绝对定位的元素，相对于浏览器窗口进行定位。
（4）绝对定位：position: absolute; 说明：绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上。
71.z-index属性
z-index:数字; 说明：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
总结
- 盒子模型（Box Model）是每一个标签都会在页面上生成一个盒子。
- 每个盒子都有边界（margin）、边框（border）、填充（padding）和内容（content）4 个属性，其中填充、边框、边界属性分别由 CSS 的 padding、border、margin 属性设定。
- 在 CSS 中，可以通过设置 width 和 height 属性的值来控制内容content 所占据的大小。
- 盒子之间的位置关系:垂直盒子、水平盒子和重叠盒子。
- 在 CSS 中将 HTML 中标签分为块状标签和行内标签。
- 浮动定位是网页中最为重要的定位方式，浮动定位使用float属性，常用于div等块状结构元素的浮动布局。
盒子定位包含静态定位、相对定位、固定定位和绝对定位。
扫一扫
3983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
