html+css基础-CSDN博客

本文链接：https://blog.csdn.net/lingyu_zhang/article/details/142589205

HTML 、CSS

课程简介

我们学习的目的是为了称为一名优秀的前端工程师，前端工程师主要从事B/S软件开发。例如我们常用的京东、taobao、12306等这些网站都是B/S架构的软件

注：

B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思。

学习内容包含结构、表现、行为（网页构成的三要素）。

结构：HTML用于描述页面的结构

表现：css用于控制页面中元素的样式

行为：JavaScript用于响应用户的操作。

由万维网联盟（W3C）来制定网页相关的标准，定义了网页中的HTML、CSS、DOM、HTTP、XML等标准

扩展：

万维网（World Wide Web）

万维网联盟，又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室由蒂姆·伯纳斯·李创建。

W3C 最重要的工作是发展 Web 规范,这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块.

常用编辑工具

IDE（集成开发工具）拥有比纯文本编辑器更加强大的提示功能，也是我们开发中用的比较多的工具。

1.Hbuild

2.sublime

3.Webstorm

5.Vscode

纯文本编辑器

1.Notepad++

主流浏览器及其内核

浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； 3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 4、Safari浏览器内核：Webkit内核； 5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

1. HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

文件后缀名为 .html 或者 .htm

HTML的发展

• 1993年6月：HTML第一个版本发布。

• 1995年11月：HTML2.0

• 1997年1月：HTML3.2（W3C推荐）

• 1999年12月：HTML4.01（W3C推荐）

• 2000年底：XHTML1.0（W3C推荐）

• 2014年10月：HTML5（W3C推荐）

1.1 基本的HTML页面

<!DOCTYPE html>
<html>
<head>
       <meta charset='UTF-8'/>
       <title>Document</title>
</head>
<body>
</body>
</html>

1.第一行：<!DOCTYPE HTML...>表示文档声明头，声明文档类型，作用是告知浏览器该文档使用那种规范

2.第二行： <html...>网页内所有配置以及网页内容都必须写在该标签内

3.第三行：<head>头标签，成对存在，里边放置网页的配置信息（meta）及网页的标题（title）；

4.第四行：<meta .../>标签，用于配置网页信息及优化搜索引擎的搜索：

字符集计算机本身不能保存字体，只能通过转换为0和1的编码来保存信息,而字符集正是字体与编码的对应参照文本，就像是“活体印刷术”，每个汉字都有一个模子对应，需要用到时，只需找的这个模子放置的具体位置就找的了这个字字符集分很多中，几乎每个国家有自己对应的字符集；但能够编码汉字的就只有两种，分别是 utf-8 和 gb2312

utf-8是国际通用编码字符集；基本适合各个国家的字体编码，所以里边容量大，占内存多，一个汉字占3个字节，这也就是该字符集的缺点；

gb2312是国标编码字符集，也就是中国的编码字符集，只适用于中国汉字及少数字体，所以里边容量没utf-8大，占内存小，一个汉字占2个字节，这也是该字符集的优点

5.第五行：<title>标题内容</title>网页标题栏，就是计算机浏览器标题栏显示的信息

6.第七行:<body></body>主体标签，结构层、行为层代码书写位置

1.2 标签元素

HTML文档有HTML标签元素定义

标签元素有两种结构

<标签名></标签名>
<标签名/>

例如：

<body>
    <p><em>都醒醒！！</em></p>
</body>

body是em的祖先元素

em是body的后代元素

1.3 属性

可以为HTML标签设置属性，通过属性为HTML元素提供附加信息，它总是以名称/值对的形式出现。

注：有些属性可以是任意值，有些则必须是指定值

<p title=“我是一个标题”>我是一个p标签，专门用来写文本</p>

常见属性：

id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。
title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

<p id="p1" class="pp"><em>都醒醒！！</em></p>
<p title=“我是一个标题” id="p2" class="pp">我是一个p标签，专门用来写文本</p>

1.4 注释

HTML注释中的内容不会在网页中显示，合理的使用注释可以帮助开发人员理解网

页的代码

<!-- 哈哈，也是个人才！！ -->

注释不能嵌套

1.5 常用的标签

```
<html></html>
```
告诉浏览器这个文档中包含的信息是用HTML编写的,所有的网页的内容都需要编写到html标签中，一个页面中html标签只能有一个,html标签中有两个子标签head和body。
```
<head></head>
```
用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其它不可见信息，head标签作为html标签的子元素的出现，一个网页中只能有一个head。
title

表示网页的标题，一般会在网页的标题栏上显示。title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签

网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。
```
<body></body>
```
用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中,body标签作为html的子标签使用
```
h1~h6
```
h1~h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。

标题标签相当于正文的标题，通常认为重要性仅次于页面的title

一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了
p在网页中表示段落
```
<br/>
```
表示一个换行标签，使用br标签可以使br标签后的内容另起一行
hr是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。

文本格式化

<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<p><cite>熊出没</cite>熊二太逗了！！</p>
孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
<p>中国战胜了<ins>新冠</ins></p>
<p>熊二一个<del>二货</del>！！</p>
<pre>
   <code>
      function fun(){
         alert("hello");
      }
   </code>
</pre>

<strong> 或者 <em>意味着你要呈现的文本是重要的，语气强烈，所以要突出显示。

<small>表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等

<cite>可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌

曲、电影、照片或雕塑的名称等

blockquote和q表示标记引用的文本,blockquote用于长引用，q用于短引用。

ins表示插入的内容，显示时通常会加上下划线。

del表示删除的内容，显示时通常会加上删除线。

code可以包含代码示例或者文件名。

pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码

img

是图片标签，可以用来向页面中引入一张外部的图片
```
<img src="../../unit 02 JsBase/note-js基础/js-img/1-1.bulaideng.png" alt="大牛" width="200px" height="100px" title="大牛中的大牛">

src:指向一个外部的图片的路径。

alt:图像的替代文本

width：图片的宽度

height：图片的高度

title:鼠标悬停在图片上的提示文本 格式：title = '提示文本'
	注意要和<title>标签区分开
```
扩展：
- 路径
  - 绝对路径
    
    绝对路径是指文件在硬盘上真正存在的路径，但是在网页编程时，很少会使用绝对路径
  - 相对路径
    
    就是相对于自己的目标文件位置。在相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录，可以使用多个“../”。
  - URL
    
    url:是统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法。
    
    一个完整的URL包括：协议、网址、文件地址部分。
    
    网址部分大家也经常用到，比如www.baidu.com, www.taobao.com, Topbook – 高效生活视频书。这是一个网站独一无二的网络名字。
    
    如果我们去掉www的前缀，比如topbook.cc,这个部分就叫域名，域名的最右边就是顶级域名,常见的比如：.com 表示商业机构，.org表示非盈利性组织。.gov表示政府机构。.edu表示教育及科研机构。用来表示国家顶级域名的比如：.cn表示中国。.us表示美国。.jp表示日本,像Topbook – 高效生活视频书就表示科科斯群岛的国家顶级域名。
a

是超链接标签，通过a标签，可以快速跳转到其他页面。
```
<a href="http://baidu.com">百度一下</a>

<a href="#">test</a>
<a href="javascript:;">百度一下</a>
```
href:指向一个链接地址

target:设置打开目标页面的位置，可选值：blank新窗口、self当前窗口
span

提供了一种将文本的一部分或者文档的一部分独立出来的方式。
```
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
```
div

定义 HTML 文档中的一个分隔区块或者一个区域部分。
```
<div></div>
```
button

按钮
```
<button>按钮</button>
```

1.6 列表标签

有序列表

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

无序列表

<ol>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ol>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
```
<dl>
    <dt>dog</dt>
    <dd>- 小心的点</dd>
    <dt>cat</dt>
    <dd>- 真漂亮</dd>
</dl>
```

1.7 实体（转义字符）

语法：&实体名;
空格：HTML的空格用  表示。【所有标签都为英文半角】

小于号：&lt;  <

大于号：&gt;  >

和符号&：&amp; 

空格： &nbsp;

双引号：&quot “

版权：&copy; ©

注册：&reg;®

1.8 表格

在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。

但是有了CSS以后，CSS在布局网页方面实际上会更出色，出现了DIV+CSS布局，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。

HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。

使用table标签创建一个表格。

tr表示表格中的一行

tr中可以编写一个或多个th或td

th表示表头

td表示表格中的一个单元格

caption表示表格的标题

thead表示表格的头部

tbody表示表格的主体

tfoot表示表格的底部

合并单元格

合并单元格指将两个或两个以上的单元格合并为一个单元格

合并单元格可以通过在th或td中设置属性来完成。

横向合并colspan

纵向合并rowspan

<table border="1">
    <caption align="center">成绩表</caption>
    <thead>
        <tr>
            <td rowspan="2">序号</td>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>xx</td>
            <td>xx</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>95</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计：</td>
            <td colspan="2">xx</td>
        </tr>
    </tfoot>
</table>

表格的样式：

之前学习的很多属性都可以用来设置表格的样式，比如color可以用

来设置文本的颜色。padding可以设置内容和表格边框的距离。

• text-align：设置文本的水平对齐。

• vertical-align：设置文本的垂直对齐。

– 可选值：top、baseline、middle、bottom

• border-spacing：边框间距

• border-collapse：合并边框

– collapse：合并边框

– separate：不合并边框

table {
    text-align: center;
    vertical-align: top;
    border-spacing: 10px;
    border-collapse: collapse;
}

1.9 表单

现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填

写的简历、入学时填写的个人信息表。这些都是表单的一种

网页中的表单是用来向服务器提交信息的，常见的如登录、注册、搜索框...

<form action="http://baidu.com" method="get" target="_self">
   ...
</form>

action

url规定当提交表单时向何处发送表单数据。
method

get/post 规定用于发送表单数据的 HTTP 方法。
target

规定在何处打开 action URL。

_blank 在新窗口/选项卡中打开。 _self 在同一框架中打开。（默认）

input

input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。

type属性可选值：

– text：文本框

– password：密码框

– submit：提交按钮

– radio：单选按钮

– checkbox：多选框

– reset ：重置按钮

label标签用来为表单项定义描述文字 label中的for属性需要同input中的id一致。

<form action="http://baidu.com">
    <label for="userName">用户名：</label>
    <input type="text" id="userName"><br>
    <label for="psw">密码：</label>
    <input type="password" id="psw"><br>
    <input type="reset" value="重置">
    <input type="submit" value="提交">
</form>

<form action="">
    <input type="radio" name="sex" id="female" value="female">
    <label for="female">female</label>
    <input type="radio" name="sex" id="male" value="male">
    <label for="male">male</label>
    <input type="checkbox" name="" id="football">
    <label for="football">足球</label>
    <input type="checkbox" name="" id="basketball">
    <label for="basketball">篮球</label>
    <input type="checkbox" name="" id="pingpong">
    <label for="pingpong">篮球</label>
    <input type="submit" value="提交">
</form>

<input type="text" placeholder="请输入你的用户名" disabled>

可用属性：

placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。

disabled 属性规定应该禁用的 <input> 元素。

textarea

定义文本域 (一个多行的输入控件),实际效果和文本框类似，只是可以输入多行数据。
```
<textarea rows="10" cols="10"></textarea>
```
可用属性：

cols：文本域的列数

rows：文本域的行数
select option

select 元素用来创建下拉列表。

select元素中的标签定义了列表中的可用选项。
```
<select name="stars" id="" multiple>
    <option value="zhaoliying">赵丽颖</option>
    <option value="zhaowei">赵薇</option>
    <option value="zhaowenzhuo">赵文卓</option>
</select>
```
multiple 属性是一个布尔属性。

multiple 属性规定可同时选择多个选项。
- 对于 windows：按住 Ctrl 按钮来选择多个选项
- 对于 Mac：按住 command 按钮来选择多个选项

optgroup

通过 <optgroup> 标签把相关的选项组合在一起：

<select name="" id="">
    <option value="" disabled>请选择</option>
    <optgroup label="熊出没">
        <option value="熊大">熊大</option>
        <option value="熊二">熊二</option>
    </optgroup>
    <optgroup label="汪汪队">
        <option value="小丽">小丽</option>
        <option value="灰灰">灰灰</option>
    </optgroup>
</select>

ios不能选择第一项，故而不让它进行选择。

label为选项组规定描述。

fieldset legend

fieldset用来为表单项进行分组。

legend用于指定每组的名字。

<fieldset>
    <legend>熊出没:</legend>
    <input type="text"><br>
    <input type="text">
</fieldset>
<fieldset>
    <legend>汪汪队:</legend>
    <input type="text"><br>
    <input type="text">
</fieldset>

1.10 框架iframe

iframe可以显示一个目标链接的页面

<iframe src="./2.列表.html" frameborder="0" width="200px" height="300px"></iframe>

src该URL指向不同的网页

height 和 width 属性用来定义iframe标签的高度与宽度。

frameborder 属性用于定义iframe表示是否显示边框。

尽量少用iframe框架

扩展：

iframe的优缺点？

优点：

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点：

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

2. CSS

层叠样式表 (Cascading Style Sheets),css可以用来为网页创建样式表，通过样式表可以对网页进行装饰.

所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的,而css就可以分别为网页的各个层次设置样式

2.1 基本语法

CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

语法：

选择器 {属性名:属性值；属性名:属性值 ; }

 p {color:red ; font-size:12px;}

注释：

/* 注释的快捷键ctrl+/ */
p{
    color: red;
    text-align: center;
    /* 取消注释再按一次ctrl+/ */
}

2.2 引入方式

2.2.1 行内样式

可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。

<p style="color: red;font-size: 30px"></p>

这种方式编写简单，定位准确。但是由于直接将css代码写到了html标签的内部，导

致结构与表现耦合，同时导致样式不能够复用，所以这种方式我们推荐使用。

2.2.2 内部样式表

可以直接将样式写到style标签中。

<style>
	p{color:red; font-size: 30px;}
</style>

这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。

缺点：样式只能在一个页面中使用，不能在多个页面中重复使用

2.2.3 外部样式表

可以将所有的样式保存到一个外部的css文件中，然后通过<link>标签将样式表引入到文件中

<link rel="stylesheet" type="text/css" href="style.css">

这种方式将样式表放入到了页面的外部，可以在多个页面中引入，同时浏览器加载

文件时可以使用缓存，这是我们开发中使用的最多的方式。

扩展：

<link rel="shortcut icon" href="./img/1.logo.jpg">

可以在标签页上显示logo图片。

2.2.4 优先级

行内样式表>内部样式>外部样式表

2.3 选择器

选择器（selector），会帮助浏览器找到网页上对应的元素，并给对应的元素设置样式。

2.3.1 元素选择器

元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素。

语法：

标签名{}

p{
    color: red;
    text-align: center;
}

2.3.2 类选择器

类选择器，可以根据元素的class属性值选取元素

语法：

.className { }

.p1{
    color: red;
    text-align: center;
}

2.3.3 id选择器

id选择器，可以根据元素的id属性值选取元素

语法：

#id{}

#box{
    color: red;
    height:100px;
}

注：

id属性是不能重复的

2.3.4 复合选择器

复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。

语法：

选择器1选择器2{}

#box p{
    color: red
}

#box p会选中页面中具有#box的元素里面的p标签的元素

2.3.5 群组选择器

可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

语法：

选择器1,选择器2,选择器3 { }

#box,.p1, p{
    color: red
}

#box,.p1, p会同时选中#box .p1 p的元素

2.3.6 通用选择器

通用选择器，可以同时选中页面中的所有元素。

语法：

*{}

*{
    width：1200px;
    backgroundColor:red;
}

2.3.7 标签之间的关系

css-1 标签之间的关系

祖先元素：直接或间接包含后代元素的元素。

后代元素：直接或间接被祖先元素包含的元素。

父元素：直接包含子元素的元素。

子元素：直接被父元素包含的元素。

兄弟元素：拥有相同父元素的元素。

2.3.8 后代选择器

后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。

语法：

祖先元素后代元素后代元素 { }

与复合选择器类似

2.3.9 伪类和伪元素

给a链接定义样式

a:link {
    /* 正常链接 */
    color: red;
    font-size: 20px;
}

a:visited {
    /* 访问过的链接，只能定义字体颜色*/
    color: green;
    background-color: #ccc;
}

a:hover {
    /* 鼠标滑过的样式 */
    color: pink;
}

a:active {
    /* 正在点击的链接 */
    color: purple;
}

其他

/* 指定元素前 */
p::before {
    content: '2021.3.4';
    background-color: greenyellow;
}

/* 指定元素后 */
P::after {
    content: '2021.3.4';
    background-color: #ccc;
}

/* 选中元素 */
p::selection {
    background-color: pink;
}

/* 首字母 */
p::first-letter {
    font-size: 50px;
}

/* 首行 */
p::first-line {
    color: green;
}

2.3.10 子元素选择器

子元素选择器可以给另一个元素的子元素设置样式。

语法：

父元素 > 子元素{}

box > p{
	color:red;
}

2.3.11 兄弟选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法：

查找后面的一个兄弟元素

兄弟元素 + 兄弟元素{}

ul .listOne+li {
    background-color: pink;
}

查找后面所有的兄弟元素

兄弟元素 ~ 兄弟元素{}

ul .listOne~li {
    background-color: pink;
}

2.3.12 属性选择器

为attribute='value'属性的元素设置样式 value必须写全了

input[type='text'] {
    background-color: red;
}

2.3.13 结构选择器

:first-child

选择属于其父元素的首个子元素的每个element元素，并为其设置样式（element:first-child）
:last-child

选择属于其父元素的最后一个子元素的每个element元素，并为其设置样式（element:last-child）
:nth-child(n)

选择某元素下第number个element元素（n是一个简单的表达式，不能用其他字母代替，n从0开始计算）

1.li:nth-child(2n+1)奇数行

2.li:nth-child(2n)偶数行

3.nth-child(odd) : 奇数的元素的关键字

4.nth-child(even):偶数的元素的关键字

2.3.14 继承

继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。但并不是所有的样式都会继承

2.3.15 选择器的权重

不同的选择器有不同的权重值：

– 内联样式：权重是 1000

– id选择器：权重是 100

– 类、属性、伪类选择器：权重是 10

– 元素选择器：权重是 1

– 通配符：权重是 0

计算权重需要将一个样式的全部选择器相加，比如上边的body

h1的权重是20，h1的权重是10，所以第一个选择器设置的样

式会优先显示

2.4 单位

px:如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。

注：谷歌浏览器默认字体大小为16px

百分比：也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。

em:em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

2.5 颜色

关键字

在CSS中可以直接使用颜色的关键字来代表一种颜色。例如：black、blue、gray、green等
十六进制颜色

用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字

上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的

如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。
RGB值

也可以使用计算机中常用的RGB值来表示颜色。可以使用0~255的数值，也可以使用0%~100%的百分比数

例如：

RGB(100%,0%,0%)

RGB(0,255,0)

第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度
RGBA

RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明

例如：RGBA(255,100,5,0.5)。
```
color:red;
```

2.6 文本样式

2.6.1 文字大小

font-size用来指定文字的大小。

p {
    /* font-size: 20px; */
    /* 1em默认是16px,可以通过更改html字体的大小进行更改 
    注：若是使用em，ie浏览器的字体偏向有问题。
    */
    /* font-size: 1em; */
    /*相对于父级字体大小来说*/
    font-size: 200%;
}

color颜色

p {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

继承

text-align用于设置文本的对齐方式。

/* 文本居中 */
text-align: center;
/* 左对齐 */
text-align: left;
/* 右对齐 */
text-align: right;
/* 两边对齐 */
text-align: justify;

继承

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条

/* 在文本下方加下划线 */
text-decoration: underline;
/*给文本添加上划线 */
text-decoration: overline;
/* 给文本添加中间线条 */
text-decoration: line-through;
/* 正常 */
text-decoration: none;

不继承

text-transform样式用于将元素中的字母全都变成大小

/* 字母大写 */
text-transform: uppercase;
/* 字母小写 */
text-transform: lowercase;
/* 首字母大写 */
text-transform: capitalize;
/* 正常 */
text-transform: none;

继承

text-index用来设置首行缩进，该样式需要指定一个长度，并且只对第一行生效

text-indent: 2em;

继承

direction属性指定文本方向/书写方向。

属性值 ltr默认文本方向从左到右 rtl文本方向从右到左 inherit规定应该从父元素direction属性继承。

div{
    direction:rtl;
}

继承

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

letter-spacing 属性增加或减少字符间的空白（字符间距）

属性值：

normal 默认。规定字符间没有额外的空间。

length 定义字符间的固定空间（允许使用负值）。

inherit 规定应该从父元素继承 letter-spacing 属性的值。

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

继承

line-height 行高

p.small {line-height:90%}
p.big {line-height:200px}

继承

vertical-align 属性设置一个元素的垂直对齐方式。适用于行内元素和行内块元素。

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

基线图

<style>
    .box {
        background-color: greenyellow;
    }

    .span3 {
        /* vertical-align: 0px; */
        /* vertical-align: super; */
        /* vertical-align: top; */
        /* vertical-align: middle; */
        vertical-align: bottom;
    }

    img {
        /* vertical-align: bottom; */
        /* vertical-align: top; */
        /* vertical-align: middle; */
        /* vertical-align: sub; */
        /* vertical-align: text-bottom; */
        vertical-align: text-top;
        /* display: block; */
    }
</style>
<div class="box">
    <span class="span1">xxx</span>
    <img src="./img/小樱.jpg" alt="" srcset="" width="100px" height="100px">
    <span class="span2" style="display: inline-block">vertical</span>
    <span class="span2" style="display: inline-block; overflow: hidden;">yyyy</span>
    <span class="span3">test</span>
</div>

不继承

扩展面试题：

img图片底部留白问题如何解决

img {
    /* vertical-align: bottom; */
    /* vertical-align: top; */
    /* vertical-align: middle; */
    /* vertical-align: sub; */
    /* vertical-align: text-bottom; */
    vertical-align: text-top;
    /* display: block; */
}
.boximg {
    /* font-size: 0; */
    line-height: 0;
}

方案

①vertical-align属性不为baseline、super；

②display为block

③父元素的font-size为0；

④父元素的line-height为0；

空白幽灵节点

其实浏览器在渲染过程中，会在空白的地方渲染一个没有宽度和高度的节点，这个节点被称作为幽灵空白节点

<style>
       .test {
        background-color: aqua;
        /* font-size: 0; */
    }

    .span4 {
        display: inline-block;
        display: block;
    }
</style>
<div class="test">
    <span class="span4"></span>
</div>
<div class="test"></div>

解决方案：

①父元素的font-size：0

②当前的line-block变为block元素

white-space属性指定元素内的空白怎样处理。

属性值：

normal 默认

nowrap 文本不会换行

p{
    white-space:nowrap;
}

继承

word-spacing属性增加或减少字与字之间的空白。

属性值：

normal 默认值

length 定义单词间的固定空间。

inherit 规定应该从父元素继承 word-spacing 属性的值。

p{
	word-spacing:30px;
}

继承

省略号：

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

2.6.2 字体

font-family可以指定标签中文字使用的字体。

p{font-family:Arial}

上边这行代码指定了p标签中使用名为arial作为字体。

一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码

是没有意义的

p{font-family:Arial , Helvetica , sans-serif}

如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一

个，如果没有找到则使用第二个，以此类推

字体分类：

• serif（衬线字体）

• sans-serif（非衬线字体）

• monospace （等宽字体）

• cursive （草书字体）

• fantasy （虚幻字体）

• 以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些

格式，浏览器会自己选择指定类型的字体。

font-style用来指定文本的斜体、正常字体

斜体
font-style: italic
正常字体
font-style: normal

font-weight用来指定文本粗体

/* 粗体 */
font-weight: bold;
/* 正常 */
font-weight: normal;
font-weight: 700;

注：

font-weight既可以使用关键字也可以使用数字。数字值 400 相当于关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗

font-variant可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母

font-variant: small-caps

font可以一次性同时设置多个字体的样式，是个综合属性

语法：

font:加粗斜体小型大写大小/行高字体

font: 700 small-caps 30px/200px Arial, Helvetica, sans-serif;

这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

2.7 盒子模型

在布局时我们可以将所有的元素都想象成盒子，布局就相当于摆放盒子，只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。

.outer {
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 50px solid red;
    background-color: pink;
}

盒子模型分为：内容区(content)、内边距(padding)、边框(border)、外边距(margin)。

盒子真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

内容区(content)

盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小。

注：width和height属性只适用于块元素
内边距(padding)

内边距指的就是元素内容区与边框以内的空间，又称为padding、内补、内补白、内补丁。

默认情况下width和height不包含padding的大小，只有正值没有负值。
```
/*这样会设置元素的上、右、下、左四个方向的内边距*/
padding:10px 20px 30px 40px;
/*分别指定上、左右、下四个方向的内边距*/
padding:10px 20px 30px;
/*分别指定上下、左右四个方向的内边距*/
padding:10px 20px;
/*分别指同时指定上左右下四个方向的内边距*/
padding:10px;
```
同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

内边距的别名：padding、内补、内补白、内补丁。
边框(border)

可以在元素周围创建边框，边框是元素可见框的最外部。
```
border:1px red solid;
```
上边的样式分别指定了边框的宽度、颜色和样式，顺序可换。也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

和padding一样，默认width和height并包括边框的宽度

边框的样式

边框可以设置多种样式：

– none（没有边框）

– dotted（点线）

– dashed（虚线）

– solid（实线）

– double（双线）

– groove（槽线）

– ridge（脊线）

– inset（凹边）

– outset（凸边）

扩展：

css3 border-radius
```
div{
    border-radius: 10%;
}
```
可以给数值或者百分比，百分比相对于自身来说。

外边距(margin)

外边距是元素边框与周围元素相距的空间。用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。

当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中

外边距的别名：margin、外补、外补白、外补丁。

margin的值可以是px也可以是百分比，百分比是基于父级。

margin为负：

margin-left,margin-right为负值

①元素本身没有宽度，会增加元素宽度

<style>
    .wrap {
        width: 800px;
        height: 100px;
        background-color: pink;
        margin-left: 100px;
    }

    .box {
        height: 50px;
        background-color: red;
        margin-left: -100px;
    }
</style>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>

②元素本身有宽度，会产生位移

<style>
    .wrap {
        width: 800px;
        height: 100px;
        background-color: pink;
        margin-left: 100px;
    }

    .box {
        height: 50px;
        width: 500px;
        background-color: red;
        margin-left: -100px;
    }
</style>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>

margin-top为负值，不管是否设置高度，都不会增加高度，而是会产生向上的位移

margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

<style>
    div {
        width: 100px;
        height: 100px;
    }

    .box1 {
        background-color: pink;
        margin-bottom: -10px;
    }

    .box2 {
        background-color: red;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

案例：

css三角形

#box {
    width: 0px;
    height: 0px;
    border: 40px solid;
    border-color: transparent transparent greenyellow;
}

2.7.1 块元素，行内块、行内元素

2.7.1.1 初始包含块

浏览器厂商是用户代理，是他们创建的初始包含块大多数情况下根元素都是HTML，也有些浏览器是body在大多数浏览器中，*初始包含块*是一个视窗大小的矩形，不等同视窗

2.7.1.2 块元素行内块行内元素（内联元素）

块元素(block)

在浏览器中独占一行

宽，高以及外边距和内边距都可控制

若不设置宽则宽为浏览器宽度，与内容无关

可以容纳行内元素和其他块元素

例如：div、 p、 h1-h6 、hr、ul、ol、、li、dl、dt、dd、form
行内块(inline-block)

能设置宽高，但不独占一行。例如：img、tectarea、input
行内元素(inline)

又叫内联元素

和其他元素都在一行上；

宽高只与内容有关；

行内元素只能容纳文本或者其他行内元素，不能容纳块元素。

例如：span、a、em、strong、sub、pub

面试题：

img底部留白问题如何解决

将img变为块元素

2.7.1.3 Formatting context

Formatting context:一个决定如何渲染文档的容器，他是页面中的一块渲染区域，并且有一套渲染规则，决定了最终元素如何放置他的位置和其他元素的关系

Formatting context常见的类型：有BFC和IFC

2.7.1.3.1 BFC

BFC Block Formatting context 块元素和table遵循,又叫块级格式化上下文他是一个独立的渲染区域，只有块元素参与，它规定了内部块盒子（子元素）如何布局，与外部毫不相干

BFC布局规则

内部的box会在垂直方向，一个接一个的放置
内部的box垂直方向的距离由margin决定。属于同一个BFC中的两个相邻的box的margin会重叠,重叠后取大的值。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素
BFC的区域不会和float的元素重叠
每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
计算BFC的高度时，浮动元素也参与计算

什么时候有BFC

根元素 HTML开启了BFC，导致了HTML中的盒子垂直排列，不容易控制
float属性不为none 盒子飘起来了不受根元素的BFC控制, float属性为left right 开启BFC
定位的position属性absolute fixed开启BFC, 浮动和定位会导致margin失效
overflow不是visible

注：

IE6以下无BFC，规则为haslayout，用zoom开启

margin外边距重叠问题

兄弟关系的元素的相邻边界的宽度

<style>
    .wrap {
        width: 1000px;
        background-color: aqua;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-bottom: 50px;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 100px;
    }
</style>
<body>
    <div class="wrap">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>
</body>

情况分三种：

①当两个元素的值都是正值时，他们的边界宽度为其中值的最大值

②如果出现负边界，则在最大的正边界中减去绝对值最大的负边界

③如果没有正边界，则从零中减去绝对值最大的负边界。

父子关系的元素外边距重叠

<style>
    .wrap {
        background-color: aqua;
        /* overflow: hidden; */
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 20px;
    }
</style>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>

解决此种情况的方案：

①设置父元素padding

②给父元素添加overflow：hidden

解决外边距重叠的方案（根据情况选择使用哪种方案）：

①外层元素的padding

②内存元素透明边框 border：1px solid transparent

③内层元素绝对定位

④外层元素overflow：hidden

⑤内层元素float：left 或者 display：inline-block

⑥外层元素padding：1px;

2.7.1.3.2 IFC

IFC |行内格式化上下文（Inline Formatting Context）inline和inlineblock遵循，在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

2.8 display

我们不能为行内元素设置width、height、margin-top和margin-bottom，我们可以通过修改display来修改元素的性质。

可选值：

– block：设置元素为块元素

– inline：设置元素为行内元素

– inline-block：设置元素为行内块元素

– none：隐藏元素（元素将在页面中完全消失）

2.9 visibility

visibility属性主要用于元素是否可见。

它和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然

保持，不会被其他元素覆盖。

• 可选值：

– visible：可见的

– hidden：隐藏的

2.10 overflow

当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏

览器会让内容溢出盒子。

可以通过overflow来控制内容溢出的情况。

• 可选值：

– visible：默认值

– scroll：添加滚动条

– auto：根据需要添加滚动条

– hidden：隐藏超出盒子的内容

2.10 文档流

文档流指的是文档中可现实的对象在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。

这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

2.11 浮动

所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

浮动使用float属性。

• 可选值：

– none：不浮动

– left：向左浮动

– right：向右浮动

注：

块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。
当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围
浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。
元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素
浮动元素默认会变为块元素，即使设置display:inline以后其依然是个

块元素。

扩展：

清除浮动引起的高度塌陷

给父元素加高，弊端：扩展性不好，兼容性极高
给父元素浮动，或者开启绝对定位，固定定位。弊端但是左右margin失效（本质开启BFC，IE7下，没有BFC，需要用zoom=1开启haslayout）
overflow:hidden 正常浏览器中开启BFC，在IE7底下开启haslayout,在IE6底下不管用。
加div空标签清除clear:both;多出DOM结构，不利于后期维护
<br clear='all'>clear是标签属性给父元素的最后添加<br clear="all"> ，不符合结构样式行为分离的规范

伪元素 .clearfix

.clearfix :after{
content:’’;
display:block;
clear:both;  clear是CSS中的样式
}
.clearfix{
*zoom:1；  开启haslayout,ie6以下不认识伪元素
}

2.12 定位

position属性可以控制Web浏览器如何以及在何处显示特定的元素。

可以使用position属性把一个元素放置到网页中的任何位置。

可选值：

– static 元素默认情况下的定位，称为静态定位，不受top、bottom、left、right属性影响，根据页面的正常流进行定位。

– relative

– absolute

– fixed

– sticky

2.12.1 相对定位

每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响

当将position属性设置为relative时，则开启了元素的相对定位。

当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位

特点：

如果不设置元素的偏移量，元素位置不会发生改变。
相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变
相对定位不会改变元素原来的特性
相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素

2.12.2 绝对定位

绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。

当将position属性设置为absolute时，则开启了元素的绝对定位。

当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位

特点：

绝对定位会使元素完全脱离文本流
绝对定位的块元素的宽度会被其内容撑开
绝对定位会使行内元素变成块元素
一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位

扩展：

clip 剪裁绝对定位元素

这个属性用于定义一个剪裁矩形。

div {
    width: 500px;
    height: 500px;
    position: absolute;
    clip: rect(0px, 50px, 50px, 0px);
}

2.12.3 固定定位

固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。（相对于视口进行定位）

当将position属性设置为fixed时，则开启了元素的固定定位

当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

固定定位的其他特性和绝对定位类似

2.12.4 粘性定位

position：sticky

元素根据用户的滚动位置进行定位

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

注:

Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

2.12.5 z-index

当元素开启定位以后就可以设置z-index这个属性

这个属性可以提升定位元素所在的层级。

z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index

值较大的元素会显示在网页的最上层。

2.13 设置元素的背景

background-color属性用来为元素设置背景颜色。

需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。

如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。
background-image可以为元素指定背景图片，需要一个url地址作为参数，url地址需要指向一个外部图片的路径
```
background-image: url(1.jpg)
```
background-repeat用于控制背景图片的重复方式。

如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改

可选值：

– repeat：默认值，图片左右上下平铺

– no-repeat：只显示图片一次，不会平铺

– repeat-x：沿x轴水平平铺一张图片

– repeat-y：沿y轴水平平铺一张图片

background-attachment用来设置背景图片是否随页面滚动

可选值：

– scroll：随页面滚动

– fixed：不随页面滚动

.box {
    width: 500px;
    height: 1200px;
    background-image: url('./img/head.png');
    border: 1px solid red;
    background-repeat: no-repeat;
    /* background-repeat: repeat-y; */
    overflow: auto;
    background-attachment: fixed;
}

background-position背景图片的位置，它的值可以是关键字可以是px值，也可以是百分比。
background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。
```
background: green url(1.jpg) no-repeat center center fixed;
```

2.14 css Sprite

css Sprite又称为精灵图或者雪碧图或者精灵技术，是一种网页图片应用处理方式。

通过这种方式我们可以将网页中的零星图片集中放到一张大图上。

这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。

/*   background-image: url('../img/css-3 雪碧图.jpg');
background-position-x: 10px;
background-position-y: 10px; */
background: url('../img/css-3 雪碧图.jpg') 10px 10px;

矢量图标

矢量图是由计算机的算法产生的，可以无限放大或缩小，不会有任何损失，通常由矢量软件制作。

优缺点：

可以无限放大或缩小，不会影响图像素质，文件体积较小，编辑灵活。缺点是表达的色彩层次不清，整体观感效果不如位图

推荐使用阿里矢量图标库

网址：iconfont-阿里巴巴矢量图标库

2.15 鼠标状态

css-3.鼠标的状态

.box{
    width:100px;
    height:100px;
    background-color:red;
    cursor:pointer;
}

3.布局

条条大路通罗马

3.1两列布局

* {
    padding: 0;
    margin: 0;
}

.box {
    width: 50%;
    height: 100px;
}

.left {
    background-color: red;
    float: left;
}

.right {
    background-color: green;
    float: right;
}

左侧固定右侧自适应

* {
    padding: 0;
    margin: 0;
}

.box {
    height: 100px;
}

.left {
    background-color: red;
    width: 100px;
    float: left;
}

.right {
    background-color: green;
    padding-left: 100px;
}

3.2 三列布局

三列布局即三列元素，左右元素固定宽度，中间元素自适应

3.2.1 定位实现

<style>
    * {
        margin: 0;
        padding: 0px;
    }

    body {
        /* 给最外层盒子最小宽度为left*2 + right */
        min-width: 600px;
        position: relative;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .middle {
        height: 200px;
        background-color: aqua;
        padding: 0 200px;
    }

    .left {
        position: absolute;
        left: 0;
        top: 0;
    }

    .right {
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<body>
    <div class="left box">left</div>
    <div class="middle">middle</div>
    <div class="right box">right</div>
</body>

定位的缺点：当出现滚动条时，内容区在滚动条后边显示，而且内容区仍旧被压缩(不推荐使用)

3.2.2 浮动实现

<style>
    * {
        margin: 0;
        padding: 0px;
    }

    body {
        /* 给最外层盒子最小宽度为left*2 + right */
        min-width: 600px;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .middle {
        height: 200px;
        background-color: aqua;
        padding: 0 200px;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }
</style>

<body>
    <!-- fvuibk;elfkgrthrguhfdbjfg fvuibk;elfkgrthrguhfdbjfg fvuibk;elfkgrthrguhfdbjfg fvuibk;elfkgrthrguhfdbjfg
    fvuibk;elfkgrthrguhfdbjfg fvuibk;elfkgrthrguhfdbjfg fvuibk;elfkgrthrguhfdbjfg -->
    <div class="left box">left</div>
    <div class="right box">right</div>
    <div class="middle">middle</div>
</body>

浮动的缺点：如果有文字出现，布局就会错乱，导致扩展性不好。

3.2.3 圣杯布局

圣杯布局要求

两边固定，中间自适应
先加载middle内容；

三列等高布局

<div class="header">header</div>
    <div class="content clearfix">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>

布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；
浮动让三者在一行，出现高度塌陷，content清浮动；
middle宽度设为100%，占满；
left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
middle内容被left、right覆盖未显示，所以把middle内容拉回来，content:{padding: 0 200px};
此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来；

问题：如果某一列内容过多，文字会溢出。解决方法：等高布局；最小宽度问题：min-width:600px

* {
    margin: 0;
    padding: 0;
}

.header,
.footer {
    height: 100px;
    background-color: #cccccc;
}

.content {
    min-width: 400px;
    padding: 0 100px;
}

.middle {
    float: left;
    width: 100%;
    height: 50px;
    background-color: pink;
}

.left,
.right {
    float: left;
    width: 100px;
    height: 50px;
    background-color: aqua;
    position: relative;
}

.left {
    margin-left: -100%;
    left: -100px;
}

.right {
    margin-left: -100px;
    right: -100px;
}

.clearfix::after {
    content: '';
    clear: both;
    display: block;
}

.clearfix {
    *zoom: 1;
}

3.2.4 双飞翼布局

需求和圣杯布局是一样的；

思路：思路是：middle是鸟的身体，left和right是鸟的翅膀，先把主要的东西middle放好，再将翅膀移到合适的位置；

middle部分要放在content的最前部分，然后是left，right；
浮动让三者在一行，出现高度塌陷，content清浮动；
middle宽度设为100%，占满；
left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;

以上，都和圣杯布局一样；
因为现在middle的内容被left和right覆盖了，我们除了考虑设置外围content的padding之外，还可以考虑用margin把middle拉过来；
在middle中加一个内部元素middle-inner，设置其margin:0 200px;

// html,middle中增加了middle-inner
<div class="wrap">
    <div id="header">header</div>
    <div id="content">
        <div id="middle">
            <div class="middle-inner">
                middle
            </div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</div>
<style>
    // css
    .wrap{
        min-width: 600px;
    }
    #header,#footer{
        height: 50px;
        width: 100%;
        border: 1px solid;
        background-color: grey;
    }
    #left,#right{
        width: 200px;
        height: 200px;
        background-color:pink;
    }
    #middle{
        background-color: green;
        width: 100%;
        float: left;
    }
    #content{
        overflow: hidden;
    }
    #left{
        float: left;
        margin-left: -100%;
    }
    #right{
        float: left;
        margin-left: -200px;
    }
    .middle-inner{
        margin: 0 200px;
    }
</style>

3.3 粘连布局

html,
body {
    height: 100%;
    margin: 0;
}

#wrap {
    width: 100%;
    max-height: 100%;
}

.main {
    /* height: 1000px; */
    padding-bottom: 30px;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: yellow;
    margin-top: -30px;
}
<div id="outer">
    <div class="main">
        451332
    </div>
</div>
<div class="footer"></div>

3.4 等高布局

<style>
    body,
    p {
        margin: 0;
    }

    .parent {
        overflow: hidden;
    }

    .left,
    .centerWrap,
    .right {
        float: left;
        width: 50%;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }

    .center {
        margin: 0 20px;
    }

    .left,
    .right {
        width: 25%;
    }
</style>
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="centerWrap">
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>
    </div>

    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
    </div>
</div>