标签名	定义	说明
< html>< /html>	HTML标签	页面中最大的标签，我们称为根标签
< head>< /head>	文档的头部	注意在head标签中我们必须要设置的标签是title
< title>< /title>	文档的标题	让页面拥有一个属于自己的网页标题
< body>< /body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

<!DOCTYPE html> // 文档类型声明，不是HTML标签！！，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<html lang="en"> // 用来定义当前文档显示的语言。

<head>
  <meta charset="UTF-8"> // 规定 HTML 文档应该使用哪种字符编码
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
</body>

</html>

常用标签

文本

<h1> - <h6>
<p>
<br/>

// 文本格式化标签
加粗：<strong></strong> 或者 <b></b>
倾斜：<em></em> 或者 <i></i>
删除线：<del></del> 或者 <s></s>
下划线：<ins></ins> 或者 <u></u>

块盒子和行内盒子

<div>
<span>

图像标签

<img />

属性：src、alt（替换文本）、title（提示文本）

超链接标签

<a></a>

属性：href、target（打开方式，默认_self，_blank新窗口打开）

分类：
1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

表格标签


  <table>

    <thead>
      <tr>
        <th></th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </tbody>
    
  </table>
  
  table 的属性：
  align、cellpadding（内容和单元格）、cellspacing（单元格和单元格）
  
  合并单元格
  跨行合并：rowspan="合并单元格的个数" 
  跨列合并：colspan="合并单元格的个数"

列表标签

1. 无序列表
<ul>
    <li></li>
</ul>

2. 有序列表
<ol>
    <li></li>
</ol>

3. 自定义列表
<dl>
    <dt> 名词1 </dt>
    <dd> 名词1解释1 </dd>
    <dd> 名词1解释2 </dd>
</dl>

4. 总结
<ul> 和 <ol> 里面只能包含 <li>
<dl> 里面只能包含 <dt> 和 <dd>

表单标签

  <form action="提交地址" name="表单域名称" method="提交方法">
    <!---------------------------------- input 类型 ---------------------------------------->
    <input type="text" name="txt" value="文本框" maxlength="4">
    <input type="password" name="psw" value="密码">
    <input type="button" value="按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">

    <!-- 文件上传 -->
    <input type="file" name="file">

    <!-- 点击提交文件 -->
    <input type="image" src="./novel-background.jpeg" width="12" height="12">

    <input type="hidden" name="hidden" value="隐藏信息">

    <!-- 单选框 -->
    <input type="radio" name="sex" value="男生" id="boy"> <label for="boy">男生 </label>
    <input type="radio" name="sex" value="女生" checked="checked" id="girl"> <label for="girl">女生</label>

    <!-- 复选框 -->
    <input type="checkbox" name="sports" value="篮球"> 篮球
    <input type="checkbox" name="sports" value="足球"> 足球
    <input type="checkbox" name="sports" value="羽毛球" checked="checked"> 羽毛球

    <!---------------------------------- select 类型 ---------------------------------------->
    <select name="下拉框">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3" selected="selected">3</option>
    </select>

    <!---------------------------------- textarea 类型 ---------------------------------------->
    <textarea name="文本域" cols="30" rows="10"></textarea>

  </form>

HTML5 的新特性

语义化标签

< header >：头部标签
< nav >：导航标签
< article >：内容标签
< section >：定义文档某个区域
< aside >：侧边栏标签
< footer >：尾部标签

多媒体标签

视频 video

代码

// 第一种，不做兼容
 <video src="文件地址" controls="controls"></video>


// 第二种，做兼容，source 从上到下
 <video controls="controls" width="300">
     <source src="move.ogg" type="video/ogg" >
     <source src="move.mp4" type="video/mp4" >
     您的浏览器暂不支持 <video> 标签播放视频
 </ video >

常见属性

音频 audio

代码

// 第一种，不做兼容
 <audio src="文件地址" controls="controls"></audio>

// 第二种，做兼容，source 从上到下
 <audio controls="controls" >
      <source src="happy.mp3" type="audio/mpeg" >
      <source src="happy.ogg" type="audio/ogg" >
      您的浏览器暂不支持 <audio> 标签。
</audio>

常见属性

新增的 input 类型

新增的表单属性

CSS

字体属性

font-style：normal | italic
font-weight：normol | bold | 100-900
font-size：默认 16px
font-family：逗号分割多种字体
font（综合属性）

文本属性

color：pink | #ff00ff | rgb(2,2,2)
text-align：left | right | center -----------可用于图片居中
text-decoration：none | underline | overline | line-through
text-indent：缩进（一般使用em作为单位）
line-height：行间距

css 的三种样式表

行内样式表

<p style="font-size:12px;"> </p>

内部样式表

<style>
    p {
        font-size: 12px;
    }
</style>

外部样式表

<link ref="stylesheet" href="css文件路径">

复合选择器

后代选择器：ul li {}
子代选择器：ul>li {}
并集选择器：ul,div {}
伪类选择器：:hover {}

块级、行内、行内块元素

块级元素

常见的块级元素：h1-h6、p、div、ul、ol、li。

特点：

占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的 100%
是一个容器盒子，里面可以放行内或者块级元素

注意：

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

行内元素

常见的行内元素有：a、strong、b、em、i、del、s、ins、u、span

特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：

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

行内块元素

常见行内块元素：img、input、td

特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

元素显示模式转化

display: block | inline | inline-block

文字垂直居中

line-height = height

背景

background-color：transparent | 颜色
background-image：none | url()
background-repeat：repeat | no-repeat | repeat-x | repeat-y
background-position：x y | top、center、bottom、left、center、right | 指定一个，另一个则默认居中
background-attachment：scroll | fixed

background：颜色  地址 平铺 滚动 位置 

// 背景色半透明
background：rgba(0,0,0,0.3)
注：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS 三大特性

层叠性

相同选择器，相同样式属性设置，就近原则

继承性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承

body {
  font:12px/1.5 Microsoft YaHei
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小 *1.5
body 行高1.5 这样写最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

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

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

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

注：

不会进位，从左向右进行比较
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

例如：

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

盒子模型

组成

盒子模型的组成：外边距 margin + 边框 border + 内边距 padding + 内容 content

标准盒子：内容 content

怪异盒子：边框 border + 内边距 padding + 内容 content

边框

border-width: 宽度
border-style: none | solid | dashed（虚线） | dotted（点线）
border-color: 颜色
border：border-width || border-style || border-color

border-top

表格的边框重叠

消除重叠的边框： border-collapse：collapse

内边距

padding: 上下左右
padding：上下  左右
padding：上  左右   下
padding：上  右  下  左

注：

当子盒子继承父盒子width，没有自己设置 width，那么此时设置 padding 不会撑开盒子大小

外边距

margin: 上下左右
margin：上下  左右
margin：上  左右   下
margin：上  右  下  左

水平居中

块级盒子：margin：0 auto
行内或行内块元素：给父盒子添加 text-align：center

外边距合并问题

两种情况：

相邻元素垂直外边距的合并（尽量只给一个盒子添加 margin 值）
嵌套块元素垂直外边距的塌陷（为父元素定义上边框/上内边距/添加overflow：hidden）

注意

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

圆角边框

border-radius：左上角-左下角（顺时针）

border-top-left-radius

盒子阴影（不占空间）

box-shadow：水平右移垂直下移模糊程度阴影尺寸颜色阴影是外部/内部的

文字阴影

text-shadow：水平右移垂直下移模糊程度颜色

浮动

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

普通流（标准流）
浮动
定位

float：none | left | right

浮动特性：

浮动元素会脱离标准流
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性（大小默认根据内容决定）

清除浮动

为什么需要清除浮动？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动方法

额外标签法（在父元素最后一个子孩子后添加新块级标签，设置 clear:both）
给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll
父级:after 伪元素法
父级双伪元素清除浮动

案例

CSS 属性书写顺序(重点)

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

定位

静态定位 static（了解）

默认都是静态定位

相对定位 relative

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
典型应用，给绝对定位当爹

绝对定位 absolute

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）

固定定位 fixed

跟父元素没有任何关系
不随滚动条滚动
不占有原先的位置

粘性定位 sticky

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位的特点）
必须添加 top、left、right、bottom 其中一个才有效

注意： top：是相当于其父元素上边线的距离，其他类似

定位叠放次序 z-index

z-index：数值

注：只有定位的盒子才有 z-index 属性

定位的拓展

绝对定位的盒子居中

不能通过 margin：0 auto
通过 left 和 margin-left 控制居中

定位特殊特性

绝对定位和固定定位也和浮动类似，添加绝对或固定定位后拥有行内块元素特性（默认大小是内容大小）

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并问题

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
绝对定位（固定定位）会压住下面标准流所有的内容

网页布局总结

标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏

display

none：隐藏对象，不再占有原来的位置
block：除了转换为块级元素之外，同时还有显示元素的意思

visibility

visible：元素可视
hidden：元素隐藏，继续占有原来的位置

overflow

visible：不剪切也不添加滚动条，超出父盒子显示
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出滚动条与否，总是显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条

总结

display 显示隐藏元素但是不保留位置
visibility 显示隐藏元素但是保留原来的位置
overflow 溢出显示隐藏但是只是对于溢出的部分处理

精灵图

使用精灵图原因

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

使用 background-position 实现，位置一般是负值

字体图标

产生字体图标的原因（精灵图的缺陷）

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

注：字体图标展示的是图标，本质属于字体。

字体图标与精灵图的使用场景

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标下载地址

icomoon 字库 icomoon.io
阿里 iconfont 字库 www.iconfont.cn/

CSS 三角

设置宽高为0，只显示想要的三角形的 border-color，其余设置为 transparent
想要指向哪边，就显示其反方向的 boder-color
样例

div {
        width: 0;
        height: 0;
        line-height: 0; // 兼容性处理
        font-size: 0; // 兼容性处理
        border: 50px solid transparent;
        border-left-color: pink;
}

cursor、outline 和 resize

cursor：default（箭头）| pointer（小手）| move（移动+）| text（文本I）| not-allowed（禁止）
input {outline: none; }
textarea { resize: none;} // 文本框右下角不可拖拽

vertical-align

使用场景：设置图片或者表单(行内块元素）和文字垂直对齐，注意只针对于行内元素或者行内块元素有效
预知识：

基线：
对于行内元素来说，位于文字中下部位（以字母x为标准则为字母x的下边缘）；
对于行内块元素来说，图片和空元素的基线位于元素的下边缘（有外边距则包括外边距）。含有文本内容或嵌套有行内元素的行内块元素的基线就是行盒子中最后一个作为内容存在的元素的基线

属性值

vertical-align：baseline | top | middle | bottom

解决图片底部默认空白缝隙问题

原因：行内块元素会和文字的基线对齐
解决（2种）

给图片添加 vertical-align:middle | top| bottom 等
把图片转换为块级元素 display: block;

溢出的文字省略号显示

单行

强制一行显示文本
超出的部分隐藏
文字用省略号替代超出部分

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

多行

兼容性问题多

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

常见布局技巧

margin 负值的运用
文字围绕浮动元素
行内块的巧妙运用
css 三角强化

CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化
简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）

CSS3 新特性

新增选择器

属性选择器
结构伪类选择器
伪元素选择器

属性选择器

注意：类选择器、属性选择器、伪类选择器，权重为 10。

结构伪类选择器

类型
nth-child(n)

n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

nth-child 和 nth-of-type 的区别

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

伪元素选择器

原因：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
选择符类型

注意

before 和 after 创建一个元素，但是默认属于行内元素（可以通过display属性更改）
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法： element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1

使用场景

伪元素字体图标
遮罩效果
清除浮动

盒子模型

box-sizing：content-box | border-box

content-box：盒子大小为 width + padding + border （以前默认的）

border-box：盒子大小为 width

CSS3 其他特性

图片变模糊

filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊

计算盒子宽度 width: calc 函数

width: calc(100% - 80px);

CSS3 过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

- 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
- 花费时间： 单位是 秒（必须写单位） 比如 0.5s 
- 运动曲线： 默认是 ease （可以省略）
- 何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

注：谁做过渡给谁加，通常与 hover一起使用

2D 转换

2D 转化不会影响到其他元素的位置（布局）

transform：translate(x,y) 平移  rotate(deg) 旋转  scale(x,y) 缩放

transform-origin（2D转化中心点）：x y | top bottom left right center

translate

x 右正，y 下正
百分比单位 translate(-50%,-50%) 是相对于自身元素
对行内标签没有效果

rotate

角度为正 ——>顺时针，角度为负——>逆时针
默认旋转的中心点是元素的中心点

scale

1,1 相当于不放大也不缩小

动画

制作动画的步骤

先定义动画
再调用动画

// 1. 定义动画
@keyframes 动画名称 {
   0% {
        width: 100px;
   }
   100% {
        width: 200px;
   }
}

// 2. 使用动画
div {
     width: 200px;
     height: 200px;
     background-color: aqua;
     margin: 100px auto;
     
     animation-name：动画名称;
     animation-duration: 持续时间;
}

常用属性

动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation：myfirst 5s linear 2s infinite alternate forwards

速度曲线细节

3D 转化

三维坐标系

x轴：水平向右注意： x 右边是正值，左边是负值
y轴：垂直向下注意： y 下面是正值，上面是负值
z轴：垂直屏幕注意：往屏幕外面是正值，往屏幕里面是负值

3D 位移和旋转

transform: translateX(100px)
transform: translateY(100px)
transform: translateZ(100px)
transform: translate3d(x,y,z)

1. 要观察到 3D 效果，必须添加透视属性 perspective
2. 透视写在被观察元素的 父盒子/祖先盒子 上面
perspective：500px（值越小，离屏幕越近，元素越大）

transform：rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(45deg)
transform: rotate(x,y,z,deg)  1有效，0无效

旋转的左手法则 大拇指指向坐标轴的正方向，其余手指弯曲的方向即为旋转的方向
3D 呈现 transform-style

当子元素使用了 3D属性，父元素也使用了3D属性，那么在触发父元素的3D属性时，子元素的 3D属性就会失效，所以有了transform-style属性
transform-style: flat 子元素不开启3d立体空间默认的
transform-style: preserve-3d; 子元素开启立体空间
代码写给父级，但是影响的是子盒子

浏览器的私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

提倡的写法

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

移动端

meta 标签

移动端布局想要的是理想视口就是手机屏幕有多宽，我们的布局视口就有多宽
想要理想视口，我们需要给我们的移动端页面添加 meta视口标签
标签写法如下

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

属性解释

多倍图

同样的px，在手机屏幕会被放大，导致图片模糊，所以在设置宽高时，要缩放倍数

background-size

background-size：背景图片宽度 背景图片高度 | cover | contain

cover：图片等比例扩大，直至触碰到盒子的全部边缘，可能会导致一部分图片溢出被隐藏

contain：图片等比例扩大，直至触碰到盒子的一个边缘就停下，可能会导致图片没沾满整个盒子

100% 100%：图片占满整个盒子，但图片比例可能发生变化

移动端主流方案

移动端技术解决方案

浏览器兼容
CSS 初始化 normalize.css

特殊样式

 /*CSS3盒子模型*/
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
 -webkit-tap-highlight-color: transparent;
 /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
 -webkit-appearance: none;
 /*禁用长按页面时的弹出菜单*/
 img,a { -webkit-touch-callout: none; }

背景线性渐变

background：linear-gradient(起始方向，颜色1,2，...)
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);

注：

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略默认就是 top

移动端常见布局

流式布局

百分比布局
设置 max-width 和 min-width

flex 弹性布局

给父盒子设置为flex布局后，子元素拥有行内块元素的特性
给父盒子设置为flex布局后，子元素的 float、clear 和 vertical-align 属性将失效

flex 布局父项常见属性

flex-direction：row | column | row-reverse | column-reverse
justify-content：flex-start | flex-end | center | space-around | space-between
flex-wrap：no-wrap（挤不下的时候会把子元素宽度变小） | wrap
align-content（多行）：flex-start | flex-end | center | stretch（子元素高度平分父元素高度） | space-around | space-between
align-items（单行）：flex-start | flex-end | center | stretch（拉伸子元素的高和父元素一样）
flex-flow：flex-direction flex-wrap

flex 布局子项常见属性

flex（子项目占的份数）：默认0，分配剩余空间，可用%做单位
align-self：覆盖 父元素的 align-items 属性
order：默认0，子项的排列顺序

rem 适配布局

优点：页面布局文字，高度能随着屏幕大小变化而变化

rem 基础

rem 是相对于根元素html 的字体大小
em 是相对于父元素的字体大小

媒体查询

优点

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式

语法规范

@media mediatype and|not|only (media feature){
        CSS-Code;
}

mediatype: all | print(打印机和打印预览) | screen
and：且    not：排除某个媒体类型    only：指定某个媒体类型，可省略
media feature：width，min-width，max-width

例子（根据屏幕宽度，变化根元素的font-size，实现元素动态大小变化）

@media screen and (min-width:320px){
     html{
        font-size：50px;
     }
}

@media screen and (min-width:640px){
     html{
        font-size：100px;
     }
}

动态引入不同的样式资源

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

less 基础

CSS 的弊端

冗余度高
不方便维护及扩展，不利于复用
没有好的计算能力

less 介绍

一门 CSS 扩展语言，CSS 预处理器
常见的CSS预处理器：Sass、Less、Stylus

less 使用

less变量

@变量名：值;

@color：pink;
body{
   color: @color
}

less 编译

本质上，Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则
最终会通过解析器，编译生成对应的 CSS 文件。

所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。

注：下载 Easy LESS插件，这个插件会自动生成CSS文件

less 嵌套

1. 后代选择器
#header {
  .logo {
      width: 300px;
  }
}

2. 伪类，伪元素选择器 加&
a {
  &:hover{
    color: red;
  }
}

less 运算

@width: 10px + 5
div {
  width: (@width + 5) * 2;
}

！注：
- 运算符左右有个空格隔开
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位

适配方案

方案1

将整个屏幕划分为15等分，每份大小即为html的font-size大小
元素大小使用rem做单位，元素实际大小/根font-size

方案2

flexible.js 里面已经写好了媒体查询
只需要元素大小使用rem做单位，元素实际大小/根font-size

插件 VSCode px 转换rem 插件 cssrem，不用人为去除和计算

@import

// 在 index.less 中导入 common.less 文件
@import “common”

注：

@import：在样式文件中引入样式文件 link：在 html文件中引入样式文件

响应式开发

设备划分

Bootstrap

布局容器

Bootstrap 栅格系统

介绍

栅格系统，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
boostrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格选项参数

行（row）可以去除父容器作用15px的边距
列（column）大于12，多余的列所在元素将被作为一个整体另起一行排列
每一列默认有左右15像素的padding
可以同时为一列指定多个设备的类名，以便划分不同的份数，例如 class=“col-md-4 col-sm-6”

列嵌套

通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

<!-- 列嵌套 -->
 <div class="col-sm-4">
     <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
     </div>
</div>

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。

 <!-- 列偏移 -->
 <div class="row">
     <div class="col-lg-4">1</div>
     <div class="col-lg-4 col-lg-offset-4">2</div>
 </div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

 <!-- 列排序 -->
 <div class="row">
     <div class="col-lg-4 col-lg-push-8">左侧</div>
     <div class="col-lg-8 col-lg-pull-4">右侧</div>
 </div>

响应式工具

页面大小发生变化时，显示或隐藏某些元素

移动端 vw/vh

介绍

vw：视口宽度单位；vh：视口高度单位
1vw=1/100 视口宽度；1vh=1/100 视口高度

vw 和百分比的区别是什么？

百分比 % 相对于父元素来说的
vw/vh 相对于当前视口来说的

我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了。
VSCode 转换 vw 插件

px2vw 插件
配置插件视口宽度

html+css

五大浏览器

HTML

骨架标签

常用标签

文本

块盒子和行内盒子

图像标签

超链接标签

表格标签

列表标签

表单标签

HTML5 的新特性

语义化标签

多媒体标签

视频 video

音频 audio

新增的 input 类型

新增的表单属性

CSS

字体属性

文本属性

css 的三种样式表

复合选择器

块级、行内、行内块元素

块级元素

行内元素

行内块元素

元素显示模式转化

文字垂直居中

背景

CSS 三大特性

层叠性

继承性

行高的继承

优先级

盒子模型

组成

边框

表格的边框重叠

内边距

外边距

水平居中

外边距合并问题

注意

圆角边框

盒子阴影（不占空间）

文字阴影

浮动

清除浮动

案例

定位

定位叠放次序 z-index

定位的拓展

网页布局总结

元素的显示与隐藏

精灵图

字体图标

CSS 三角

cursor、outline 和 resize

vertical-align

解决图片底部默认空白缝隙问题

溢出的文字省略号显示

单行

多行

常见布局技巧

CSS 初始化

CSS3 新特性

新增选择器

属性选择器

结构伪类选择器

伪元素选择器

盒子模型

CSS3 其他特性

图片变模糊

计算盒子宽度 width: calc 函数

CSS3 过渡

2D 转换

动画

3D 转化