用于美化页面， 装饰页面的
1, 选择器后面跟一个花括号， 选择器和花括号之间要有一个空格
2, 花括号内有多个键值对， 每一对后面跟个分号
3, 数值不用双引号， 字符串需要双引号
font-size: 字号大小
？ 单位：
em: 相对于文本字体大小px:像素in: 英寸cm:厘米mm: 毫米pt:点
font-family: 字体
？ p{ font-family:“微软雅黑”;} 直接写中文xp系统不支持
？ 方法一： 写对应的英文
？ 方法二： 写对象的编码
字体名称英文名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53
font-weight: 字体粗细
？ font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100——900（100的整数倍）。
？ 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。
font-style: 字体风格
？ font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
？ normal：默认值，浏览器会显示标准的字体样式。
？ italic：浏览器会显示斜体的字体样式。
？ oblique：浏览器会显示倾斜的字体样式。
font综合设置
？ 选择器{font: font-style font-weight font-size/line-height font-family;}
？ 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
？ 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
标签选择器 （元素选择器）
类选择器
这个类名可以被多个标签使用， （多个标签起同一个类名）
多类名选择器
一个标签名， 有多个选择器名
id选择器
这个id名只能使用一次， （只能有一个标签使用）
通配符选择器
连接伪类选择器
：link 未访问的连接
visited 已访问的连接
：hover 鼠标移动到连接上
active 选定的连接
结构（位置）伪类选择器
：first-child 选取属于其父元素的首个子元素的指定选择器
：last-child 选取属于其父元素的最后一个字元素的指定选择器
：nth-child（N） 匹配属于父元素的第N个字元素， 不论元素类型
：nth-last-child（N） 选取匹配属于其元素的第N个元素的每一个元素，不论元素类型， 从最后一个元素开始计数
目标伪类选择器
：target, 用于选取当前活动的目标元素
交集选择器
交集选择器由两个选择器构成， 期中第一个为标签选择器， 第二个为类选择器， 中间不能有空格
含义： 交集为并且的意思， （选中的是P标签， 并且这个标签的类名叫noe）
并集选择器
由多个选择器 构成， 可以是标签选择器，类选择器id选择器。 中间由逗号隔开
含义： 和的意思， （P, ,noe,#tow,三个都这个设置）
后代选择器 （包含选择器）
由多个选择器组成， 可以是标签，类名， id名， 中间由空格隔开
含义： 层级选中 （选择爷元素下的， 子元素下的， 曾孙元素， 将该元素设置属性），
注意： 可以隔代选择 ,只要是子孙（被包含的）都可以选择
子元素选择器
由多个选择器组成， 可以是标签，类名， id名， 中间由大于号隔开
含义： 选择爷元素下的， 父元素下的， 子元素下的， 曾孙元素， 将该元素设置属性
注意： 只能选择自己的子元素， 一层一层选择下去， 不能跳过子元素直接选中曾孙元素
**选择器**示例**含义E[attr]****存在attr属性即可E[attr=val]****属性值完全等于valE[attr*=val]****属性值里包含val字符并且在“任意”位置E[attr^=val]****属性值里包含val字符并且在“开始”位置E[attr$=val]****属性值里包含val字符并且在“结束”位置
<ul>
<li\ type=‘fruit’ color=‘green’>西瓜</li>
<li\ type=‘vegetable’ color=‘greenyellow’>西兰花</li>
<li\ type=‘meat’>牛肉</li>
<li\ type=‘meat hot’>猪肉</li>
<li\ type=‘drink hot’>可乐</li>
<li\ type=‘drink hot’>雪碧</li>
<li\ price=‘very-cheap’>红酒</li>
<li\ price=‘very’>白酒</li>
</ul>
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“：”用来表示伪类，“：：”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“：” 与 “：：” 区别在于区分伪类和伪元素
color: 文本颜色
有三种取值
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb（255,0,0）或rgb（100%,0%,0%）。
line-height: 行间距
有三种单位
？ px, em, %
text-align: 水平对齐
1, left: 左对齐（默认）
2, right: 右对齐
3, center: 居中
text-index: 首行缩进
？ 单位 em, 一个 em 就是一个字的宽
letter-spacing: 字间距
？ 字与字之间的距离， 单位可以是数值， 默认值为normal
word-spacing: 单词间距
？ 单词与单词之间的距离， 单位可以是数值， 默认值为normal
颜色透明度
？ color: rgba（r,g,b,a） a 是alpha 透明的意思 取值范围 0——1之间 color: rgba（0,0,0,0.3）
text-shadow:文字阴影
？ 给文字添加阴影
？ text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
？ h-shadow: 必写， 水平阴影， 允许负值
？ v-shadow: 必写， 垂直阴影， 运行负值
？ blur: 可选 模糊距离
？ color: 可选
？
行内样式 （内联样式）
？ 将样式直接写的标签中
内部样式（内嵌式）
？ 在head内， 写style标签， 在style标签中写
外部样式 （外链式）
？ 1, 写一个css文件， 直接写在文件内
？ 2, 在需要的页面， head中引入
块级元素block-level
行内元素inline-level
块元素 和 行内元素的区别
行内块元素inline-block
background-image背景图片
none: 无背景图（默认）
url: 图片地址， 不要双号
background-repeat背景平铺
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺 （单横向平铺）
repeat-y : 背景图像在纵向平铺 （单纵向平铺）
background-position背景位置
length : 百分数 | 由浮点数字和单位标识符组成的长度值
position : top | center | bottom | left | center | right
1, 设置或检索对象的背景图像位置。必须先指定background-image属性。
2, 默认值为：（0% 0%）。
3, 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
background-attachement背景附着
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明： 设置或检索背景图像是随对象内容滚动还是固定的。
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
rgba（0,0,0,0.3）背景透明（CSS3）
CSS3支持背景半透明的写法语法格式是：
最后一个参数是alpha 透明度 取值范围 0——1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
同样， 可以给 文字和边框透明 都是 rgba 的格式来写。
###### background-size背景缩放（CSS3）
a） 可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
b） 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
c） 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
多背景（CSS3）
以逗号分隔可以设置多背景，可用于自适应布局
层叠 继承 优先级
css层叠
是指css的样式重复， 当浏览器发现两个选择器设置同一个元素时， 会将另一个的选择器样式覆盖掉，
css基础
有两个元素是嵌套关系（父子元素）， 给父元素设置样式， 子元素也会基础到父元素的样式
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
css优先级
？ 默认样式 < 基础样式 < 通配符 < 标签名 < class < id < 行内样式
？ 设置！important该样式优先级最大
css的特殊性
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者* 的贡献值0,0,0,0每个元素（标签）贡献值为0,0,0,1每个类，伪类贡献值为0,0,1,0每个ID贡献值为0,1,0,0每个行内样式贡献值1,0,0,0每个！important贡献值∞ 无穷大
例如：
注意： 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
CSS就三个大模块： 盒子模型 、 浮动 、 定位
盒子边框border
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
设置单边样式
设置内容样式属性常用属性值上边框border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;下边框border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;左边框border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;右边框border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;样式综合设置border-style:上边 [右边 下边 左边];none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线宽度综合设置border-width:上边 [右边 下边 左边];像素值颜色综合设置border-color:上边 [右边 下边 左边];颜色值、#十六进制、rgb（r,g,b）、rgb（r%,g%,b%）边框综合设置border:四边宽度 四边样式 四边颜色;
圆角边框
内边距padding
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
当关键字后面跟的数值不一样时， 表达的意思也不一样
值的个数表达意思1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素2个值padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素4个值padding:上内边距 右内边距 下内边距 左内边距 比如： padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
外边距marign
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
清除元素的默认内外边距
元素之间是有默认内外边距的
边距合并
盒子的大小
注意：
？ 1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
？ 2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
盒子模型布局稳定性
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
原因：
margin 会有外边距合并 还有 ie6下面margin 加倍的bug 所以最后使用。
padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
width 没有问题
盒子阴影
标准流：
？ 又叫， 普通流， 文档流。
？ 当一个页面元素的排版从上到下， 从左到右依次排序， 快元素会独占一行， 行内元素会在一行， 的时候就叫普通流
元素的浮动是指设置了浮动属性的元素会脱离标准流， 移动到其父元素的中指定的位置
浮动的特性
浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
当两个块元素浮动时， 会并排显示， 加了浮动的元素，不占位置， 位置将会留出来给标准流的元素
元素浮动后具有行内块元素的特性
清除浮动
？ 有两个元素是嵌套关系， 父元素没有高度， 子元素浮动了， 父元素的高度会显示0
方法一
方法二
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有……
方法三： overflow
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
方法四： 使用after伪元素清除浮动
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持：after，使用 zoom:1触发 hasLayout。
方法五： 使用before和after双伪元素清除浮动
使用方法：
优点： 代码更简洁
缺点： 由于IE6-7不支持：after，使用 zoom:1触发 hasLayout。
将元素定在某个位置就是定位
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离right右侧偏移量，定义元素相对于其父元素右边线的距离
也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
position属性的常用值
值描述static自动定位（默认定位方式）relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上一个已经定位的父元素进行定位fixed固定定位，相对于浏览器窗口进行定位
静态定位static
？ 恢复标准流， left,right等都不能使用， 是默认值
相对定位relative
？ 配置后在标准流的位置还在， 元素相对于该位置定位
绝对定位absolute
？ 配置后不会保留原先的位置， 元素会根据父元素定位， 如果父元素没有定位， 会根据浏览器定位， 浏览器滑动， 定位元素也会跟着滑动， 一直保持这个距离
固定定位fixed
？ 固定定位的元素跟父亲没有任何关系，只认浏览器。
？ 固定定位完全脱标，不占有位置，不随着滚动条滚动。
多个元素定位时， 可能会层叠覆盖掉其他的元素，
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
定位模式是否脱标占有位置是否可以使用边偏移移动位置基准静态static不脱标，正常模式不可以正常模式相对定位relative不脱标，占有位置可以相对自身位置移动绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置
跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，
display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
鼠标样式cursor
设置鼠标样子
轮廓 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
防止拖拽文本域resize
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。
baseline: 文字和图片基线对齐
middle: 文字和图片中间对齐
top: 文字和图片头部对齐
去除图片底侧空白缝隙
如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决方法：
？ 1, 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
？ 2, 给img 添加 display：block; 转换为块级元素就不会存在问题了。
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来
将图标生成兼容性字体文件包
推荐网站：
阿里巴巴矢量图库
fontello
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
Font-Awesome
字库 目前已经有369个图标了。
Glyphicon Halflings
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。
Icons8
提供PNG免费下载，像素大能到500PX
输入阿里矢量图库地址
搜索自己需要的的图标
点击放入购物车
3.点击购物车
？ 4.下载代码
？
？ 5.解压文件包， 将括号中的文件复制到需要的项目中
？ 6.打开index.html文件
？ 7.查看使用教程
设置文本背景时， 文本长度不一样， 背景需要更改， 不想更改的情况下使用该技术
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度， 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2、各属性详解****
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值
过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态（我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式：
属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。3transition-duration定义过渡效果花费的时间。默认是 0。3transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。3transition-delay规定过渡效果何时开始。默认是 0。3
运动曲线示意图：
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform
移动 translate（x, y）
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
缩放 scale（x, y）
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale（）的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
旋转 rotate（deg）
可以对元素进行旋转，正值为顺时针，负值为逆时针；
当元素旋转以后，坐标轴也跟着发生的转变调整顺序可以解决，把旋转放到最后注意单位是 deg 度数
倾斜 skew（deg, deg）
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
transform-origin可以调整元素转换的原点
rotateX（） 就是沿着 x 立体旋转。（翻转）
rotateY（）沿着y轴进行旋转（翻转）
rotateZ（）沿着z轴进行旋转（翻转）
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法
作为一个属性，设置给父元素，作用于所有3D转换的子元素作为transform属性的一个值，做用于元素自身
理解透视距离原理：
translateX（x）
仅水平方向移动**（X轴移动）
主要目的实现移动效果
translateY（y）
仅垂直方向移动（Y轴移动）
translateZ（z）
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
3D呈现（transform-style）
设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
flat：所有子元素在 2D 平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上。
翻转盒子案例（百度钱包）
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
|
