HTML5+CSS3
一、HTML入门
（一）web发展历
蒂姆·伯纳斯·李
1989年 提出了web理念
1990年 原始浏览器 +HTML —>网站
1991年 w3c组织 (规范组织)
web1.0时代 开始 特点: 用户只是阅读者 代表: 网易 搜狐 新浪
1995年 布兰登·艾奇 javascript 交互
web2.0时代 特点:用户不仅仅是阅读者 参与者 代表: facebook 微博
2005 ajax技术
2009年 node.js (js在服务器上使用)—>衍生了js框架 (vue.js,angular ,react)—>
web site 转换成 web app–> web 3.0(大前端时代)
（二）web浏览器
常用有几种浏览器
- 浏览器：IE(Trident)，Chrome（Webkit/Blink），FireFox(Gecko)，Safari(Webkit)，Opera(Presto/Blink)。
浏览器内核(Layout Engine)
- 内核：Trident，Gecko，Presto，Webkit。
私有前缀
- 私有前缀：-webkit-，-o-，-moz-，-ms-
（三）HTML
1、概念：
HTML: 超文本标记语言(HyperText Markup Language)
超文本: 超 文本(.txt)只能写文字 不仅仅写文字还可以插入图片,链接,音频,动画,视频;
标记:
w3c 标记规范 先起一个名字 (关键字)
img a p div + 属性 + 内容
2、HTML文档基本结构
<!--声明文件类型定义（DTD），为了告诉浏览器用哪个规范解析文档-->
<!DOCTYPE html>
<html lang="en"><!-- head用户不可以看到的 浏览器看 --><head><!-- meta 元信息标签 单标签 设置基础项--><!-- charset 字符集 UTF-8万国码 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 标题 --><title>网页标题</title></head><body><!-- 主体部分内容 用户看 --></body>
</html>
常见编码
-
ASCII美国标准信息码 80+ 7位二进制 128个
-
Unicode
-
UTF-8 万国码
-
GB2312
-
GBK
3、常用标签
1）布局相关标签
<!--大容器 大盒子 大区域 (division) -->
<div> 块 </div>
<!--小容器 小盒子 小区域-->
<span> 文字 </span>
2）常见文本类型标签
<b> </b> <strong></strong> 加粗
<i> </i> <em></em> 斜体
<s></s> <del></del> 下划线
<u></u> <ins></ins> 中划线
<sub></sub> 下标
<sup></sup> 上标
3）标题标签
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>
4）段落标签
<p>段落，一般用于放一行或多行文字</p>
5）图片标签
<img src="" alt="" title="">
src:图片路径(绝对,相对) ./同级 ../上一级../../上上级
alt:图片加载失败时的文字提示
title:鼠标悬停时的文字提示
6）超链接标签
<a href="http://baidu.com" target='_blank'>百度</a>
href: 要跳转的界面的地址(绝对路径,相对路径)
target='_blank' 新窗口打开
target='_self' 当前窗口打开，默认值锚点的使用
1. 元素 id="mike"
2. 在a链接里写 href="#mike"
7）base标签
<head><!-- base标签 必须放在head里 作用:一次性设置a链接的打开方式href:设置的是整个界面a链接的基础地址 --><base href="https://3w.huanqiu.com/a/" target="_blank">
</head>
8）其它标签
<br> 换行标签
<hr width="300px" color="red" align="left /ritgh/center"> 水平线标签
4、语义化标签的作用
-
当没有css样式的时候,语义化标签照样会呈现一个清晰的结构
-
搜索引擎爬虫依赖语义化标签的内容确定网站权重,有利于搜索引擎优化
-
可读性高 方便阅读
-
有利于机器阅读,提高用户体验(alt,title)
5、标签类型
1）块类型
特点
- 默认宽度为父元素的宽度 100%
- 设置宽高起作用
- 独立成行(以新的一行开始)
代表标签：div，p,h1~h6，br，hr
2）行内类型
特点
-
宽高取决与内容的多少
-
可以设置宽高属性,但是不起作用
-
并排
-
元素之间存在间距(解析了标签后面的空格)
代表标签： i，em，strong，b…
3）行内块类型
特点:
- 可以设置宽高,并排
- 元素之间存在间距(解析了标签后面的空格)
**代表标签：**img ，a
（四）实体字符
网页上的一些特殊符号 > < 版权符号 空格 人民币
二、CSS
CSS（Cascading Style Sheets 样式表），通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（文字、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
（一）定义方式
1、行内引入
<div style="属性名:属性值;"></div>属性之间以;隔开 属性名字和属性值之间:隔开
前后不分顺序 但是分大小写
缺点：
- 重复的代码太多 代码冗杂 结构不清晰
- 没有形成样式和结构分离 后期代码维护困难
适用场景：
- 覆盖文本内部和外部
- js获取属性值
2、本内部引入(内嵌式)
css选择器: 挑选元素
<head><style>/* 1.挑选元素 css选择器选择器 {属性名:属性值}*/div {width:200px;height:100px;background-color: red;}</style>
</head>
<body><div ></div>
</body>
缺点:：没有彻底分离
优点：减少代码冗杂 后期相对来说好维护一些
适用场景：自己文件里的样式覆盖公共样式文件里的属性
3、文本外部样式文件
创建一个.css文件
在结构文件 .html里面引入即可(引入在head标签)
<link href="引入目标文件的路径" rel="stylesheet">
缺点：优先级最低
优点：形成了彻底分离 得到复用
适用场景：实际开发中一般都是写外部样式
优先级: 行内 > 文本内部> 文本外部
（二）css基础选择器
作用：挑选元素
1、语法：
选择器 {属性名:属性值;属性名:属性值;
}
2、全局选择器
* {属性名:属性值;
}
匹配的是包含html本身和它的所有后代元素
3、标签选择器
标签名 {}
匹配若干个
p{}
4、类选择器
1.给元素起类名 class="名字" 最好中划线链接 big-box
2. .类名 { }
<div class='box'> </div>
<stylt>.box{background-color: red;}
</stylt>
5、id选择器
1.给元素加一个id="" 唯一识别
2.挑选 #id名 {}
<div id='box'> </div>
<stylt>#box{background-color: red;}
</stylt>
6、选择器使用规范
-
加css样式 尽量不要用id选择器
-
权重越大的样式越会表现出来
-
权重排列 id 100> class 10>tagName 1 > * 0
-
权重相同,取决于代码的执行顺序
（三）文本相关的属性
1、font字体属性
font:font-style font-weight font-size/line-height font-family;
| 属性 | 描述 |
|---|---|
| font-style | 规定字体样式。 |
| font-variant | 规定字体异体。 |
| font-weight | 规定字体粗细。 |
| font-size/line-height | 规定字体尺寸和行高。 |
| font-family | 规定字体系列。 |
字体编码
2、文字缩进
text-indent: px/em/rem;
text-indent:2em; 向右缩进两个字
text-indent:-2em; 向左缩进两个字
3、文本修饰属性
text-decoration:none;
none 没有修饰
line-through 中划线
overline 上划线
underline 下划线
4、字符间距
letter-spacing:20px;
5、文字是否换行
white-space:pre
normal： 默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示。
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
6、垂直对齐属性
调整行内块,行内元素在垂直方向上的对齐
vertical-align:top;
top 顶对齐
middle 中线对齐
baseline 基线对齐
bottom 底线
注：解决行内块元素,行内元素和文字之间的对齐 只需要设置vertical-align属性不是基线对齐即可
7、color字体颜色
color: #ff1234;
background-color:rgb(22,33,44);3种:
英文单词:red green yellow;
6位16进制: 2 8 16: 0-9 A B C D E F 10进制 0-9 10
rgb(red0-255,green0-255,blue0-255)
r(00-ff) g(00-ff) b(00-ff);
（四）列表标签
1、有序列表
<ol> ordered list<li>数据</li><li><div></div></li>
</ol>
2、无序列表
<ul> <li>我是无序列表数据</li> <li>我是无序列表数据</li>
</ul>
3、自定义列表
<dl><dt>列表标题</dt><dd><a>音乐会</a><a>音乐会</a></dd><dt>列表标题</dt><dd>列表数据</dd><dt>列表标题</dt><dd>列表数据</dd>
</dl>
列表除了可以罗列竖直排放的数据 ，还可以做导航、侧边导航、具有相同样式的区域
（五）表格标签
- <table>：定义表格。常用表格自带属性，width、height、bgcolor、align、border: 、cellpadding、cellspacing
- <caption>标题
- <thead>定义表格的表头。
- <tbody>定义一段表格主体（正文）。
- <tr>表格每一行。
- <th>定义表头。
- <td>每一个单元格。
- rowspan：n 行合并
- colspan：n 列合并
- <tfoot> 定义表格的页脚（脚注）。
<table border="1px" cellpadding='10' cellspacing='0' ><caption>学生成绩</caption><thead><tr><th>姓名</th><th>班级</th><th>总成绩</th></tr></thead><tbody><tr><td>周杰伦</td><td>web0525</td><td>560</td></tr><tr><td>Mike</td><td>web0525</td><td>615</td></tr></tbody><tfoot><tr><td>平均分</td><td>web0525</td><td>587</td></tr></tfoot>
</table>
1）合并单元格属性加在td身上
-
rowspan:行合并 (从上到下) 写完属性删除响应被合并的行
-
colspan:列合并 (从左到右) 写完属性删除响应被合并的列
2）表格边框合并css属性
table {border-collapse: collapse;
}
三、表单与盒模型
（一）Form表单
**作用：**收集用户信息（输入框）
form表单属性：
-
name:给表单自己起名字
-
action:处理表单数据的程序地址
-
method:设置提交的方式 （GET/POST）
1、常用表单元素
表单元素指的是不同类型的input元素、复选框、单选按钮、提交按键等。
1）<label>标签
-
表单控件文本说明的元素
-
搜索引擎优化，方便机器阅读
-
点击label会聚焦被绑定的控件
<p><!--for绑定是id--><label for="username">昵称:</label><input type="text" id="username" name="username" >
</p>
2）<input>标签
是表单中比较重要的元素，能过type属性值定义，确定不同的类型。
<p>性别:<label for="">男:</label><input type="radio" name="gender" value="1" checked><label for="">女:</label><input type="radio" name="gender" value="0">
</p>
type属性值
| 值 | 描述 |
|---|---|
| button | 按钮 |
| checkbox | 复选框 |
| color | 颜色控件 |
| date | 年月日日历控件 |
| datetime | 日期-支持火狐 |
| datetime-local | 日期-支持google |
| 邮箱输入框 | |
| file | 文件上传，需要配合accept属性操作上传类型（audio/* video/* image/* MIME_type） |
| hidden | 定义隐藏的输入字段 |
| image | 定义图片按钮样式，结合src使用 |
| month | 数字输入框 |
| number | 月份控件 |
| password | 密码输入框 |
| radio | 单选框 |
| range | 数值游标尺 |
| reset | 重置按钮 |
| search | 搜索框 |
| submit | 登录、提交按钮 |
| tel | 输入手机号，不提供验证。 |
| text | 单行文本框 |
| time | 时间控件（时、分、秒） |
| url | 网址输入框 |
| week | 周期控件，表示第几周 |
其它属性
| 属性 | 值 | 描述 |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type=“file”) |
| alt | text | 定义图像输入的替代文本。 (只针对type=“image”) |
| autocomplete（new） | on / off | 规定元素输入字段是否启用自动提示功能。 |
| autofocus （new） | autofocus | 规定当页面加载时元素自动获得焦点。 |
| checked | checked | 规定在页面加载时，被预先选定 (只针对 type=“checkbox” 或者 type=“radio”) |
| disabled | disabled | 规定应该禁用的<input>元素。 |
| form （new） | form_id | form 属性规定 <input> 元素所属的一个或多个表单。 |
| formaction （new） | UR | 规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。 |
| formmethod（new） | get post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”) |
| formnovalidate（new） | formnovalidate | 覆盖 <form> 元素的 novalidate 属性。 |
| formtarget（new） | _blank _self _parent _top framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”) |
| height (new) | pixels | 规定 <input>元素的高度。(只针对type=“image”) |
| list （new） | datalist_id | 引用 <datalist> 元素，其中包含 <input> 元素的预定义选项 |
| max (new) | number date | 规定 <input> 元素的最大值 |
| maxlength | number | 规定 <input> 元素中允许的最大字符数 |
| min (new) | number date | 规定 <input>元素的最小值。 |
| multiple (new) | multiple | 规定允许用户输入或上传到 <input> 元素的多个值 |
| name | text | name 属性规定 <input> 元素的名称。 |
| pattern （new） | regexp | 规定用于验证元素的值的正则表达式 |
| placeholder （new） | text | 规定可描述输入字段预期值的提示信息 。 |
| readonly | readonly | 规定输入字段是只读的。 |
| required （new） | required | 规定必需在提交表单之前填写输入字段。 |
| size | number | 规定以字符数计的元素的可见宽度。 |
| src | URL | 规定显示为提交按钮的图像的 URL。 (只针对 type=“image”) |
| step（new） | number | 性规定 <input> 元素的合法数字间隔。 |
| type | button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week | 规定要显示的 <input> 元素的类型。 |
| value | text | 指定 <input> 元素 value 的值。 |
| width （new） | pixels | 规定 <input> 元素的宽度。 (只针对type=“image”) |
3）<select>下单列表
<p><label for=""> 所属地区:</label><select name="city" id="" size="3"><option value="0">北京</option><option value="1" selected>广州</option><option value="2">深圳</option><option value="3">上海</option><option value="4">杭州</option></select>
</p>
（二）选择器进阶
基础选择器组合—>复合选择器
1、后代选择器
/*匹配的是E的后代类型为F的元素*/
E F {}
2、子代选择器
/*匹配的是E的直接子代,类型为F类型的元素*/
E > F {}
3、相邻选择器
/*匹配的是E的紧紧相邻的下一个兄弟元素(类型为F)*/
E + F {}
4）兄弟选择器
/*匹配的是E的相邻的类型为F的兄弟元素*/
E ~ F {}
5）交集选择器
/*div.a {} 匹配的是div标签里类型为.a的元素*/
E .F {}
6）并集选择器
/*选中多个元素*/
E,F,C,D... {}
7、伪类链接选择器(a)
/*注意：按照此顺序写*/
a:link {} 未被访问时
a:visited{} 被访问过后
a:hover {} 鼠标悬停
a:active {} 鼠标点击
（三）盒模型
**盒模型由四部分组成：**内边距（padding）、外边距（margin）、有效内容区域（content）、边框（border）
1）边框border
- 复合写法 border：border-width border-style border-color;
- border-width：边框的宽度
- border-style：边框的类型 （solid实线 / dashed虚线 / dotted小圆点 / double双实线）
- border-color：颜色
/*同设置四条边框*/
border:1px solid skyblue;
/*设置某一边的边框*/
border-top:1px solid #000;
border-left:1px solid red;
border-right:3px dashed tomato;
border-bottom: 4px dotted yellow;
/* 顺时针 */
border-width:1px 1px 0px 1px;
border-style: solid dashed dotted double;
border-color:red yellow tomato skyblue;
**注：**传统盒型，边框会撑大盒模型，增加边框就要在width和height里减掉相应的值
边框应用–画三角
<style>.box {width: 0px;height: 0px;/*transparent / rgba(255,0,0,0)透明颜色 alpha透明度 0-1取值 0为全透明 1全不透明*/border-left:10px solid transparent;border-bottom:10px solid red;border-right:10px solid transparent;}
</style>
<body><div class="box"></div>
</body>
2）内边距padding
作用: 调整有效内容和边界的距离
内边距只能填充背景色 ,不能放置内容
padding:10px; 四个方向均为10px
padding:10px 20px; 10px上下 20px左右
padding:10px 20px 30px; 10px上 20px 左右 30px下
padding:10px 20px 30px 40px; 顺时针paddind-top,paddint-left,padind-bottom,paddind-right
**注：**传统盒型，内边距也会撑大盒模型，增加边框就要在width和height里减掉相应的值
3）内容-content（width,height）
width:auto/%/px;
height:auto/px/%
auto：自动 元素是块类型,取父盒子有效内容宽度作为自己的宽度(100%) 如果有内边距不会溢出
100%：元素是块类型,取父盒子有效内容宽度作为自己的宽度(100%) 如果内边距会溢出
min-width:最小宽度
max-width:最大宽度
min-height:最小高度
max-height:最大高度width:100%; [320px.640px]
min-width:320px;
max-width:640px;
**注：**如果内容溢出屏幕的宽度 会出现横向滚动条
4）外边距margin
/*作用：可以移动盒子位置*/
margin:10px;
margin:10px 20px; 10px上下 20px左右
margin:10px 20px 30px; 10px上 20px 左右 30px下
margin:10px 20px 30px 40px; 顺时针margin-left,margin-top，margin-right，margin-bottom
外边距塌陷
<style>* {padding: 0;margin: 0;}.p {width: 300px;height: 300px;background-color: red;/* 处理塌陷可以给父盒子加最小边框或内边距*//* border: 0.1px solid #000; */padding: 0.1px;/* overflow: hidden; */}.s {width: 100px;height: 100px;background-color: yellow;/* 向下移动50px */margin-top: 50px;}
</style>
<body><h1>父子关系嵌套塌陷</h1><div class="p"><div class="s"></div></div>
</body>
（四）背景属性
- background-image：指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”
- background-position： 指定背景图像在元素中出现的位置。
- background-size： 指定背景图像尺寸。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
- background-repeat： 指定背景图像如何填充。
- no-repeat背景图像不平铺
- background-attachment： 定义滚动时背景图像相对于谁固定。
- scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- fixed：背景图像相对于视口（viewport）固定。
- background-origin： 指定背景图像从元素的哪个区域作为显示的原点。
- padding-box：从内边距开始平铺
- content-box：从内容开始平铺
- border-box：从边框开始平铺
- background-clip： 指定背景图像向外裁剪的区域。
- border-box： 从border区域（含border）开始向外裁剪背景。
- padding-box： 从padding区域（含padding）开始向外裁剪背景。
- content-box： 从content区域开始向外裁剪背景。
- text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果
- background-color： 指定背景颜色。
- 复合写法 background：url(test3.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
缩写方式：
background: url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,url(test2.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,url(test3.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;拆分方式：
background-image: url(test1.jpg), url(test2.jpg), url(test3.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-attachment: scroll, scroll, scroll;
background-position: 10px 20px, 10px 20px, 10px 20px;
background-size: 50px 60px, 70px 90px, 110px 130px;
background-origin: content-box, content-box, content-box;
background-clip: padding-box, padding-box, padding-box;
background-color: #aaa;
（五）背景渐变
1、线性渐变
background-image:linear-gradient(方向,颜色1 停止位置 ,颜色2 停止位置....);
方向: 度数 /方位值to right to left to bottom...
background-image:linear-gradient(#fff, #333);linear-gradient(to bottom, #fff, #333);linear-gradient(to top, #333, #fff);linear-gradient(180deg, #fff, #333);linear-gradient(to bottom, #fff 0%, #333 100%);
2、径向渐变
background-image:radial-gradient(形状 大小 位置,颜色1 停止位置,颜色2 停止位置...);
形状: circle 不管背景盒子是正方形还是长方形都是圆形渐变ellipse 如果是正方形就是圆形渐变 如果是长方形是椭圆渐变
大小: 最近边closest-side 最近角 closest-corner 最远边farthest-side 最远角farthest-corner
位置:渐变中心位置 px px / % % at 50px 50px background-image:radial-gradient(circle, #f00, #ff0, #080);radial-gradient(circle at center, #f00, #ff0, #080);radial-gradient(circle at 50%, #f00, #ff0, #080);radial-gradient(circle farthest-corner, #f00, #ff0, #080);
四、CSS特性与浮动
（一）css三大特性
1、层叠性
<style>.c {margin-left:100px;}div .c {margin-left:200px;}
</style>
<div class="b"><p class="c">层叠性</p>
</div>
2、继承性
/*继承性，多存在与文本类型的属性*/
font-,
line-,
text- (除了text-decoration),
color,
list-
均可继承 (inhreit)
3、优先级
| 选择器类型 | 权值 |
|---|---|
| 通配符选择器 | 0 |
| 标签选择器 | 1 |
| 类选择器，伪类选择器 | 10 |
| ID选择器 | 100 |
**注：**行内1000 > id 100>class10>标签名1>*,继承属性 0
（二）元素分类以及转换
1、行内类(display:inline)
- 宽高取决于内容
- 并排有间距
- 行内元素设置宽高不起作用，设置上下外边距不起作用，左右外边距和四个方向的内边距都起作用
- 设置行高撑不开盒子的
2、块类(display:block)
- 宽度默认为父盒子的宽度(100%)，高度取决于内容
- 独立 成行(以新行开始)
- 设置宽高起作用，设置上下外边距起作用，左右外边距和四个方向的内边距都起作用
- 设置行高撑开盒子
3、行内块类(display:inline-block)
-
宽高取决于内容
-
并排有间距
-
设置宽高起作用，设置上下外边距起作用，左右外边距和四个方向的内边距都起作用
4、display属性的元素转换
div{display:inline-block;height: 50px;width: 50px;
}
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
（三）float浮动属性
1、属性值及说明
float属性指定一个盒子（元素）是否应该浮动。
div{float:left;width:50px;height:50px;
}
| 描述 | |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
概述：
-
浮动使盒子在父盒子的左右两个边界停靠
-
浮动属性会脱离标准流，形成浮动流 (相当于上到界面的上一层 但是浮动流并不会覆盖文本流 所以文字还会在原地保留)
-
浮动元素遇到行内块或者浮动盒子会停止浮动（并排排列）
2、浮动对后的影响
浮动带来影响使父盒子高度塌陷
解决办法:
- 父级div定义height
- 结尾处加空div或br标签clear:both
- 父级div定义伪类:after和zoom （实际开发中，比较常用的）
- 父级div定义overflow:hidden或overflow:auto 触发BFC规则
- 父级div也浮动，需要定义宽度
- 父级div定义display:table（css Table布局）
3、伪元素
用css创造出来的元素就是伪元素
/*插入一个元素到E元素的所有内容之前(作为E元素的第个子节点存在)*/
E:before {content:''; //文本内容width:100px;line-height:30px;
}/*插入一个元素到E元素的所有内容之后(作为E元素的最后一个子节点存在)*/
E:after {content:''; //文本内容
}/*鼠标滑过*/
E:hover{background-color: blue;
}
**注：**单冒号是之前旧的伪元素写法 ，css3新增双冒号写法 ，但是目前两个都支持 ，伪元素默认是行内元素
五、定位与圆角边框
（一）定位position
1、定位属性值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其自身位置进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| initial | 设置该属性为默认值。 |
定位的位置值
left: 距离参考对象左侧边界的值
top:距离参考对象上侧边界的值
right:距离参考对象右侧边界的值
bottom:距离参考对象下侧边界的值 px / % 以父盒子作为参考 left:50%;走了父盒子宽度的一半
| 定位类型 | 是否脱标 | 位置变化 | 参考对象 | 位置值 | 作用 |
|---|---|---|---|---|---|
| static | no | no | 无 | 无 | 无 |
| relative | no | yes | 自身原来位置 | 4 | 1.微调位置2.辅助绝对定位 |
| absolute | yes | yes | 最近的有定位属性(非static)的父级元素 | 4 | 1.anywhere 2.压盖(随着滚动条滚动) |
| fixed | yes | yes | 浏览器窗口 | 4 | 1.anywhere 2.压盖(随着滚动条不滚动) |
2、盒子水平和垂直居中
方法一：
/*前提必须知道盒子的具体宽高 */
position: fixed/absolute;
left:50%;
top:50%;
margin-top: -h/2px;
margin-left:-w/2px;
方法二：
/*前提必须知道盒子的具体宽高 */
position: fixed/absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
3、定位对元素类型的影响
-
元素脱离标准流
-
块元素 + fixed/absolute —>类似于行内块
-
行内元素 + fixed/absolute—>类似于行内块
4、层级属性 z-index
多个元素都设置了定位属性后，会存在压盖的现象。
-
当你不特意设置层级属性时，层级的大小取决于定位元素在HTML结构里的顺序，HTML结构(代码)越在下面的默认层级也就越大
-
你特意设置时 设置的值越大，盒子越在前面显示
-
父盒子存在层级属性，子盒的层级，取决父盒子。
z-index:n; 整数值
>0 定位
=0标准流状态
<0 定位盒子压在标准流盒子下面
（二）圆角边框属性
border-radius:npx/%; 四个角
border-radius:10px 20px; 10px 左上角和右下角 20px右上和左下
border-radius:10px 20px 30px; 10px 左上角 20px右上和左下 30px右下角
border-radius:10px 20px 30px 40px; 左上角 右上 右下角 左下border-radius: 30px/60px; 30px 水平切线的距离 60px垂直切线的距离
border-radius: 30px 60px/60px 30px;border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; 水平/垂直border-radius:50%; 圆
（三）显示与隐藏
1、方法一 隐藏不保留位置
display:block显示/none隐藏;
2、方法二 隐藏但保留位置
visibility:hidden隐藏/visible可见的
六、常用属性与布局
（一）溢出处理属性
对盒子内容溢出部分的处理
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 无论是否有被修剪，浏览器都会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
（二）透明度属性
1、背景透明内容不透明
background-color:rgba(0,0,0,0.3);
2、背景和内容一起透明
opacity:0-1 0.3 > 0.4
3、IE8以下浏览器的透明度实现
filter:Alpha(opacity=30); 0--100 30=0.3
（三）盒子阴影
1、box-shadow属性值
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
语法：box-shadow：水平值 垂直值 模糊距离 模糊值 颜色 box-shadow:h-shadow v-shadow blur size color inset;box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
（四）文字阴影
1、text-shadow属性值
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
语法：text-shadow：水平值 垂直值 模糊距离 颜色 text-shadow:h-shadow v-shadow blur color ;text-shadow: 1px 1px 1px red,-1px -1px 1px yellow;
（五）布局
1、两列自适应
**自适应：**此盒子的宽度 随着屏幕宽度发生变化 % / rem
**原理：**左列固定宽度,右列宽度100% 想办法(浮动,绝对定位)把左列放在右列身上
<style>* {padding: 0;margin: 0;}.box {position: relative;width:100%;}.left {position: absolute;left: 0;top: 0;width:200px;height: 400px;background-color: tomato;}.right {/* 自适应 css计算 calc(操作数 运算符 操作数 ) */width:calc(100% - 200px);height: 400px;background-color: skyblue;padding-left:200px ;}</style>
<body><div class="box"><div class="left">左</div><div class="right">右列内容</div></div>
</body>
2、圣杯布局
步骤：1.三列浮动并排2.将左列和右列拿负外边距移动3.把内容居中 利用最外侧大盒子的内边距居中4.利用相对定位把左列和右列归位
要点：圣杯布局关键是在最外侧大盒子身上设置内边距,将中间盒子内容居中
<style>* {padding: 0;margin: 0;}.wrap {overflow: hidden;width: auto;font-size: 30px;line-height: 400px;text-align: center;color: #fff;padding: 0px 220px 0px 200px;}.center {width:100%;height: 400px;background-color: red;}.left {width:200px;height: 400px;background-color: green;margin-left: -100%;position: relative;left: -200px;}.right{width:220px;height: 400px;background-color: pink;margin-left: -220px;position: relative;right: -220px;}.center,.left,.right {float: left;}
</style>
<body><div class="wrap"><!-- 中间列在最上面 --><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbsEPDSS-1663249437842)(image/10-04_圣杯.png)]
3、双飞翼布局
步骤:1.三列浮动并排2.将左列和右列拿负外边距移动3.把内容居中 利用在中间列的盒子里套一个装内容盒子 给这个盒子设置左右两侧外边距
要点：双飞翼布局关键是在中间列内部套一个装内容的盒子，由这个盒子的外边距将内容居中
<style>* {padding: 0;margin: 0;}.wrap {width:auto;overflow: hidden; /* 清除浮动影响 */font-size: 30px;line-height: 400px;text-align: center;color: #fff;}.center {width:100%;height: 400px;background-color: red;}.left {width:200px;height: 400px;background-color: green;margin-left: -100%; }.right{width:220px;height: 400px;background-color: blue;margin-left: -220px;}.center,.left,.right {float: left;}.inner {margin: 0px 220px 0px 200px;}
</style>
<body><!-- 中间列在最上面 --><div class="wrap"><div class="center"><div class="inner">center</div></div><div class="left">left</div><div class="right">right</div></div>
</body>
4、伪等高布局
要点：利用了内外边距的，相互抵消，而父盒子通过溢出属性切除，达到看上去等高
<style>*{margin: 0;padding: 0;}.box{width: 100%;overflow: hidden;}.a{width: 30%;height: 200px;background-color: orange;float: left;padding-bottom: 999px; margin-bottom: -999px;}.b{width: 30%;height: 600px;background-color: red;float: left;padding-bottom: 999px;margin-bottom: -999px;}.c{width: 40%;height: 400px;background-color: green;float: left;padding-bottom: 999px;margin-bottom: -999px;}
</style>
<body><div class="box"><div class="a"></div><div class="b"></div><div class="c"></div></div>
</body>
5、背景盒子等高(真等高)
给每一列分配一个高度相同的背景盒子
要点：需要等高的列外侧套相应个数的盒子，这些盒子高度取决于最高列的高度，之后利用负外边距向左移动这些等高的盒子为相应的列腾出空间，在利用相对定位把相应的列移动到等高的背景盒子内部，最外侧盒子身上写overflow:hidden属性，把溢出的切掉(有几列外侧套几个背景盒子)
<style>*{ margin: 0;padding: 0; }.clearfix::after{ /* 特别注意浮动带来的影响，所以清除 */content: "";display: block;clear: both;}.a{width: 100%;background-color:orange;overflow: hidden;}.b{width: 100%;background-color: green;margin-left: -30%;}.c{width: 100%;background-color: red;margin-left: -40%;}.a1{width: 30%;height: 200px;float: left;position: relative;right: 70%;}.b1{width: 40%;height: 600px;float: left;position: relative;right: 70%;}.c1{width: 30%;height: 300px;float: left;position: relative;right: 70%;}
</style>
<body><div class="a"><div class="b"> <div class="c clearfix"><div class="a1"></div><div class="b1"></div><div class="c1"></div></div></div></div>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFFPpa6R-1663249437842)(image/真等高.png)]
（六）BFC规则
BFC：（block formatting context)）块级格式化上下文–>块级元素的渲染规则
context：包含块
1、怎么样成为BFC盒子?
float:left/right;
display:inline-block;
position:absolute/fixed;
overflow:auto/hidden;
2、核心思想:
BFC盒子那么这个盒子就是私有密闭的区域，内部不影响外部外部不影响内部
规则：
- 在一个BFC盒子里的块元素都是从上到下放置的
- 子元素的左侧边界靠近包含块的左侧边界 即使是浮动元素也是如此
- 同属于一个BFC区域的盒子在垂直方向上外边距会发生合并(塌陷)
- BFC盒子内部的子元素是浮动元素照样要参加高度计算
- BFC区域不与浮动区域重叠
（七）滑动门技术
要点：需要两个盒子实现背景图放置 父子关系 a>span>文字 span套背景左侧 (0% 0%) a套背景图的右侧(100% 0%)
<style>* { margin: 0;padding: 0; }html,body {height: 100%;}body {background: url(../CDR/image/0602-2.jpg) repeat-x;}a {text-decoration: none;color: white;}.nav>li {font-size: 18px;list-style: none;float: left;height: 73px;margin-left: 20px;}.nav span {display: inline-block;padding: 5px 0 5px 20px;overflow: hidden;}.nav a {display: inline-block;padding-right: 20px;margin-top: 18px;overflow: hidden;}.nav a:hover span {background: url(../CDR/image/0602-1.png) repeat-x 0% 0%;/* 插入背景，从左往右平铺 */}.nav a:hover {background: url(../CDR/image/0602-1.png) repeat-x 100% 0%;/* 插入背景，从右往左平铺 */}
</style>
<body><div class="head"><ul class="nav"><li><a href=""><span>首页</span></a></li><li><a href=""><span>帮助与反馈</span></a></li><li><a href=""><span>公众平台</span></a></li><li><a href=""><span>开方平台</span></a></li><li><a href=""><span>微信支付</span></a></li><li><a href=""><span>企业微信</span></a></li><li><a href=""><span>表情开放</span></a></li></ul></div>
</body>
（八）精灵图
是什么精灵图?
- 大图由小图拼合而成的 一般是.png类型(背景是透明的)
原理：
- 以背景图background-image方式引入精灵图,然后通过背景位置background-position把我们想要显示的小图片移动到特定宽高大小的盒子里即可
优点：
-
1.减少网络请求,提高网站的加载速度
-
2.少取名
-
3.替换风格方便
缺点：
-
需要测量
-
后期可能盒子宽高改变了就得改图
<style>*{ margin: 0;padding: 0;}html,body{width: 100%;height: 100%;}body {background: url(../CDR/image/0602-3.jpg) no-repeat;}a{text-decoration: none;color: white;}.nav{height: 105px;width: 100%;background-color: rgba(0, 0, 0, 0.5);}.nav>li{font-size: 18px;list-style: none;float: left;height: 100%;width: 105px;text-align: center;}.nav a{display: inline-block;height: calc(100% - 20px);width: 100%;padding-top: 20px;line-height: 30px;}.nav li:hover{background: url(../CDR/image/0602-4.png) no-repeat 0 22px ; /*主要操作背景图的位置*/}.nav li:hover a{color: orange;}</style>
<body><ul class="nav"><li><a href=""><span>官网首页</span> <br> <span>HOME</span></a></li><li><a href=""><span>官网首页</span> <br> <span>HOME</span></a></li><li><a href=""><span>官网首页</span> <br> <span>HOME</span></a></li></ul>
</body>
（九）画箭头
<style>*{margin: 0;padding: 0;}.box{width: 50px;height: 50px;margin: 50px auto;position: relative;}.box::before{content: "";display: inline-block;border-width: 0 10px 10px 10px;border-color: transparent transparent red transparent;border-style: solid;position: absolute;left: 0;top: 0px;}.box::after{content: "";display: inline-block;border-width: 0 10px 10px 10px;border-color: transparent transparent white transparent;border-style: solid;position: absolute;left: 0;top: 3px;}
</style>
<body><div class="box"></div>
</body>
（十）文本溢出处理
<style>.one-line {width:300px;border:1px solid #000;line-height: 40px;/* 不换行 强制一行显示 */white-space: nowrap;/* 处理盒子溢出 */overflow: hidden;/* 处理文字溢出 ellipsis省略号*/text-overflow:ellipsis;}.many-line {width:300px;/* 2行溢出 */height: 60px;border:1px solid #000;line-height: 30px;/* webkit内核里排放内容的布局方式 */display: -webkit-box;/* 显示几行 */-webkit-line-clamp:2 ;/* 设置文本排列方向 垂直 */-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}.many-line2 {position: relative;width:300px;/* 2行溢出 */height: 60px;border:1px solid #000;line-height: 30px;overflow: hidden;}.many-line2::after {content: '...';position: absolute;right: 0px;bottom: 0px;/* padding-left: 20px;background: linear-gradient(-90deg,rgba(0,0,0,0) ,#fff 50%); */}</style>
</head>
<body><h1>单行文本溢出</h1><div class="one-line">Twinwash(町渥)10公斤免清洗滚筒柜式洗烘一体洗衣机烘干一体全自动家用大容量10kg除菌消毒 10kg滚筒洗烘一体 </div><h1>多行文本溢出1</h1><div class="many-line">Twinwash(町渥)10公斤免清洗滚筒柜式洗烘一体洗衣机烘干一体全自动家用大容量10kg除菌消毒 10kg滚筒洗烘一体 Twinwash(町渥)10公斤免清洗滚筒柜式洗烘一体洗衣机烘干一体全自动家用大容量10kg除菌消毒 10kg滚筒洗烘一体 </div><h1>多行文本溢出2</h1><div class="many-line2">Twinwash(町渥)10公斤免清洗滚筒柜式洗烘一体洗衣机烘干一体全自动家用大容量10kg除菌消毒 10kg滚筒洗烘一体 Twinwash(町渥)10公斤免清洗滚筒柜式洗烘一体洗衣机烘干一体全自动家用大容量10kg除菌消毒 10kg滚筒洗烘一体 </div>
</body>
七、icon图标与兼容性
（一）常见图片格式及特点
| 格式 | 优点 | 缺点 | 使用场景 |
|---|---|---|---|
| jpg | 色彩丰富，文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
| gif | 文件小，支持动画、透明、无兼容问题 | 支持256种颜色 | 色彩简单的logo/icon动图 |
| png | 无损压缩，支持透明 | 不支持动画，色彩丰富的图片尺寸大 | logo/icon透明图 |
| webp | 文件小，支持有损和无损压缩，支持动画、透明 | 兼容性不太好 | 支持webp格式的app和webview |
（二）页面TDK
**T：**表示网页定义的标题
**D：**表示网页定义的描述description
**K：**表示为搜索引擎定义的关键词
<head><meta charset="utf8" version='1'/><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/><meta name="description"content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图"/><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
</head>
（三）icon图标
在浏览器中打开某个页面时，会在浏览器的标签栏处显示的图标，当网页被添加收藏也同时会在书签上显示的图标。
icon图标生成：
- **比特虫：**http://www.bitbug.net/
引入：
<link href="favicon.ico" rel="icon"/>
（四）字体图标iconfont
阿里矢量图标库：https://www.iconfont.cn/
icoMoon图库：https://icomoon.io/
（五）常见问题处理与兼容
1、图片下间隙处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LlBs0fDn-1663249437843)(image/10-05_图片下间隙.png)]
1）给父盒子设置字号为0
.wrap{font-size:0;
}
2）改变图片的display
img{display：block；
}
3）给图片设置垂直对齐方式
img{vertical-align:middle; /*中线对齐*//*vertical-align:baseline;*/ /*基线对齐*/
}
2、文本框和按钮对不齐现象
**原因：**按钮是自动内减 可视高度就是你设置的height 文本框的可视高度 height+border
解决办法：
- 在设置文本框高度自己做内减
- 给文本设置新盒模型 box-sizing: border-box;
3、IE8以下图片边框问题
原因：<a>标签套了图片，a标签的默认颜色值继承下来，而图片在IE8以下，元素归类成文本，所以有边框的问题
解决：
img{dorder:none
}
4、IE6以下小高问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZr978pt-1663249437844)(image/10-05_不高度.png)]
**原因：**IE6以下，小高度，设置不生效，出现了默认高度
解决：
.a {width: 300px;height: 1px;background-color: tomato;line-height: 0;font-size: 0;overflow: hidden;
}
5、IE7及其以下overflow属性值auto和hidden失效问题
**解决：**给父盒子加定位属性，position:relative
6、条件Hack
用来控制不同浏览器之间的差异与兼容性问题
只在IE中可见
<!--[if IE]><p> 您的浏览器版本太低,请升级您的浏览器</p><![endif]-->
| 项目 | 范例 | 说明 |
|---|---|---|
| ! | [if !IE] | NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。 |
| lt | [if lt IE 5.5] | 小于运算符。如果第一个参数小于第二个参数，则返回true。 |
| lte | [if lte IE 6] | 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。 |
| gt | [if gt IE 5] | 大于运算符。如果第一个参数大于第二个参数，则返回true。 |
| gte | [if gte IE 7] | 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。 |
| ( ) | [if !(IE 7)] | 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。 |
| & | [if (gt IE 5)&(lt IE 7)] | AND运算符。如果所有的子表达式计算结果为true，返回true |
| | | [if (IE 6)|(IE 7)] | OR运算符。返回true，如果子表达式计算结果为true。 |
7、属性级Hack
- _：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
- *：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
- \9：选择IE6+
- \0：选择IE8+和Opera
.test{color:#090\0; /* For Opera */color:#00f\9; /* For IE8+ */*color:#f00; /* For IE7 */_color:#ff0; /* For IE6 */
}
八、HTML5基础
（一）H5新增标签
1、新的语义和结构元素
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义<figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的章节，通定义在<article>里。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
2、新多媒体元素
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频（video 或者 movie） |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <embed> | 定义嵌入的内容，比如插件。 |
| <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
3、新表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。内容元素<option value=“”> |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <output> | 定义不同类型的输出，比如脚本的输出。 |
4、<canvas> 新元素
| 标签 | 描述 |
|---|---|
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
（二）H5标签的兼容性
**方式一：**创建元素
// 创建元素的方法 js创造出来的标签是行内类型,需要通过css进行转换类型
document.createElement('header');
document.createElement('nav');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');header,nav,aside,article,footer,section {display: block;}
方式一：引入第三方库
<!--[if lt IE9]><script type='text/javascript' src='./html5shiv.js' ></script>
<![endif]-->
（三）CSS选择器
| 选择器 | 示例 | 示例说明 | CSS版本 |
|---|---|---|---|
| . | .intro | 选择所有class="intro"的元素 | 1 |
| # | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有<p>元素 | 1 |
| element,element | div,p | 选择所有<div>元素和<p>元素 | 1 |
| element element | div p | 选择<div>元素内的所有<p>元素 | 1 |
| element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 | 2 |
| element+element | div+p | 选择所有紧接着<div>元素之后的<p>元素 | 2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择 lang 属性以 en 为开头的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个<p>元素的第一个字母 | 1 |
| :first-line | p:first-line | 选择每一个<p>元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
| :before | p:before | 在每个<p>元素之前插入内容 | 2 |
| :after | p:after | 在每个<p>元素之后插入内容 | 2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有 元素 | 2 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| [attribute^=value] | a[src^=“https”] | 选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=“.pdf”] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [*attribute=value] | a[src*=“runoob”] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type] | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n)] | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not§ | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 “readonly”（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 “required” 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
（四）其它属性
1、resize调整大小
- 允许用户调整大小
/*要想这个属性起作用 必须加一个overflow:hidden/auto*/
div{resize:both;overflow:auto;
}
| 值 | 描述 |
|---|---|
| none | 用户无法调整元素的尺寸。 |
| both | 用户可调整元素的高度和宽度。 |
| horizontal | 用户可调整元素的宽度。 |
| vertical | 用户可调整元素的高度。 |
2、box-sizing盒模型
| 值 | 说明 |
|---|---|
| content-box | 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
| border-box | 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 指定 box-sizing 属性的值，应该从父元素继承 |
文本多列布局
p {column-count: 3; 列数column-width: 300px; /* 默认列宽 434px *//* if 你设置的列宽>默认列宽 以你设置的列宽为主 列数没用if 你设置的列宽<默认列宽 以你设置的列数为主 列宽没用*/column-gap: 50px; 间隙column-rule:2px solid yellowgreen; 间隔线}
九、新型布局
（一）弹性盒
<style>*{margin: 0;padding: 0;box-sizing: border-box;}.box {/*定义弹性盒*/display: flex;/*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行*/flex-wrap: wrap;width: 800px;height: auto;margin: 30px auto;border: 1px solid;/* ----------设置横向或纵直排列的方式----------------------- *//* 从左到右排列 默认值*//* flex-direction: row; *//* 从右到左排列 *//* flex-direction: row-reverse; *//* 从上到下排列 *//* flex-direction: column; *//* 从下到上排列 *//* flex-direction: column-reverse; *//* ----------------设置横向排列样式-------------------------- *//* 水平从左到右紧靠排列 *//* justify-content:flex-start; *//* 水平从右到左紧靠排列 *//* justify-content: flex-end; *//* 水平中紧靠排列 *//* justify-content: center; *//* 水平两端盒子紧靠父盒子，其它间距均等分配 *//* justify-content: space-between; *//* 水平间距都均等分配 *//* justify-content: space-evenly; *//* 水平两端子项间距是其它子项的一半。 *//* justify-content: space-around; *//* ---------------设置纵向排列样式----------------------------- *//* 垂直顶部对齐 *//* align-items: flex-start; *//* 垂直底部对齐 *//* align-items: flex-end; *//* 垂直中部对齐 *//* align-items: center; *//* 与'flex-start'等效。其它情况下，该值将参与基线对齐。 *//* align-items: baseline; *//* align-items: stretch; */}.box div {width: 20%;height: 100px;border-right: 1px solid yellow;line-height: 100px;font-size: 30px;text-align: center;color: #fff;}.sbox1 {background-color: red;}.sbox2 {background-color: orange;}.sbox3 {background-color: green;}.sbox4 {background-color: pink;}</style>
<body><div class="box"><div class="sbox1">1</div><div class="sbox2">2</div><div class="sbox3">3</div><div class="sbox4">4</div><div class="sbox4">4</div><div class="sbox4">4</div> </div>
</body>
（二）网格布局
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {/*定义网格布局*/display: grid;width: 600px;height: 500px;margin: 50px auto;border: 2px solid #000;text-align: center;font-size: 30px;color: #fff;/* -------------定义每一（数列）的子项的宽度--------------------- *//* 列数 高 *//* grid-template-columns: 100px 100px 100px; *//* repeat写法： */grid-template-columns: repeat(3, 100px);/* fr单位写法， 相对父盒子的比例分配 *//* grid-template-columns: 1fr 2fr 1fr 2fr; *//* grid-template-columns: repeat(4 ,1fr); *//* grid-template-columns: repeat(auto-fill,100px); *//* 表示长度在范围之间 *//* grid-template-columns: 1fr minmax(150px,200px); *//* grid-template-columns: 100px auto 100px; *//* --------------定义每一（行数）的子项的高度------------------- *//* 行数 宽 *//* grid-template-rows: 100px 100px 100px; *//* repeat写法： */grid-template-rows: repeat(4, 100px);/* fr单位写法， 相对父盒子的比例分配 *//* grid-template-rows: 1fr 2fr 1fr ; *//* grid-template-rows: repeat(3 ,1fr); *//* -----------间距------------ *//* 行之间的间距*//* grid-row-gap:20px; *//* row-gap: 20px; *//* 列之间的间距 *//* grid-column-gap:10px; *//* column-gap: 10px; *//* 复合写法 行间距 列间距 */grid-gap: 20px 10px;/* gap: 20px 10px; *//* 给网格定义区域 *//* grid-template-areas:'a b c''d e f''g h i'; *//*---子项的排列方式顺序，行排列或列排列 ----*//* 默认值 值后面加dense（row dense或columndense），为紧凑排列 *//* grid-auto-flow: row; *//* grid-auto-flow: column; *//* ----整体子项里的内容对齐方式 ---*//* justify-items: stretch;align-items: stretch; *//* 复合写法 *//* place-items: center center; *//* start：对齐单元格的起始边缘。end：对齐单元格的结束边缘。center：单元格内部居中。stretch：拉伸，占满单元格的整个宽度（默认值）。 *//* 排列方式，与弹性盒一样 *//* align-content: center; *//* justify-content:space-between ; *//* 复合写法 列 行 *//* place-content: center space-between; *//* 开始 | 结束 | 中部 | 拉伸 |两端间距是其它一半|两端紧靠父盒子|间距等分 *//* start | end | center | stretch | space-around | space-between | space-evenly; *//* 调整没有在设置的行和列内的子项宽高 *//* grid-auto-rows: 50px; *//* grid-auto-columns: 50px; */}.sbox{border: 1px solid #000;/* width: 100%;height: 100%; */}.sbox:nth-child(1) {background-color: aqua;/* grid-column-start: 1; *//* grid-column-end: 3; *//* 复合写 grid-column: 1/3; *//* grid-row-start: 1; *//* grid-row-end: 3; *//* 复合写 grid-row: 1/3; *//* grid-column-start： 左边框所在的垂直网格线 *//* grid-column-end：右边框所在的垂直网格线 *//* grid-row-start：上边框所在的水平网格线 *//* grid-row-end：下边框所在的水平网格线 */}.sbox:nth-child(2) {background-color: plum;}.sbox:nth-child(3) {background-color: red;}.sbox:nth-child(4) {background-color: orange;}.sbox:nth-child(5) {background-color: green;}.sbox:nth-child(6) {background-color: yellowgreen;}.sbox:nth-child(7) {background-color: crimson;}.sbox:nth-child(8) {background-color: thistle;}.sbox:nth-child(9) {background-color: magenta;}.sbox:nth-child(10) {background-color: palegreen;}
</style>
<body><div class="box"><div class="sbox">1</div><div class="sbox">2</div><div class="sbox">3</div><div class="sbox">4</div><div class="sbox">5</div><div class="sbox">6</div><div class="sbox">7</div><div class="sbox">8</div><div class="sbox">9</div><div class="sbox">10</div></div>
十、过滤与动画
（一）过滤
语法：
transition: 过渡属性名 时间s 运动曲线 延时时间 ;
transition: property duration timing-function delay;div{width:100px;transition: width 2s;-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
（三）变换transform
1、transform属性值
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 平移。 |
| translate3d(x,y,z) | 定义 3D 平移。 |
| translateX(x) | 定义平移，只是用 X 轴的值。 |
| translateY(y) | 定义平移，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 平移，只是用 Z 轴的值。 |
| scale( x [,y] ) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。单位：deg |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
2、transform-origin
- 设置对象以某个原点进行转换的位置。
语法
transform-origin: x-axis y-axis z-axis;div{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值：left、center、right、px 、% |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、px、%* |
| z-axis | 定义视图被置于 Z 轴的何处。可能的值：px |
3、transform-style
- transform–style属性指定嵌套元素是怎样在三维空间中呈现。
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈现。 |
| preserve-3d | 表示所有子元素在3D空间中呈现。 |
4、perspective
- 景深属性，多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
| 值 | 描述 |
|---|---|
| number | 元素距离视图的距离，以像素计。 |
| none | 默认值。与 0 相同。不设置透视。 |
（四）关键帧动画
1、@keyframes定义动画
@keyframes mymove {0% {transform:translate(0,0);}25% {transform:translate(0,400px);}50% {transform:translate(600px,400px);}75% {transform:translate(600px,0px);}100% {transform:translate(0px,400px);}
}
2、animation使用动画
语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 |
| inherit | 从父元素继承属性。 |
十一、响应式布局
（一）媒体查询
不同屏幕大小下，显示不一样的效果@media screen and (max-width:768px) {.a {background-color: purple;}}@media screen and (min-width:768px) {.a {background-color: deeppink;}}@media screen and (min-width:992px) {.a { background-color: green;}}@media screen and (min-width:1200px) {.a {background-color: red;}}
（二）rem布局
1、媒体查询与rem
@media screen and (min-width: 320px) {html {font-size: 42.67px;}
}
@media screen and (min-width: 360px) {html {font-size: 48px;}
}
@media screen and (min-width: 375px) {html {font-size: 50px;}
}
@media screen and (min-width: 414px) {html {font-size:55.2px ;}
}
@media screen and (min-width: 540px) {html {font-size:72px;}
}
@media screen and (min-width:640px) {/* 当前屏宽*100/psdWidth 640*100/750 */html {font-size:85.33px;}
}
@media screen and (min-width: 750px) {/* 1rem = 100px 为了好算 */html {font-size: 100px;}
}/*使用时间注意，实际设计稿测量值除以100*/
.box{width: 2.5rem;height: 1.75rem;background-color: red;font-size: 0.5rem;
}
2、通j过引remScale.js
; (function (doc, win) {var docEl = doc.documentElement, // 获取htmlresizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',width = 1125, // 设计稿宽，用时只需要修改这一处recalc = function () {var clientWidth = docEl.clientWidth; // 获取设备尺寸if (!clientWidth) return; // 如果没有值，回去if (clientWidth > width) { // 如果超过设计稿宽度，就给一个固定值docEl.style.fontSize = '100px';docEl.style.width = width + 'px';docEl.style.margin = '0 auto';} else {docEl.style.fontSize = 100 * (clientWidth / width) + 'px';}};if (!doc.addEventListener) return; // 如果没有这个方法，回去win.addEventListener(resizeEvt, recalc, false); // 改变大小时调整一下doc.addEventListener('DOMContentLoaded', recalc, false); // 加载完成时调整
})(document, window);
// 使用时：1rem = 设计稿的宽度 / 100
（三）Grid网格布局
- 第九节有介绍
