HTML+CSS系列教程一之拨云见日

了解什么是HTML、CSS?

他们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言

宇宙第一编辑器VS Code

VS Code，全称Visual Studio Code，来自微软，是一个开源的，基于Electron的轻量代码编辑器

Web前端的三大核心技术

HTML：结构

CSS：样式

JavaScript：行为

HTML基础结构与属性

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用，是网页制作必备的编程语言

超文本：文本内容 + 非文本内容(图片、视频、音频等)

标记：<单词> 也叫做标签

语言：编程语言

标签的属性：来修饰标签的，设置当前标签的一些功能

HTML初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码

<!DOCTYPE html>		 文档说明：告诉浏览器这是一个html文件
<html lang="en">		html文件的最外层标签，包裹着所有html标签代码 lang="en"表示这是一个英文网站  lang="zh-CN"表示这是一个中文网站
  <head>
    <meta charset="UTF-8">		元信息：编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
    <title>Document</title>		设置网页的标题
  </head>
  <body>
    显示网页内容的区域
  </body>
</html>

HTML注释

写法：在浏览器中看不到，只能在代码中看到注释的内容

意义：

把暂时不用的代码注释起来，方便以后使用
对开发人员进行提示

快速添加注释与删除注释：

ctrl + /
shift + alt + a

HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫更好的理解网页。
方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
便于团队开发与维护。

屏幕阅读器:h5o.github.io/

标题与段落

标题 -> 双标签：<h1></h1> ... <h6></h6>

在一个网页中，h1标题最重要，并且一个html文件中只能出现一次h1标签。

h5、h6在网页中不经常使用

段落 -> 双标签:<p></p>

文本修饰标签

强调 -> 双标签：****<strong></strong>、**<em></em>

<strong>：表示强调，会对文本进行加粗

<em>：表示强调，会对文本进行斜体

区别：

写法和展示效果有区别
strong的强调性更强，em的强调性稍弱

下标：<sub></sub>

上标：<sup></sup>

删除文本：~~~~<del></del>

插入文本：<ins></ins>

注：一般情况下，删除文本都是和插入文本配合使用的

<strong>这是一段需要强调的文本</strong>
<em>这是一段需要强调的文本</em>
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
促销：原价<del>300</del>，现价<ins>100</ins>

图片标签和图片属性

img -> 单标签

src:引入图片的地址

alt:当图片出现问题的时候，可以显示一段友好的提示文字。

title:提示信息(html标签都具备的属性)

width、height：图片的大小

引入文件的地址路径

相对路径

.在路径中表示当前路径

..在路径中表示上一级路径

绝对路径

E:/ke/img/animal/dog.jpg

(E:)/img/dog.img

[http://cms](http://cms/)..

windows下可用\表示路径，但是网络地址必须用/，但是尽量避免

跳转链接

a -> 双标签 []()<a></a>

href属性:链接的地址

target属性:可以改变链接打开的方式，默认情况下:在当前页面打开_self 新窗口打开 _blank

base -> 单标签:改变链接的默认行为(写在head中间)<base target="_blank">

跳转锚点

#号+id属性

<a href="#id值">1</a>
<h2 id="id值"><h2>

#号+name属性(name属性加给a标签)

<a href="#name值"></a>
在跳转前的增加<a name=""></a>

特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如注册商标、版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

特殊字符	含义	特殊字符代码
	空格符	` `
©	版权	`©`
®	注册商标	`®`
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人名币	`¥`
°	摄氏度	`°`

无序列表

<ul>、<li>：列表的最外层容器、列表项

注：ul和li必须是组合出现的，他们之间是不能有其他标签的

type属性：改变前面标记的样式(一般都是用css去控制)

(www.w3school.com.cn/tags/att_ul…)

有序列表

<ol>、<li>：列表的最外层容器、列表项

注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表

type属性：改变前面标记的样式(一般都是用css去控制)

(www.w3school.com.cn/tags/att_ol…)

定义列表

列表项需要添加标题和对标题进行描述的内容

<dl>：定义列表

<dt>：定义专业术语或名词

<dd>：对名词进行解释和描述

<dl>
    <dt>HTML</dt>
    <dd>超文本语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
</dl>

嵌套列表

列表之间可以互相嵌套形成多层级列表

表格标签

<table>：表格的最外层容器

<tr>：定义表格行

<th>：定义表头

<td>：定义表格单元

<caption>：定义表格标题

注：之前是有嵌套关系的，要符合嵌套规范

语义化标签：<tHead>、<tBody>、<tFood>

注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次

表格属性

border:表格边框 cellpadding:单元格内的空间 cellspacing:单元格之间的空间 rowspan:合并行 colspan:合并列 align:左右对齐方式 left、center、right valign:上下对齐方式 top、middle、bottom

表单标签

<form>：表单的最外层容器

<input>：标签用来搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

<form>
	<!--输入框 -->
    <input type='text'>
    <!--密码框 -->
    <input type='password'>
    <!--复选框 -->
    <input type='checkbox'>苹果
    <input type='checkbox'>香蕉
    <input type='checkbox'>葡萄
    <!--单选框 -->
    <input type='radio' name='gender'>男
    <input type='radio' name='gender'>女
    <!--上传文件 -->
    <input type='file'>
    <!--提交按钮和重置按钮 -->
    <input type='submit'>
    <input type='reset'>
</form>

checked:已勾选 (不用加=,加的话，=checked)

disabled:不可选 (不用加=,加的话，=disabled)

placeholder:提示文字

<textarea>：多行文本框

<select>、<option>：下拉菜单

<label>：辅助表单，优化体验

<form>
	<!-- 多行文本框 -->
    <textarea cols='30' rows='10'></textarea>
    <!-- 下拉菜单 -->
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    <select size='2'>
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    <select multiple>			多选
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
    </select>
    
    <!-- label -->
    <input type='radio' name='gender' id='man'><label for='man'>男</label>
    <input type='radio' name='gender' id='woman'><lable for='woman'>女</lable>
</form>

(selected表示首选 disabled表示无法选中) (size=""表示几个下拉菜单 multiple表示可以多选)加在select

表单和表格可以配合使用，先<form>后<table>

控制输入长度

<form action="#">
        <input type="text" minlength="8" maxlength="16" required>
        <input type="password" required>
        <input type="submit">
</form>

有提示的输入框

<input list="countries" />
<datalist id="countries">
    <option>Greece</option>
    <option>United States</option>
</datalist>

div和span

div(块)：div全称为division，"分割、分区"的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标签、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的，不同的部分，来实现网页的规划和布局

span(内联)：用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行

CSS基础语法

格式：选择器{属性1:值1;属性2:值2}

单位：px -> 像素(pixel)、% -> 百分比

基础样式：width、height、background-color

CSS注释：/* CSS注释内容 */

CSS样式的引入方式

内联(行内、行间)样式：在html标签上添加style属性来实现的
内部样式：在标签内添加的样式

注：内部样式的优点，可以复用代码，复合w3c的规范标准，进行让结构和样式分开处理

外部样式

引入一个单独的css文件，nam.css

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。

link的rel属性： www.w3school.com.cn/tags/att_li…

@import 注：这种方式有很多问题，不建议使用。

<style>
	@import url('./common.css');
</style>

link与@import区别：www.cnblogs.com/my--sunshin…

CSS中的颜色表示法

单词表示法:red,blue,green,yellow...
十六进制表示法:#000000 #ffffff

0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb三原色表示法:rgb(255,255,255);

取值范围0~255

CSS背景样式

background-color：背景色

background-image：背景图

url (背景地址)

默认会水平垂直都铺满背景图

background-repeat：平铺方式

repeat-x x轴平铺

repeat-y y轴平铺

repeat(x,y都进行平铺，默认值)

no-repeat都不平铺

background-position：背景位置

x y:number(px、%) x正值向右，y正值向下

x:left、center、right

y:top、center、bottom

background-attachment：背景图随滚动条移动的方式（做背景视觉差）

scroll:默认值（背景位置是按照当前元素进行偏移）以容器为参照物

fixed:（背景位置是按照浏览器进行偏移的）以浏览器为参考物

background:url() repeat-x,url(); 多背景操作用逗号隔开，先写的在上面

CSS边框样式

border-style：边框样式

solid：实线

dashed：虚线

dotted：点线

border-width：边框大小

border-color：边框颜色

边框也可以针对某一边进行单独设置:border-right-style:中间是方向

案例：利用边框实现三角形

div{width:0px;height:0px;border-left:30px solid red}

颜色：透明颜色transparent

CSS文字样式

font-family：字体类型

多个字体类型的设置目的(多个字体用,隔开):备用字体

字体名称中有空格的话，需要加''使用

英文字体：Arial,'Times New Roman'

中文字体：微软雅黑，宋体

中文字体的英文名称

微软雅黑：'Microsoft YaHei'

宋体：SimSun

注：1.设置多字体的方式2.引号的问题

通用字体：

Serif衬线体 -> Georgia、宋体

Sans-Serif无衬线体 -> Arial、Helvetica、黑体、微软雅黑

Cursive手写体 -> Caflisch Script、楷体

Fantasy夸张体

Monospace等宽字体 -> Consolas、Courief、中文字体

注：1.通用字体设置在最后2.英文字体放在中文字体前

使用Web Fonts

<h1>
    Web fonts are awesome!
</h1>

<style>
    @font-face{
        font-family:"Megrim";
        src:
            url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2)
 format('woff2');
    }
    
    h1{
        font-family:Megrim,Cursive;
    }
</style>

会消耗资源，自动下载字体

font-size：字体大小(默认16px)

写法:1.number(px)

2.单词表示法:(了解)

属性取值	字体大小
xx-small	最小
x-small	较小
small	小
medium	正常(默认值)
large	大
x-large	较大
xx-large	最大

注：字体大小一般为偶数

font-weight：字体粗细

写法:单词(normal、bold) | number(100、200、...900，100到 500都是正常的，600到900都是加粗的)

font-style：字体样式

italic斜体 / normal正常

注:oblique也是表示斜体，用的比较少，一般了解即可

区别:1.italic 带有属性倾斜的字体的才可以设置倾斜 2.oblique 没有倾斜属性的字体也可以设置倾斜操作

color：字体颜色

CSS段落样式

text-decoration: 文本修饰

下划线：underline

删除线：line-through

上划线:：overline

不添加任何装饰：none

注:添加多个文本修饰:用空格隔开 line-through underline overline

text-transform：文本大小写(针对英文)

小写：lowercase

大写：uppercase

只针对首字母大写：capitalize

text-indent：文本首行缩进

em单位:相对单位 1em永远都是跟字体大小相同

text-align：文本对齐方式

左对齐：left

右对齐：right

居中对齐：center

两端点对齐：justify

line-height：定义行高

行高:一行文字的高度，上边距和下边距的等价关系

默认行高不是固定值,而是变化的，根据当前字体的大小在不断的变化

取值:1.number(px) | scale(比例值，跟文字大小成比例的 1/2/3 )

line-height 用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 line-height 属性被指定为：数字、长度、百分比、关键词（normal）。

line-height 的取值

取值	作用
normal	取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 `font-family`
数字	该属性的应用值是这个无单位数字，数字乘以该元素的字体大小。大多数情况下，这是设置 `line-height` 的推荐方法，不会在继承时产生不确定的结果
长度	指定长度用于计算 `line box` 的高度
百分比	与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果

主段落内容的 line-height 至少应为 1.5。这将有助于改善低可视条件下的体验，也对认知阻碍者，如阅读困难者，有帮助。如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。

letter-spacing：字之间的间距

word-spacing ：词之间的间距（针对英文段落）

英文和数字不自动折行的问题:

1.word-break:break-all(非常强烈的折行) 2.word-wrap:break-word(不是那么强烈的折行,会产生一些空白区域)

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式

一个CSS属性控制多种样式，叫做复合样式

复合的写法是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border;有的是需要关心顺序，例如font

background:red url() repeat 0 0;
border:1px red soild;
font:

注:最少要有两个值size family

weight style size family √

style weight size family √

weight style size/line-height family √

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖

CSS选择器

1.ID选择器

#elem{} id='elem'

注：

ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的
命名的规范:由字母、下划线、中划线、数字(并且第一个不能是数字)
驼峰写法：searchButton(小驼峰) SearchButton(大驼峰)

短线写法：search-small-button

下划线写法：search_small_button

2.class选择器

css：.elem{} html：class = "elem"

注：

class选择器是可以复用的。
可以添加多个class样式。用空格隔开
多个样式的时候，样式的优先级根据css决定，而不是class属性中的属性
标签+类的写法 p.div1

3.标签选择器(TAG选择器)

css：div{} html：<div>

使用场景:

去掉某些标签的默认样式时
复杂的选择器中，如层次选择器

4.群组选择器(分组选择器)

css：div,p,span{}

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码复用。

5.通配选择器

css：*{} -> 所有标签

注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用

使用场景:去掉所有标签的默认样式时

6.层次选择器

1.后代:M N{} 包括子的子

2.父子:M>N{} 只包括N不包括N的子

3.兄弟:M~N{} 当前M下面的所有兄弟N标签(不包括M)

4.相邻:M+N{} 当前M下面相邻的N标签(不包括M)

7.属性选择器

选择器	说明
M[attr]	M元素选择指定为attr属性的集合
M[attr=value]	M元素选择指定为attr属性和value值的集合(完全匹配)
M[attr*=value]	M元素选择指定为attr属性并且包含值为value的集合(部分匹配)
M[attr^=value]	M元素选择指定为attr属性并且起始值为value的集合(起始匹配)
M[attr$=value]	M元素选择指定为attr属性并且结束值为value的集合(结束匹配)
`M[attr1][attr]`	M元素选择满足多个属性的集合(组合匹配)
[attr~=value]	匹配带有一个名为 `attr` 的属性的元素，其值正为 `value`，或者匹配带有一个 `attr` 属性的元素，其值有一个或者更多，至少有一个和 `value` 匹配。
[attr分号=value]	匹配带有一个名为 `attr` 的属性的元素，其值可正为 `value`，或者开始为 `value`，后面紧随着一个连字符。

li[class~="a"] { CSS 样式 }
/* 匹配一个 a 类，不过也可以匹配一列用空格分开、包含 a 类的值 */

div[lang|="zh"] { CSS 样式 }
/* 匹配属性名 attr 为 zh 或 zh- 的元素 */

div[class="box1"]

<div class='box'></div>
<div class='search'></div>
<div class='search-button'></div>
<div class='button-search'></div>

8.伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

M:伪类{}

:link、:visited、:hover、:active

注：

link visited 只能给a标签加，hover和active可以给所有的标签加
如果四个伪类都生效，一定要注意顺序:L V H A.
一般网站只这样去设置:a{} a:hover{}。

:link 访问前的样式(只能添加给a标签)

:visited 访问后的样式(只能添加给a标签)

:hover 鼠标移入时的样式(可以添加给所有的标签)

:active 鼠标按下的样式(可以添加给所有的标签)

一般网站都只设置a{}(link visited active) a:hover{}

:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性

:checked、:disabled、:focus针对的是表单的元素

div:after{content:'world';color:red}
div:before{content:'world'}

:checked{background:red}针对的是有checked属性的表单

:focus:{}针对的是有光标显示的时候

9.结构性伪类选择器

:nth-of-type() :nth-child() （child表示孩子）(type表示类型)

角标是从1开始的，1表示第一项，2表示第二项 | n值表示从1到无穷大 2n表示偶数 2n+1表示奇数

li:nth-of-type(2n){background:red}

:first-of-type :first-child

:last-of-type :last-child

:only-of-type :only-child

<ul>
	<li></li>			
    <div></div>			div:nth-child(2)
    <li></li>			li:nth-of-type(2)
    <li></li>
</ul>

CSS样式继承

文字相关的样式可以被继承

布局相关的样式不能被继承(默认是不能继承的，但是可以设置继承属性 inherit值 )

<div>
    <p></p>
</div>

p{border="inherit"}		继承div的border属性

CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高
单一样式的优先级

style行间>id>class>标签>*>继承

注：style行间权重 1000

id 权重 100

class 权重 10

tag 权重 1
!important(写在{}里面是个值)

提升样式优先级，非规范方式，不建议使用(不能针对继承的属性进行优先级的提升)
```
#elem{color:red !important;}
```
标签+类与单类

标签+类>单类
```
div.box{}
.box{}
```
群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高

层次优先级

权重比较

ul li .box p input{}	1+1+10+1+1
.hello span	#elem{}		10+1+100

约分比较

ul li .box p input{}	li p input{}
.hello span	#elem{}		#elem{}

CSS盒子模型

组成:content->padding->border->margin

物品填充物包装盒盒子与盒子之间的间距

content:内容区域 width和height组成

padding:内边距(内填充)

只写一个值:30px(上下左右)

写两个值:30px 40px(上下、左右)

写四个值:30px 40px 50px 60px(上、右、下、左)

单一样式只能对应一个值:

padding-left

padding-right

padding-top

padding-bottom

margin:外边距(外填充 )

注：

背景色填充到margin以内(不包括margin区域)
文字在content区域添加
padding不能为负数，而margin可以为负数

box-sizing

box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值) | border-box

盒尺寸，可以改变盒子模型的展示形态。

默认值:content-box: width、height-->content

border-box：width、height-->content padding border

使用场景：

不用再去计算一些值
解决一些100%的问题

margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。(会取上下中值较大的作为叠加值)

解决方案：

BFC规范
想办法只给一个元素添加margin间距

margin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的

解决方案：

BFC规范
给父容器加边框
margin换成padding

扩展

margin左右自适应是可以的，但是上下自适应是不行的。margin:auto auto;
width、height不设置的时候，对盒子模型的影响,会自动去计算容器的大小，节省代码

标签分类

1.按类型：

block(块)：div、p、ul、li、h1...

1.独占一行

2.支持所有样式

3.不写宽的时候，跟父元素的宽相同

4.所占区域是一个矩形

inline(内联)：span、a、em、strong、img(特殊)...

1.挨在一起的

2.有些样式不支持，例如:width、height、margin(不支持上下)

3.所占的区域不一定是矩形

4.不写宽的时候，宽度由内容决定

5.内联标签之间会有空隙，原因:代码换行产生的（body(元素父容器)设置样式font-size:0，子容器重新设置font-size）

inline-block(内联块)：input、select...

1.挨在一起，支持宽高

2.所占区域是一个矩形

3.之间有空隙

注:布局一般用块标签，修饰文本一般用内联标签

2.按内容：

Flow:流内容

Metadata:元数据

Sectioning:分区

Heading:标题

Phrasing:措辞

Embedded:嵌入的

Interactive:互动的

(W3C:www.w3.org/TR/html5/do…)

3.按显示：

替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容

img、input ...

非替换元素:将内容直接告诉浏览器，将其显示出来

div、h1、p...

显示框类型

display:block inline inline-block none...

区别：

display:none 不占空间的隐藏 visibility:hidden 占空间的隐藏

标签嵌套规范

ul、li

dl、dt、dd

table、tr、td

块标签可以嵌套内联标签
块标签不一定能嵌套块标签 p标签不能
内联标签不能嵌套块元素

a标签是一个例外

溢出隐藏overflow

overflow:

visible:默认

hidden

scroll：滚动条

auto

X轴、Y轴：overflow-x、overflow-y:针对两个轴分别设置(overflow-x:scroll)

透明度opacity与手势cursor

opacity:0(透明)~1(不透明) 0.5(半透明)(整体透明)

注:占空间、所有的子内容也会透明

rgba():0~1(颜色透明)

注:可以让指定的样式透明，而不影响其他样式

cursor:手势

default:默认箭头

pointer:手型

move:移动的样式

help:帮助(问号)

要实现自定义手势:

准备图片: .cur、.ico

cursor:url(./img/cursor.ico)，auto;

被禁用状态：CSS：cursor:not-allowed;

html：<button disabled>

cursor的取值

url

url(…) 或者逗号分隔的 url(…), url(…), … 指向图片文件。用大于一个 url 值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 url 后备值。

x,y

可选 x，y坐标。两个小于32的无单位非负数。

常用的关键字值

常规用法

取值	作用
auto	浏览器根据当前内容决定指针样式
default	默认指针，通常是箭头
none	无指针被渲染

链接及状态

取值	作用
pointer	悬浮于连接上时，通常为手
progress	程序后台繁忙，用户仍可交互 (与 wait 相反)
wait	程序繁忙，用户不可交互 (与 progress 相反)；图标一般为沙漏或者表

选择

取值	作用
crosshair	交叉指针，通常指示位图中的框选
text	指示文字可被选中
vertical-text	指示垂直文字可被选中

拖拽

取值	作用
move	被悬浮的物体可被移动
not-allowed	不允许执行
grab	可抓取
grabbing	抓取中

grab 和 grabbing 在比较后期才被支持

重设大小及滚动

取值	作用
all-scroll	元素可任意方向滚动（平移）
col-resize	元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize	元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

缩放

取值	作用
zoom-out	指示可被缩小
zoom-in	指示可被放大

最大、最小宽高

min-width、min-height

max-width、max-height

%单位:换算 ->以父容器的大小进行换算

一个容器怎么适应屏幕的高:容器加height:100%; body:100%; html:100%;

CSS默认样式

没有默认样式的:div、span

有默认样式的:

body ->margin:8px

h1 ->margin:上下21.440px

font-weight:bold

p ->margin:上下16px

ul ->margin:上下16px padding：左10px

默认点list-style-type:disc

a ->text-decoration:underline;

CSS重置样式

简单的CSS reset：

*{margin:0;padding:0}
ul{list-style:none}
a{text-decoration:none;color:#666;}
img{display:block;}

*{margin:0;padding:0}
优点:不用考虑那些标签有默认的margin和padding
缺点:稍微的影响性能
body，p，h1，ul{margin:0;padding:0}

ul{list-style:none}

a{text-decoration:none;color:#999;}

img{display:block}
问题的现象:图片跟容器底部有一些空隙。
	     内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align:baseline;   基线对齐方式，默认值	
vertical-align:bottom	底线对齐
img{vertical-align:bottom;}解决方式是推荐的

常见的CSS reset:blog.csdn.net/brain_bo/ar…

写具体页面的时候或一个布局效果的时候：

1.写结构 2.css重置样式 3.写具体样式

png等图片切图流程

矩形选框选取区域，alt减选

ctrl+c

ctrl+n

ctrl+v

利用切片工具

右键可查看编辑

切片完直接导出

float浮动

文档流：文档流是文档中可显示对象在排列时所占用的位置。

flaot特性:加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值

left

right

none(默认)

float浮动：

只会影响后面的元素

内容默认提升半层。文字环绕效果，英文不行的话是因为英文要在style加一个英文的换行才行，不然默认是不换行 word-break:break-all;

默认宽根据内容决定

换行排列。要参考上一行最后一个的高度

主要给块元素添加，但也可以给内联元素添加

清除浮动

上下排列：clear属性，表示清除浮动的，left、right、both(给后者，让后者不受前者的浮动影响)

#box1{width:100px;height:100px;background:red;float:right};
#box2{widht:200px;height:200px;background:blue;clear:right}

嵌套排列：

固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。

父元素浮动：不推荐，因为父容器浮动也会影响后面的元素。

overflow:hidden(BFC规范)，如果有子元素想溢出，那么会受到影响(给父元素添加)

display:inline-block(BFC规范)，不推荐，父容器会影响到后面的元素(给父元素设置)

设置空标签：不推荐，会多添加一个标签。添加子元素的空标签，设置clear:both;

after伪类：推荐，是空标签的加强版，目前各大公司的做法.clear:after{content:'}添加的内容是内联的

(clear属性只会操作块标签，对内联标签不起作用)

(对父元素).clear:after{content:'';clear:both;display:block;}

background:url() repeat-x,url(); 多背景操作用逗号隔开，先写的在上面

position定位

position特性：css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值:

static(默认)

relative

absolute

fixed

sticky

relative相对定位

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流(要占据原本的位置)
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

absolute绝对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）(子绝父相)

fixed固定定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具有块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky黏性定位

在指定的位置，进行黏性操作（相对于窗口到达设定位置不动）

如果没有定位偏移量，对元素本身没有任何影响

div{position:sticky;top:0;}表示滑过了位置后往下会一直在顶部(导航栏)

粘性定位使用注意事项

父元素不能 overflow: hidden; 或者 overflow: auto; 属性。
必须指定 top、bottom、left、right 4个值之一，否则只会处于相对定位
父元素的高度不能低于 sticky 元素的高度
sticky 元素仅在其父元素内生效

z-index定位层级

默认层级为0

嵌套时候的层级问题，先比较相同级别元素的z-index,父元素没有的话，再比较子元素的(两元素重叠比较上下顺序)

CSS添加省略号

width:必须有一个固定的宽

white-space:nowrap:不让内容折行

overflow:hidden隐藏溢出的内容

text-overflow:ellipsis添加省略号

text-overflow

该属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

一般在容器的极限处进行截断。如果想在裁剪处显示空白符，可以使用 ('')。

这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联（inline）方向一致（比如内容在盒子的下方溢出时就不会生效）。文本可能在以下情况下溢出：当其因为某种原因而无法换行（例子：设置了 white-space:nowrap），或者一个单词因为太长而不能合理地被安置。

这个属性并不会强制“溢出”事件的发生，因此为了能让 text-overflow 能够生效，必须要在元素上添加几个额外的属性，比如将 overflow 设置为 hidden。

text-overflow 的取值

取值	作用
clip	默认值，这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 `text-overflow: ''`，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为 `text-overflow` 属性的值
ellipsis	这个关键字的意思是：用一个省略号来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断
字符串	用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断

white-space

该属性是用来设置如何处理元素中的空白。

取值	作用
normal	连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充行框盒子时是必要
nowrap	和 normal 一样，连续的空白符会被合并，但文本内的换行无效
pre	连续的空白符会被保留。在遇到换行符或者 `<br>` 元素时才会换行
pre-wrap	连续的空白符会被保留。在遇到换行符或者 `<br>` 元素，或者需要为了填充行框盒子时才会换行
pre-line	连续的空白符会被合并。在遇到换行符或者 `<br>` 元素，或者需要为了填充行框盒子时会换行
break-spaces	与 pre-wrap 的行为相同，除了：1. 任何保留的空白序列总是占用空间，包括在行尾 2. 每个保留的空格字符后都存在换行机会，包括空格字符之间 3. 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）

值的行为

取值	换行符	空格与制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

CSS Sprite

特性:CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

好处：

可以减少图片的质量，网页的图片加载速度快

减少图片的请求的次数，加快网页的打开

#box1{width:20px;height:21px;background:url(./sprite_icon.png) no-repeat left -596px}

CSS圆角

border-radius给标签添加圆角

圆:border-radius:50%;

border-radius:10px 20px;(左上角、右下角，右上角、左下角)

border-radius:10px 20px 30px 40px;(左上角，然后顺时针)

border-radius:20px/40px;(椭圆角，X方向:20px,Y方向:40px)

半圆：左上角和右上角为50%，其他角为0，调整高度

PC端的布局

通栏:自适应浏览器的宽度

版心:固定一个宽度，并且让容器居中

HTML+CSS系列教程二之溯本求源

HTML与XHTML区别

DOCTYPE文档及编码

元素大小写(div/DIV html允许，xhtml不允许)

属性布尔值

属性引号

图片的alt属性

单标签写法

双标签闭合

strong和b、em和i

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体

区别在于，strong和em是具备语义化的，而b和i是不具备语义化的。

strong、em、b、i与span一样同属于内联元素，可以用来表示span的功能，避免用class来表示的复杂场景

引用标签

blockquote:引用大段的段落解释

q:引用小段的短语解释

abbr:缩写或首字母缩略词

address:引用文档地址信息

cite:引用著作的标题

iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架(即行内框架)

可以引用其他的html到当前html中显示

主要是利用iframe的属性进行样式的调节

属性	含义
frameborder	规定是否显示框架周围的边框
width	定义iframe的宽度
height	定义iframe的高度
scrolling	规定是否在iframe中显示滚动条
src	规定在iframe中引入的URL
srcdoc	规定在iframe中显示的页面内容

<iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe>
srcdoc和src只能存在一个，两个同时存在时只会生效第一个，这里生效的是srcdoc
(只能显示h1的hello word，因为srcdoc在前面，不能显示淘宝)

iframe{width:100%;}
<iframe src="https://www.taobao.com" frameborder='0' scrolling="no"></iframe>

br与wbr

br标签表示换行操作，而wbr标签表示软换操作

提示:如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word Break Opportunity（单词换行时机）

pre与code

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

只应该在表示计算机程序代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

针对网页中的程序代码的显示效果

<pre>
	<code>
		&lt;!DOCTYPE html&gt;
		&lt;html  lang="en"&gt;
	</code>
</pre>

map与area

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。

area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。

给特殊图形添加链接，area能添加的热区的形状:矩形(rect)、圆形(circ)、多边形(poly)。

<img src="./img/star.jpg" alt="" usemap="#star">
<map name="star">
    <area shape(形状)="rect" coords(坐标)="285 83(左上角坐标) 386 173(右下角坐标)" href="https://www.taobao.com" alt="">
</map>

<img src="./img/star.jpg" alt="" usemap="#star">
 <map name="star">
     <area shape="circ" coords="300 130(圆形坐标) 50(半径)" href="" alt="">
</map>

<img src="./img/star.jpg" alt="" usemap="#star">
<map name="star">
    <area shape="poly" coords="385 99 233 150 256 250 172 197" href="" alt="">(坐标像钢笔的锚点)
</map>

embed与object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。

(给flash和一些插件进行渲染操作的标签)(移动端不支持flash)

<embed src="./img/flash.swf" type="">

object元素需要配合param元素一起完成

<object>
	<param name="movie" value="./img/flash.swf">
</object>

audio与video

引入音频与视频的标签，属于H5的新功能

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。

为了能够支持多个备选文件的兼容支持，可以配合source标签。

<audio src="" controls(控件) loop(循环) autoplay(自动播放)></audio>		引入音频

<video src="" controls></video>		引入视频

<video>
	<source src=""></source>
	<source src=""></source>
</video>
(解决浏览器因为视频格式的兼容问题，第一个文件不兼容会顺延下一个文件)

文字注解与文字方向

ruby标签定义ruby注释(中文注音或字符)，rt标签定义字符(中文注音或字符)的解释或发音。

ruby、rt这样一个组合

<ruby>
	寒<rt>han(输入法的拼音)</rt>
</ruby>

bdo标签可覆盖默认的文本方向

<p>
    <bdo dir="rtl(left to right)">爱神的箭</bdo>卡后端框架爱迪生
</p>

<!-- 或者 -->
span{direction:rtl;unicode-bidi:bidi-override;}
<p>
    <span>爱神的剑</span>卡后端框架爱迪生
</p>

古诗排列：浮动，宽度只能容纳一个字

扩展link标签

<link rel="stylesheeet" type="text/css" href="theme.css">
(引用外部css文件)

<link rel=""icon type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
(favicon.ico后缀比较固定，添加网址标题 栏前的小图标)

<link rel="dns-prefetch" href="//static.360buyimg.com">
(dns更快地访问网址，DNS预解析)

扩展meta标签

meta添加一些辅助信息

<meta name="description(描述)" content="大连美团……">
(界面没有效果，反应给计算机，为了更好地浏览器搜索)

<meta name="keywords(关键字)" content="大连美食">
(更好地浏览器搜索)

<meta name="renderer" content="webkit">
(渲染双内核，也可以自定义)

<meta http-equiv="X-UA-Compatible" content="ie=edge">
(让IE浏览器不同版本以最高的模式(最高的版本)进行渲染)

<meta name="renderer(刷新)" content="3"(秒数)>
(3秒后自动刷新)

<meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT">
(缓存处理)

HRML5新语义化标签

header：页眉

footer：页脚

main：主体

hgroup：标题组合

nav：导航

注：header、footer、main在一个网页中只能出现一次

article：独立的内容

aside：辅助信息的内容

section：区域

figure：描述图像

figcaption：描述图像或视频的标题部分

detalist：选项列表

details/summary 文档细节/文档标题

progress/meter：定义进度条/定义度量范围

time：定义日期或时间

mark：带有记号的文本

输入框提示内容
<input type="text" list="elems">
<detalist id="elems">
	<option value='a'></option>
    <option value='ab'></option>
    <option value='abc'></option>
    <option value='abcd'></option>
    <option value='apple'></option>
</detalist>

<progress min="0" max="10" value="8"></progress>
<meter min="0" max="100" value="35" low="10" (最小) high="60"(最大)></meter>

details/summary用法:
<details open>
	<summary>HTML</summary>
	<p>超文本标记语言</p>
</details>

progress/meter用法:
<progress min="0" max="10" value="8"></progress>
	<meter min="0" max="100" value="80" low="10" hight="60"></meter>
	(value与low、hight比较会发生颜色变化)

表格扩展

添加单线: border-collapse:collapse(CSS)

隐藏空单元: empty-cells:hide(CSS)

斜线分类: border/rotate

列分组: colgroup/col

直接对列进行操纵
<colgroup>
	<col span="2" style="bakcground:red;">
	<col span="2" style="background:yellow">
</colgroup>

表单扩展

美化表单控件

label + : checked 2. position+opcity

label input{display:none;}
label input:checked + div{background-position:.0,0;}
label div{width:28px;height:28px;background:url:('./img/checkbox.png') 0 -28px;}


<label>
	<input type="checkbox">
	<div></div>
</label>

label input{display:none;}
label div{width:86px;height:34px;background:url('./img/upload.png');}


<label>
	<input type="checkbox">
	<div></div>
</label>

新的input控件

email: 电子邮件地址输入框

url: 网址输入框

number: 数值输入框

range: 滑动条 (min="" max="" value="")

date/month/week: 日期控件

search: 搜索框

color: 颜色控件

tel: 电话号码输入框 (在移动端默认调起数字键盘)

time: 时间控件

新的表单属性

autocomplete: 自动完成 (autocomplete="off"取消下拉提示，默认是on)

autofocus: 获取焦点(autofocus 添加光标)

required: 不能为空(输入框内容为空不能提交)

pattern: 正则验证(pattern="\d+"表示只能输入数字；pattern="[a-z]+"表示只能输入字母)

method: 数据传输方式(method="GET"不安全，可作为查询;POST安全)

enctype: 数据传输类型(文件和数据流的转换)

name/value: 数据的键值对

扩展标签

fieldset: 表单内元素分组

legend: 为fieldset元素定义标题

optgroup: 定义选项组()

<fieldset>
    	<legend>
            登录
    	</legend>
    	<p>
            用户名：<input type="text">
    	</p>
    	<p>
            密码：<input type="password">
   		</p>
</fieldset>

<select name="" id="">
    <optgroup label="水果"></optgroup>
    <option value=''>苹果</option>
    <option value=''>苹果</option>
    <option value=''>苹果</option>
    <optgroup label="蔬菜"></optgroup>
    <option value="">黄瓜</option>
    <option value="">黄瓜</option>
    <option value="">黄瓜</option>
</select>

BFC规范

Formatting context(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC即Block Formatting Contexts(块级格式化上下文)，它属于上述中的一种规范。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题

触发BFC

浮动元素:float除none以外的值

绝对定位元素:position(absolute、fixed)

display为inline-block、table-cells、flex

overflow除了visible以外的值(hidden、auto、scroll)

BFC特性及应用

解决margin叠加问题解决margin传递问题解决浮动问题解决覆盖问题

浏览器前缀

浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀

浏览器	内核	前缀
IE	Trident	-ms-
Firefox	Gecko	-moz-
Opera	Presto	-o-
Chrome	Webkit	-webkit-
safari	Webkit	-webkit-
Opera、Chrome	Blink

浏览器内核

浏览器内核是指浏览器最核心的部分，负责对网页语法的解释并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器	内核	前缀名
Chrome	WebKit	webkit-
Safari	WebKit	webkit-
Firefox	Gecko	-moz-
IE	Trident	-ms-
Opera	Presto	-o-

Trident 内核代表产品Internet Explorer，又称其为 IE 内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用 Trident 渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等。
Gecko 内核代表作品 Mozilla FirefoxGecko 是一套开放源代码的、以 C++ 编写的网页排版引擎。Gecko 是最流行的排版引擎之一，仅次于 Trident。使用它的最著名浏览器有 Firefox、Netscape 6 至 9。
WebKit 内核代表作品 Safari、Chromewebkit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有 Safari 和 Google 的浏览器 Chrome。
Presto 内核代表作品 OperaPresto 是由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0 及以上使用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。

transition过渡

transition--property:规定设置过渡效果的CSS属性的名称。 width、all

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-delay:定义过渡效果何时开始(延迟(数值为正数)提前(数值为负数))

transiton-timing-function:规定速度效果的速度曲线

linear(匀速)

ease(逐渐慢下来)(默认)

ease-in(加速)

ease-out(减速)

ease-in-out(先加速后减速)

cubic-bezier(.49,-0.75,.88,1.74)(cubic-bezier.com)

注:不要加到hover上

可以复合写法，transition:1s 2s(延迟) linear;

transform变形

translate: 位移

translateX

translateY

translateZ(3d)

.box1:hover .box2{transform:translate(100px,0)}

scale: 缩放(值是一个比例值，正常大小是1，会已当前元素中心点进行缩放) scaleX

scaleY

scaleZ(3d)

.box1:hover .box2{transform:scale(2,2);/tramsform:scale(2)}

rotate: 旋转(旋转的值，单位是角度 deg 弧度 rad)

rotateX(3d)

rotateY(3d)

rotateZ(和rotate是等级关系，正值按顺时针旋转，负值按逆时针旋转)

.box1:hover .box2{transform:rotate(45deg);}

skew: 斜切

skewX(单位也是角度，正值向左斜切，负值向右倾斜)

skewY

.box1:hover .box2{transform:skew(30deg,0);}

transform的注意事项:

变形操作不会影响到其他元素
变形操作只能添加给块元素，但是不能添加给内联元素
复合写法，可以同时添加多个变形操作

执行是有顺序的，先执行后面的操作，在执行前面的操作，用空格隔开

translate会受到rotate、scale、skew的影响
transform-origin:基点的位置

x y z(3d)

transform:translate(100px,0) scale(.5)

transform-origin:0 0;

transform-origin：CSS 属性让你更改一个元素变形的原点。

在hover隐藏或者显示时给过渡效果，控制最后消失的位置可以使用

animation动画

animation-name:设置动画的名字(自定义)

animation-duration:动画的持续时间

animation-delay:动画的延迟时间

animation-iteration-count:动画的重复次数，默认值就是1，infinite无限次数

animation-timing-function:动画的运动形式

复合写法:animation:myBox 4s(持续时间) 2s(延迟时间) infinite linear;

注：

运动结束后，默认情况下会停留在起始位置
@keyframes:from -->0% , to-->100%

.box1 {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: 20px auto;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: MyBox;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }

    @keyframes MyBox {
      0% {
        transform: translate(0, 0);
      }

      25% {
        transform: translate(200px, 0)
      }

      50% {
        transform: translate(200px, 200px)
      }

      75% {
        transform: translate(0, 200px);
      }

      100% {
        transform: translate(0, 0);
      }
    }



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

复合写法：animation:myBox 4s 2s infinite linear;

animation-fill-mode:规定动画播放之前或之后，其动画效果是否可见

none(默认值):在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效

backwards:在延迟的情况下，让0%在延迟前生效

forwards:在运动结束的之后，停到结束位置

both:backwards和forwards同时生效

animation-direction:属性定义是否应该轮流反向播放动画

alternate:一次正向(0%->100%)，一次反向(100%~0%)

reverse:永远都是反向，从100%~0%

normal(默认值):永远都是正向，从0%~100%

animate.css

一款强大的预设CSS3动画库

官方网站:daneden.github.io/animate.css…

基本使用: animated:基类(基础的样式，每个动画效果都需要加) infinite:动画的无限次数

transform3D相关属性

rotateX():正值向上翻转

rotateY():正值向右翻转

translateZ():正值向前，负值向后

scaleZ():立体元素的厚度

3d写法

scale3d()：三个值x y z

translate3d()：三个值x y z

rotate3d():四个值0|1(x值是否添加旋转角度), 0|1(y轴是否添加旋转角度) ,0|1(z轴是否添加旋转角度) ,deg

transform:rotate3d(0,0,1,30deg)//只对z轴旋转30度

perspective:(景深)离屏幕多远的距离去观察元素，值越大幅度越小(加在父元素)

perspective-origin:景深-基点位置，观察元素的角度

transform-origin:x y z；(Z轴只能写数值，不能写单词)

transform-style:3D空间(添加厚度必须添加)

flat(默认值2d)、preserve-3d(3d，产生一个三维空间)

backface-visibility:背面隐藏

hidden、visible(默认值)

立方体：

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

    ul {
      list-style: none;
    }

    .box {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: 20px auto;
      perspective: 200px;
    }

    .box ul {
      width: 100px;
      height: 100px;
      margin: 100px;
      position: relative;
      transition: 2s;
      transform-style: preserve-3d;
      transform-origin: center center -50px;
    }

    .box ul li {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      position: absolute;
      color: white;
    }

    .box ul li:nth-child(1) {
      background-color: red;
      left: 0;
      top: 0;
    }

    .box ul li:nth-child(2) {
      background-color: blue;
      left: 100px;
      top: 0;
      transform-origin: left;
      transform: rotateY(90deg);
    }

    .box ul li:nth-child(3) {
      background-color: pink;
      right: 100px;
      top: 0;
      transform-origin: right;
      transform: rotateY(-90deg);
    }

    .box ul li:nth-child(4) {
      background-color: skyblue;
      top: -100px;
      left: 0;
      transform-origin: bottom;
      transform: rotateX(90deg);
    }

    .box ul li:nth-child(5) {
      background-color: green;
      top: 100px;
      left: 0;
      transform-origin: top;
      transform: rotateX(-90deg);
    }

    .box ul li:nth-child(6) {
      background-color: gray;
      left: 0;
      top: 0;
      transform: translateZ(-100px) rotateY(180deg);
    }

    .box:hover ul {
      transform: rotateY(180deg);
    }
  </style>

3d相册

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

    ul {
      list-style: none;
    }

    img {
      display: block;
    }

    .parsent {
      width: 600px;
      height: 300px;
      margin: 30px auto;
      border: 1px solid black;
      perspective: 700px;
    }

    .parsent ul {
      width: 128px;
      height: 94px;
      margin: 100px auto;
      position: relative;
      transform-style: preserve-3d;
      transition: 2s;
    }

    .parsent ul li {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .parsent ul li:nth-child(1) {
      transform: rotateY(0deg) translateZ(200px);

    }

    .parsent ul li:nth-child(2) {
      transform: rotateY(60deg) translateZ(200px);
    }

    .parsent ul li:nth-child(3) {
      transform: rotateY(1200deg) translateZ(200px);
    }

    .parsent ul li:nth-child(4) {
      transform: rotateY(180deg) translateZ(200px);
    }

    .parsent ul li:nth-child(5) {
      transform: rotateY(240deg) translateZ(200px);
    }

    .parsent ul li:nth-child(6) {
      transform: rotateY(360deg) translateZ(200px);
    }

    .parsent:hover ul {
      transform: rotateY(360deg);
    }
  </style>


<div class="parsent">
    <ul>
      <li>
        <img src="./imgs/1.jpg" alt="">
      </li>
      <li>
        <img src="./imgs/2.jpg" alt="">
      </li>
      <li>
        <img src="./imgs/3.jpg" alt="">
      </li>
      <li>
        <img src="./imgs/4.jpg" alt="">
      </li>
      <li>
        <img src="./imgs/5.jpg" alt="">
      </li>
      <li>
        <img src="./imgs/6.jpg" alt="">
      </li>
    </ul>
  </div>

背景扩展

background-size:背景图的尺寸大小(可以给数组，第一个是宽，第二个是高)

cover:覆盖(图片长宽都要涉及)

contain:包含(只用涉及其中一边，可以有空白区域)

background-origin:背景图的填充位置

padding-box(默认)

border-box

content-box

background-clip:背景图的裁切方式

padding-box

border-box(默认)

content-box

注:复合样式的时候，第一个是位置，第二个是裁切

background-clip

background-clip 属性设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

如果没有设置背景图片或背景颜色，那么这个属性只有在边框被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则本属性产生的样式变化会被边框覆盖。

background-clip 的取值

取值	作用
border-box	背景延伸至边框外沿（但是在边框下层）
padding-box	背景延伸至内边距（`padding`）外沿，不会绘制到边框处
content-box	背景被裁剪至内容区（`content box`）外沿
text	背景被裁剪成文字的前景色

CSS3渐变

linear-gradient:线性渐变(是值，需要添加到background-image属性上）

point(角度) || angle(比例)

color

percentage

注:渐变的0度是在页面下边，正值按顺时针旋转，负值按逆时针旋转

background-image:linear-gradient(red,blue,green)
background-image:linear-gradient(to right, red,blue,green)
background-image:linear-gradient(to right bottom, red,blue,green)
background-image:linear-gradient(45deg, red,blue,green)

background-image:linear-gradient(red 25%,blue 75%)	//红色从25%的时候开始向蓝色过渡，过渡到75%,75%以后就全是蓝色

radial-gradient:径向渐变

point

color

percentage

background-image:radial-gradient(red,blue,green);
background-image:radial-gradient(red 25%,blue 75%,green 100%);

background: radial-gradient(circle at top center, #718497, #29323c);
<!-- 指定渐变中心为top -->

字体图标

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

好处：

可以非常方便的改变大小和颜色
放大后不会失真
减少请求次数和提高加载速度
简化网页布局
减少设计师和前端工程师的工作量
可使用计算机没有提供的字体

使用:@font-face语法

向.woff等文件都是做兼容平台处理的，mac、linux等

阿里巴巴矢量图标库：www.iconfont.cn:提供了大量免费的字体图标

自定义字体图标：icomoon.io/app：在线生成字体图标

文字阴影

text-shadow:文字阴影

(x y blur(模糊程度) color)

注：

阴影的默认颜色是跟文字的颜色相同
通过逗号的方式进行分割，可以设置多阴影

text-shadow:10px(右) 10px(下) 10px(模糊程度) blue , -10px -10px 10px green;

div{font-size:60px;color:red;text-shadow:0 0 4px white,0 -5px 4px #ff3 , 2px -10px 6px #fd3,-2px -15px #f80,2px -25px 18px #f20;}
火焰字效果

盒子阴影

box-shadow:盒子阴影

(x y blur(模糊程度) spread(模糊范围) color inset )

注：

盒子阴影的默认颜色是黑色
默认是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影

box-shadow:10px 10px 10px 5px blue,10px 10px 10px 5px green inset;

图片划入浮动效果

li:{float:left; margin:50px;cursor:pointer;position:relative;top:0;transition:.5s;border-radius:3px}
li:hver{top:-3px;box-shadow:0px 5px 10px 3px #ccc;}

box-shadow

该属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。如果元素同时设置了 border-radius 属性，那么阴影也会有圆角效果。多个阴影在 Z 轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。若要对同一个元素添加多个阴影效果，需要使用逗号将每个阴影规则分隔开。

box-shadow 的取值

box-shadow 可以给出两个、三个或四个 length值。如果只给出两个值, 那么这两个值将会被当作 offset-x, offset-y 来解释。如果给出了第三个值, 那么第三个值将会被当作 blur-radius 解释。如果给出了第四个值, 那么第四个值将会被当作 spread-radius 来解释。
inset 关键字，可选。
color 值，可选。

取值	作用
inset	如果没有指定inset，阴影会向外扩散。使用 inset 关键字会使得阴影落在盒子内部，此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
offset-x, offset-y	设置阴影偏移量。 `offset-x` 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。`offset-y` 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。如果两者都是0，那么阴影位于元素后面。这时如果设置了`blur-radius` 或 `spread-radius` 则有模糊效果。
blur-radius	第三个长度值，值越大，模糊面积越大，阴影就越大越淡。不能为负值，默认为0，此时阴影边缘锐利。对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊，以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。
spread-radius	第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
color	如果没有指定，则由浏览器决定。

当 x-offset, y-offset, blur 都是0，盒子阴影将是一个四边都是一样长度的带有颜色的 outline。当设置了多个阴影时，阴影绘制由最后一个开始，故第一个设置的阴影将覆盖在后设置的阴影之上。当 border-radius 为默认值0时, 阴影的四角将没有弧度；而当 border-radius 不为0的值时，阴影的四角也随之形成弧度。

我们通常在元素上增加一个大小为最大阴影宽度的 margin 值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的 border 上。box-shadow 属性不会影响到盒模型的构成。

text-shadow

text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

当阴影大于一个时要用逗号区别开阴影之间的参数，阴影应用的顺序为从前到后，第一个指定的阴影在顶部。每个阴影都有两到三个长度参数，以及一个与阴影颜色相关的颜色参数。前两个长度参数，是以“文字中心”为原点的坐标轴，分别为 X 轴（offset-x）和 Y 轴（offset-y）的值；如果有第三个长度参数，则第三个数为形成阴影效果的半径的数值 blur-radius。

text-shadow 的取值

取值	作用
color	可选值，可以在偏移量之前或之后指定。如果没有指定颜色则用户代理自行选择的颜色
offset-x, offset-y	必选值。这些长度值指定阴影相对文字的偏移量。`offset-x` 指定水平偏移量，若是负值则阴影位于文字左边。`offset-y` 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了 `blur-radius` 则会产生模糊效果)
blur-radius	可选值。这是长度值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡

mask遮罩

mask:遮罩

(url('') no-repeat x y(位置) / w h(大小))

多遮罩

遮罩的图片，实体区域可以显现，透明区域不显示

注：

mask目前还没有标准化，所以需要添加浏览器前缀
默认是x、y都平铺

.mask{width:300px;height:300px;background:url('./ing/girl.jpg');-webkit-mask:url('./img/love.png') no-repeat 100px 100px(位置)/ 200px 200px(指定大小)}


-webkit-mask:url('') no-repeat center center /200px 200px;(hover时可以从中心改变大小)


多遮罩
-webkit-mask:url('./img/car.png') no-repeat center center / 200px 200px , url('./img/love.png') no-repeat left center / 100px 100px ,url('./img/love.png') no-repeat right center / 100px 100px;

box-reflect倒影

box-reflect:倒影

above(上)

below(下)

left(左)

right(右)

距离

遮罩 | 渐变

利用scale为-1实现翻转效果

渐变:只是针对透明度的渐变，不能支持颜色的渐变

.box{margin:50px auto; width:300px;-webkit-box-reflect:below 20px url('./img/love.png')(遮罩)}
.box{margin:50px auto; width:300px;-webkit-box-reflect:below 20px linear-gradient(rgba(255,255,255,0) 50%,rgba(255,255,255,1));}

.box{margin:50px auto;width:300px;transform:scale(-1);}

模糊blur与计算calc

blur模糊

filter:blur()

calc计算

四则运算

img{filter:blur(20px);(模糊程度)}

width:calc(100% - 100px);

分栏布局

column-count:分栏的个数

column-width:分栏的宽度

column-gap:分栏的间距

column-rule:分栏的边线

column-span:合并分栏

注：column-width和column-count不要一起设置

.box{width:60px;height:400px;border:1px black solid;margin:30px auto;
	column-count:4
	/*  */
}

伪类与伪元素

在CSS2.1中队伪类和伪元素的区别比较模糊。CSS3中对这两个概念做了相对较清晰地解释，并且在语法上也做了很明显地区分。

CSS3中规定伪类由一个冒号开始，然后为伪类的名称;伪元素由两个冒号开始，然后为伪元素的名称

伪类本质上是为了弥补常规CSS选择器的不足，以便获取更多信息。通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。

:hover

:focus

:empty

...

伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包括任何DOM元素，但是可以包括内容。另外，开发者还可以为伪元素定制样式。

::selection ::first-line/first-letter ::before/after

...

.box::selection{background:red;color:yellow}选中改变样式

CSS Hack

CSS Hack用来解决浏览器的兼容性问题，为不同版本分浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。

IE浏览器调试：IEtest

Hack分类

CSS属性前缀法
选择器前缀法
IE条件注释法

CSS属性前缀法：属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果

前缀标识	兼容浏览器
_	IE6及以下
+、*	IE6、IE7
\9	IE6、IE7、IE8、IE9
\0	IE8、IE9、IE10、IE11

background:red; _background:blue

background:red;background:blue\9;

选择器前缀法：选择器前缀法是针对一些页面表现不一致或者需要对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack

前缀标识	兼容浏览器
*html	IE6
*+html	IE7
:root	IE9以上及现代浏览器

*html .box{width:100px}
:root .box{}

IE条件注释法

这种方式是IE浏览器专用的Hack方式，微软官方推荐使用的hack方式

前缀标识	兼容浏览器
	IE
	IE7
	IE7以下
	非IE7

IE10以上已经不支持注释法

<!--[if IE]>
<div class=''></div>
<![endif]-->

IE低版本BUG

由于旧浏览器在设计上有很多缺陷，导致一些BUG的产生，所以针对这些问题需要做出兼容处理

常见兼容问题

透明度(opacity:0.5 IE8及以下不识别，解决:filter:alpha(opacity=50);)
双边距(加了浮动，加了margin，并且是个块，就会加两次margin，解决方案：_display:inline;(IE6的))
最小亮度(IE6最小高度19px，解决方案：overflow:hidden;)
图片边框(解决：border:none;)

渐进增强与优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

网页布局扩展

等高布局

利用margin-bottom:-2000px(负值);和padding-bottom:2000px;这时就是靠内容撑开布局

三列布局，左右固定，中间自适应

BFC方式
定位
浮动(双飞翼布局、圣杯布局)

margin负值
flex弹性

HTML+CSS系列教程三之风生水起

Flex弹性模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。

2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能(一维布局)

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从上往下

取值	含义
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行。当方向和row属性值是反的
column	显示为列
column-reverse	显示为列。当方向和column属性值是反的

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示

取值	含义
nowrap	默认值，表示单行显示，不换行
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面

注：当子元素的整体宽度大于父容器的宽度时，会自行调节

宽度会改变，不会溢出，当宽度达到最小值之后才会移除

flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开

flex-flow:column wrap;

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式

取值	含义
flex-start	默认值，表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分分配
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式

取值	含义
stretch	默认值，flex子项拉伸
flex-start	表现为容器顶部对齐
flex-end	表现为容器底部对齐
center	表现为垂直居中对齐

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的

取值	含义
stretch	默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start	表现为起始位置对齐
flex-end	表现为结束位置对齐
center	表现为居中对齐
space-between	表现为两端对齐
space-around	每一行元素上下都享有独立不重叠的空白空间
space-evenly	每一行元素都完全上下等分

作用在flex子项上的css属性

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值为0，值大往后
flex-grow	属性中的grow是扩展的意思，扩展的就是fle子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空间间隙。默认值为0，为1的话是剩余的空间全部沾满
flex-shrink	属性中的shrink是“收缩的意思”，flex-shrink主要处理当flex容器空间不足的时候，某个元素的收缩比例。默认值是1，0表示不收缩
flex-basis	flex-basis定义了在分配剩余空间之前元素的默认大小
flex	flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self	align-self指控制单独某一个flex子项的垂直对齐方式

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上	作用在grid子项上
grid-template-columns	grid-column-start
grid-template-rows	grid-column-end
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
place-items	place-self
justify-content
align-content
place-content

grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)

有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作

.box{width:300px;height:300px;border:1px gray dotted;display:grid;
grid-template-rows:1fr 1fr 1fr;
grid-template-columns:1fr 1fr 1fr;
}
或者
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);

grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区

grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写

.box2{width:300px;height:300px;border:1px gray dotted;display:grid;
grid-template-rows:repeat(3,1fr);
grid-template-columns:repeat(3,1fr);
grid-template-areas:
    "a1 a1 a1"
    "a2 a2 a3"
    "a2 a2 a3";
}
.box2 div{background:red;border:1px black solid;}
.box2 div:nth-child(1){grid-area:a1;}
.box2 div:nth-child(2){grid-area:a2;}
.box2 div:nth-child(3){grid-area:a3;}


<div class=box2>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;

grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸

CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写

grid-column-gap:10px;
grid-row-gap:20px;

grid-gap:20px(行间距) 10px(列间距);

justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充
Start	表现为容器左侧或顶部对齐
end	表现为容器右侧或底部对齐
center	表现为水平或垂直居中对齐

place-items:start(纵向) end(横向);

justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充
start	表现为容器左侧或顶部对齐
end	表现为容器右侧或底部对齐
center	表现为水平或垂直居中对齐
space-between	表现为两端对齐
space-around	享有独立不重叠的空白空间
space-evenly	平均分配空白空间

作用在grid子项上的css属性

取值	含义
grid-column-start	水平方向上占据的起始位置
grid-column-end	水平方向上占据的结束位置。(span属性)
grid-row-start	垂直方向上占据的起始位置
grid-row-end	垂直方向上占据的结束位置。(span属性)
grid-column	grid-column-start+grid-column-end的缩写
grid-row	grid-row-start+grid-row-end的缩写
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法
justify-self	单个网格元素的水平对齐方式
align-self	单个网格元素的垂直对齐方式
place-self	align-self和justify-self的缩写

grid-column-start:2;
grid-column-end:3;
grid-row-start:2;
grid-row-end:3;

span表示占格子的个数
grid-column-start:2;
grid-column-end:3;
grid-row-start:2;
grid-row-end:span 2;


grid-column:2/3;
grid-row:2/span 2;

grid-area:3(横向起始)/2(纵向起始)/4(横向结束)/4(纵向结束);

第一个值是水平的起始位置，第二个值是垂直的起始位置，第三个值是水平的结束位置，第四个值是垂直的结束位置

grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";

div:nth-child(2){grid-area:a3;}
div:nth-child(3){grid-area:a7;}
div:nth-child(4){grid-area:a9;}

移动端

Viewport视口

在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为，visual viewport (可视视口)和layout viewport(布局视口)。

visual viewport固定大小跟屏幕大小相同，在上面，而layout viewport可改变大小，在下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取

现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport设置

通过标签进行设置，name属性指定viewport值，content属性进行视口配置

取值	含义
width	设置layout viewport的宽度特定值，device-width表示设备宽
height	设置layout viewport的高度特定值，一般不进行设置
initial-scale	设置页面的初始缩放
minimum-scale	设置页面的最小缩放
maximum-scale	设置页面的最大缩放
user-scalable	设置页面能否进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">

移动端适配方案

百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯
等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团

流式布局原则

好处：大屏幕下显示更多内容

坏处：宽屏下比例会有一些不协调

rem布局

单位：

em：是一个相对单位，1em等于当前元素或父元素的font-size值(当前元素没有font-size则找父元素的font-size)

rem：是一个相对单位，1rem等于根元素(html)的font-size的值

vw/vh：把屏幕分为100份，1vw等于屏幕宽的1%

iphone 375 1vw -> 3.75

iphone plus 414 1vw -> 4.14

动态设置font-size：

通过JS

<script>
var fontsize = document.documentElement.clientWidth / 3.75;
document.documentELement.style.fontSize=fontsize + 'px';
 </script>

扩展px to rem—> 配置扩展设置—> 输入想得到的px，在后面alt+z，自动换算为rem

通过vw

html{font-size:26.66667vw;}

注：要给body重置一下font-size:16px

响应式布局

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局

媒体类型

取值	含义
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备

常见选项

媒体类型

and、not

min-width、max-width

orientation:portrait、orientation:landscape

@media all and (min-width:500px){
    #box{background:blue;}
}
小于500px不会触发该样式，只有大于500px才会触发

@media all and (min-width:500px) and (max-width:700px){
    #box{background:blue;}
}
在500~700之间才会触发

@media not and (min-width:500px){
    #box{background:blue;}
}
not是取反的意思



@media all and (orientation:portrait){
    #box{background:blue;}
}
竖屏显示
@media all and (orientation:landscape){
    #box{background:blue;}
}
横屏显示


<link rel="stylesheet" href="base.css" media="all and (min-width:400px)">
只有满足了media中的条件才会触发base.css

常见修改样式：

display

float

width

注：响应式代码写到要适配的css后面

Bootstrap

Bootstrap是最受欢迎的HTML、CSS和JS框架，用来开发响应式布局、移动设备优先的WEB项目

特色：

响应式布局
基于flex的栅格系统
丰富的组件和工具方法
常见交互使用

官网：getbootstrap.com/

Containers

container

container-fluid

Responsive breakpoints

Grid system

Grid options 网格配置

Responsive classes 响应式的class

Gutters 间距

Alignment 对齐方式

Reordering 排序

Offsetting 间距

...

响应式适配:sm、md、lg、xl

col-sm的意思是在大于576px时是横向排列，小于时是竖列排列

去掉默认的margin和padding的class：no-gutters

mr-auto：margin-right:auto

mt-5：margin-top:5rem;

mt-md-5：margin-top:5rem;md响应式范围内添加

mx-5：margin-left:5rem;margin-right:5rem;

my-5：margin-top：5rem;margin-bottom:5rem;

mt-n5：margin-top:-5rem;

py-5：padding-top:5rem;padding-bottom:5rem;

Content

Reboot 重置默认样式

Typography 设备

Code 输出代码

Images 图片

Tables 表格

Figures 图片描述

...

text-center：{text-align:center;}

position-absolute：{position:absolute;}

float-left：{float:left;}

overflow-hidden：{overflow:hidden;}

float-md-left

Components

Alerts 弹出提示

Badge 徽章

Breadcrumb 面包屑

Buttons 按钮

Button group 按钮组

Card 卡片

...

Utilities

Borders 边框

Clearfix 清浮动

Close icon

Colors

Display

Embed

...

其他

d-none d-md-block：表示在pc端显示，在移动端不显示

d-flex：表示变成flex布局

HTML+CSS系列教程四之巧夺天工

Sass和Less

Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作

官网地址：lesscss.org/

VSCode插件：Easy LESS

.less

官网地址：sass-lang.com/

VSCode插件：Easy Sass

.sass(老式写法)/.scss

语法

注释

//单行注释，不会被编译出来
/*
	多行注释，就是css的注释方式，会被编译出来，会在css文件显示
*/

变量

less

@number:123px;
.box2{
    width:@number;
    height:@number;
}

sass

$number:123px;
.box2{
    width:$number;
    height:$number;
}

插值

less

@key:margin;
@i:3;
.box@{i}{
    @{key}:auto;
}

.css
.box3{
    margin:auto;
}

sass

$key:margin;
$i:2;
.box#{$i}{
    #{$key}:auto;
}

作用域

less

@number:123px;
.box3{
    height:@number;
    @number:456px;
    width:@number;
}


.css
.box3{
    height:456px;
    width:456px;
}

sass

$number:123px;
.box3{
    height:$number;
    $number:456px;
    width:$number;
}
//sass的作用域是有顺序的


.css
.box3{
    height:123px;
    width:456px;
}

选择器嵌套

less、sass

ul{
	list-style:none;
    li{
        float:left;
        div{margin:10px;}
        p{margin:20px;}
    }
}

伪类嵌套

less,sass

ul{
    &:hover{
        color:red;
    }
}

.css
ul:hover{
    color:red;
}

属性嵌套

less没有属性嵌套的写法

sass

ul{
    font:{
		size:10px;
        weight:bold;
        family:宋体;
    }
}

运算

less

@num:100px;
.box4{
    width:@num*3;
    height:@num+10em;
    margin:10em+@num;
    font:20px / 1.5;
    padding:20px/1.5;
    padding:~"20px/1.5";
    color:#010203*2;
}




.css
.box4{
    width:300px;
    height:110px;
    margin:110em;
    font:20px /1.5;
    padding:13.3333333px;
    padding:20px/1.5;
    color:#020106;
}

sass

$num:100px;
.box4{
    width:$num*3;
    //Sass中如果单位不同的话，是不能运算
    //height:$num+20em;
    font:20px/1.5;
    padding:20px/1.5;
    //默认 / 是分割的操作
    padding:(20px/1.5);
    color:#010203*2;
}



.css
.box4{
    width:300px;
    font:20px/1.5;
    padding:20px / 1.5;
    padding:13.33333px;
    color:#020406;
}

函数

less，sass(有些不一样)

.box5{
    width:round(3.4px);
    height:percentage(0.2);
}


.css
.box5{
    width:3px;
    height:20%;
}


自定义函数
@function sum($n,$m){
    @return $n + $m;
}

混入

less

.show{
    display:block;
}
/*
.hide(){
    display:none;
}
*/
.hide(@color){
    display:none;
    color:@color;
}
.box6{
    width:100px;
    .show;
    //.hide();
    .hide(blue);
}



.css
.show{
    display:block;
}
.box6{
    width:100px;
    display:block;
    display:none;
    color:blue;
}

sass

@mixin show{
    display:block;
}
@mixin hide($color){
    display:none;
    color:$color;
}

.box6{
    width:100px;
    @include show;
    @include hide(red);
}


.box6{
    width:100px;
    display:block;
    display:none;
    color:red;
}

命名空间(less)

#nm(){
    .show{display:inline-block;}
}
.box7{
    #nm.show;
}


.css
.box7{
    display:inline-block;
}

继承

less

.line{
    display:inline;
}
.box7{
    &:extend(.line);
}
.box8{
	&:extend(.line);
}



.css
.line, .box7, .box8{
    display:inline;
}

sass

.line{
    display:inline;
}
.box7{
    @extend .line;
}
.box8{
    @extend .line;
}





.css
.line, .box7, .box8{
    display:inline;
}


//可不用生成.line样式
%line{
    display:inline;
}
.box7{
    @extend %line;
}
.box8{
    @extend %line;
}


.css
.box7, .box8{
    display:inline;
}

合并

less

.box9{
    background+ : url(a.png);
    background+ : url(b.png);
    transform+_ : scale(2);
    transform+_ : rotate(30deg);
}




.css
.box9{
    background:url(a.png),url(b.png);
    transform:scale(2) rotate(30deg);
}

sass

$background:(
	a:scale(2),
    b:rotate(30deg)
);
$transform:(
	a:scale(2),
    b:rotate(30deg)
)
    
.box9{
	background:map-values($background);
    transform:zip(map-values($transform)...);
}
    
    
    
    
    
    
.css
.box9{
    background:url(a.png),url(b.png);
    transform:scale(2) rotate(30deg);
    }

媒体查询

less,sass

.box10{
    width:100px;
    @media all and (min-width : 768px){
        width:600px;
    }
    @media all and (min-width: 1440px){
        width:900px;
    }
}




.css
.box10{
    width:100px;
}
@media all and (min-width:768px){
    .box10{
		width:600px;	
    }
}
@media all and (min-width:1440px){
    .box10{
        width:900px;
    }
}

条件

less

@count:5;

.get(@cn) when (@cn > 4){
    width:100px + @cn;
}
.get(@cn) when (@cn < 4){
    width:10px + @cn;
}
.box11{
    .get(@count);
}






.css
.box11{
	width:105px;
}

sass

$count:5;
.box11{
    @if($count > 4){
        width:100px + $count;
    }
    @else{
        width:10px + $count;
    }
}





.css
.box11{
    width:105px;
}

循环

less

@count2: 0;
.get(@cn) when (@cn < 3){
    .get2((@cn+1));
    .box-@{cn}{
        width:100px + @cn;
    }
}


.get2(@count2);







.css
.box-2{
    width:102px;
}
.box-1{
    width:102px;
}
.box-0{
    width:102px;
}

sass

@for $i from 0 through 2{
    .box-#{$i}{
        width:100px + $i;
    }
}





.css
.box-0{
    width:100px;
}
.box-1{
    width:101px;
}
.box-2{
    width:102px;
}

导入

less,sass

@import './reset.less';

PostCSS

PostCSS本身是一个功能比较单一的工具。它提供了一种方式用Javascript代码来处理CSS。利用PostCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等。

官方网址：postcss.org/

安装：

安装node环境
npm install postcss-cli -g
-o、-w
postcss.config.js(在src目录中)

检查是否安装成功

postcss

Input Error: Did not receive any STDIN

转换文件

postcss src/demo.css -o dist/demo.css

监听文件的变化，自动转换

postcss src/demo.css -o dist/demo.css -w

常见插件：

autoprefixer 添加浏览器前缀

postcss-import 对引入的多个css合并

cssnano 压缩处理

postcss-cssnext 处理高级的css语法，进行降级，适配浏览器

stylelint 规范样式

postcss-sprites 自动生成精灵图

...

在官网搜索插件的用法

npm i autoprefixer

自己创建一个配置文件postcss.config.js

在配置文件引入

const autoprefixer = require('autoprefixer');

module.exports = {

plugins : [

autoprefixer({

browsers:['>0%']

})

]

}

CSS架构

在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理和文件划分等问题

首先要对CSS进行模块化处理，一个模块负责一类操作行为。可利用Sass或Less来实现

文件夹	含义
base	一些初始的通用的CSS，如重置默认样式，动画，工具，打印等
components	用于构建页面的所有的组件，如按钮，表单，表格，弹窗等
layout	用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等
pages	放置页面之间不同的样式，如首页特殊样式，列表页特殊样式等
themes	应用不同的主题样式时，如管理员，买家，卖家等
abstracts	放置一些如：变量，函数，响应式等辅助开发的部分
vendors	放置一些第三方独立的CSS文件，如bootstrap,iconfont等

CSS新特性之自定义属性

CSS自定义属性(也称为"CSS变量")，在目前所有的现代浏览器中都得到了支持

定义与使用

计算

默认值

作用域

:root{
    --color:red;
    --number:100px;
    --number2:100;
    /*  --size:50px; */
}
#box{
    background:var(--color);
    width:var(--number);
    height:calc(var(--number2) * 1px)
    font-size:var(--size,100px(默认值));
}

CSS新特性之shapes

CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用

shape-outside

clip-path 自定义图形

三角形：clip-path:polygon(0 0, 0 100px,100px 100px)

shape-margin 产生间隙

css:
#parent{width:300px;height:300px;border:1px black solid;margin:20px;}
#shape{
	width:100px;height:100px;
	padding:10px;
	border:10px black solid;
	margin:10px;
	float:left;
	border-radius:50%;
	shape-outside:margin-box;(border-box,padding-box,content-box)
}




html:
<div class='parent'>
    <div id='shape'>aaaa</div>
    css..............
</div>

shape-outside

该属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装，默认情况下，内联内容包围其边距框。shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

shape-outside 的取值

取值	作用
none	该浮动区域不产生影响，行内元素以默认的方式包裹着该元素的 `margin box`
shape-box	根据浮动元素的边缘（通过 CSS 盒模型来定义）形状计算出浮动的区域，可能是 `margin-box, border-box, padding-box` 或 `content-box`，这个形状包括了由 `border-radius` 属性制造出来的弧度
basic-shape	基于 `inset(), circle(), ellipse()` 或者 `polygon()` 其中一个创造出来的形状计算出浮动区域。如果同时存在盒子形状，那么会为基本形状定义一个参考盒，这个参考盒默认为 `margin-box`
image	提取并且计算指定 image 的 alpha 通道得出浮动区域，即根据图片的非透明区域进行包裹

shape-box 的取值

取值	作用
margin-box	定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的 `border-radius` 和 `margin` 的值决定。如果 `border-radius / margin` 的比率大于等于 1 , 那么这个 `margin box` 的角的弧度就是 `border-radius + margin`；如果比率小于 1，那么这个 `margin box` 的角的弧度就是 `border-radius + (margin * (1 + (ratio-1)^3))`
border-box	定义一个由边界的外边缘封闭形成的形状，这个形状遵循正常的边界外部圆角的形成规则
padding-box	定义一个由内边距的外边缘封闭形成的形状，这个形状遵循正常的边界内部圆角的形成规则
content-box	定义一个被 padding 包裹区域的外边缘封闭形成的形状（即在 Chrome 控制台中的盒子模型图中的蓝色区域）

CSS新特性之srcollbar

CSS scrollbar用于实现自定义滚动条样式

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

body{height:2000px;}
html::-webkit-scrollbar{
    width:10px;
    /* height:1px */
}
html::-webkit-scrollbar-thumb{
    bakcground:#f90;
    border-radius:15px;
}
html::-webkit-scrollbar-track{
    background:#dedede;
    box-shadow:inset 0 0 5px gary;
}

CSS新特性之Scroll Snap

CSS Scroll Snap(CSS滚动滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置

scroll-snap-type (给父元素)

x/y

mandatory

scroll-snap-align (给子元素)

start

center

end

writing-mode

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 HTML 文档应该在 html 元素上设置）此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。

将 write-mode 属性指定为下面列出的值之一。水平流动方向也受脚本的方向影响，从左到右（ltr，类似于英语和大多数其他语言）或从右到左（rtl，类似于希伯来语或阿拉伯语）。

writing-mode 的取值

取值	作用
horizontal-tb	对于左对齐的脚本，内容从左到右水平流动。对于右对齐的脚本，内容从右到左水平流动。下一水平行位于上一行下方
vertical-rl	对于左对齐的脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐的脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧
vertical-lr	对于左对齐的脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐的脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧
sideways-rl	对于左对齐的脚本，内容从下到上垂直流动。对于右对齐的脚本，内容从上到下垂直流动。所有字形（即使是垂直脚本中的字形）都朝向右侧
sideways-lr	对于左对齐的脚本，内容从上到下垂直流动。对于右对齐的脚本，内容从下到上垂直流动。所有字形（即使是垂直脚本中的字形）都朝向左侧

图片不变形

object-fit CSS 属性指定可替换元素(例如：<img src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">或<video>)的内容应该如何适应到其使用高度和宽度确定的框。

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

取值

contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

cover

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none

被替换的内容将保持其原有的尺寸。

scale-down

内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

输入框文字上移效果

元素用于对表单中的控制元素进行分组（也包括 label 元素）

<fieldset> 元素将一个 HTML 表单的一部分组成一组，内置了一个元素作为 fieldset 的标题。这个元素有几个属性，最值得注意的是 form，其可以包含同一页面的

元素的 id，以使 <fieldset> 成为这个 <form> 的一部分，即使 <fieldset> 不在其内。还有 disabled 属性，可将 <fieldset> 及其所有内容设置为不可用。

<fieldset id="inputOuter" class="input-outer">
    <input id="inputInner" class="input-inner" type="text">
    <legend><label for="inputInner">Title</label></legend>
  </fieldset>

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .input-outer {
    position: relative;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid #ddd;
    padding: 0;
    color: #aaa;
  }

  .input-inner {
    border: none;
    height: 30px;
    padding: 0 5px;
    outline: none;
  }

  .input-outer legend {
    line-height: 14px;
    /*设置行高，防止因为字体缩放导致元素高度变化*/
    font-size: 14px;
    transform: translate3d(6px, 22px, 0);
    /*标题平移至合适位置*/
    transition: all .2s ease;
  }

  .input-outer legend label {
    cursor: text;
  }

  .input-outer.active {
    /* border-top: 2px solid #409EFF;
    border-left: 2px solid #409EFF;
    border-right: 2px solid #409EFF; */
    border-bottom: 2px solid #409EFF;
  }

  .input-outer.active legend {
    font-size: 12px;
    color: #409EFF;
    transform: translate3d(0, 0, 0);
  }

let inputInner = document.querySelector('#inputInner')
  let outInput = document.querySelector('#inputOuter')
  inputInner.addEventListener('focus', (e) => {
    outInput.classList.add('active');
  })
  inputInner.addEventListener('blur', (e) => {
    if (!inputInner.value) // input失焦时如果无内容则移除active class
      outInput.classList.remove('active');
  })

文字两行加省略

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;





display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

实现分页器随窗口调整

给中间的<router-view>设置计算属性的高度height: calc(100vh - 65px -45px)，这样就可以随着窗口的改变，高度也会发生变化在写这部分页面的时候，给整体页面设置display:flex; flex-direction:column; height:100%; padding:0 20px; 给中间的table的整体布局设置flex:1

将html格式转化为text格式(包括img标签转化为[图片])

    function replaceStr(str){
        str = str.replace(/<img(.*?)>/g,'[图片]')
        str = str.replace(/<\/?.+?>/g,'')
        str = str.replace(/\s*/g,'')
        return str
    }

其他css

1 - 5：🌼 细数那些惊艳一时的 CSS 属性 - 掘金 (juejin.cn)

1. :empty

平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。

一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：

js复制代码<div>
    <template v-if="datas.length">
        <div v-for="data in datas"></div>
    </template>
    <template v-else>
        <div>暂无数据</div>
    </template>
</div>

但是有了 :empty 这个选择器后，你大可以把这个活交给 CSS 来干。

js复制代码.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暂无数据";
}

通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是方便很多呢？

2. gap

小伙伴们日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如 100px 我要让 3 个元素等分，且每个元素隔开 10px，这就很尴尬了。

没关系！我们可以用 gap 属性，gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。

比如我们要让每个元素之间隔开 20px，那么使用 gap 我们可以这样：

js复制代码display: flex | grid；
gap: 20px;

3. user-select

user-select 属性可以 禁用光标选中 ，让网页看着和移动端一样

4. :invalid 伪类

:invalid 表示任意内容未通过验证的 input 或其他 form 元素。什么意思呢？举个例子。

这是一个表单。

js复制代码<form>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required/>
</form>

我们的需求是让 input 当值有效时，元素颜色为绿色，无效时为红色。

js复制代码input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

有了 :invalid 属性后，我们就可以不用 JS 也能实现校验提示的效果了。

5. :focus-within 伪类

:focus-within 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。啥意思呢？

话不多说，先看图：

 js复制代码// CSS
 form {
     border: 1px solid;
     width: 400px;
     height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 form:focus-within {
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
     background-color: beige;
 }
 
 // HTML
 <form>
   <input type="text" id="ipt" placeholder="请输入..." />
 </form>

可以根据子元素的状态来改变父元素的样式，方便的很。也能玩出不少花样来。

掘金登录样式：纯css实现：仿掘金账户密码登录时，小熊猫捂眼动作切换的小彩蛋 - 掘金 (juejin.cn)

6.max-height: unset

max-height: unset; 是一种CSS（层叠样式表）属性的设置，它的作用是取消元素的最大高度限制。通常，当你为一个元素设置了max-height属性时，它会限制元素的最大高度，不让其超过这个设定值。但是，当你使用max-height: unset;时，它会取消这个最大高度的限制，使元素可以根据其内容的实际高度自动调整高度，以适应内容。

这在某些情况下非常有用，特别是当你想让元素的高度根据内容的多少动态调整时，可以使用这个属性来取消之前设置的最大高度限制。

特殊字符	含义	特殊字符代码
	空格符	` `
©	版权	`©`
®	注册商标	`®`
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人名币	`¥`
°	摄氏度	`°`

特殊字符	含义	特殊字符代码
	空格符	` `
©	版权	`©`
®	注册商标	`®`
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人名币	`¥`
°	摄氏度	`°`

HTML+CSS

HTML+CSS系列教程 一之拨云见日

了解什么是HTML、CSS?

宇宙第一编辑器VS Code

Web前端的三大核心技术

HTML基础结构与属性

HTML初始代码

HTML注释

HTML语义化

标题与段落

文本修饰标签

图片标签和图片属性

引入文件的地址路径

跳转链接

跳转锚点

特殊符号

无序列表

有序列表

定义列表

嵌套列表

表格标签

表格属性

表单标签

div和span

CSS基础语法

CSS样式的引入方式

CSS中的颜色表示法

CSS背景样式

CSS边框样式

CSS文字样式

font-family：字体类型

font-size：字体大小(默认16px)

font-weight：字体粗细

font-style：字体样式

color：字体颜色

CSS段落样式

text-decoration: 文本修饰

text-transform：文本大小写(针对英文)

text-indent：文本首行缩进

text-align：文本对齐方式

line-height：定义行高

letter-spacing：字之间的间距

word-spacing ：词之间的间距（针对英文段落）

英文和数字不自动折行的问题:

CSS复合样式

CSS选择器

1.ID选择器

2.class选择器

3.标签选择器(TAG选择器)

4.群组选择器(分组选择器)

5.通配选择器

6.层次选择器

7.属性选择器

8.伪类选择器

9.结构性伪类选择器

CSS样式继承

CSS优先级

CSS盒子模型

box-sizing

margin叠加

margin传递

扩展

标签分类

显示框类型

标签嵌套规范

溢出隐藏overflow

透明度opacity与手势cursor

常用的关键字值

最大、最小宽高

CSS默认样式

CSS重置样式

png等图片切图流程

float浮动

清除浮动

position定位

relative相对定位

absolute绝对定位

fixed固定定位

sticky黏性定位

z-index定位层级

HTML+CSS系列教程一之拨云见日

特殊字符	含义	特殊字符代码
	空格符	` `
©	版权	`©`
®	注册商标	`®`
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人名币	`¥`
°	摄氏度	`°`