复习巩固HTML和CSS_strong大小

VSCode编辑器

VS code下载地址：Visual Studio Code - Code Editing. Redefined

如何安装插件：语言包，open in browser view in browser

学习编辑器的基本使用（增删改文件）

ctrl + s 保存

ctrl + c 复制

ctrl + v 粘贴

ctrl + x 剪切

ctrl + z 撤销

shift + end 选中一行 shift + home

shift + alt + ↑/↓ 快速复制一行

alt + ↑或↓ 快速移动一行

tab 向后缩进

shift + tab 向前缩进

什么是HTML，CSS

语义化标签 meta

meta主要用于设置网页中的一些元数据，元数据不是给用户看的，是给浏览器和搜索引擎看的

charset指定网页的字符集

name 指定的数据名称

content 指定的数据内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开

<meta name='keywords' content='html ,css'>

description 用于指定网站的描述

<meta name='description' content='这是我对meta的总结'>

title 标签中的内容会作为搜索结果的超链接上的文字显示

<meta name='title' content='这位是一个'>

页面重定向 页面三秒后跳转到百度网页

<meta http-equiv='refresh' content='3,url=https://www.baidu.com'>

行内元素与块级元素

块元素 一般情况下对页面进行布局

行内元素 行内元素一般用来包裹文字

一般情况下 会在块级元素放行内元素 不会再行内元素放块元素

块元素内可以放任何元素

p元素中不放任何的块元素

文本修饰标签

强调=>双标签 ：<strong></strong>,<em></em>

区别

1.写法和展示效果是有区别的，一个加粗，一个斜体

2.strong的强调性更强，em强调性稍弱

下标:

上标：

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

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

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

图片标签和图片属性

<img>=> 单标签

src：引入图片的地址

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

title：鼠标悬停时可以出现图片的标题

width，height：控制图片的大小

引入文件的地址路径（相对路径和绝对路径）

相对路径：相对于某一个文件引入

.表示当前路径 ..表示上一路径

绝对路径：网络路径/自己电脑的硬盘的位置

链接的用法

<a herf='http://www.baidu.com' >点我一下，就能百度</a>

target: _blak 在一个新的网页中打开超链接

_self(默认)在自己的窗口中打开网页

herf设置#号 可以直接跳到当前页面的顶部位置

跳到任意位置 可以给该位置的设置标签的id属性 herf进行跳转到当前id就可以（#+id）

开发中可以把#写成占位符

可以使用JavaScript：；可以作为占位符使用 点击没有什么作用

跳转链接

a=> 双标签 <a></a>

herf 要跳转的路径

target:可以改变链接打开的方式，默认情况下在当前页面打开

注：改变a标签的默认行为 base=>单标签 <base target=_blank>还可以设置默认的跳转路径

跳转锚点

当前页面内进行跳转

1.#+id进行当前页面内的跳转

2.#+name进行当前页面内的跳转

列表标签

无序列表

<ul><li> :符合嵌套的规范，同时存在

type属性:改变前面标记的样式（一般通过css去控制）

有序列表

<ol><li> </li></ol>

排行榜可以使用

定义列表

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

<dl> 容器

<dt> 专业术语或名词

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

嵌套列表

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

表格标签

<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

表单input标签

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

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

input（单标签）有个 type属性 text 普通文本输入框

password 密码复选框

CheckBox 复选款

radio 单选框

file 上传文件

submit 提交按钮

reset 重置按钮

表单标签

<textarea>：多行文本框

<select><option> :下拉菜单 size :显示个数 disabled 不可选 multiple多选 selected 被选中 checked默认选中

<label> :辅助表单

<div><span>

div :做一个区域划分的块

span ：对文字进行修饰的，内联

按类型划分标签

按类型 block：块 div,p ,ul ,li ,h1-h6....

1.独占一行

2.支持所有样式

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

4.所占区域是一个矩形

inline：内联 span,a ,em ,strong,img ....

1.不会独占一行

2.有些样式不支持（width，height，margin，padding）

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

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

5.内联标签之间会有空隙，原因：换行产生的

inline-block：内联块input ,select....

1.挨着一起，支持宽高

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

按内容

Flow：流内容

Metadata：元数据

Sectioning：分区

Heading：标题

Phrasing：措辞

Embedded：嵌入的

Interactive：互动的

（详情：HTML Standard）

按显示

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

img，input

非替换元素：将内容之间告诉浏览器，将其显示出来

div,P,h1-h6....

标签嵌套规范

ul,li

dl,dd,dt

table tr td

1.块标签可以嵌套内联标签

<div><span></span></div>

2.块标签不一定能嵌套块

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

特殊：p标签不可以嵌套div标签

3.内联标签不能嵌套块标签、

特殊：a标签是一个例外

strong与em b标签和i标签

表现形态都是（strong b）文本加粗 和（em i）文本斜体

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

引用标签的基本操作

blcok:引用大段的段落解释

q:引用小段的词语解释

abbr：缩进或首字母缩略词

address：引用文档地址信息

cite：引用著作的标题

br与wbr

br标签表示换行操作

wbr标签表示软换行操作（如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word break opportunity（单词换行时机））

pre和code标签（针对网页中的程序代码的显示效果的）

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

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

map与area

给特殊图像添加链接

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

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

embed和object

给flash和一些插件进行渲染的操作

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

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

audio和video（H5的新功能）

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

link标签的扩展(引入外部资源文件)

link可以引入外部的css文件

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

link还可以添加标题栏前的小图标

<linl rel="icon" type="/img/x-icon" href="http://www.mobiletrain.org/favicon.ico">

语义化标签（h5新增的）

header footer main hgroup(标题组合) nav

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

article:独立的信息

aside:辅助信息的内容

section:区域

figure:描述图像或视频

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

datalist：选择列表

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

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

time：定义日期或时间

Mark：带有记号的文本

表单扩展 新的input控件

email：电子邮箱地址输入框

URL：网址输入框

number：数值输入框

range：滑动条

date/month/week：日期控件

search：搜索框

color：颜色控件

tel：电话号码输入框 在移动端会默认调动数字键盘

time：时间控件

新的表单属性

autocomplete ：自动完成

autofocus ：自动获取焦点

required ：不能为空

pattern ：正则验证

扩展标签

fieldset :表单内元素分组

legend：为fieldset元素定义标题

optgroup：定义选项组

内联框架 用于向当前页面引入一个其他页面

src 要引入页面的路径

frameborder 指定内联框架的边框

不会被SEO检索（网络爬虫）

选择器的权重

内联样式 1000

id选择器 0100

类和伪类选择器 0010

伪元素选择器 0001

通配符选择器 0000

继承样式没有优先级（！import至高无上）

单位

长度单位

-像素 屏幕（显示器）：实际上是有一个一个的小点点构成

-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

-同样的200像素在不同的设备下显示的效果不一样

-百分比

-也可以可以设置属性值相对于其父元素属性的百分比

-设置百分比可以使子元素跟随父元素的改变而改变

-em

-em是相对于元素自身的字体大小来计算的

-1em = 1font-size

-em会根据字体大小的改变而改变

1em=16px（默认）

-rem

-rem是相对于根元素的字体大小来计算（根元素就是html）

浏览器默认样式

-通常情况下，浏览器都会为元素设置一些默认样式

-默认样式的存在会影响到我们页面的布局，通常情况下我们在编写页面的时候必须要去除浏览器的默认样式（pc端）

-上下的外边距合并

-通配符选择器

*{

margin:0;

padding:0;

list-style:none;

}

css样式引入方式

-内联样式表

style属性

-内部样式

style标签

区别：

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

-外部样式

引入一个单独的css文件 name.css

<link rel="stylesheet" href="">

rel:引入资源的类型

herf：引入资源的地址

@import(不建议使用)

区别：link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载；

link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别；

可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式

css盒模型(css将所有页面中的所有元素都设置为了一个矩形的盒子)

每一个盒子都有几个部分组成

内容区（content width和height设置内容区的宽高）

内边距（padding）

边框（border）

外边距（margin）

border 边框的宽度 border-width(默认值一般为3px)指定四个方向的宽度（上右下左顺时针）

边框的样式 border-style (默认值为none)

边框的颜色 border-color(如果不写 默认color的值)

注：边框的大小会影响盒子的大小

solid表示实线 dotted 表示点状虚线 dashed 虚线 double 双线

内边距（padding）

内边距的设置会影响到盒子的大小

背景色也会延伸到内边距上

一个盒子可见宽的大小，是由内容去 内边距和边框共同决定

所以在计算盒子大小是，需要将这三个区域加到一起计算

padding 内边距的简写属性 可以同时指定四个方向的内边距（方向 ：上右下左）

外边距（margin）

不会影响盒子的大小，但外边距会影响盒子的位置，一共有四个方向的外边距

-元素在页面中是自左向右的顺序排列的

所以默认情况下如果我们设置的是左和上外边距，将会移动元素的自身

而设置下右外边距会移动其他元素（不会挤自己）

-margin可以设置负直播，元素会向相反的方向移动

-默认情况下设置margin-lefrt没有任何效果

垂直方向上的margin会合并

元素的水平方向的布局

-元素在其父元素中水平方向的位置由以下几个属性共同决定

margin border padding width

-一个元素在其父元素中，水平布局必须满足以下的等式

width margin-left margin-right 可以设置为auto

-如果某个值设置为auto，则会自动调整为auto的那个值使等式成立

垂直方向的布局

-默认情况下父元素的高度被内容撑开

-子元素在父元素的内容区排列，如果子元素的高度超过了父元素，则子元素就会从父元素中溢出

使用overflow:auto处理父元素的溢出问题

overflow的取值：visible:默认值 子元素会从父元素中溢出，在父元素外部的位置显示

hidden：超出部分将会被裁剪不会显示

scroll：产生水平和竖直方向的滚动条

auto：浏览器自动设置（产生滚动条）

外边距垂直方向重叠（折叠）问题

-相邻的垂直方向上的外边距（margin）会发生重叠现象

-兄弟元素

-兄弟元素间的相邻垂直外边距会取两者之间的一个较大值（两者都是正值）

-特殊情况

-如果相邻的外边距一正一负，则取两者的和

-如果相邻的外边距都为负值，则取两者中绝对值较大的

-兄弟元素之间的外边距重叠，对于开发是有利的，所以我们不需要处理

-父子元素

-父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）

行内元素的盒模型

-行内元素不支持设置宽度和高度

-行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局

-行内元素可以设置border，但是垂直方向的border不会影响页面的布局

-行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局

-display 用来设置元素显示的类型

可选值：

inline 将元素设置为行内元素

block 将元素设置为块级元素

inline-block 行内块元素（既可以设置宽度和高度，又不会独占一行）

table 将元素设置为一个表格

none 元素不会在页面中显示

visibility:用来设置元素的显示状态

可选值：

visible:默认值，元素在页面中正常显示

hidden：元素在页面中隐藏不显示，但任然占据页面的位置

盒子的尺寸

默认情况下，盒子可见框的大小是由内容去，内边距和边框共同决定的

-box-sizing 用来设置盒子尺寸的计算方式（设置width和height）

可选值

content-box 默认值 宽度和高度用来设置内容去的大小

border-box 宽度和高度是用来设置整个盒子可见框的大小

CSS选择器

-元素选择器

作用：可以根据标签名选择指定的元素

语法：标签名{}

例子： p{} div{} h1{}

-id选择器

作用：可以根据id属性值选择指定的元素

语法：#id属性值{}

例子：#id名称{}

-class类选择器

作用：可以根据class属性值选择指定的元素（class可以重复使用）

可以通过class属性来为元素分组

可以同时为一个元素指定多个class属性

语法：class属性值{}

例子：.class{}

-通配符选择器

作用：选中页面中的所有元素

语法：*

-层次选择器

-后代：M N

只要是后代都会被选择，所有的孩子都会被设置

-父子：M>N

只选择孩子，不会选择孩子的孩子

-兄弟：M~N

当前M下面的所有N标签

-相邻：M+N

当前M相邻的下面的N标签

-属性选择器

-M[attr]{ }

例子：div[class]{} div中有class属性的所有div

div[class=box] 完全匹配

*= 部分匹配

^= 起始匹配

$= 结束匹配

[][][][][]多个[]进行组合匹配

-伪类选择器

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

M:伪类{}

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

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

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

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

注：一般的网站都只设置a{link，visited， active }和a:hover{}

:after , :before 通过伪类的方式给元素添加一个文本内容，使用content属性（清除浮动，精灵图标的操作）

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

结构性伪类选择器

nth-of-type() nth-child()

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

奇数用odd表示 event表示偶数

first-of-type 第一个

last-of-type 最后一个

only-of-type 只有一个的时候才会生鲜

nth-of-type 和 nth-child()

type:类型

child：孩子

解决高度塌陷问题

1.给父元素设置overflow:hidden （开启bfc布局）

2.给父元素使用伪元素选择器

::after{

content:"";

display:block;

clear:both

}

3.在父元素下面写一个div 给这个div进行清除浮动（不推荐，容易造成代码的冗余）

选择器的权重

内联样式 1000

id选择器 0100

类和伪类选择器 0010

元素选择器 0001

通配符选择器 0000

继承样式没有优先级（

比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器时单独计算的）

如果优先级计算相同，此时则优先级使用靠下的样式

可以在某一个样式的后边添加！inportant，则此时该样式会获得最高的优先级，甚至超过内联样式（！important至高无上）

注；在开发中这个玩意一定要慎用

css背景样式

background-color：背景颜色

background-image：背景图片（默认会水平垂直都铺满背景图）

background-repeat:背景图片的平铺方式

repeat-x x轴平铺

repeat-y y轴平铺

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

no-repeat 都不平铺

background-position:背景图片的位置

x y number(正值向右下 负值左上移动)

x: left center right

y: top center bottom

background-attachment:背景图随滚动条的移动方式

scroll(默认值) （背景位置是按照当前元素进行偏移的）

fixed 固定 （背景位置是按照浏览器进行偏移的）

CSS文字样式

font-family:字体类型

英文，中文 宋体（simsun）

衬线体和非衬线体

注意点：

1.多个字体类型设置的目的（设置的字体类型适应更多的设备）

2.引号的添加的目的（有的字体中间有空格，认为是一个整体）

font-size:字体大小

默认：16px

属性取值 字体大小

xx-small 最小

x-small 较小

small 小

medium 正常（默认值） 对应的16px

large 大

x-large 较大

xx-large 最大

写法：可以是具体的像素 也可以使用上面的属性取值

注：字体大小一般为偶数

font-weight： 字体粗细

模式： 正常（normal） 加粗（bold） 数值（100-900的选择）

写法：单词 | 数值（100,200.....900 100-500都是正常的 600-900都是加粗的）

font-style: 字体样式

模式： 正常（normal） 斜体（italic）

写法： 单词（normal italic oblique）

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

区别: 1.italic所有带有倾斜字体的可以设置

2.oblique没有倾斜属性的字体也可以设置倾斜操作

color:字体颜色

CSS段落样式

text-decoration：文本修饰

下划线 underline

删除线 line--through

上划线 overline

不添加任何装饰 none

注：添加多个文本修饰 例：text-decoration: underline overline;

text-transform:文本大小写 针对英文

大写:uppercase

小写：lowercase

首字母大写：capitalize

text-indent:文本缩进

首行缩进

em单位：相对单位 一个1em永远跟字体大小相同

text-align：文本对齐方式

取值：left right center justify(两端点对齐)

line-height: 定义行高

什么是行高：一行文字的高度，上边距和下边距的等价关系

定义：

默认：不是固定值，而是变化的，根据当前字体的大小再不断的变化

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

letter-sapcing:定义字间距

字体之间的间距

word-sapcing:定义词间距（针对英文段落的）

词之间的间距

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

1.word-break:break-all (非常强烈的折行)

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

CSS复合样式

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

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

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

background:red url() repeat 0,0,

border：1px solid red

font: weight style size family

注：最少要有两个值 size family

注：如果非要混合去写的话，要么先写混合样式，在写单一样式，这样样式才不会被覆盖掉

显示框类型（diaplay）

block

inline

inline-block

区别

none 不占空间的隐藏

visibility:hidden:占据空间的隐藏

overflow（溢出隐藏）

visible：默认

hidden：超出部分将会被裁剪不会显示

scroll：滚动条

auto：浏览器自动设置（产生滚动条）

支持某一个轴 overflow-x overflow-y

透明度与手势

opacity：透明度

取值：0（透明）-1（不透明） 占据空间 0.5（半透明）

注：所有的子内容也会透明

rgba（a是透明度，可以让背景透明，让字体可以不受影响）

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

cursor：手势

default：默认箭头

pointer：小手

move：可移动的十字架

help：箭头后面带有一个？号、

可以自定义图片设置鼠标的样式：

准备图片：格式（.cur .ico）

定义格式：cursor:url(路径)，auto；

最大，最小宽高

min-width,max-width

min-height,max-height

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

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

css默认样式

有些标签有默认样式，有些标签没有默认样式

没有默认样式：

div span

有默认样式

body ，h1...h6,p,ul,....

CSS重置样式（css reset）

*{ margin：0；padding：0；}

优点：不用考虑哪些标签有默认的margin和padding

缺点：稍微的影响性能

img{display:block}

问题的现象：图片跟容器底部有一些空隙

内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的，

vertical-align：baseline； 基线对齐方式，默认值

写具体页面的时候或者一个布局结构的时候

1.写结构

2.CSS重置样式（css

3.写具体样式

float 浮动

脱离文档流，沿着父容器靠左或靠右进行排列

取值：left

right

none

float的注意点

只会影响后面的元素

内容默认提升半层

默认宽根据内容决定

换行排列

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

如何清除浮动

上下排列：clear属性，表示清除浮动的 ：left right both

嵌套排列：

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

父元素浮动：不推荐，因为父元素浮动起来也会影响到后面的元素

overflow：hidden（BFC规范）：如果有子元素想溢出，那么会受到影响

设置空标签：不推荐，会多添加一个标签

after伪类：推荐，是空标签的加强版，目前各大公司的做法（clear属性只会操作块标签，对内联标签不起作用）

position定位

position特性

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

position取值

static(默认)

relative（相对定位）

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

不使元素脱离文档流

不影响其他元素的布局

left top right bottom 是相对于当前元素自身进行偏移的

absolute（绝对定位）

使元素完全脱离文档流

使内联元素支持宽高（让内联具备块特性）

使块元素默认宽根据内容决定（让块基本内联的特性）

如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）

fixed(固定定位)

使元素完全脱离文档流

使内联元素支持宽高

使块元素默认宽根据内容决定（让块具备内联的特性）

相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky（黏性定位）

在指定的位置进行黏性操作

z-index 定位层级

嵌套时的层级（决定谁在上面谁在下面，比较时同级进行比较）

定位实现元素居中

top：50% left:50% margin 调一下就好了

定位实现列表的装饰点

相对定位

css添加省略号

width 必须有一个固定的宽度

white-space:nowrap 不让内容折行

overflow:hidden 隐藏溢出的内容

text-overflow:ellipsis 添加省略号

CSS Sprite

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

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

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

CSS圆角

border-radius 添加圆角

border-radius:20px / 40px 椭圆相切

半圆： div{ width: 200px;height: 100px;background-color: red; border-radius: 100px 100px 0 0;}

CSS3

浏览器前缀

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

1.浏览器前缀

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

浏览器 内核 前缀

IE Trident -ms-

Firefox Gecko -moz-

Opera Presto -o-

Chrome Webkit -webkit-

Safari Webkit -webkit-

Opera,Chrome Blink

transition过渡

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

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

transition-delay：定义过渡效果何时开始（延迟执行的时间（数值为正数），也可以提前（数值为负数））

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

ease:默认值

ease-in:

ease-out

ease-in-out

cubic-bezier

linear

注：不要加到hover上

transform变形

translate:位移

transform:translate(x轴，y轴)

translateX

translateY

translateZ (3d)

scale：缩放(值是一个比例值，正常大小就是1,会以当前元素中心点进行缩放 注：宽高比例一样的时候，可以只写一个值)

transform:scale(2,0.5)

scaleX

scaleY

scaleZ（3d）

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

transform:rotate()

rotateX(3d)

rotateY(3d)

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

skew：斜切

transform:skew(30edg，0)

skewX:单位也是角度，正值向右倾斜，负值向左进行倾斜

skewY：

transform的注意事项

1.变形操作不会影响到其他元素的

2.变形操作只能添加给块元素，但是不能添加给内联元素

3.复合写法，可以同时添加多个变形操作

执行是有顺序的，先执行后面的操作，再执行前面的操作

text-shadow文字的阴影

注：阴影的默认颜色和原文字颜色一样

Flex弹性盒模型

作用在容器上

flex-direction

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

取值 含义

row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右

row-reverse 显示为行。但方向和row属性值是反的

column 显示为列

column-reverse 显示为列。但方向和column属性值是反的

flex-wrap

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

取值 含义

nowrap 默认值，表示单行显示，不换行

wrap 宽度不足换行显示

wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面

flex-flow

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

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子项上

order

可以通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order的属性值是0

order的值越大越往后，值越小，越往前，可以设置负值

flex-grow

属性中grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余空白间隙。默认值为0

flex-shrink

属性中shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足的时候，单个元素的收缩比例，默认值是1

flex-basis

flex-basis定义了分配剩余空间之前元素的默认大小（指定固定的大小）

flex

flex属性是flex-grow flex-shrink和flex-basis的缩写

默认值: flex：0 1 auto

align-self

align-self指控制单独某一个flex子项的垂直对齐方式

Grid网格布局

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

作用在grid容器上

grid-template-columns

grid-template-rows

grid-template

grid-column-gap

grid-row-gap

grid-gap

justify-items

align-items

place-items

justify-content

align-content

place-content

作用在grid子项上

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column

grid-row

grid-area

justify-self

align-self

place-self

移动端适配方案

1.百分比布局，也叫流式布局

2.等比缩放布局，也叫rem布局