HTML5+CSS3+移动端前端

01 学习路线

HTML5基础

学习HTML5基础，主要学习最常见的没有兼容性的HTML标签

CSS3基础

学习CSS3基础，主要学习最常用没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局。

综合案例：传统企业网页制作

H5C3提高

学习HTML5新增的标签、CSS3样式，有一定兼容性，可以与未来更好的接轨。

项目-品优购电商网站

综合前面3个的知识点，贴近于实际开发，制作品优购电商网站，完成首页、列表页、注册页制作。

目的：学习网页制作实际开发制作流程规范。

02 网页的相关概念

什么是网页

网站就是网页的集合

网页一般都是HTML格式的文件

什么是HTML

HTML是超文本标记语言，不是编程语言，是描述网页的语言。

超文本的含义:

可以加入图片、声音、动画、多媒体等内容（超越了文本限制）；
可以从一个文件跳转到另外一个文件，与世界各地主机的文件链接（超级链接文本）

网页的形成

前端人员开发代码 –> 浏览器显示代码（解析、渲染）–> 生成最后的web页面

浏览器

浏览器是网页显示、运行的平台。

常用的浏览器有IE、火狐（firefox）、谷歌（Chrome）、Safari和Opera等。

03 lang以及字符集的作用

lang字符集

定义html显示的语言，对谷歌浏览器有用

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

en英文，zh-CN中文

打开浏览器就会看到翻译

UTF-8

规范写成UTF-8
这个语法必须要写，否则可能会引起乱码

04 HTML常用标签

标题标签

1
2
3
4
5
6
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
口诀

标题一共六级选

文字加粗一行显

由大到小依次减

从重到轻随之变

语法规范书邂逅

具体效果刷新见

段落和换行标签

1
2
<p>我是一个段落标签</p>
<br/>换行标签

我是一个段落标签


换行标签

文本格式化标签

语义 标签
加粗 <strong></strong>
倾斜 <em></em>
删除线 <del></del>
下划线 <ins></ins> 
1
2
3
4
5
我是正常的文字
<strong>我是加粗的文字</strong>
<em>我是倾斜的文字</em>
<del>我是删除线</del>
<ins>我是下划线</ins>

我是正常的文字
我是加粗的文字
我是倾斜的文字
我是删除线
我是下划线

<div>和<span>标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

使用：

1
2
<div>内容</div>
<span>内容</span>

特点：

  1. <div>一行只能放一个。大盒子
  2. <span>，一行可以放多个。小盒子

图像标签和路径

图像标签

1
<img src="图像路径URL" />

src为<img>的必要属性，用于指定图像文件的路径和文件名。

其他属性
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替代文本，当图像不显示时，就会出现alt属性里的文字
title 文本 提示文本，鼠标放到图像上出现的字
width 像素 图像宽度
height 像素 图像高度
border 像素 图像的边框粗细

属性之间不分顺序，但之间要有空格分开。

alt

alt 替代文本，当图像不显示时，就会出现alt属性里的文字

替代文本

title

title 提示文本，鼠标放到图像上出现的字



height width

width height,图像宽高

可以看到如果同时设置宽高的话，图片就会变形，所以理论上我们设置一个属性就可以了，另外一个会随着改变的属性变化的。



border

border,图像的边框粗细

这里显示的边框是白色的，所以看不太出来，到后面学习css了，就可以指定border边框的颜色了。



alt 

1
2
alt 替代文本，当图像不显示时，就会出现alt属性里的文字
<img src="https://123" alt="替代文本"/>


title 

1
2
title 提示文本，鼠标放到图像上出现的字
<img src="https://s1.vika.cn/space/2023/04/03/bfaf3c8f235f4e0fabd6d6326156fe37" title="提示文本"/>


height width 

1
2
width height,图像宽高
<img src="https://s1.vika.cn/space/2023/04/03/bfaf3c8f235f4e0fabd6d6326156fe37" width="200px" height="200px"/>


border 

1
2
border,图像边框粗细
<img src="https://s1.vika.cn/space/2023/04/03/bfaf3c8f235f4e0fabd6d6326156fe37" width="200px" border="15"/>


路径

相对路径

以引用文件所在位置为参考基础（就是图片相对于HTML页面的位置）。

相对路径分类 符号 说明
同一级路径 图像和html文件在同一级
下一级路径 / 图像在html文件下一级里
上一级路径 ../ 图像在html文件上一级里

图片和html文件同一级



图片在html文件下一级



图片在html文件上一级



alt 

1
<img src="123.jpg" title="图片和html文件同一级"/>


title 

1
<img src="images/123.jpg" title="图片在html文件下一级"/>


height width 

1
<img src="../123.jpg" title="图片在html文件上一级"/>


绝对路径

目录下的绝对位置，直接到达目标位置，通常是从盘符（电脑的c盘，d盘，e盘等等）开始的路径

例如：C:\web\img\img.jpg或者完整的网络地址（URL）“http://www.”

超级标签

链接的语法格式

1
<a href="跳转目标" target="目标的弹出方式">文本或图像</a>
属性 作用
href 用于指定链接目标的URL地址，（必须属性）
当应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，即在当前页面跳转, _blank为在新窗口中打开

链接分类

1.外部链接：例如＜a href=＂http://www.baidu.com＂＞百度＜/a＞。

2.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如＜a href=＂index.html”＞首页＜/a＞。

3.空链接：如果当时没有确定链接目标时，＜a href=＂＃＂＞首页＜/a＞。

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接：在网页中的名种网页元素，如文字、图像、表格、音频、视频等都可以添加超链接。

6.锚点链接：点击链接，可以快速定位到页面中的某个位置

  • 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
  • 找到目标位置标签，里面添加一个id属性= 刚才的名字如:<h3 id="two">第2集介绍</h3>

两步都需要设置才能生效。

05 注释和特殊字符

注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!-”开头，以“-->”结束。

<!-- 注释语句 -->                   快捷键: ctrl + /

一句话:注释标签里面的内容是给程序猿看的，这个代码是不执行不显示到页面中的。

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
￥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号注册商标 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方2(上标2) &sup2;
³ 立方3(上标3) &sup3;

重点记住: 空格、大于号、小于号 这三个，其余的使用很少，如果需要回头查阅即可。

06 HTML标签

表格标签

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

Pink老师总结:表格不是用来布局页面的,而是用来展示数据的。

表格的基本语法

1
2
3
4
5
6
<table>
 <tr>
  <td>单元格内的文字</td>
  ...
 </tr>
</table>
1
2
3
4
5
<table>
 <tr><td>姓名</td><td>性别</td><td>年龄</td> </tr>
 <tr><td>小明</td><td>男</td><td>18</td> </tr>
 <tr><td>小美</td><td>女</td><td>18</td> </tr>
</table>
姓名性别年龄
小明男18
小美女18

1.<table></table>是用于定义表格的标签。

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

3.<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。

4.字母td指表格数据（table data），即数据单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)

1
2
3
4
5
6
7
<table>
 <tr>
  <th>姓名</th>
     ...
 </tr>
    ...
</table>
1
2
3
4
5
 <table>
 <tr><th>姓名</th><th>性别</th><th>年龄</th> 
 <tr><td>小明</td><td>男</td><td>18</td> </tr>
 <tr><td>小美</td><td>女</td><td>18</td> </tr>
</table>
姓名性别年龄
小明男18
小美女18

表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置。

目的有2个:

1.记住这些英语单词,后面CSS会使用。

2.直观感受表格的外观形态。

属性名 属性值 描述
align left、center、right 视定表格相对周围元素的对齐方式。
border 1或”” 规定表格单元是否拥有边框，默认为””，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。
cellspacing 像素值 规定单元边之间的空白，默认2像素。
width 像素值或百分比 规定表格的宽度。

其中演示cellpadding，cellspacing两个属性，我感觉会比较难理解。

cellpadding属性 

1
2
3
4
5
 <table align="center" border="1">
 <tr><th>姓名</th><th>性别</th><th>年龄</th> 
 <tr><td>小明</td><td>男</td><td>18</td> </tr>
 <tr><td>小美</td><td>女</td><td>18</td> </tr>
</table>
1
2
3
4
5
 <table align="center" border="1" cellpadding="20">
 <tr><th>姓名</th><th>性别</th><th>年龄</th> 
 <tr><td>小明</td><td>男</td><td>18</td> </tr>
 <tr><td>小美</td><td>女</td><td>18</td> </tr>
</table>


cellspacing属性 

1
2
3
4
5
 <table align="center" border="1">
 <tr><th>姓名</th><th>性别</th><th>年龄</th> 
 <tr><td>小明</td><td>男</td><td>18</td> </tr>
 <tr><td>小美</td><td>女</td><td>18</td> </tr>
</table>
1
2
3
4
5
 <table align="center" border="1" cellspacing="20">
 <tr><th>姓名</th><th>性别</th><th>年龄</th> 
 <tr><td>小明</td><td>男</td><td>18</td> </tr>
 <tr><td>小美</td><td>女</td><td>18</td> </tr>
</table>


cellpadding属性

上面是不设置cellpadding的情形，可以看到文字和框框贴在一起；

下面是设置cellpadding为20时，可以看到文字与框框上下左右都是20的距离。

cellspacing属性

可以看当设置cellspacing=”20”时，单元格与单元格之间的距离就变成了20。

表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表格结构。

总结：

  1. <thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
  2. <tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
  3. 以上标签都是放在<table></table>标签中。

合并单元格

合并单元格方式
  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码。（跨行从上到下）

跨列：最左侧单元格为目标单元格，写合并代码。（跨列从左到右）

合并单元格三步曲：

  1. 先确定是跨行还是跨列合并。

  2. 找到目标单元格。写上合并方式=合并的单元格数量。比如<td colspan="2"></td>。

  3. 删除多余的单元格。

跨列合并



跨行合并



跨列合并 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="500" height="249" border="1" cellspacing="0">
       <tr>
           <td></td>
           <td colspan="2"></td>
       <tr>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
       </tr>
   </table>


跨行合并 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="500" height="249" border="1" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>


跨列合并



跨行合并



列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

1
2
3
4
5
6
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>
1
2
3
4
5
6
<p>您喜欢的水果？</p>
<ul>
    <li>苹果</li>
    <li>草莓</li>
    <li>蓝莓</li>
</ul>

您喜欢的水果？

  • 苹果
  • 草莓
  • 蓝莓
  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  3. <li> 与</li>之间相当于一个容器，可以容纳所有元素。
  4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

1
2
3
4
5
6
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>
1
2
3
4
5
6
<p>您喜欢的水果？</p>
<ol>
    <li>苹果</li>
    <li>草莓</li>
    <li>蓝莓</li>
</ol>

喜欢的水果排行榜

  1. 苹果
  2. 草莓
  3. 蓝莓
  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li> 与</li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

自定义列表

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

使用场景例如：

在HTML标签中，<dl>标签用于定义描述列表（或定义列表）该标签会与<dt>(定义项目/名字)和<dd>（描述每一个项目/名字）一起使用。

1
2
3
4
5
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
1
2
3
4
5
6
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>
关注我们
新浪微博
官方微信
联系我们

会看到<dd>标签的文字前面会有一段空位，这是正常的，等后面学习了css就可以进行修饰。

列表总结

标签名 定义 说明
<ul></ul> 无序列表 里面只能包含<li>，没有顺序。<li>里面可以包含任何标签。
<ol></ol> 有序列表 里面只能包含<li>有顺序。<li>里面可以包含任何标签。
<dl></dl> 自定义列表 里面只能包含<dt>和<dd>，<dt>和<dd>里面可以放任何标签。

表单标签

例如注册登录，使用表单可以收集用户信息。

表单的组成

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

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

1
2
3
<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 设置表单数据的提交方式，其取值为get或post。
name 名称 指定表单的名称，以区分同一个页面中的多个表单域。

数据是要上传到后台的，后台的要学会服务器编程那些，所以这里只演示标签语法。

1
2
3
<form action="demo.php" method="POST" name="name1">
    
</form>

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<input>输入表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。

在 <input> 标签中，包含一个type属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。除 type 属性外，标签还有其他很多属性，其常用属性如下：

属性 属性值 描述
name 由用户自定义 定义input元素的名称。
value 由用户自定义 规定input 元素的值。
checked checked 规定此 input元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度。
type属性
1
<input type="属性值" />

type 属性的属性值及其描述如下：

属性值 描述
button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本）。
checkbox 定义复选框。
file 定义输入字段和“浏览”按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。
text 
1
2
3
<form>
    用户名：<input type="text" />
</form>
password 
1
2
3
<form>
    密码：<input type="password" />
</form>
radio 
1
2
3
<form>
    性别：男<input type="radio" /> 女<input type="radio" />
</form>
checkbox 
1
2
3
<form>
    爱好：吃饭<input type="checkbox" /> 睡觉<input type="checkbox" /> 打豆豆<input type="checkbox" />
</form>
submit 
1
2
3
<form action="xxx.php" method="get">
    <input type="submit" value="免费注册"/>
</form>
reset 
1
2
3
4
5
6
7
8
<form action="xxx.php" method="get">
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/><br>
    密码：<input type="password" name="pwd"/><br>
    性别：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女"/><br>
    爱好：吃饭<input type="checkbox" name="hobby"/> 睡觉<input type="checkbox" name="hobby"/> 打豆豆<input type="checkbox" name="hobby"/><br>
    <input type="submit" value="免费注册"/>
    <input type="reset" value="重新填写"/>
</form>
button 
1
2
3
<form>
    <input type="button" value="获取短信验证码"/>
</form>
file 
1
2
3
<form>
    上传文件：<input type="file"/>
</form>
text
用户名：

text文本框 用户可以在里面输入任何文字。

password
密码：

password密码框 输入的文字会用*代替。

radio
性别：男 女

radio 单选按钮 可以实现多选。

可以发现这里的单选按钮却可以同时选择两个，要如何实现单选，就需要input标签的其他属性来协助了（下面有示例）。

checkbox
爱好：吃饭 睡觉 打豆豆

checkbox 复选框 可以实现多选。

submit

点击提交按钮，就可以把表单域form里面的表单元素里面的值提交给后台服务器。

reset
用户名：
密码：
性别：男 女
爱好：吃饭 睡觉 打豆豆

重置按钮可以还原表单元素初始的默认状态。

button

可以给我们手机发送短信那种按钮，后期结合JavaScript使用。

file
上传文件：

文件域 使用场景 上传文件使用。

name、value属性

只有type属性的input标签是不够的，可以看单选按钮就知，所以我们要用到其他属性。

  • name 和value 是每个表单元素都有的属性值,主要给后台人员使用。
  • name 表单元素的名字, 要求单选按钮和复选框要有相同的name值。
name 
1
2
3
<form>
    性别：男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/>
</form>
value 
1
2
3
<form>
    用户名：<input type="text" name="username" value="请输入用户名"/>
</form>
1
2
3
<form>
    性别：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女"/>
</form>
name
性别：男 女

name 是表单元素名字，这里性别单选按钮必须有相同的名字name，才可以实现多选1，不会出现重复选择的现象。

value
用户名：
性别：男 女

可以看到加入value属性后，在表单里面出现了value属性的值，如果在按钮里面加入value属性，提交的话就会把value值送到后台，后台就会知道用户选了哪个按钮。

checked、maxlength属性

单选按钮和复选按钮可以设置checked属性，当页面打开的时候就可以默认选中这个按钮。

  • checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
  • maxlength是用户可以在表单元素输入的最大字符数, 一般较少使用。
checked 
1
2
3
<form>
    性别：男<input type="radio" name="sex"/> 女<input type="radio" name="sex" checked="checked"/>
</form>
maxlength 
1
2
3
<form>
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/>
</form>
1
2
3
<form>
    性别：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女"/>
</form>
checked
性别：男 女

可以看到默认勾选上了“女”的性别。

maxlength
用户名：

设置了maxlength属性为6，就只能输入6个字符。

<label>标签

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

<label>标签用于绑定一个表单元素, 当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上,用来增加用户体验。

1
2
3
4
5
<form>
    <label for="text">用户名：</label><input type="text" id="text"/><br>
    <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
    <input type="radio" id="nv" name="sex"> <label for="nan">女</label>
</form>

核心：标签的 for属性应当与相关元素的 id 属性相同。

点击“用户名”时，输入框就被选中了；点击”男/女”字也会进行选中按钮。

<select>下拉表单元素

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

  • <select>中至少包含一对<option>。
  • 在<option>中定义 selected ="selected" 时，当前项即为默认选中项。
1
2
3
4
5
6
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>
1
2
3
4
5
6
7
8
9
<form>
    籍贯：
    <select>
    <option>北京</option>
    <option selected ="selected">广东</option>
    <option>湖南</option>
    <option>上海</option>
</select>
</form>
籍贯：

当设置selected ="selected" 时，当前项即为默认选中项。

<textarea>文本域元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

1
2
3
<textarea rows="3" cols="20">
 文本内容
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。

cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

1
2
3
<form>
    今日反馈：<textarea></textarea>
</form>
1
2
3
4
5
<form>
    今日反馈：
    <textarea cols="50" rows="5">填写反馈内容
    </textarea>
</form>
今日反馈：
今日反馈：

CSS层叠样式表

CSS简介

CSS 的主要使用场景就是美化网页,布局页面的。

HTML 的局限性

说起HTML，这其实是个非常单纯的家伙，只关注内容的语义。比如<h1>表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这儿有一个图片，<a> 表示此处有链接。

很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。

虽然HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐……

CSS-网页的美容师

CSS是层叠样式表( Cascading Style Sheets ) 的简称。

有时我们也会称之为CSS 样式表或级联样式表。

CSS 是也是一种标记语言CSS 主要用于设置HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化HTML。

CSS语法规范

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

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用英文“:”分开
  • 多个“键值对”之间用英文“;”进行区分

语法规范

1
2
3
4
5
6
7
8
<head>
    <style>
        h4 {
        color: blue;
        font-size: 100px;
        }
    </style>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            /* 修改了字体颜色为red */
            color: red;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

有点意思

CSS基础选择器

CSS选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS 样式。

语法：

1
2
3
4
5
6
标签名{
   属性1：属性值1；
   属性2：属性值2；
   属性3：属性值3；
   ...
}

例如：设置所有p标签的字体颜色为红色，字体大小为12像素。

1
2
3
4
p {
    color: red;
    font-size: 12px;
  }
  • 作用：标签选择器可以把某一类标签全部选择出来，比如所有的<div> 标签和所有的<span> 标签。
  • 优点：能快速为页面中同类型的标签统一设置样式。
  • 缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

结构需要用class属性来调用 class 类的意思

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

例如：

1
2
3
.red { color: red; }

<div class='red'> 变红色 </div>

注意：

① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

② 可以理解为给这个标签起了一个名字，来表示。

③ 长名称或词组可以使用中横线来为选择器命名。

④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。

⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。

⑥ 命名规范：见附件（ Web 前端开发规范手册.doc）

多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签. 简单理解就是一个标签有多个名字。

使用方法：

1
2
3
<div class="red font20">多类名</div>
<div class="font20">多类名22</div>
<div class="pink font20">多类名11</div>
  • 各个类名中间用空格隔开
  • 简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
  • 这个标签就可以分别具有这些类名的样式
  • 从而节省CSS代码,统一修改也非常方便.
  • 多类名选择器在后期布局比较复杂的情况下，还是较多使用的

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以id 属性 来设置 id 选择器，CSS 中 id 选择器以“#“ 来定义。

语法：

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

.red { color: red; }
<div id='red'> 变红色 </div>

注意：id 属性只能在每个 HTML 文档中出现一次（只能调用一次, 别人切勿使用）。

id 选择器和类选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

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

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

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

语法：

1
2
3
4
* {
 属性1: 属性值1; 
 ...
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <div>上班</div>
    <span>今天星期四</span>
    <ul>
        <li>明天就是</li>
    </ul>
    <p>星期五</p>
</body>

</html>

通配符*不用调用。定义字体颜色为红色，可以看到HTML中无论是<div>、列表标签<ul><li>还是段落标签，它们的字体都变成了红色。

  • 通配符选择器不需要调用， 自动就给所有的元素使用样式。
  • 特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
1
2
3
4
* {
    margin: 0;
    padding: 0;
   }

基础选择器总结

基础选择器 作用 特点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p{ color: red; }
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择1个标签 ID属性只能在每个HTML文档中出现一次 一般和js搭配 #nav { color: red; }
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 *{ color: red; }
  • 每个基础选择器都有使用场景，都需要掌握。
  • 如果是修改样式， 类选择器是使用最多的。

CSS字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

字体系列

CSS 使用font-family 属性定义文本的字体系列。

1
2
p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

有多个字体的情况下，根据电脑存在的情况使用，比如如果电脑上没有安装Arial字体，就会使用”Microsoft Yahei”字体，一直类推。如果都没有上述字体，那么就会以电脑默认的字体显示。

  • 各种字体之间必须使用英文状态下的逗号隔开。

  • 一般情况下,如果有空格隔开的多个单词组成的字体。

  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示（因为使用了某些字体，可能使用的用户电脑上没有安装，最后就会导致不能正常显示）。

  • 最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,’Hiragino Sans GB’; }（兼容性好）。

字体大小

CSS 使用font-size 属性定义字体大小。

1
2
3
p { 
    font-size: 20px; 
   }
  • px（像素）大小是我们网页的最常用的单位。
  • 谷歌浏览器默认的文字大小为16px。
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
  • 可以给 body 指定整个页面文字的大小（标题标签比较特殊，需要单独指定字体大小）。

字体粗细

CSS 使用font-weight 属性设置文本字体的粗细。

1
2
3
p { 
    font-weight: bold; 
   }
属性值 描述
normal 默认值（不加粗的）
bold 定义粗体（加粗）
100~900 400等同于normal，而700等同于bold 注意这个数字后面不跟单位
  • 学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
  • 实际开发时，我们更喜欢用数字表示粗细

文字样式

CSS 使用 font-style属性设置文本的风格。

1
2
3
p { 
    font-style: normal; 
   }
属性值 作用
normal 默认值，浏览器会显示标准的字体样式，font-style:normal;
italic 浏览器会显示斜体的字体样式。
注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ys {
            font-style: italic;
            font-weight: 700;
            font-size: 18px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="zc">今天也是学习的一天</div>
    <div class="ys">今天也是学习的一天</div>
</body>

</html>

字体属性总结

属性 表示 注意点
font-size 字号 我们通常用的单位是px像素，一定要跟上单位。
font-family 字体 实际工作中按照团队约定来写字体。
font-weight 字体粗细 记住加粗是700或者bold，不加粗是normal或者400，记住数字不要跟单位。
font-style 字体样式 记住倾斜是italic，不倾斜是normal，工作中我们最常用normal。

CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color 属性用于定义文本的颜色。 
1
2
3
div { 
 color: red;
}
表示 属性值
预定义的颜色值 red,green,blue,还有我们的御用色pink
十六进制 #FF0000,#FF6600, #29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
开发中最常用的是十六进制。 
1
<div style="color=red">今天也在学习</div>

今天也在学习

对齐文本

text-align 属性用于设置元素内文本内容的水平 对齐方式。 
1
2
3
div { 
 text-align: center;
}
属性值 解释
left 左对齐（默认值）
right 右对齐
center 居中对齐 
1
2
3
<div style="text-align: left;">今天也在学习</div>
<div style="text-align: right;">今天也在学习</div>
<div style="text-align: center;">今天也在学习</div>
今天也在学习
今天也在学习
今天也在学习

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。 
1
2
3
div { 
 text-decoration：underline；
}
属性值 描述
none 默认。没有装饰线（最常用）
underline 下划线。链接a自带下划线（常用）
overline 上划线。（几乎不用）
line-through 删除线。（不常用） 
1
2
3
4
<div style="text-decoration: none;">今天也在学习</div>
<div style="text-decoration: overline;">今天也在学习</div>
<div style="text-decoration: line-through;">今天也在学习</div>
<div style="text-decoration: underline;">今天也在学习</div>
今天也在学习
今天也在学习
今天也在学习
今天也在学习

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。 
1
2
3
div { 
 text-indent: 2em;
}

2em缩进2个字符，通俗说就是每个段落前面空两格。

1
2
<div>今天也在学习</div>
<div style="text-indent: 2em;">今天也在学习</div>
今天也在学习
今天也在学习

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。 
1
2
3
div { 
 line-height: 26px;
}

行间距由三部分组成，文本高度就是字体大小（font-size）。

1
2
3
4
5
<div>今天也在学习</div>
<div>今天也在学习</div>
<div style="line-height: 100px;">今天也在学习</div>
<div>今天也在学习</div>
<div>今天也在学习</div>
今天也在学习
今天也在学习
今天也在学习
今天也在学习
今天也在学习

文本属性总结

属性 表示 注意点
color 文本颜色 我们通常用十六进制比如而且是简写形式#fff
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent:2em；
text-decoration 文本修饰 记住添加下划线 underline，取消下划线 none
line-height 行高 控制行与行之间的距离

CSS引入方式

内部样式表

内部样式表（内嵌样式表）是写到html页面内部。是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

1
2
3
4
5
6
<style>
   div {
   color: red;
   font-size: 12px;
  }
</style>
  • <style>标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置。
  • 代码结构清晰，但是并没有实现结构与样式完全分离。
  • 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

1
<div style="color: red; font-size: 12px;">今天也在学习</div>
  • style 其实就是标签的属性。
  • 在双引号中间，写法要符合 CSS 规范。
  • 可以控制当前的标签设置样式。
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简。
  • 单样式的时候，可以考虑使用。
  • 使用行内样式表设定 CSS，通常也被称为行内式引入。

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况。

核心是：样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

  1. 新建一个后缀名为.css 的样式文件，把所有 CSS 代码都放入此文件中。
  2. 在 HTML 页面中，使用<link>标签引入这个文件。
1
<link rel="stylesheet" href="css文件路径">
属性 作用
rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  • 使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式。

CSS 引入方式总结

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 结构样式混写 较少 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多，吐血推荐 控制多个页面

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

快速生成HTML结构语法

  1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
  2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
  3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
  4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
  5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
  6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $
  7. 如果想要在生成的标签内部写内容可以用 { } 表示
1
2
3
4
5
6
7
8
9
10
1.div
2.div*3
3.ul>li
4.div+p
5.p.one/demo#wit
6.div.demo$*3
7.div{学习}/p{学习}
#输入这些直接按回车键或者tab键就会生成
8.div{学习}*3
9.div{$}*3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1. <div></div>

2. <div></div>
   <div></div>
   <div></div>

3. <ul>
       <li></li>
   </ul>

4. <div></div>
   <p></p>

5. <p class="one"></p>
   <demo id="wit"></demo>

6. <div class="demo1"></div>
   <div class="demo2"></div>
   <div class="demo3"></div>

7. <div>学习</div>
   <p>学习</p>
#我们想生成的标签里面默认显示几个文字

8. <div>学习</div>
   <div>学习</div>
   <div>学习</div>

9. <div>1</div>
   <div>2</div>
   <div>3</div>

快速生成CSS样式语法

CSS 基本采取简写形式即可。

  1. 比如 w200 按tab 可以 生成 width: 200px;
  2. 比如 lh26px 按tab 可以生成 line-height: 26px;

快速格式化代码：Vscode 快速格式化代码: shift+alt+f

也可以设置保存的时候自动格式化代码，可以参考这篇文章

CSS复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器（重要）

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

语法：

1
元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

就比如下面的：

1
2
3
4
/* 比如把ol里面的li选出来变样式 */
        ol li {
            color: blue;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 比如把ol里面的li选出来变样式 */
        ol li {
            color: blue;
        }
    </style>
</head>

<body>
    <ol>
        <li>我在ol里</li>
        <li>我在ol里</li>
        <li>我在ol里</li>
    </ol>
    <ul>
        <li>我在ul里</li>
        <li>我在ul里</li>
        <li>我在ul里</li>
    </ul>
</body>
</html>

  • 元素1 和 元素2 中间用空格隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2
  • 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  • 元素1 和 元素2 可以是任意基础选择器

子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：

1
元素1 > 元素2 { 样式声明 }

例子：

1
2
3
.nav > a{
    color:red;
}
1
2
3
4
5
6
<div class="nav">
    <a href="#">我是儿子</a>
    <p>
        <a href="#">我是孙子</a>
    </p>
</div>

  • 元素1 和元素2 中间用大于号隔开。
  • 元素1 是父级，元素2 是子级，最终选择的是元素2。
  • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器。

并集选择器（重要）

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

1
元素1,元素2 { 样式声明 }

上述语法表示选择元素1和元素2。

1
2
3
4
5
/* 比如把熊大和熊二改为红色 */
div,
p{
    color:red;
}
1
2
3
4
5
6
7
8
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="sheep">
    <li>喜羊羊</li>
    <li>暖羊羊</li>
    <li>懒羊羊</li>
</ul>

1
2
3
4
5
6
7
/* 比如把熊大和熊二改为红色还有羊羊也改为红色 */
div,
p,
.sheep li{
    color:red;
}
/* 比如把熊大和熊二改为红色还有羊羊也改为红色 */

约定的语法规范，我们并集选择器喜欢竖着写。

一定要注意，最后一个选择器，不需要加逗号。

  • 元素1 和元素2 中间用逗号隔开。
  • 逗号可以理解为和的意思。
  • 并集选择器通常用于集体声明。

伪类选择器

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

伪类选择器书写最大的特点是用冒号表示，比如:hover 、:first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器
1
2
3
4
a:link          /* 选择所有未被访问的链接 */
a:visited       /* 选择所有已被访问的链接 */
a:hover         /* 选择鼠标指针位于其上的链接 */
a:active        /* 选择活动链接（鼠标按下未弹起的链接） */

链接伪类选择器实际工作开发中的写法：

1
2
3
4
5
6
7
8
9
/* a是标签选择器所有的链接 */
a {
    color: gray;     /* 因为a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式 */
}

/* :hover是链接伪类选择器鼠标经过 */
a:hover {
    color: red;        /* 鼠标经过的时候，由原来的灰色变成了红色 */
}
:focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况input 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

例如：

1
2
3
input:focus{
    background-color:skyblue;
}
1
2
3
<input type="text">
<input type="text">
<input type="text">

复合选择器总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>a
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav,a
链接伪类选择器 选择不同状态的链接 跟链接有关 较多 重点记住a{}和a:hover实际开发的写法
:focus伪类选择器 选择获得光标的表单 跟表单有关 较少 input:focus记住这个写法

CSS的元素显示模式

HTML元素一般分为块元素和行内元素两种类型

块元素

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

特点：

①比较霸道，自己独占一行。

②高度，宽度、外边距以及内边距都可以控制。

③宽度默认是容器（父级宽度）的100%。

④是一个容器及盒子，里面可以放行内或者块级元素。

注意：

  • 文字类的元素内不能使用块级元素。
  • <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。
  • 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点：

①相邻行内元素在一行上，一行可以显示多个。

②高、宽直接设置是无效的。

③默认宽度就是它本身内容的宽度。

④行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里面不能再放链接。
  • 特殊情况链接<a> 里面可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

特点：

①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

②默认宽度就是它本身内容的宽度（行内元素特点）。

③高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式总结

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度高度 它本身内容的宽度

元素显示模式转换

  • 转换为块元素：display:block;
  • 转换为行内元素：display:inline;
  • 转换为行内块：display: inline-block;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }
 
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }
 
        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
 
<body>
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>
 
</html>

转换前：

转换后：

CSS的背景

通过CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色。

1
2
3
background-color: 颜色值;
background-color: red;
background-color: skyblue;

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

1
background-color: transparent;

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置。

1
background-image: none | url (url);
参数值 作用
none 无背景图（默认）
url 使用绝对或相对路径指定背景图像

背景平铺

如果需要在HTML 页面上对背景图像进行平铺，可以使用background-repeat属性。

1
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值 作用
repeat 背景图像在纵向和横向上平铺（默认）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向上平铺

页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色。

背景图片位置

利用background-position 属性可以改变图片在背景中的位置。

1
background-position: x y;

参数代表的意思是：x 坐标和y 坐标。可以使用方位名词或者精确单位。

参数值 说明
length 百分数、由浮点数字和单位标识符组成的长度值
position top、center、bottom、left、center、right 方位名词
参数是方位名词
  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
1
2
3
4
5
6
7
8
/* background-position:  方位名词; */
 background-position: center top;   /* 水平居中顶部对齐 */
/* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
 background-position: center right; / background-position: right center;     /* 垂直居中靠右对齐 */
/* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
 background-position: right;
/* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略 x轴 是 水平居中显示的 */
 background-position: top;
参数是精确单位
  • 如果参数值是精确坐标，那么第一个肯定是x 坐标，第二个一定是y坐标。
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。
1
2
3
4
/* 20px 50px; x轴一定是 20  y轴一定是 50 */
 background-position: 20px 50px;  /* 距离左边20px，距离顶部50px */
 background-position: 50px 20px;  /* 距离左边50px，距离顶部20px */
 background-position: 20px;       /* 距离左边20px，垂直居中 */
参数是混合单位
  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
1
2
3
4
/* 20px center  一定是x为20px，y 是 center等价于background-position: 20px */
 background-position: 20px center;
/* 水平是居中对齐  垂直是 20px */
 background-position: center 20px;

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

1
background-attachment: scroll | fixed
参数 作用
scroll 背景图像是随对象内容滚动（默认）
fixed 背景图像固定

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background 中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

1
background: 背景颜色  背景图片地址  背景平铺  背景图像滚动  背景图片位置;

背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

1
background: rgba(0, 0, 0, 0.3);
  • 最后一个参数是alpha 透明度，取值范围在0~1之间。
  • 我们习惯把0.3 的0 省略掉，写为background: rgba(0, 0, 0, .3);。
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
  • CSS3 新增属性，是IE9+ 版本浏览器才支持的。
  • 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用。

背景总结

属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB 代码
background-Image 背景图片 url （图片路径）
background-repeat 是否平铺 repea/no 一 repeat/repeat-X/repeat-y
background-pos . tlon 背景位置 Iength/position 分别且 x 和 y 坐标
background-attachment 背景附着 scroll （背景滚动） /fixed （背景固定）
背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明 背景颜色半透明 background : rgba（0 . 0 . 0. 0. 3 )；后面必须是 4 个值

CSS的三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性

原则：

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
  • 样式不冲突，不会层叠。

继承性

现实中的继承: 我们继承了父亲的姓。

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性。
  • 选择器不同，则根据选择器权重执行。

选择器权重如下所示：

选择器 选择器权重
继承或者* 0，0，0，0
元素选择器 0，0，0，1
类选择器，伪类选择器 0，0，1，0
ID选择器 0，1，0，0
行内样式style=”” 1，0，0，0
!important 重要的 ∞无穷大

注意：

  1. 权重是有4组数字组成,但是不会有进位。

  2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。

  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

  4. 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，!important 无穷大。

  5. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

  • div ul li ——> 0,0,0,3
  • .nav ul li ——> 0,0,1,2
  • a:hover —–—> 0,0,1,1
  • .nav a ——> 0,0,1,1

CSS盒子模型

看透网页布局的本质

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子Box 。
  2. 利用CSS 设置好盒子样式，然后摆放到相应位置。
  3. 往盒子里面装内容.

网页布局的核心本质：就是利用CSS 摆盒子。

盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的HTML 元素，它包括：边框、外边距、内边距、和实际内容。

边框(border)

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)，边框样式，边框颜色。

语法：

1
border: border-width | border-style | border-color
属性 作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色

边框样式border-style 可以设置如下值：

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

CSS 边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

1
border: 1px solid red;  没有顺序

边框分开写法：

1
border-top: 1px solid red;   /* 只设定上边框，其余同理 */

课堂要求：请给一个200*200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）

1
2
3
4
width: 200px;
height: 200px;
border: 1px solid blue;
border-top: 1px solid red;   /* 层叠性，只是层叠了上边框 */

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

1
border-collapse: collapse;   /* 合并相邻的边框 */
  • collapse 单词是合并的意思。
  • border-collapse: collapse; 表示相邻边框合并在一起。

边框会额外增加盒子的实际大小。

因此我们有两种方案解决:

  1. 测量盒子大小的时候,不量边框。

  2. 如果测量的时候包含了边框,则需要width/height 减去边框宽。

内边距（padding）

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

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

padding属性（简写属性）可以有一到四个值。

值的个数 表达意思
padding: 5px; 1个值，代表上下左右都有5像素内边距。
padding: 5px 10px; 2个值，代表上下5像素，左右10像素。
padding: 5px 10px 20px; 3个值，代表上5像素，左右10像素，下20像素。
padding: 5px 10px 20px 30px; 4个值，代表上5像素，右10像素，下20像素，左30像素。顺时针

padding会影响盒子实际大小。也就是说如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

如果保证盒子跟效果图大小保持一致，则让{ % span red,width/height 减去多出来的内边距大小%}即可。

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

margin 简写方式代表的意义跟padding 完全一致。

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

①盒子必须指定了宽度（width）。

②盒子左右的外边距都设置为auto 。

1
2
3
4
.header{ 
    width: 960px; 
    margin: 0 auto;
}

常见的写法，以下三种都可以：

  • margin-left: auto;margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center 即可。

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

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

解决方案：尽量只给一个盒子添加margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

①可以为父元素定义上边框。

②可以为父元素定义上内边距。

③可以为父元素添加overflow: hidden。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

1
2
3
4
5
6
/* *为通配符选择器 */
* {
    padding: 0;   /* 清除内边距 */
    margin: 0;    /* 清除外边距 */
}
/* 这句话也是我们css的第一行代码 */

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

PS基本操作

因为网页美工大部分效果图都是利用PS（Photoshop）来做的，所以以后我们大部分切图工作都是在PS里面完成。

  • 文件-->打开：可以打开我们要测量的图片。
  • Ctrl+R：可以打开标尺，或者视图-->标尺。
  • 右击标尺，把里面的单位改为像素。
  • Ctrl+ 加号(+)可以放大视图，Ctrl+ 减号(-)可以缩小视图。
  • 按住空格键，鼠标可以变成小手，拖动PS 视图。
  • 用选区拖动 可以测量大小。
  • Ctrl+ D可以取消选区，或者在旁边空白处点击一下也可以取消选区。

PS切图

常见的图片格式

  1. jpg图像格式：JPEG（JPG）对色彩的信息保留较好，高清，颜色众多，我们产品类的图片经常用jpg格式的。
  2. gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果。
  3. png图像格式是一种新兴的网络图形格式,结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片,请选择png格式.
  4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点我们可以直接从上面复制文字，获得图片,还可以测量大小和距离。

图层切图

最简单的切图方式：右击图层–>导出PNG 切片。

合并图层：按住Shift（加选），选择要合并的图层，然后Ctrl+E（合并图层）

综合案例

Pink老师总结

  1. 布局为啥用不同盒子,我只想用div？
    标签都是有语义的, 合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p
  2. 为啥用辣么多类名？
    类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便。
  3. 到底用margin 还是padding？
    大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
  4. 自己做没有思路？
    布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。
    最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等。

圆角边框

border-radius属性用于设置元素的外边框圆角。

语法：

1
border-radius: length;   /* length长度，多少px或者% */
  • 参数值可以为数值或百分比的形式。
  • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius。
  • 兼容性ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }
 
        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }
 
        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>
    
</html>

盒子阴影

box-shadow属性为盒子添加阴影。

语法：

1
box-shadow: h-shadow v-shadow blur spread color inset;
值 描述
h-shadow 必需。水平阴影的位置。允许负值。（往左往右）
v-shadow 必需。垂直阴影的位置。允许负值。（往上往下）
blur 可选。模糊程度。
spread 可选。阴影的大小。
color 可选。阴影的颜色。请参阅CSS颜色值。
inset 可选。将外部阴影(outset)改为内部阴影。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
         /* box-shadow: h-shadow水平阴影 v-shadow垂直阴影 blur模糊程度 spread阴影大小 color阴影颜色;*/
        }
    </style>
</head>
 
<body>
    <div></div>
</body>
 
</html>

文字阴影

text-shadow属性将阴影应用于文本。

语法：

1
text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需。水平阴影的位置。允许负值。（往左往右）
v-shadow 必需。垂直阴影的位置。允许负值。（往上往下）
blur 可选。模糊程度。
color 可选。阴影的颜色。请参阅CSS颜色值。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px black;

        }
    </style>
</head>

<body>
    <div>
        今天也是学习的一天
    </div>
</body>

</html>

CSS浮动

浮动（float）

传统网页布局的三种方式

网页布局的本质——用CSS 来摆放盒子。把盒子摆放到相应位置。

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

  • 普通流（标准流）
  • 浮动
  • 定位
标准流（普通流/文档流）

所谓的标准流：就是标签按照规定好默认方式排列。

  1. 块级元素会独占一行，从上向下顺序排列。

    常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

    常用元素：span、a、i、em等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。

浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

1
选择器 { float: 属性值; }
属性值 描述
none 元素不浮动（默认值）
left 向左浮动
right 向右浮动
浮动特性（重难点）

加了浮动之后的元素,会具有很多特性,需要我们掌握的。

  1. 脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）。浮动的盒子不再保留原先的位置。
  2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。注意 ：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
  3. 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的。
  • 行内元素同理。
清除浮动

语法：

1
选择器 { clear: 属性值; }
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear: both;

清除浮动的策略是: 闭合浮动。

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。

例如<div style="clear:both"></div>，或者其他标签（如<br/>等）。

  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

子不教,父之过,注意是给父元素添加代码

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分
:after 伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加。

1
2
3
4
5
6
7
8
9
10
11
12
13
. clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
       
}
        
. clearfix {
    /* IE6、7专有 */
    *zoom: 1;
}
  • 优点：没有增加标签，结构更简单。
  • 缺点：照顾低版本浏览器。
  • 代表网站：百度、淘宝网、网易等。
双伪元素清除浮动

:after 方式是额外标签法的升级版。也是给父元素添加。

1
2
3
4
5
6
7
8
9
10
11
12
. clearfix:before, . clearfix:after {
    content: "";
    display: table;       
}
. clearfix:after {
    clear: both;    
}
        
. clearfix {
    /* IE6、7专有 */
    *zoom: 1;
}
  • 优点：代码更简洁。
  • 缺点：照顾低版本浏览器。
  • 代表网站：小米、腾讯等。