标签

• HTML标签

网页的大包围 整体网页内容的外衣 所有的网页文档内容都要写在 html标签内

lang属性，是指内容语言的，目的是让浏览器知晓这个页面的主要展示语言 是什么 只跟浏览器的翻译有关

主要展示的语言如果是英语 en，主要展示的语言如果是中文 zh-cn，如果在浏览器主要语文是中文的情况下，设置lang为en，则会跳出翻译提示

• HEAD标签

  用来设置网页基本信息的标签 网页的大脑

  • meta 标签

  设置网页信息 charset 设置网页编码集 UTF-8 国际编码 支持中文

  keywords name=‘keywords’ content=“关键字内容” 让用户可以通过关键字在搜索引擎中找到我们的网页

  description name='description ’ content=“用一句话描述本网页” 让用户可以直观了解网页内容 也是打广告的好地方

  • title标签

  设置网页标题

• BODY标签

  网页主题内容展示区域 所有的基本信息

网页三要素

让搜索引擎能够收录网页

<meta name="keywords" content="前端,海牙,新手"> <!-- 设置关键字-->
<meta name="keywords" content="前端,海牙,新手">
<meta name='description' content="">
<title>我是标题前端</title>

书写格式

1. 编程当中所有符号都要使用英文半角符号 设置输入法 中文时使用英文标点
2. 单双引号 无所谓用哪个 但是要从一而终 不能左边用" 右边结束用’
3. 标签层级下级要针对上级 要进行缩进 1个TAB 缩进有4空格 2空格

设置vscode禁用代码补全和提示

1. 打开vscode
2. ctrl+shift+p

 "editor.quickSuggestions": false,"editor.parameterHints": false,"editor.wordBasedSuggestions": false,"editor.snippetSuggestions": "none",// 控制键入时是否应自动显示建议// "editor.quickSuggestions": {//   "other": false,//   "comments": false,//   "strings": false// },// 控制键入触发器字符时是否应自动显示建议"editor.suggestOnTriggerCharacters": false,"files.autoSave": "off",// 控制是否根据文档中的文字计算自动完成列表。

HTML基础标签与CSS样式

标题标签

 标题 (权重) h1>h2>h3>...>h6h1 大哥大 每个网页 有且只有一个H1标题，也可能设置隐藏的h1，用于优化seo搜索h2 网页的分块标题 2-5个h3 主页详细分块内容的标题 个数根据需求来，h4 非主页下的列表内容标题 相对h3 的权重更低一点 如豆瓣中其他书签的跳转链接标题。是其他主页的标题

隐藏的h1写法：

.visib-hid {text-indent: -9999;width: 0;height: 0;font-size: 0;visibility: hidden;
}<div class="cq-head-logo"><h1><span class="visib-hid">橙子</span><a href="#"><img src="img/logo-rev.png" width="92" height="36" alt="logo"></a></h1>
</div>

文本标签

br： 换行标签，辅助性标签，单标签，不推荐使用，没有语义性

p：段落标签，段落的文本内容，是一个独立的段落

hr：分隔符

超链接a标签

html 超文本标记语言 超链接标签

href 跳转目标地址

1. 跳转到公网地址 https://www.baidu.com/ ，规范链接地址最后面要加/

2. 页面内部跳转 id名称跳转 href=“#target” 跳转到id名称为target的标签上

3. 路径跳转

target 打开网页的位置(目标) : 当前 _self | 新开 _blank

<a href='https://www.baidu.com/' target='_blank'>百度</a> <--!最后要加斜杠，规范 -->
<a href='#target' target='_blank'>target段落</a>
<a href='G:\xiaoming\test.html' target='_blank'>case01.html</a>

PS：a标签要有href属性才会有标签的样式

<a>ddd</a>  这个就是普通的文本的样式，连href都没有就没有超链接标签的样式
<a>ddd</a>  这个有超链接的样式，下划线，可以点击等

相对路径 绝对路径

相对路径 以自身为基准去其他地方寻址的过程
同一个文件夹下 同级路径 test.html上级路径 ../test.html上上级路径 ../../test.html上级文件夹路径 ../case/test.html下级路径 case/test.html
绝对路径 以客观地址为基准进行寻址 
windows G:\xiaoming\test.html 
linux c://xiaoming/test.html

base标签

标签为页面上的所有链接规定默认地址或默认目标。 base 写到 之间 把所有的连接 都默认添加 target="_blank"

<base target="_blank">

特殊字符(转义符号)

让浏览器能够理解 非排版意图 的格式和行为 HTML容许使用特殊字符进行转义行为 ，为了和代码符号进行区分 保证安全

转义符对照表

文本格式化标签(小标签)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

b i s u 只有表现形式，没有语义 strong em del ins 的语义更强烈，具有语义性

图片标签img

src width height alt 图片四要素，缺一不可

<img src="图像URL" width='图片宽度' height='图片高度' alt='!'>
<!-- 小规范 alt不知道写什么的时候写！ -->

属性

列表系列

一系列内容以横列队列 的形势中展现 列表最大的特点就是 整齐 、整洁、 有序.

无序列表 ul>li

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

PS:

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。2. <li>与</li>之间相当于一个容器，可以容纳所有元素。3. 无序列表会带有自己样式属性 可以通过CSS修改默认样式

导航应用：多级导航用ul>li，然后再li里面再进行列表嵌套，单级导航可以直接div包裹a标签

有序列表 ol > li

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ol>

和UL无序列表的表现性质很相似 不同的是 索引器 是有序的数字 用到的地方比较少

自定义列表 dl>dt+dd

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>

div标签 (盒子)

div标签是没有语义的 是DIV+CSS时代的核心标签 单纯进行内容标签的容纳

div是 division 的缩写 意思是 分割 分区 我们可以利用DIV来给页面划分不同的区域 呈现不同内容

语法:

<div><p><span>内容</span>内容</p>
</div>   

span标签

span标签是没有语义的 通常来组合行内元素，以便通过样式来格式化它们。

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

语法:

<p><span>some text.</span>some other text.</p>

CSS (Cascading Style Sheets) 层叠样式表

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head><link href="CSS文件的路径"  rel="stylesheet" >
</head>

注意： link 是个单标签哦!!!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结（位置）

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中:
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。

选择器（重点）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

我们如何把羊群分类 黑 白 灰

选择器干啥的？ 选择标签用的

这就用到基础选择器组：

CSS基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

标签选择器 可以把某一类标签全部选择出来 div span

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

命名规范

1. 命名需要是具备语义性的单词，不能用 数字 拼音 符号 正确示范 ： wrap description title  content错误示范 :  aaaa a1 $we 4tdds
2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名  注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 推荐使用 -正确示范 :  header-nav content-left slide-bar  错误示范 :  headernav slideBar ContentLeft
3. 命名需要进行适当的缩写, 单词连接层级不要超过4层正确示范 :  head-tit_ico 错误示范 :  header-title-left-logo-icon

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="melon green fz20">西瓜</div>
<div class="melon cyan">冬瓜</div>
<div class="melon yellow">南瓜</div>

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {margin: 0;                    /* 定义外边距*/padding: 0;                   /* 定义内边距*/
}

通配符选择器一般用于DEMO页面的统一清除默认margin 和 padding 其他地方应用很少

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

PS:

1. 现在很多浏览器开始不支持12像素以下的字体大小，如设置成9px也会默认为12px，现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的！双引号！，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

PS:

数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}
{font: 14px/1.5 "\5FAE\8F6F\96C5\9ED1";} /**字体12px，行高14的1.5倍**/

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS文本外观属性

color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

16进制 常见颜色
#000000 纯黑
#FFFFFF 纯白
#FF0000 纯红
#00FF00 纯绿
#0000FF 纯蓝
#333333  过渡色灰黑
#cccccc  过渡色更灰一点

line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7 8像素左右就可以了。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

首行缩进在块元素下才有用，块元素才有位置可以缩进，行内元素的大小就是内容的大小，没有多余的位置可以缩进，如在p标签下设置可以缩进，a标签则不可以。

.melon {font-size: 12px;text-indent: 1em; 
}
/* 1em相当于12px  2em相当于24px */
/* 还可以用来隐藏文字 text-indent: -999999px; */

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>text-decoration 文本修饰</title><style>a {text-decoration: none;/* text-decoration: line-through; */}</style>
</head>
<body><a href="#"><del>我是超链接</del></a>
</body>
<!-- text-decoration中的line-through效果和标签<del><del/>一样，能用样式表现的修饰属性我们都尽量不用标签或者属性来做，除非我们时明确的要使用标签来表达语义性。能用css尽量用css，除非需要语义性才使用标签 
-->

CSS 文本补充

css2

css3

单行文本展示省略号

.text {width: 200px;text-overflow: ellipsis; /*超出部分省略号*/overflow: hidden; /*内容超出宽度隐藏*/white-space: nowrap; /*文本不换行显示*/
}

详解块级元素和行内元素

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

DIV 是最常用的块元素 规规矩矩 方方正正 很好管理 被人们称为 “可靠的同志” 但是体格庞大 独占一行

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素是通常集体出没 能够排成行伍 训练有素 整齐划一

行内元素的特点：

（1）不会独占一行，统一行内，多个行内元素可以并存。

（2）不能设置高度、宽度，不具备结构能力，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）不能放块元素，行内元素只能容纳文本或则其他行内元素。（a特殊，扩展热区 用户交互 响应区域）

PS:

1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
3. 两个行内元素之间或行内块元素之间如果有空格或换行则中间会有一个空白缝隙，行内元素和行内块元素之间换行的话，即使除去内外边距，他们之间还是会有距离，这是因为我们为了代码格式加入的换行和空格被 HTML 当作空格文本，跟 inline 盒混排了的缘故。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>span {background-color: red;}</style>
</head>
<body><span>我是span</span> <span>我是span</span><span>我是span</span><span>我是span</span>
</body>
</html>

效果如下：

所以建议行内元素在一行内写，块元素一般换行写。

解决行内元素、行内块元素产生水平空隙

1. 代码内删除行内元素、行内块元素之间的换行符、tab（制表符）、空格等字符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.span-wrap span，.span-wrap input{padding: 0;margin: 0;}</style>
<body>
<div class="span-wrap"><span>行内元素</span><span>行内元素</span><input type="text" value="行内块元素">
</body>
</html>

不推荐，影响阅读

2. 利用HTML注释

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.span-wrap span，.span-wrap input{padding: 0;margin: 0;}</style>
<body>
<div class="span-wrap"><span>行内元素</span><!----><span>行内元素</span><!----><input type="text" value="行内块元素">
</body>
</html>

不推荐，写起来费时，影响结构

3. 为父元素设置设置font-size：0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.span-wrap{font-size: 0;}span,input{padding: 0;margin: 0;font-size: 12px;}</style>
<body>
<div class="span-wrap"><span>行内元素</span><span>行内元素</span><input type="text" value="行内块元素">
</body>
</html>

要注意子元素要重新设置font-size

4. 利用浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span,input{padding: 0;margin: 0;float: left;}</style>
<body>
<div class="span-wrap"><span>行内元素</span><span>行内元素</span><input type="text" value="行内块元素">
</body>
</html>

块级元素和行内元素区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素（inline-block）

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。主要具备了块元素的特性 并且不会独占一行 跟行内元素一样 一行显示

注意: 在行内元素中有几个特殊的标签——、、 这些标签虽然可以设置宽度高度 但是在现代浏览器内特性默认展示模式为行内(inline) 元素，不是行内块元素

如何去除被容器包裹下的img标签下的留白

在一个容器放入图片时，容器大小会比图片大，因为有的文字可能会出于基线，撑开盒子。

解决方法：

（1）body{ font-size: 0px; }
（2）img{display: block; }
（3）img{ vertical-align: middle; }

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

盒子模型（CSS重点）

其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型（Box Model）

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

width 元素宽度

width用来给元素设置宽度 注意: 只有块(block)元素或者行内块(inline-block)元素才能够设置

width: 100px;

height 元素宽度

height用来给元素设置高度 注意: 只有块(block)元素或者行内块(inline-block)元素才能够设置

height: 100px;

盒子边框（border）

边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。

语法：

border : border-width || border-style || border-color 

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线  dotted：边框为点线double：边框为双实线

盒子边框写法总结表

	border-top: 1px solid red; /*上边框*/border-bottom: 2px solid green; /*下边框*/border-left: 1px solid blue;border-right: 5px solid pink;border: 1px solid red;

利用border绘制三角技巧

<html lang="zh-cn">
<head><meta charset="UTF-8"><title>demo</title><style>* {margin: 0;padding: 0;}.box {/* 盒子宽高改成零就变成三角形 ，需要哪个方向的三角形就设置哪个方向的三角形边框*/width: 0;height: 0;margin: 100px auto;border: 8px solid red;border-top-color: blue;border-left-color: yellow;border-bottom-color: green;}</style></head>
<body><div class="box"></div>
</body>
</html>

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意： 后面跟几个数值表示的意思是不一样的。

内边距应用：竖行文本排列

给盒子加宽度，padding就会外在挤压，增加盒子的宽度和高度如果不加宽度，padding向内挤压，不会超出父容器的宽度。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>padding的应用</title><style>div {width: 30px;height: 1200px;background-color: red;}p {padding: 0 10px;background-color: green;}</style>
</head>
<body><div><p>我是p内容 大家好 我是p 内容 大家好</p></div>
</body>
</html>

关于盒子宽度下列正确的是（）

(A) 盒子宽：就是width的大小

(B) 盒子宽： padding-left + width + padding-right

© 盒子宽： border-left + width + border-right

(D) 盒子宽： border-left+ padding-left + width + padding-right + border-right √

关于盒子高度下列正确的是（）

(A) 盒子高：就是height的大小

(B) 盒子高：padding-top +height + padding-bottom

© 盒子高：border-top + height + border-bottom

(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom √

关于根据下列代码计算 盒子宽高下列说法正确的是（）

div {width: 200px;height: 200px;border: 1px solid #000000;border-top: 5px solid blue;padding: 50px;padding-left: 100px;
}

(A) 宽度为200px 高度为200px

(B) 宽度为352px 高度为306px

© 宽度为302px 高度为307px

(D) 宽度为302px 高度为252px

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

3. 插入图片 我们用的最多 比如产品展示类
4. 背景图片我们一般用于小图标背景 或者 超大背景图片

section img {  width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */margin-left: 50px; /* 插入当图片也是一个盒子 */}aside {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */}

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}

注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。外边距合并，上下取最大，左右相加。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案： 避免就好了。

嵌套块元素垂直外边距的合并（外边距穿透）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。

建议：实际开发中能用内边距尽量用内边距，减少外边距穿透出现的问题。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/Element空间高度 = content height + padding + border + marginElement 空间宽度 = content width + padding + border + margin/*内盒尺寸计算（元素实际大小）*/Element Height = content height + padding + border （Height为内容高度）Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。

盒子模型布局稳定性

开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

  width >  padding  >   margin   

原因：

1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

怪异盒子模型

怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换

当内边距和边框宽度相加 < 内容width的时候 总宽度 就是 width 设置的值 压缩content内容区域

当内边距和边框宽度相加 > 内容width的时候 总宽度 就是 内边距+边框 content区域就没了

select {box-sizing: border-box; /* 怪异盒子模型 */box-sizing: content-box; /* 标准盒子模型 */
}

怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度

两种盒子模型区别

主要区别在于盒子的整体宽度高度计算方式不同

1. 用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。
2. 原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。
3. 可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素；
4. box-sizing:简单理解就是盒子大小基于什么计算的;

盒子模型相关知识点补充说明

高度样式设置auto

图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算

同行宽度问题

一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度 无法完整放入的元素会被挤下一行展示

内外边距问题

1. 外边距垂直方向会合并 选最大值 , 水平方向会进行叠加
2. 外边距如果父容器没有边界(硬性边界,边框,内边距) 就会产生穿透效果 子元素的外边距会穿透父元素生效
3. 内外边距都只能设置为整数 不要设置带小数的 边距 长宽

行高与高度

当行高与高度相等的时候 文本垂直居中

CSS 背景(background)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

背景图片(image)

语法：

background-image : none | url (url) 

参数：

none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

背景位置(position)

语法：

background-position : length || lengthbackground-position : position || position 

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : 　top | center | bottom | left | center | right

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐了。background-position: center center

背景附着(attachment)

语法：

background-attachment : scroll | fixed 

参数：

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:color image repeat attachment position/size

background: transparent url(image.jpg) repeat-y  scroll 100px 150px/100px ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

banner用背景图片注意事项

静态banner的时候，使用图片做背景颜色，不要直接写url，要先设置一个近似的背景颜色，防止图片加载不出来的时候，有这么一个防范，能看到一个跟banner颜色一致的背景，不至于太唐突。

 .banner {height: 680px;background: #051630 url(img/banner.jpg) no-repeat center/cover;}

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器 是 并且的意思。 即…又…的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。  

用的相对来说比较少，不太建议使用。

细节规范：以实际为主

一般来说如果是div中的类名，直接省下div直接用类名选择，因为页面中大部分都是div

.slide{}  

如果选择的不是div中的类名，则先选择标签再指定类名

ul.slide{}
p.slide{}

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧：

并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

他，在一起， 在一起 一起的意思

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

注：为了保证性能，尽量不要超过三层

子代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

PS：子代选择器的优先级高于后代，能用子代选择器尽量不用后代选择器

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

伪娘

类 .one

伪类 :link

为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

链接伪类选择器

• :link /* 未访问的链接 */

• :visited /* 已访问的链接 */

• :hover /* 鼠标移动到链接上 */

• :active /* 选定的链接 */

  注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

CSS 三大特性

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 就近原则

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2. 样式不冲突，不会层叠

CSS最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

CSS最后的执行口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

自身的样式（包括标签的默认样式和自己设定的样式）是大于继承的样式，继承的优先级是最低的。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css 特性-继承性</title><style>html {font-size: 100px;text-align: center;line-height: 80px;color: red;}</style>
</head>
<body><div><p><a href="#">142143124124</a><span>142143124124</span></p></div>
</body>
</html>

a标签字体颜色有默认样式是蓝色，所以没办法继承父元素的红色。

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

权重是可以叠加的

比如的例子：

div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1

注意：

1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

1. 继承的 权重是 0

总结优先级：

1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。

基础选择器之间的权重（从上到小优先级越大）1. 书写位置1. 外联样式(外部样式) 单独的css文件 通过link引入2. 内部样式 写在页面内 style标签里的样式// 3. 行内样式(内嵌样式) 直接写在标签的 style属性里面的样式PS: 亲疏远近2. 继承,默认和选择器1. 继承来的样式 优先级是最低的(没有优先级) 02. 自身的默认样式(出生自带的) 优先级是第二低的(稍微比继承样式高一点)3. * 通配符选择器 选中的所有标签4. 标签选择器  页面内某一类型的所有标签5. class类选择器 6. id选择器 3. !important 最强的权重符号 谁都比不了 不到紧急关头 不要用!!!4. 后代选择器 子代选择器 交集选择器 并集选择器 1. 标签选择器 0,0,0,12. class选择器 0,0,1,03. id选择器 0,1,0,04. 行内样式 1,0,0,01. 不可进位 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!2. 优先从左向右对比分数3. 分数一致的时候 (就近原则) 1. 管的越宽 权限越低 管的越具体 权限越高 2. 亲疏远近3. 后来者居上

行高的测量

行高我们利用最多的一个地方是： 可以让一行文本在盒子中垂直居中对齐。

做法就是： 文字的行高等于盒子的高度。 line-height = height

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom 

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

当图片高度高于 旁边的文本的时候 你给图片设置vertical-align: middle 可以实现两个中线对齐
当图片高度小于 文本的时候 给两个都设置vertical-align: middle
以防万一，不管什么情况最好图片和文字都设置vertical-align: middle

去除图片底侧空白缝隙

有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。

2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。推荐这个，因为块元素工工整整，没有基线。

溢出的文字隐藏

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

white-space:自动换行

 标签。

text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

多行文本超出隐藏

display: -webkit-box;   /* display: -webkit-inline-box;  行内元素*/
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 控制在第几行的结尾进行显示 ...*/
overflow: hidden;
/*高度 宽度必须规定好 不然...之后一行 也会展示出来*/

opacity 透明

opacity 属性设置元素的不透明级别(0-1)。 opacity: value|inherit;

div {opacity: .5;
}

PS: IE8 以及以下浏览器 使用opacity 需要写为

 filter: Alpha(opacity=50); 0-100

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

类 .one

伪类 :link

为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

链接伪类选择器

• :link /* 未访问的链接 */

• :visited /* 已访问的链接 */

• :hover /* 鼠标移动到链接上 */

• :active /* 选定的链接 */

  注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

非常用复合选择器

• element+element : 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

• element1~element2: 选择器匹配出现在 element1 后面的 element2。

  element1 和 element2 这两种元素必须具有相同的父元素，是兄弟元素（同级的）但 element2 不必紧跟在 element1 的后面。

  p+a { /* 紧跟在p标签之后的a标签 */color: black;
  }.des~p { /* .des同父级下排在.des之后的所有p 和+不同 并不需要紧跟*/color: red;
  }
  

结构(位置)伪类选择器（CSS3)

• :first-child :选取属于其父元素的首个子元素的指定选择器
• :last-child :选取属于其父元素的最后一个子元素的指定选择器
• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  n 可以是数字、关键词或公式
• nth-of-type(n): 匹配同类型中的第n个同级兄弟元素 n可以是一个数字，一个关键字，或者一个公式
• :first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数
• :last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数
• :only-of-type 匹配同类型中的唯一一个指定类型元素 没有() 参数

li:first-child { /*  选择第一个孩子 结构父级ul的第一个子元素，（PS：后面还会学到定位父级） */color: pink;  
}
li:last-child {   /* 选择结构父级ul的最后一个孩子 */color: purple;
}
li:nth-child(4) {   /* 选择结构父级ul的第4个孩子  n  代表 第几个的意思 */ color: skyblue;
}
li:nth-child(2n) {   /* 选择结构父级ul的2的倍数的孩子  2  4  6 */ color: skyblue;
}
li:nth-child(2n+1) {   /* 选择结构父级ul的2的倍数的孩子  1  3  5 */ color: skyblue;    /* nth-child()里面可以写等差数列的公式，2n 2n+1 3n+1 2n+2 odd(奇数)  even(偶数) */ 
}p:nth-of-type(3) {	/* 选择第3个同类别的兄弟元素   n代表第几个的意思 认主体p，必须是第三个p*/ 	background-color: #f00;
}
p:nth-of-type(2n) {	/* 找到同类别兄弟元素中是偶数的元素*/ 	background-color: #f00;
}
.des:nth-of-type(3) {	/* 选择类名des兄弟同级当中第三个类名为des的元素*/ 	color: skyblue;
}
p:first-of-type {	/* 选择每个p元素是其父级的第一个p元素*/ 	color: skyblue;
}
p:last-of-type { /* 选择每个p元素是其父级的最后一个p元素 */color: pink; 
}
p:only-of-type { /* 选择每个p元素是其父级的唯一p元素 */color: yellow; 
}
p:not(.desc) { /* 选中除了类名为desc的其他p标签*/color: green
}

注：分数计算为0,0,1,1 伪类和类一样都记一分

:nth-child(n) 重点注意

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>:nth-child重点注意</title><style>* {margin: 0;padding: 0;}div p:nth-child(3) {/* div :nth-child(3) 也可以省略p，直接找到div的第三个儿子*//*p的结构父级的第3个子元素，直接找伪类主体爸爸的第三个儿子，不是找第三个p*/color: red;}</style>
</head>
<body><div><p>我是p我是p我是p</p><span>我是span我是span我是span</span><p>我是p我是p我是p</p>  <!-- 这个红色 --><p>我是p我是p我是p</p><p>我是p我是p我是p</p></div>
</body>
</html>

:nth-of-type(n)重点注意

nth-of-type 找 同类型 同级别的第n个兄弟元素 够数才生效

使用时最好要指定标签主体，很少用类名作为主体

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css3 选择器 nth-of-type</title><style>div .des:nth-of-type(3) {color: red;}</style>
</head>
<body><div><p>我是p我是p我是p 1</p> <!-- 去掉这一行的话是我是p4变红--><span>我是span我是span我是span 2</span><p class="des">我是p我是p我是p 2</p><p class="des">我是p我是p我是p 3</p>  <!-- 红 ，找到.des中的第三个p标签--><p class="des">我是p我是p我是p 4</p><p class="des c888">我是p我是p我是p 3</p><p>我是p我是p我是p 4</p><a href="#" class='des'>1a</a><p>我是p我是p我是p 5</p><a href="#" class='des'>2a</a><a href="#" class='des'>3a</a>  <!-- 红 --><a href="#" class='des'>4a</a></div>
</body>
</html>

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器 规定 值都加 引号

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font class值中包含以footer开始的元素 */color: pink;
}
div[class$=footer] { /*  class$=footer class值中包含以footer结尾的元素*/color: skyblue;
}
div[class*=tao] { /* class*=tao  *=  class值中包含tao的元素*/color: green;
}
div[class~='tao'] { /* class~=tao  ~=与*=作用一样  */color: green;
}
div[class='tao'] { /* class=tao  =  class值中包含完成等于tao的元素 */color: green;
}

<div class="font12">属性选择器</div><div class="font12">属性选择器</div><div class="font24">属性选择器</div><div class="font24">属性选择器</div><div class="font24">属性选择器</div><div class="24font">属性选择器123</div><div class="sub-footer">属性选择器footer</div><div class="jd-footer">属性选择器footer</div><div class="news-tao-nav">属性选择器</div><div class="news-tao-header">属性选择器</div><div class="tao-header">属性选择器</div>
</div>

伪元素选择器（CSS3)

E::first-letter、E::first-line、E::selection主要用于针对文本

1. E::first-letter 首字伪元素选择器，文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 首字伪元素，文本第一行；
3. E::selection 选中用户选中的文本，可改变选中文本的样式；

/* 首字特殊样式 */
p::first-letter {font-size: 20px;color: hotpink;
}/* 首行特殊样式 */
p::first-line {color: skyblue;
}/* 选中用户选中的文本 */
p::selection {/* font-size: 50px; */color: orange;background-color: #333;
}

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css3 伪元素选择器</title><style>p::first-letter {/* 首字伪元素 选择器*/font-size: 32px;color: red;}p::first-line {/* 首行伪元素 选择器 首行伪元素不会覆盖首字伪元素*/font-size: 16px;color: blue;}p::selection {/*用户选中的文本*/color: orange;background-color: #333;}</style>
</head><body><p>鸮形目（Strigiformes）中的鸟被叫做猫头鹰，总数超过130余种。在除南极洲以外所有的大洲都有分布。大部分的种为夜行性肉食性动物,食物以鼠类为主，也吃昆虫、小鸟、蜥蜴、鱼等动物。该目鸟类头宽大，嘴短而粗壮前端成钩状，头部正面的羽毛排列成面盘。鸮形目（Strigiformes）中的鸟被叫做猫头鹰，总数超过130余种。在除南极洲以外所有的大洲都有分布。大部分的种为夜行性肉食性动物,食物以鼠类为主，也吃昆虫、小鸟、蜥蜴、鱼等动物。该目鸟类头宽大，嘴短而粗壮前端成钩状，头部正面的羽毛排列成面盘。</p>
</body>
</html>

4、E::before和E::after伪元素

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {content:"开始";
}
div::after {content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

“:” 与 “::” 区别在于区分伪类和伪元素 注意: IE9下 不支持:: 所以保证兼容可以写为 :

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

伪元素content追加文字使用小技巧

E::before和E::after本身的作用是追加字，直接在文字后面追加链接

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>content</title><style>* {margin: 0;padding: 0;}a {color: #222;text-decoration: none;}html,body {height: 100%;}.nav {padding-top: 70px;text-align: center;}.nav a {position: relative;display: inline-block;font-size: 14px;margin: 0 10px;}.nav a:after {/* attr是一个方法，指定一个属性，可以或者属性的值 ，href获取链接地址*/content: attr(href);}</style>
</head><body><div class="nav"><a href="http://www.baidu.com/" d>首页</a><a href="#" >新闻资讯</a><a href="#" >体育资讯</a><a href="#" >今日看点</a><a href="#">更多消息</a></div></body></html>

当用js渲染的一些值，可以加到自定义属性中，然后用content将自定义属性的值渲染出来

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>content</title><style>* {margin: 0;padding: 0;}a {color: #222;text-decoration: none;}html,body {height: 100%;}.nav {padding-top: 70px;text-align: center;}.nav a {position: relative;display: inline-block;font-size: 14px;margin: 0 10px;}.nav a:after {content: attr(data-index);}</style>
</head><body><div class="nav"><!-- 自定义属性一般前面会加data- --><a href="#" data-index='1'>首页</a><a href="#" data-index='2'>新闻资讯</a><a href="#" data-index='3'>体育资讯</a><a href="#" data-index='4'>今日看点</a><a href="#" data-index='5'>更多消息</a></div></body></html>

精灵技术产生的背景

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。

精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

.bg-tp1 {width: 20px; height: 20px;background: url('css_sprites.png') -10px -10px;
}.bg-tp2 {width: 20px; height: 20px;background: url('css_sprites.png') -50px -10px;
}.bg-tp3 {width: 20px; height: 20px;background: url('css_sprites.png') -10px -50px;
}.bg-tp4 {width: 20px; height: 20px;background: url('css_sprites.png') -50px -50px;
}

制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做，不过前端也要自食其力不要过度依赖美工。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。 
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

CSS注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

例如：

p {font-size: 14px;                 /* 所有的字体是14像素大小*/
}

CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例： .selector { }

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

color: red;

选择器规范

【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* 规范 */
#username input {}
.comment .avatar {}/* 不规范 */
.page .header .login #username input {}
.comment div * {}

属性规范

【强制】 属性定义必须另起一行。

示例：

/* 规范 */
.selector {margin: 0;padding: 0;
}/* 不规范 */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例：

/* 规范 */
.selector {margin: 0;
}/* 不规范 */
.selector {margin: 0
}

表格 table (会写)

表格的表现形式为 横行纵列 多行多列为表格

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table><tr><td>单元格内的文字</td>...</tr>...
</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

1.table用于定义一个表格。2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

表格属性

表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

<table border="1" align="right"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><th>张三</th><td>男</td><td>119</td></tr><tr><th>小花</th><td>女</td><td>17</td></tr>
</table>

表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：<thead></thead>：用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。<tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

PS: thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody>
</table>

表格标题 caption

表格的标题： caption

定义和用法

caption 元素定义表格标题。

<table><caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

​ 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

​ 公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

  <table width="400" height="100" border="1"><tr><td>张三</td><td>12</td><td>男</td></tr><tr><td>李四</td><td colspan="2">不明</td></tr><tr><td>王五</td><td>33</td><td>男</td></tr></table>

<table width="400" height="100" border="1"><tr><td>张三</td><td>12</td><td rowspan="3">男</td></tr><tr><td>王五</td><td>33</td></tr><tr><td>李四</td><td>22</td></tr></table>

相关样式(CSS) 仅了解

table, th, td {border: 1px solid blue;
}

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框 border-collapse

border-collapse 属性设置是否将表格边框折叠为单一边框：

table {border-collapse: collapse;
}table,
th,
td {border: 1px solid blue;
}

单元格边框距离 border-spacing

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式 border-collapse: separate ）。

table{border-collapse:separate;border-spacing:10px 50px;}

标题位置 caption-side

该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。

caption {caption-side: bottom
}

总结表格

1. 表格提供了HTML 中定义表格式数据的方法。

2. 表格中由行中的单元格组成。

3. 表格中没有列元素，列的个数取决于行的单元格个数。

4. 实际开发中表格表现基本使用成熟UI库实现

表单标签 (常用)

表单目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单组成部分

表单控件：input select textarea button

​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：label

​ 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域： form

​ 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件

在上面的语法中，<input> 标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input >标签还可以定义很多其他的属性，其常用属性如下表所示。

常用属性

accept

input file 设置文件选择类型

accept 属性规定了可通过文件上传提交的服务器接受的文件类型，可以限制你选择相关的文件，如果限制多个，可以用逗号分割。

注意：accept 属性仅适用于

提示：请不要将该属性作为您的验证工具。应该在服务器上对文件上传进行验证。

每个唯一文件类型说明符可以采用下列形式之一：

• accept=“image/*” — 接受任何图片文件类型.
• accept=“audio/*” — 接受任何音频文件类型.
• accept=“video/*” — 接受任何音频视频文件类型.
• accept=“image/png” 或 accept=“.png” — 只接受 png 图片.
• accept=“image/png, image/jpeg” 或 accept=“.png, .jpg, .jpeg” — PNG/JPEG 文件.
• accept=“.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document” — 接受任何 MS Doc 文件类型.

type属性分类

label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与id值一致的表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>

注意：

1. <select></select>中至少应包含一对<option></option>。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>

常用属性：

1. action
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
   用于设置表单数据的提交方式，其取值为get或post。
3. name
   用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。

浮动(float)

普通流(normal flow)

这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器 {float:属性值;
}

浮动详细内幕特性

浮动脱离标准流，脱标 不占位置，会影响标准流。浮动只有左右浮动。

1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 

2.一个父盒子里面的子盒子，如果需要所有子元素一行对齐显示，就需要所有子元素都进行浮动。

3. 元素添加浮动后，元素会变为块元素。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

总结： 浮动 —>

浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的， 是否占有位置

1. 浮动脱离文档流的，原来还在文档流的元素，会向上移动
2. 元素浮动以后，会尽量向页面的左上或是右上漂浮，直到遇到父元素的内边距或者其他元素的浮动元素
3. 如果浮动的元素上边是一个没有浮动的块级元素，则浮动的元素不会超过块级元素
4. 浮动的元素不会超过上边的兄弟元素
5. 浮动会更改元素的显示方式 :block

版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.w960 {width: 960px;margin: 0 auto;}.bc-wrap {background-color: #edecfa;border: 1px dashed #ccc;}.mb8 {margin-bottom: 8px;}.header {height: 180px;}.banner {height: 220px;}.main {height: 640px;}.footer {height: 180px;}</style>
</head><body><div class="header w960 bc-wrap mb8"></div><div class="banner w960 bc-wrap mb8"></div><div class="main w960 bc-wrap mb8"></div><div class="footer w960 bc-wrap "></div>
</body></html>

两列左窄右宽型

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.w960 {width: 960px;margin: 0 auto;}.bc-wrap {background-color: #edecfa;border: 1px dashed #ccc;}.mb8 {margin-bottom: 8px;}.fl {float: left;}.fr {float: right;}.header {height: 180px;}.banner {height: 220px;}.main {overflow: hidden;}.main .left {width: 350px;height: 640px;}.main .right {width: 600px;height: 640px;}.footer {height: 180px;}</style>
</head><body><div class="header w960 bc-wrap mb8"></div><div class="banner w960 bc-wrap mb8"></div><div class="main w960 mb8"><div class="left bc-wrap fl"></div><div class="right bc-wrap fr"></div></div><div class="footer w960 bc-wrap "></div>
</body></html>

通栏平均分布型

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.clearfix {zoom: 1;}.clearfix:after,.clearfix:before {content: "";display: table;}.clearfix:after {clear: both;visibility: hidden;font-size: 0;height: 0;}ul {list-style: none;}.w960 {width: 960px;margin: 0 auto;}.bc-wrap {background-color: #edecfa;border: 1px dashed #ccc;}.mb8 {margin-bottom: 8px;}.mr0 {margin-right: 0;}.fl {float: left;}.fr {float: right;}.header {height: 180px;}.banner {height: 220px;}.main {overflow: hidden;}.main .main-top {margin-bottom: 20px;}.main .main-content li {float: left;width: 232px;height: 120px;margin-right: 8px;background-color: #edecfa;border: 1px dashed #ccc;}.main .main-content li:last-of-type {margin-right: 0;}.main .main-bottom li {height: 180px;}.footer {height: 180px;}</style>
</head><body><div class="header bc-wrap mb8"></div><div class="banner w960 bc-wrap mb8"></div><div class="main w960 mb8"><div class="main-top main-content clearfix"><ul><li></li><li></li><li></li><li></li></ul></div><div class="main-bottom main-content clearfix"><ul><li></li><li></li><li></li><li></li></ul></div></div><div class="footer bc-wrap "></div>
</body></html>

清除浮动

靡不有初，鲜克有终。

既然搭建了高架桥和空轨 自然也要有个终点站，不然跑着跑着脱轨了就很尴尬。

为什么要清除浮动

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好 。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}   clear 清除 

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

内容溢出时处理 overflow

overflow 属性规定当内容溢出元素框时发生的事情。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。）

代表网站： 百度、淘宝网、网易等

注意： content:“” 尽量不带点

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { content:"";display:table;  
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 小米、腾讯等

进阶安全版

使用方法：

.clearfix{zoom:1;
}
.clearfix:after,.clearfix:before{content:"";display:table;
}
.clearfix:after{clear:both;visibility:hidden;font-size:0;height:0;
}

定位(position)

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。

定位原理上可以帮助你快速精准 脱离文档流束缚的情况下将元素放在你想放置的位置。就跟精确制导定位系统一样，输入坐标就可以轻松搞定。

定位在网页中的应用

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1. 定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

2. 边偏移

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS： 静态定位其实没啥可说的。

静态定位唯一的用处： 就是 取消定位。 position: static;

相对定位 relative

神游物外，谓形体不动而心神向往，如亲游其境，以精神相交。

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）,由于这一特性，所以一般用相对定位来做绝对定位的定位父级，而不用固定定位。不脱标不容易出现排版混乱的问题。

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

绝对定位absolute

哥白尼提出的“日心说”，有力地打破了长期以来居于宗教统治地位的“地心说”，实现了天文学的根本变革。

绝对定位的位置参考为相对定位父级的左上角定点

绝对定位于相对定位设置 left right时 都会保留自身外边距

绝对定位通过边偏移移动位置，但是它完全脱标，完全不占位置。

绝对定位元素的宽度高度100% 是相对于定位父级来的 不是结构父级

绝对定位与相对定位不同的地方在于

1. 绝对定位完全脱标 相当于自建一个新的层级
2. 绝对定位的移动相对坐标原点为 相对定位父级的左上角原点
   1. 没有相对定位父级的情况下 以浏览器窗口显示区域(window view)左上角为定位原点
   2. 有相对定位父级(绝对、固定或相对定位)的父元素/祖先的情况下 以相对定位父级的左上角为定位原点
3. 绝对定位的宽度百分比 继承自相对定位父级 并不继承于 结构父级

设定绝对定位时，如果没有设置top、left、right、bottom，则元素还是在自己原来的位置，当设置其中任意一个值后，绝对定位元素才会去找相对定位父级来调整位置

子绝父相

布局中最常见的就是 结构父级为相对定位(relative)，需要定位的子元素为绝对定位（absolute） 。 因为一般父元素需要在常规文档流中占据位置，子元素又需要将其作为定位父级来确定原点参考系（绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位）。 所以用的最多的就是 父级为relative 子元素为 absolute的 子绝父相 组合形式。

当然子绝父相只是最常用的组合 定位父级也可以是 absolute fixed

子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 定位居中</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;width: 100px;height: 100px;background-color: red;}</style>
</head><body><div class="box"></div>
</body>
</html>

这种方法不推荐，因为当盒子宽高不是偶数的时候，一般会出现小数点，推荐使用以下方式，比较省事，让浏览器自己去计算。

1. 设置 margin为 auto
2. top left right bottom 四个方向设置为0
3. 让外边距自动拉扯元素位置进行平衡

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 定位居中</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 113px;height: 100px;background-color: red;}</style>
</head><body><div class="box"></div>
</body>
</html>

也推荐使用translate实现居中

.container {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

绝对定位实现横线增长方向小技巧

使用绝对定位脱标后，如果是left: 0;从左向右过渡长，如果是right: 0;就是从右往从长

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关于运动方向的技巧</title><style>* {margin: 0;padding: 0;}a {color: #222;text-decoration: none;}html,body {height: 100%;}.nav {padding-top: 70px;text-align: center;}.nav a {position: relative;display: inline-block;font-size: 14px;}.nav a:after {content: '';position: absolute;bottom: 0;/* 先脱标，后设置left: 0;从左向右过渡长，如果是right: 0;就是从右往从长 */left: 0;width: 0;height: 1px;background-color: orange;transition: .3s;}.nav a:hover:after {width: 100%;}.line {/* 如果没有脱标默认从左向右长 */width: 0;height: 3px;background-color: red;transition: 1s;}body:hover .line{width: 100px;}</style>
</head><body><div class="nav"><a href="#">首页</a><a href="#">新闻资讯</a><a href="#">体育资讯</a><a href="#">今日看点</a><a href="#">更多消息</a></div><div class="line"></div>
</body>
</html>

固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器(window view)。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; font-weight: 700

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2. 如果取值相同，则根据书写顺序，后来居上。

3. 后面数字一定不能加单位。

4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标移入边框显示红色</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {width: 308px;height: 300px;}.box .child {position: relative;float: left;margin-left: -1px;width: 100px;height: 100px;border: 1px solid blue;}.box .child:hover {z-index: 1;/* 如果不加这行代码，则前面两个元素的右边线会时蓝色，因为层级比较低 */border-color: red;}</style>
</head><body><div class="box"><div class="child"></div><div class="child"></div><div class="child"></div></div>
</body>
</html>

层级比较，如果父元素层级相同，则子元素谁层级高谁就在上面，如果父元素层级高，不论子元素层级时多少，该层级高的父元素下的子元素层级还是比层级低父元素下的子元素层级高。如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 层级</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box1,.box2 {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: #ccc;}.box1 {z-index: 2;}.box2 {z-index: 1;}.child1,.child2 {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: #ccc;}.child1 {z-index: 6;background-color: blue;  /* 显示该蓝色盒子的颜色 */}.child2 {z-index: 99;background-color: red;}</style>
</head><body><div class="box1"><div class="child1"></div></div><div class="box2"><div class="child2"></div></div>
</body>
</html>

四种定位总结

定位模式转换

跟浮动一样， 元素添加了 绝对定位(absolute)和固定(fixed)定位之后， 元素模式也会发生转换， 都转换为 块(block)模式。

定位使用注意

定位元素会脱标并且独立新开文档流层级，高度依赖定位会导致浏览器压力大，并且在后期维护中因为定位元素并不能跟随文档流进行流动，所以维护成本高。

实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。

初始化样式表

reset 重置性样式表

original author : Eric Meyer https://meyerweb.com/

重置浏览器标签的样式表,因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

normalize 标准性样式表

original author : Nicolas Gallagher https://github.com/necolas/normalize.css/wiki

Normalize.css 是一个可定制的 CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 [CSS 重置样式集。

1. 保护有用的浏览器样式而不是去掉他们。
2. 一般化的样式：为大部分HTML元素提供。
3. 修复浏览器自身的bug并保证各浏览器的一致性。
4. 优化css可用性：用一些小技巧。
5. 解释代码：用注释和详细的文档来。

注意：Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

Normalize 对比 Reset

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端与移动端浏览器的bug。这往往超出了Reset所能做到的范围。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们仅会有目的地对目标元素设置样式。

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到的部分（比如表单的一般化）。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。

量图工具 pxcook

教程文档

https://www.fancynode.com.cn/pxcook/docs

css3 新增样式

CSS3 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。

border-radius 圆角属性

这个属性允许你为元素添加圆角边框

语法:

border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;
border-radius: top-left top-right bottom-right bottom-left/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

复合与单例写法对比

border-radius:2em;/*对应单例写法为*/
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;/*对应单例写法为*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

1-4个值所对应

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

x 方向 % 对应容器宽度

y方向 % 对应容器高度

border-image 边框图片 (了解)

这个属性允许你为元素添加图片作为边框

语法:

border-image: source slice width outset repeat|initial|inherit;border-image: url(border.png) 30 round;

border-shadow 盒子阴影

这个属性允许你为盒子添加阴影效果

语法:

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)
box-shadow: 10px 10px 20px 25px #ccc inset;

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);background-image: radial-gradient(shape size at position, start-color, ..., last-color);

线性渐变

从一个方向到另一个方向的 水平 垂直 斜线 渐变

线性渐变 - 从上到下（默认情况下）

   background-image: linear-gradient(#e66465, #9198e5);

线性渐变 - 从左到右

 background-image: linear-gradient(to right, red , yellow);

线性渐变-左上到右下

 background-image: linear-gradient(to bottom right, red, yellow);

可以用来做渐变条纹

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变条纹</title><style>.wrap {position: relative;top: 0;width: 180px;height: 180px;border-radius: 50%;margin: 20px auto;text-align: center;background-image: linear-gradient(#000 0%, #000 20%, #fff 20%, #fff 40%, #000 40%, #000 60%, #fff 60%, #fff 80%, #000 80%, #000 100%);}</style>
</head>
<body><div class="wrap"></div>
</body>
</html>