层叠样式表，用来美化页面。做到结构(HTML)和表现(CSS)分离
’‘’
‘’‘
选择器{
属性:属性值;
}
- 选择器通常市需要改变样式的HTML元素
- 每条声明由一个属性（property)和一个属性值(value）组成
- 属性是希望设置的样式属性。每个属性有一个属性值
- 属性和属性值被冒号分开
行间样式、内部样式、外部样式、导入外部样式
- 行间样式:直接在标签上书写样式
- 内部样式(尽量写在
<head>里)∶在文件的内部书写样式
> <style type="text/css">
>
> 样式内容
>
> </style>
>
<font style="color:#389E0D;"><!--将样式直接写到style属性中，称内联样式，其只对当前的元素中的内容起作用，不方便复用。内联样式属于结构与表现耦合，不方便后期维护。--></font>```
3. 外部样式
1. 建立一个css文件
2. 在HTML中用link标签引入CSS
``<link rel="stylesheet" type="text/css" href="style.css" />
4. 导入外部样式
1. 创建一个css文件
2. 在style标签中用import导入这个样式文件
🎈 四种css引用方式的区别:
行间样式之作用与当前标签;内部样式作用于当前文件;
外部样式可以被多个HTML文件引用。
🎗在实际项目开发中，最好使用外部样式。
外部样式分为link引入和import引入两种
CSS选择器分类
1. *:匹配html中所有元素（注意:*的性能差，因为它要匹配所有元素，所以在开发时不建议使用)
2. 标签选择器:用来匹配对应的标签
3. 类选择器:用来选择class命名的标签
4. ID选择器:用来选择用id命名的标签
<font style="background-color:#40A9FF;">语法</font>
1. /**CSS的注释，必须编写在style标签中，或者是CSS文件中**/
2. 🎈选择器——通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器的对
应元素上
3. 🎈声明块——紧跟在选择器的后面，使用一对t)括起来，声明块实际上就是一组一组的名值对结
构，这一组一组的名值对我们称为声明。一个声明块之间可以写多个声明，多个声明之间用;隔开，声明的样式名和样式值之间使用:来连接
<font style="background-color:#40A9FF;">内联和块元素</font>
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素。
+ a元素可以包含任意元素，除了它本身。
+ p元素不可以包含任何其他元素
1. div—一块元素，会独占一行的元素，没有任何语义，且不会为里面的元素设置任何默认样式，
主要用来对页面进行布局
> <div style="background-color:red;">这是一个div</div>
>
> <div style="background-color:green; width:100px;">这还是一个div</div>
>
2. span—一内联元素(行内元素），指的是只占自身大小的元素，不会占用一行。没有任何语义，专门用来选中文字，然后为文字来设置样式
(a, iframe, img也是内联元素)
<font style="background-color:#40A9FF;">选择器</font>
1. *:匹配html中所有元素（注意:*的性能差，因为它要匹配所有元素，所以在开发时不建
议使用)
2. 元素选择器——通过元素选择器可以选择页面中所有指定元素
3. id选择器——通过元素的id元素值选中唯一的一个元素
3. 类选择器
+ 通过元素的class属性值选中一组元素。可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
+ 语法
.class属性值{ }
4. 选择器分组（并集选择器)
+ 通过选择器分组可以同时选中多个选择器对应的元素
+ 语法:
> 选择器1，选择器2，选择器N{}
>
5. 派出选择器:根据上下文来确定选择的标签
6. 选择器的继承:子元素可以继承父元素的样式，反之不可以
7. 复合选择器(交集)
+ 选中同时满足多个选择器的元素
+ 语法:
选择器1选择器2选择器N{ }
巴拉巴拉
嘟嘟嘟嘟
1．多重样式:一般情况下，外部样式<内部样式<内联样式
2．样式权重
<font style="color:#6a9955;background-color:#FFFFFF;">/* 排序：!important > 行内css > id > 类 > 标签 > *通配符号 > 继承 */</font>
```javascript
/* 没有选中想要的标签div，选中的是父元素就是继承 */
body {
/* 继承优先级最低，加了!important也还是属于继承，没有选中标签 */
color: gold !important;
}
font-size:字号(pX)
font-family:字体
font-style:样式
a. normal:默认值。正常的字体
b. italic:斜体。对于没有斜体变量的特殊字体，将用oblique
c. oblique:倾斜的字体
- font-weight:加粗
a. normal:默认，正常字体
b. bold:粗体
c. bolder:笔bold粗
d. lighter: 比normal细
e. {100-900}:定义由粗到细的字符。400等同normal，700等同bold
- line-height:行高
a. normal:默认
b. {number+px}:行高长度为像素
c. {number}:行高为字体大小的倍数
- color:文字的颜色
a. name
b. rgb
c.{颜色16进制(以#开头，后跟6位或3位16进制数)}
- text-decoration:文字修饰
a. none:默认，无修饰
b. underline:下划线
c. line-through:贯穿线
d. overline: 上划线
text-align:文本对齐方式left, right, center
text-transform:字母大小写
a. none:默认
b. capitalize:将每个单词的第一个字母转换成大写
c. uppercase:转换成大写
d. lowercase:转换成小写
- text-indent:文本缩进
a. {number+px}:首行缩进number像素
b. {number+em}:首行缩进number字符
🎃TIP:
font复合属性:
font: font-style font-variant font-weight font-size/line-height font-family
注意:
1)属性值的位置顺序
(2)除了font-size和font-family之外，其他任何一个属性值都可以省略
(3) font-variant: normal/small-caps (让大写字母变得小—些)
background-color:背景色(transparent/color)2. background-image:背景图(none/url)
background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
background-position:设置对象的背景图像位置({x-number [top|center|bottom}) { y-number lleft|center|right} )。如果只带一个参数，默认另一个为50%
background-attachment:设置背景图像滚动位置(scroll/fixed)
background:设置背景的复合写法
backaround: color imaae repeat attachment position
1.属性选择器
2.关系选择器练习
a.空格:后代选择器(选取某元素的后代元素)
b. >:只选择儿子元素
c. +:兄弟选择器(选择紧接在另一元素后的元素，且二者有相同的父元素)
例子：搜索框显示下拉框
- 元素之间的关系
- 父元素:直接包含子元素的元素
- 子元素:直接被父元素包含的元素
- 祖先元素:直接或间接包含后代元素的元素，父元素也是祖先元素
- 后代元素:直接或间接被祖先元素包含的元素
- 兄弟元素:拥有相通父元素的元素
- 后代元素选择器
- 作用:选中指定元素的指定后代元素
- 语法
祖先元素后代元素{}
- 子元素选择器(不兼容IE6—下的浏览器)
- 作用:选中指定父元素的指定子元素
- 语法
父元素>子元素
<font style="background-color:#40A9FF;">伪类选择器</font>
伪类专门用来表示元素的一种特殊状态，如:访问过的超链接，普通超链接
- 给链接定义样式
- 正常连接
a:link
- 访问过的链接
a:visited ((只能定义字体颜色)
- 鼠标滑过的链接
a:hover
- 正在点击的链接
a:active
- 其他
- 获取焦 :focus
<!--使用input可以创建一个文本输入框，文本框获取焦点,修改背景颜色为黄色-->
<style>
lnput:focus{background-color:yellow;}
</style>
- :first-child/:last-child/:nth-child(number)
同级同类：nth-child(n)
同级不同类：nth-of-type(n)
- 指定元素前
:before
- 指定元素后
:after
- 选中的元素(为p标签中选中的内容使用样式)
:selection
- 伪元素&伪类的特点:
伪元素和伪类都不会出现在源文档或者文档树中
伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
伪元素名和伪类名都是大小写不敏感的
有些伪类是互斥的，而其它的可以同时用在一个元素上。(在规则冲突的情况下，常规层叠顺序决定结果)
- 区别:伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。
- : before/ : after/ : first-letter/ : first-line :前面可以是1个冒号，也可以是双冒号
: : selection/ : : placeholder/ : : backdrop:前面只能是双冒号
开发思路︰先整体，再局部; 从上至下开发。
先写结构
- 写结构之前,先对设计稿进行模块划分
- 根据划分好的模块再书写html结构, 标签的嵌套关系,就和你的模块划分的嵌套关系是一致的
后写样式
书写顺序习惯
<font style="color:rgb(255,0,0);">按照我们目前的学习</font>
<font style="color:rgb(255,0,0);">1. </font><font style="color:rgb(255,0,0);">布局定位属性：</font><font style="color:rgb(255,0,0);">display / float... </font><font style="color:rgb(255,0,0);">（建议 </font><font style="color:rgb(255,0,0);">display </font><font style="color:rgb(255,0,0);">第一个写，毕竟关系到模式）</font>
<font style="color:rgb(255,0,0);">2. </font><font style="color:rgb(255,0,0);">自身属性：</font><font style="color:rgb(255,0,0);">width / height / margin / padding / border / background...</font>
<font style="color:rgb(255,0,0);">3. </font><font style="color:rgb(255,0,0);">文本属性：</font><font style="color:rgb(255,0,0);">color / font / text-decoration / text-align / ...</font>
<font style="color:rgb(255,0,0);">4. </font><font style="color:rgb(255,0,0);">其他属性（</font><font style="color:rgb(255,0,0);">CSS3</font><font style="color:rgb(255,0,0);">）： </font><font style="color:rgb(255,0,0);">border-radius / box-shadow / text-shadow ....</font>
量图细节
清楚量图的间距是哪一段距离
页面样式布局从大到小来写
- 按照书写顺序习惯量图
3.1 大盒子制作
3.1.1 Box大盒子的宽262px 高329px, 边框 1px
注意: 边框会撑大盒子,所以要减去盒子的边框
3.1.2 看看大盒子有没有外边距和内边距要量
量取内边距
3.1.3 检查box盒子需不需要设置背景
设置背景图
3.2 头部标题盒子制作
3.2.1 先考虑宽和高要不要量
因为div是块级盒子,可以继承父元素的容器宽度,并且这一行就一个盒子,
所以不用量宽
高度的量取需要注意
因为文字垂直居中,所以设置行高line-height: 23px 和高度一样
3.2.2 看看需不需要 量取 外边距margin 边框border和 内边距padding
因为因为title标题盒子没有设置宽度width, 所以不用减padding和border的值
3.2.3 看看需不需设置 字体
- 什么是浮动:就是让块级标签不独占一行。
目的（使用场景)︰把块级标签可以排再一行上
- 浮动的原理:就是让元素脱离文档流，不占用标准流
- float的属性值:
a. left:左浮动
b. right:右浮动
c. none:默认，不浮动
- 浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。
- 清除浮动
目的:让后面的元素自动掉到下一行。
方法:1)添加空标签，并设置样式: clear : both;
clear : left;清除左浮动
clear : right;清除右浮动
clear : both;清除左右浮动
clear : none;左右浮动都不清除
2）在要清除浮动的父级添加样式: overflow:hidden;
overflow: hidden;超出部分隐藏，也可以用来实现清除浮动
3)在要清除浮动的父级添加伪元素，并设定样式:
父元素: after{
content:"";display: block;clear: both;
}
注意:在实际项目开发中，一般首先选择方案
每个元素都是一个盒子，一个盒子由margin (外边距)，border (边框线),padding (内边距)和content组成
区别外边距和内边距是以边框为参照。
系统默认外边距为8px。
(1) 外边距(margin):指元素边框线之外的距离
margin-left:左边距
margin-right:右边距
margin-top:上边距
margin-bottom:下边距
margin :可用来设置任意一个边的边距，可以带1至4个参数
(2) 内边距(padding)︰指元素的文本内容与边框之间的距离。用法与margin一样
用来设置元素的显示方式
- 属性值:
- none:不显示元素
- block:块显示，在元素前后设置换行符，目的:将行级标签转换为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后，行级标签也可以设置宽高了)
- inline:行内显示，将块级标签转换为行级标签
- inline-block:将块级或行级标签转换为行内块级标签
eg:为span设置高度，但span为行级标签，设置高度不会得到相应效果，则可将span转化为块级标签或行内块级标签
- table一般不同来布局，主要用来格式化数据
- 属性:
i. width:宽度
ii. height:高度
iii. border-collapse: collapse;单线边框
iv. border:边框线
- td, tr属性:
i. width:宽度
ii. height:高度
iii. border:边框线
iv. text-align:文本左右对齐(left(默认)/center/right)
v. vertical-align:文本垂直对齐(top/middle(默认)/bottom)
- 列表样式
不是描述性的文本的任何内容都可以认为是列表。比如:菜单、商品列表等。
1. 列表类型:无序(ul)、有序(ol)和自定义列表(dI)
1. ul和ol的列表项都是用li表示的，而dl是由一个dt，和一个或多个dd组成的
2. dl一般用来设定一个定义，比如名词解释等。dt:标题，dd:描述，用来对dt的内容进行解释并说明的
2. 样式(用来修改标识类型)
1. list-style-image:用图像表示标识
2. list-style-position:标识的位置(inside/outside(默认，序号不占用文本空间))
3. list-style-type:标识类型
简写: list-style : list-style-image list-style-position list-style-type;list-style的值可以按随意顺序列出，而且可以任意省略，只要提供一个值，其他的都自动默认
list-style-type的属性值:
a. 无序: disc(实心圆、默认)/circle (空心圆)/square (矩形框)
b. 有序: decimal(默认)/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower- greek /lower-latin/upper- latin
有序和无序: none
作用:主要用于产品或公司相关宣传。
组成:
- 轮播的组图(至少两张以上，不能太多)
- 控制器
- 计数器
position: relative;相对定位
position: absolute;绝对定位，脱离文档流，它相对于position: relative;定义的元素进行定位
🎄定位布局
1．定位(position):设定元素再文档中的位置。会将标签（元素）转换为块级
2．定位分类(属性值)
a. static :静态定位（默认)。
没有定位，不能设置偏移值(left/top/ right/bottom) ,会占用标准流(文档流)
b. relative:相对定位。
1. 占用标准流(文档流)，可以设置偏移值。
2. 它相对于自身所占的位置做偏移
c. absolute:绝对定位。
1. 脱离文档流，相对于body做偏移。
2. 绝对定位一般与相对定位结合使用，它相对的父级是relative定义的
元素。relative的元素必须是absolute的父级。
3. 在项目开发中，一般用relative+absolute结合使用
d. fixed:固定定位
1. 脱离文档流，相对于浏览器窗口左上角(0，0)做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系
2. 一般在开发中用来固定导航栏
- z-index
a.当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置
元素显示的层次
b.文档流默认的z-index的值为0
c.用在static和relative元素上将无效
- 网站开发策略:先整体再局部，至顶向下，逐步细化
a. 双飞翼布局:由三列组成，两端固定，中间自适应
优点:兼容性好，兼容所有主流浏览器;因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载
b．圣杯布局:由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。布局时与双飞翼比增加了定位和偏移位置
c．侧边栏固定布局
i．两栏布局
1)左侧固定，右侧自适应
2右侧固定，左侧自适应
3)左右都固定
ii.三栏布局
1)两端固定，中间自适应
2)左侧自适应，中间和右侧固定
3左侧和中间固定，右边自适应
- BFC&FC: FC(Fomattion Context格式上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
a. BFC:块级格式上下文
1. 形成BFC的条件
1)浮动元素(float除none以外的值)
2)定位元素(position(absolute/fixed))
- display(值为inline-block/ table-cell/ table-caption时)
4)overflow(值为hidden/ atuo/ scroll)
ii. BFC特性
1)内部的盒子会在垂直方向上一个接一个的放置
2)垂直方向上的距离由margin的最大值决定，如果不想要
margin值叠加，需要将其变成一个独立的容器
3)BFC的区域不会与float元素区域重叠
4）计算BFC的高度时，浮动元素也参与计算
5)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
3. BFC的作用
1)解决margin重叠的问题(添加独立BFC)
2)解决浮动高度塌陷的问题(在父级添加overflow:hidden)
3)解决侵占浮动元素的问题（添加overflow:hidden)
b. IFC:内联(行级)格式上下文
1. 形成BFC的条件
font-size
line-height
height
vertical-aligin
2. IFC特性（规则)IFC的元素会在一行中从左到右排列
2)在一行上的所有元素会在该区域形成一个行框
3)行宽的高度为包含框的高度，高度为行框中最高元素的高度
4)浮动的元素不会在行框中，并且浮动元素会压缩行框的高度
5)行框的宽度容纳不下子元素时，子元素会换下一行显示，且会产生新行框
6)行框的元素内遵循texe-align和vertical-align
- CSS3的主要新特性：
a.选择器
b.阴影
c.形状转换（2D-＞3D）
d.变形
e.动画（过渡动画、帧动画）
f.边框
g.多重背景
h.反射
i.文字（效果、溢出处理等）
j.颜色（RGBA/HSLA）
k.滤镜（filter）
l.弹性布局
m.多列布局
n.盒模型
o.web字体
p.媒体查询 - CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要菲容处理，通常的做法就是加厂商前缀
a.主流浏览器内核
i.Trident：IE内核
ii.Webkit：chrome 和 Safari
iii.Gecko：FireFox
iv.Blink（是Webkit的一个分支）：chrome和Opera
Tips：目前国内的浏览器大多是双核的（IE内核+chrome内核）
b.厂商前缀
i.IE: -ms-
ii.chrome ＆ Safari : -webkit-
iii.FirFox : -moz-
iv.Opera : -o-
丰富选择的目的：减少标签中class和id属性的使用
1.属性选择器
a.［属性名］
b.［属性名＝属性值］
c.［属性名＾＝属性值］ 属性名的值以指定值开头
d.［属性名＄＝属性值］ 属性名的值以指定值结
e.［属性名*＝属性值］
2.结构性伪类
a.: root 匹配html标签，与body选择器效果一样
b.子元素选择
i.匹配父元素中连续的子元素
1): first-child 第1个子元素
2): last-child 最后1个子元素
3): nth-last-child(n) 倒数第n个子元素
4): nth-child(n) 第n个子元素
ii.匹配父元素中兄弟子元素，可以用于子元素非连续的情况
1): nth-of-type(n)
2): nth-last-of-type(n)
iii.其他
1): only-child 父元素中仅有一个子元素
a)p:only-child //查找父元素中仅有的一个标签为p标签，不允许其他标签存在，但在p标签中可以有子标签
3.目标伪类
1): only-of-type 父元素中仅有一个兄弟元素。代表了任意一个元素，这个元素没有其他相同类型的兄弟元素
2): empty 选择每个没有任何子级的元素（包括文本节点），即查找空元素
: target 匹配URL指向的元素
4.UI元素状态伪类
a.disabled
b.enabled
c.checked 只在Opera中有效
d.:: selection 高亮显示被选中的文本
5.否定伪类
a.: not
6.通用兄弟元素选择器 ：指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式
<子元素> ～ <子元素之后的同级兄弟元素>｛样式}
1.阴影（主流浏览器都支持）
a.text-shadow：水平阴影 垂直阴影 模糊度 颜色；
2.自动换行（主流浏览器都支持）word-wrap
a.normal（只允许在断点处换行）
b.break-word（在长单词或URL地址内部进行换行)
3.单词拆分 （主流浏览器都支持）work-break
a.normal：使用浏览器默认的换行规则
b.break-all：允许在单词内换行
c.keep-all：只能在半角空格或连字符处换行
4.文本拆分 （所有主流浏览器都不支持)text-wrap
5. 文本溢出
a.单行文本溢出
text-overflow: clip I ellipsis I string;
处理文字溢出样式：
width: pv/%/em/rem ;
white-space: nowrap ; /＊允许折行＊/
-ms-text-overflow: ellipsis ; /＊处理IE菲容＊/ text-overflow : ellipsis ;
overflow : hidden ;
b.多行文本溢出(IE9一下的版本不支持，主要是谷歌支持) width: px/%/em/rem…;
display: -webkit-box; ／／盒布局
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数; overflow: hidden;
1.圆角边框 border-radius:1-4 lengthI% ／ 1-4 lengthI%;
四个方位： top-left／top-right／bottom-left／bottom-right
- 带两个参数 border-radius: 10px 20px; ／第一个参数对应左上右下，第二个参数对应右上和左下／
- 带三个参数 border-radius:10px 20px 30px; ／第1个参数对应左上，第2个参数对应右上和左下，第3个参数对应右下／
- 带四个参数对应的是左上，右上，右下，左下
2.边框阴影（IE9以上支持) （要对谷歌、火狐做菲容）
box-shadow: 水平偏移距离 垂直偏移距离 ［模糊距离］ ［阴影的尺寸］ ［颜色］ ［inset］;
3.边框图片(IE11.0及以后的版本支持)
border-image:图片 向内偏移距离 宽度 图像区域超出边框的距离重复效果；
重复效果：round/strech/repeat
多重背景
a.background：背景色 背景图片 平铺方式 位置，背景色 背景图片 平铺方式 位置，．
b.background-size：设定背景图像的尺寸。要对谷歌做兼容处理background-size: 固定长度I百分比值IcoverIcontain;
1)over-把背景图扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也去无法显示在背景定位区域中
2)contain-把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
c.background-origin：指定背景图像的位置区域。需要对谷歌做菲容
background-origin: padding-box border-box content-box; background-repeat:no-repeat;bacdground-origin:content-box; 背景图像的相对位置的内容框
background-origin:padding-box; 背景图像填充框的相对位置
d.background-clip：设定背景的绘制区域
background-clip: border-box padding-box content-box;
i.border-box：背景被裁剪到边框盒。默认值
ii.padding-box：背景被裁剪到内边距框
iii.content-box：背景被裁剪到内容框
e.渐变背景
background-image:线性渐变I径向渐变
- rgba(r g b a)
a. r：红色 取值范围：0-255／0-100%
b. g：绿色 取值范围：0-255/0-100%
c. b：蓝色 取值范围：0-255/0-100%
d. a：不透明度 取值范围：0-1的一个小数
2.hsl(h s l)
a.h：色调 取值范围：0-360
b.s：陨和度 取值范围：0-100%
c.l：亮度 取值范围：0-100%
3.hsla（h， s， l， a)
通常用这个方法设置元素的遮罩（蒙版）层
4.opacity
a.调整元素的不透明度，大多数情况下用于做元素的遮罩效果，取值： 0-1的一个小数。
b.IE8及以下版本不支持，处理菲容的方式，再添加一行代码来处理不透明 度。
filter: alpha(opacity=数值)； ／／ 数值的范围：1-100
主要用来设置背景或制作三维图
1.线性渐变
bacdground: linear-gradient(方向或角度，颜色1 百分比，颜色2 百分比，．)；
a.方向:
to left：从右向左渐变
to right：从左向右渐变
to top：从下向上渐变
to bottom：从上向下渐变
to top left：从右下角向左上角渐变
to top right：从左下角向右上角渐变
to bottom left：从右上角向左下角渐变
to bottom right：从左上角向右下角渐变
b.角度：
i.如45度角，表示为：45deg
c.颜色取值：
i.表示颜色的单词
ii.16进制颜色
iii.表示颜色的函数（rgb（)／rgba（)／hsl（)／hsla（)．）
2.径向渐变(沿半径方向渐变) 要对谷歌低版本兼容
background: radial-gradient(形状 渐变大小 at 位置，颜色1 百分比，．颜色n 百分比);
a.形状：
i.ellipse：椭圆径向渐变（默认）
ii.circle：圆
b.渐变大小：
i.farthest-corner：渐变的半径长度为从圆心到离圆心最远的角
（默认）
ii.closest-side：渐变的半径长度为从圆心到离圆心最近的边
iii.closest-corner：渐变的半径长度为从圆心到离圆心最近的角
iv.farthest-side：渐变的半径长度为从圆心到离圆心最远的边
c.位置：
i.center：设置圆心在中心位置
ii.top：设置圆心在顶部位置
iii.bottom：设置圆心在底部位置
iv.at 圆心横坐标 圆心纵坐标：设定圆心的位置在指定的（横坐标纵坐标）处（px／%）
3.文字渐变
background-image: 线性渐变或径向渐变；
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
- box-sizing 允许以某种方式定义某些元素，以适应指定的区域
box-sizing: content-box/border-box （火狐和谷歌低版本需要厂商前缀）
box｛
}
height:200px; width:200px; border:1px solid #f00; padding:20px;
/＊内容实际宽度为200px（包含文本宽度158px+边框2px+内边距40px）＊/
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box; box-sizing:border-box;
/＊内容实际宽度为242px（包含文本宽度200px+边框2px+内边距40xp）＊/
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box; box-sizing:content-box;
盒子的变形
1.2D变形（-），要菲容（谷歌、火狐、IE、Opera）
a.translate（x， y) ： 2D转换，沿X轴和Y轴移动元素。如果只带一个参数，则表示x方向移位，y方向不移位
translateX（n)
translateY（n)
b.scale（x， y)：缩放转换，改变元素的宽度和高度。只带一个参数，表x，y都缩放
scaleX（n)
scaleY（n)
c.rotate（angle)：2D旋转，规定角度（-360deg -360deg）
d.skew（x-angle， y-angle)：2D倾斜转换，沿着X和Y轴。如果只带一个参数，则只有X轴方向倾斜
skewX（angle)
skewY（angle)
e.matrix（a，b，c，d，e，f)：定义2D变形，使用了6个值的矩阵。表示：
a c e
b d f
0 0 1
matrix用一个3行3列的矩阵表示，a和b表示x轴，c和d表示y轴，e和f表示z轴
■a和b表示缩放，如果没有缩放，值设为1
■b和c表示扭曲，如果没有扭曲，值为0
■e和f表示位移，如果没有位移，值伪0
■如果旋转角度为a，它会影响到a，b，c的值：
□a = cosa 口 b = sina口 c = -sina口 d = cosa
■如果扭曲skew（a1，a2)，会影响到b和c的值
□b = tana1 口 c = tana2
f.transform-origin：调整元素的基点 transform-origin: x-axis y-axis z-axis; 属性值：
2.3D变形
x-axis：定义视图被置于X轴的何处。值：left， center， right， length， %
y-axis：定义视图被置于Y轴的何处。值：top， center， bottom， length， %
z-axis：定义视图被置于Z轴的何处。值：length
a.perspective 让子元素获得透视效果
perspective: length none;
主流浏览器都不支持，谷歌要加-webkit-，或者在长度后加单位
b.transform-style 在3D空间中呈现被嵌套的元素（必须于transorm属性一同使用）
transform-style: flat preserve-3d;
■flat：子元素将不保留其3D位置
■preserve-3d：子元素将保留其3D位置
c. rotateZ 沿着Z轴方向旋转
- 常规用法transition-property transition-duration
transition-timing-function transition-delay - 复合用法
transition: property-name-list all duration timing-function delay;
a.可以使用的属性：
■颜色：color/ background-color/ border-color/ outline-color
■位置：background-position/ left/ right/ top/ bottom
■长度：max-height/ min-height/ min-width/ height/ width/border-width/ margin/ padding/ outline-width/ outline-offset/ font-size/ line-height/ text-indent/ vertical- aling/ border-spacing/ letter-spacing/ word-spacing
■数字：opacity/ visibility/ z-index/ font-weight/ zoom
■组合：text-shadow/ transform/ box-shadow/ clip
■其他：
□ 渐变：gradient
b.duration:动画持续时间，一般以秒或毫秒为单位
c.timing-function:动画函数
i.linear：匀速
ii.ease：变速（先慢后块，最后再慢）
iii.ease-in：变速（由慢到快）
iv.ease-out：变速（由快到慢）
v.ease-in-out：变速（慢速开始，慢速结束）
vi.cubic-bezier(n n n n)：自行设定变速，n的值在0-1之间
- delay：动画延时时间，一般以秒或毫秒为单位
1.关键帧动画
步骤：
a.设置关键帧
i.如果只有两个关键帧
@keyframes 动画名 ｛
0%：｛样式表}
100%：｛样式表}
}
或：
@keyframes 动画名 ｛
from：｛样式表}
to：｛样式表}
}
ii.如果是多个关键帧
@keyframes 动画名｛
0%：｛样式表}
25%：｛样式表}
75%：｛样式表}
100%：｛样式表}
}
- @keyframes规则
a. 可以创建动画，通过逐步改变从一个cSS样式设定到另一个
b. 0-100% （from-to）
- 注意：
■这里的百分比一般是升序值，可以是0%-100%之间的任意值，也可以是倒序
■菲容写法：@-webkit-keyframes 动画名｛ J}
b.实施动画
i.常规用法
1)animation-name：来自于@keyframes定义的动画名
2)animation-duration：动画持续时间，一般以秒或毫秒为单位（默认为0）
3)animation-timing-function：动画函数
® linear：匀速（默认值）
® ease：变速（先慢后块，最后再慢）
® ease-in：变速（由慢到快）
® ease-out：变速（由快到慢）
® ease-in-out：变速（慢速开始，慢速结束）
® cubic-bezier(n n n n)：自行设定变速，n的值在0-1之间
4)animation-delay：动画延时时间，一般以秒或毫秒为单位
5)animation-iteration-count：动画循环播放的次数
a)number：按设定次数循环播放（默认次数是1次）
b)infinite：一直循环播放
6)animation-direction：动画播放完后是否反向播放
a)normal：不反向（默认值）
b)alternate：反向
7)animation-play-state：动画播放或停止播放(单独写) - paused：停止播放
- running：播放（默认值）
简洁用法
animation: name duration timing-function delay iteration-count direction;
🎄布局
1.多列布局（分栏）
a.column-count：规定元素应该被分隔的列数（栏数） column-count: number auto;
b.column-gap：规定列之间的间隔 column-gap: length normal;
c.column-rule：设置栏间分割线
i.column-rule-style：设置线型
- none：没有分割线
- hidden：定义隐藏规则
- dotted定义点状规则
- dashed：定义虚线规则
- solid：定义实线
- double：定义双线
- groove：定义3D 沟槽效果，该效果取决于宽度和颜色值
- ridge：定义3D 脊状效果，该效果取决于宽度和颜色值
- inset：定义3D 左上角阴影，该效果取决于宽度和颜色值
- outset：定义3D 右下角阴影d，该效果取决于宽度和颜色值
ii.column-rule-width：设置线宽
iii.column-rule-color：设置分割线颜色
复合写法：column-rule: width style color;
d.column-width：规定列的宽度 column-width: length auto;
e.columns：规定设置column-width和column-count的简写操作 columns: width count;
2.flex弹性布局
当页面需要适应不同的屏尊大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。（设置flex布局时，子元素的float 、clear和verital-align属性会失效）
<font style="background-color:#87E8DE;">容器的属性</font>
- flex-direction：决定主轴的方向（项目的排列方向），作用父元素
flex-direction: row row-reverse column column-reverse
a.row：横向从左到右排列（左对齐），默认
b.row-reverse：反转横向排列（右对齐）
c.column：纵向排列
d.column-reverse：反向纵向排列
b.flex-wrap：默认情况下，项目都排在一条线上。
- flex-wrap定义，如果一条轴线排不下，如何换行
flex-wrap: nowrap wrap wrap-reverse;
a.nowrap：默认，不换行
b.wrap：换行，第一行在上方
c.wrap-reverse：换行，第一行在下方 - flex-flow：是flex-direction和flex-wrap的简写，默认为row nowrap flex-flow: ;
- justify-content：定义项目在主轴上的对齐方式，用于父元素
justify-content: flex-start flex-end center space-between space-around
a.flex-start：紧凑方式左对齐
b.flex-end：紧凑方式右对齐
c.center：紧凑方式居中对齐
🎈d.space-between：除了第1个和最后1个子元素，其他子元素等分空白区域
🎈e. space-around：所有子元素等分空白区域 - align-items：子元素在侧轴（纵轴）方向上的对齐方式，作用于父容器 align-items: flex-start flex-end center baseline stretch
a.flex-start：沿纵轴顶端对齐
b.flex-end：沿纵轴底端对齐
c.center：沿纵轴垂直居中对齐
d.baseline：沿纵轴基线对齐，项目的第一行文字的基线对齐
e.stretch：纵向拉伸对齐 - align-content：定义了多根轴线的对齐方式，如项目只有一根轴线，则该属性不欺作用
align-content: flex-start flex-end center space-between space-arround space- arround stretch;<font style="background-color:#87E8DE;">项目的属性</font>
- order：定义项目的排列顺序，数值越小，排列越靠前，默认为0 order:;
- flex-grow：定义子元素的放大比例，默认为i0，即如果存在剩余空间，也不放大，作用于子元素
flex-grow: number;
a.如果所有项目的flex-grow都为1，则它们等分剩余空间
b.如一个项目为2，其他为1，则前者占据的剩余空间比其他的多一倍 - flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-shrink: ;
a.如所有项目属性值为1，当空间不足时，都等比例缩小
b.如一个项目属性值为0，其他为1，则空间不足时，前者不缩小 - flex-basis：定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认为auto。
flex-basis: auto; - lex：指定弹性子元素空间分配，用于子元素
flex: auto initial none inherit ［flex-grow］ ［flex-shrink］ ［flex-basis］
a.auto：等价于 1 1 auto
b.initial：等价于 0 1 auto
c.none：等价于 0 0 auto
d.inherit：从父元素继承 - align-self：允许单个项目有于其他项目不一样的对齐方式，可覆盖align-items属性。默认 auto，表示继承父元素的align-items属性，如没有父元素，等同于stretch
align-self: auto flex-start flex-end center baseline stretch;
TIPS：flex可以带1-3个参数
■带1个参数
□无单位，这个数值会被当做flex-grow（放大）的值
□带单位，这个数值会被当做flex-basis（基本宽度）的值
□auto(自动宽度) initial(初始宽度) none
■带2个参数
□第1个参数必须是一个无单位的数值，它会被当做flex-grow的值
□第2个参数：
®无单位，这个数值会被当做flex-shrink(收缩比率)的值
®有单位，这个数值会被当做flex-basis(基本宽度)的值
■带3个参数
□第1个参数必须是一个无单位的数值，当做flex-grow的值
□第2个参数也必须是一个无单位的数值，当做flex-shrink的值
□第3个必须是一个有效的宽度值（带单位），当作flex-basis（默认基准宽度）的值
3.响应式布局
- 概念：Responsive Design，在实现不同屏尊分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验
- 响应式布局和自适应布局的区别
a.响应式布局只开发一套代码，通过检测视口的分辨率，针对不同客户端在客户端做代码
处理，来展现不同的布局和内容
b.自适应需要开发多套界面，通过检测视口的分辨率，来 断当前访问的设备使Pc端、平板、手机等，从而请求服务层，返回不同的页面
c.响应式布局等同于流动网格布局，而自适应等同于使用固定分割点来进行布局
d.自适应布局给出了更多的设计空间，只考虑几种不同的状态就可以了；而响应式布局要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑到。 - 响应式开发实现方法
1)媒体查询
2)百分比布局
3)rem布局（相对于根节点（元素）html中的字号布局）
4)视口单位布局（vw/ vh） - 响应式设计步骤
1)设置meta标签
2)通过媒体查询来设置样式
3)设置多种视图的宽度
□宽度需要使用百分比/rem/vw&vh等
□处理图片缩放
□其他属性处理，如pre/ iframe/ video等，都要缩放其大小，table，简易不要增加 padding属性，低分率下要使用内容居中操作
- 媒体查询
a.步骤
- 设置meta标签
＜meta name＝"viewport" content＝"width＝device-width， initial-scale＝ 1.0，maxium-scale＝1.0，user-scalable＝no"＞
说明：以上标签的内容只能被移动端设备识别
•viewport：视口（移动端）
•width=device-width：宽度等于当前设备的宽度
•initial-scale=1.0：初始缩放比例（默认为1）
•maxium-scale=1.0：允许用户缩放到的最大比例
•user-scaleable=no：用户是否可以手动缩放（默认为no）
2) 设置IE渲染方式，默认为最高版本
＜meta http-equiv＝"X-UA-compatible" content＝"IE＝Edge，chrome＝1"＞
说明：以上代码表示如果浏览器有chrome插件，将以chrome提供的V8引擎渲染页面；如果没有，将以IE的最高版本渲染页面
3) 引入兼容的JS文件
说明：
•因为IE8及以下版本既不支持html5，也不支持cSS3 Media，所以需要加载JS文件来处理这个菲容。
•上面的代码是一个注释语句，也就是说，IE9及以上的版本不会编译这几行代码
4) 进入cSS3提供的媒体查询
- 引入外部cSS文件时使用
＜!-- 屏宽480px以下，加载screen480.css文件 --＞
＜link rel＝"stylesheet" href＝"css／screen480.css" media＝"screen and （max- width:480px)"＞
＜!-- 屏宽480px以上且在800px以下，加载screen800.css文件 --＞
＜link rel＝"stylesheet" href＝"css／screen800.css" media＝"screen and （min- width:480px) and （max-width:800px)"＞
＜!-- 屏宽800以上，加载screengt800.css文件 --＞
＜link rel＝"stylesheet" href＝"css／screengt800.css" media＝"screen and
（min-width:800px)"＞
设备：
◊ all：所有设备
◊ screen：Pc端显示器
◊ print：打印机或打印预览图
◊ handheld：便携设备
◊ tv：电视
◊ speech：音频合成器
◊ braille：盲人点触设备
◊ embossed：盲人打印机
◊ projection：投影设备
◊ tty：固定密度字母栅格设备
◊ only：用来排除不支持媒体查询的浏览器
5.web字体
ii)在style标签中用@media定义
eg.浏览器页面缩小时菜单栏隐藏（媒体查询2.html）