C3+H5

文字阴影
text-shadow:h-shadow v-shadow blur(模糊的距离) color

box-shadow: 盒子阴影
box-shadow: h-shadow v-shadow blur spread(阴影的大小) color inset(内层);


过渡
transition  过渡    

transition-property		设置对象中的参与过渡的属性(必须) 
transition-duration		设置对象过渡的持续时间(必须)
transition-timing-function	设置对象中过渡的动画类型 
transition-delay		设置对象延迟过渡的时间

transition-property  设置对象中的参与过渡的属性。 
	默认值为：all

transition-timing-function  :
 linear(线性过渡)   ease(平滑过渡)   steps()
cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内


转换
transform 转换 设置在页面上移动、缩放、旋转、倾斜元素
  transform:translate(x,y)  scale(1,2)  rotate(45deg)  skew(45deg)

transform-origin 设置元素旋转中心点
 语法: 	transform-origin: x y;
还可以给 x y 设置像素或者百分比或者方位名词(top、bottom、left、right、center)


动画

声明动画: @keyframes
	@keyframes 规则是创建动画。
	@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

语法： 
	关键词 "from" 和 "to"
	@keyframe 动画名{
	0%{
		初始样式设置
		}
	····
	100%{
		结束样式设置
		}
	}

动画常见属性：
	animation-name	设置动画名字
	animaton-duration	设置动画完成一个周期所用的时间（默认0）  
	animation-timing-function	设置动画速度曲线，默认ease   (linear)
	animation-delay	设置动画延迟时间 默认0
	animatioon-iteration-count	设置动画播放次数 默认1 特殊值infinate(无限)
	animation-direction	设置动画播放次数，默认normal,altermate先正后逆播放
	animation-fill-mode	规定动画结束后的状态，保持结束状态：forwards,回到起始：backwards

animation符合属性

animation: 动画名称 动画执行时间 动画速度曲线          动画延迟时间 动画循环次数        动画播放方向 	动画结束状态;

animation: name    	duration         timing-function         delay        iteration-count    direction  	fill-mode



词语间隔  word-space:10px 能精确的知道距离；

字符间隔   letter-spacing:20px 注意：设置字符间隔时，空格也会当作字符
 
 文字排版 writing-mode:vertical-rl  从上到下 从右到左
         writing-mode:vertical-lr   从上到下  从左到右

空白处理（4个）：
    white-space:默认normal  不保留空格和换行，到边界自动换行
                pre 保留空格和换行，到边界不会自动换行
                nowrap 不保留空格和换行，所有文字强制一行显示
                pre-wrap保留空格和换行，超出边界自动换行
                pre-line不留空格，保留换行，超出边界自动换行


内容溢出(4个): 
    overflow：visible（默认）对溢出的文字不处理，显示出来
                hidden 对溢出的内容进行隐藏，不显示
                scroll 显示滚动条，用户可以拖拽滚动条及逆行溢出的文字浏览（不管文字有没有溢出，都会出现滚动条）
                auto 根据文字是否溢出，自动显示滚动条
text-overflow:ellipsis;(出现...代替未出现的文字)

table-layout:fixed(固定布局的算法)
            auto默认




 伪类选择器：
 :first-letter 选择元素第一个字符
 :first-line 选择元素的第一行内容
 :selection:设置被选择时的样式，注意：只能设置背景颜色 文字颜色文字阴影

before和after
设置before元素  必须设置content属性值
设置after元素 也要设置content属性值


浮动
flaot:left
     :right
     :none(默认值)


导航栏常用方式li+a
1.创建ul>li列表>a标签  结构
2.li样式设置：清楚列表样式，设置宽高，浮动
3.a标签样式设置：转为行内块(display:inline-block)，设置宽高填充父元素，垂直居中，设置背景颜色，文字颜色
4.设置a：hover  样式：背景颜色，文字颜色

清楚浮动
1.clear:both left right (不建议)
2.清除浮动，在父类使用：after 创建一个块元素  设置clear:both  
   :before 和 :after :after {
            display:block
            content:""
            clear:both
	}
            
不让li的区域发生变化
box-sizing:border-box





图片垂直
vertial-align:botton
                
颜色透明度
    rgba(, , , )四个参数  透明度0-1
背景图片
设置背景图片
    background-image:url();
设置背景平埔方式
    background-repeat:no-repeat
                        repeat-x(横向平铺)

   --------------------------------------------------------------------                     
（                      ★）（★）（★）
设置图片大小
background-size:0px 0px (两个参数)
                auto默认
                contain盒子根据设置的大小   保持图片原始比例
                cover 部分图片不显示
----------------------------------------------------------------------------

                    （★）（★）（★）
设置图片位置（可接受1-4个参数）
   参数结构： 定位符（top right left bottom）偏移量 定位符 偏移量
    background-position:right 0px top 0px（四个参数）

三个参数举例：right top 10px 紧贴着右  据顶部10px  
    right 10px bottom 距右10 紧贴这下

两个参数：（left）偏移量  （top）偏移量   第一个参数控制水平，第二个参数控制垂直

一个参数 ：默认控制水平方向  垂直方式默认center
-------------------------------------------------------------------------
背景图片显示原点：
    background-origin:border-box;（从边框开始显示）  padding-box（默认）   
                        content-box(从内容显示区域出发展示)

设置背景是滚动的还是固定的
background-attachment:fixed（一般给body或container设置这样的效果）基于视口
                        scrool跟随对象滚动
                        local 跟随对象内容

background:背景颜色  背景图片地址 背景平铺  背景滚动 背景位置 

-------------------------------------------------------------------
列表
list-style-type:circle(空心圆) disc(默认) square(实心方框)
            upper-alpha(大写英文字母) lower-alpha（小写英文字母）
            upper-roman(大写罗马数字) lower-roman(小写罗马数字)
    以0开头的数字： :decimal-leading-zero
            常规：decimal

list语法：type position image
超链接伪类顺序 lvha      link>visited>hover>active



词语间隔  word-space:10px 能精确的知道距离；

字符间隔   letter-spacing:20px 注意：设置字符间隔时，空格也会当作字符
 
 文字排版 writing-mode:vertical-rl  从上到下 从右到左
         writing-mode:vertical-lr   从上到下  从左到右

空白处理（4个）：
    white-space:默认normal  不保留空格和换行，到边界自动换行
                pre 保留空格和换行，到边界不会自动换行
                nowrap 不保留空格和换行，所有文字强制一行显示
                pre-wrap保留空格和换行，超出边界自动换行
                pre-line不留空格，保留换行，超出边界自动换行


内容溢出(4个): 
    overflow：visible（默认）对溢出的文字不处理，显示出来
                hidden 对溢出的内容进行隐藏，不显示
                scroll 显示滚动条，用户可以拖拽滚动条及逆行溢出的文字浏览（不管文字有没有溢出，都会出现滚动条）
                auto 根据文字是否溢出，自动显示滚动条
text-overflow:ellipsis;(出现...代替未出现的文字)

table-layout:fixed(固定布局的算法)
            auto默认



display:inline-block
        block
        inline
        none(不保留位置)
visbility:visible(隐藏 保留位置)

内边距
padding 4个参数  上右下左
        3个参数   上 右左 下
        2个参数     上下左右
        1个参数      设置同一个方向



 伪类选择器：
 :first-letter 选择元素第一个字符
 :first-line 选择元素的第一行内容
 :selection:设置被选择时的样式，注意：只能设置背景颜色 文字颜色文字阴影

before和after
设置before元素  必须设置content属性值
设置after元素 也要设置content属性值


浮动
flaot:left
     :right
     :none(默认值)


导航栏常用方式li+a
1.创建ul>li列表>a标签  结构
2.li样式设置：清楚列表样式，设置宽高，浮动
3.a标签样式设置：转为行内块(display:inline-block)，设置宽高填充父元素，垂直居中，设置背景颜色，文字颜色
4.设置a：hover  样式：背景颜色，文字颜色

清楚浮动
1.clear:both left right (不建议)
2.清除浮动，在父类使用：after 创建一个块元素  设置clear:both  
   :before 和 :after :after { display:block
            content:""
            clear:both}
            
不让li的区域发生变化
box-sizing:border-box



媒体查询语句
/* 当浏览器宽度大于等于500像素时 */
@media (min-width:500px){
	.box{
		width:300px;
		height:400px;
	}
}

常见宽度相关的媒体查询:
	min-width:  像素值	当浏览器窗口宽度小于等于指定像素值时
	max-width: 像素值	当浏览器窗口宽度大于等于指定像素值时
	min-width: 像素值1  and  max-width:像素值2
		当浏览器窗口宽度介于像素值1和2之间时

横竖屏的媒体查询
	orientation:landscape	横屏(浏览器显示宽度小于高度)
	orientation:portrait		竖屏


当浏览器显示界面大于700px时使用的CSS样式文件 
<link rel="stylesheet" type="text/css" href="big.css" media="(min-width:700px)"/>

 当浏览器显示界面介于500px和700px之间时使用的CSS文件样式 
<link rel="stylesheet" type="text/css" href="mid.css" media="(min-width:500px) and (max-width:700px)"/>


Flex布局
Flex布局又称弹性布局，伸缩布局

块级元素设为Flex布局 
.box{display: flex;}

行内元素设置为Flex布局 
.box{display: inline-flex;}

Flex布局的容器属性：

flex-direction	设置主轴的方向（即项目的排列方向）。 取值：row(默认 左对齐) row-reverse(右对齐)  column(垂直  顶对齐) colum-reverse(下对齐)
flex-wrap		设置项目换行模式   		取值：nowrap(默认) wrap(换行 放置下一行)  wrap-reverse（反转 wrap 排列）
	-----常用4个----
flex-flow		flex-direction属性和flex-wrap属性的简写形式	取值：flex-flow：row nowrap （默认）

水平
justify-content	设置项目在主轴上的对齐方式	
	取值:flex-start（默认值）： flex-end    center   space-between( 弹性盒子元素会平均地分布在行里)   
	space-around( 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半)
	space-evenly：项目之间间距与项目与容器间距相等
垂直
align-items	设置项目在交叉轴上的对齐方式	 stretch（默认值）
	取值:	 flex-start：交叉轴的起点对齐。	 flex-end：交叉轴的终点对齐。
		center：交叉轴的中点对齐。	baseline: 项目的第一行文字的基线对齐。
多线轴
align-content	设置多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
取值：	flex-start：与交叉轴的起点对齐。stretch（默认值）
	flex-end：与交叉轴的终点对齐。    center：与交叉轴的中点对齐。
	space-between	space-around 	space-evenly


flex布局项目属性
roder 设置项目出现的顺序（不常用）
flex-grow 设置项目的扩展比率
flex-shrink 设置项目的收缩比率
flex-basis 设置项目伸缩基准值
flex:复合属性

align-self  可覆盖align-items属性
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

图片垂直
vertial-align:bottom
                
颜色透明度
    rgba(, , , )四个参数  透明度0-1
背景图片
设置背景图片
    background-image:url();
设置背景平埔方式
    background-repeat:no-repeat
                        repeat-x(横向平铺)

   --------------------------------------------------------------------                     
（                      ★）（★）（★）
设置图片大小
background-size:0px 0px (两个参数)
                auto默认
                contain盒子根据设置的大小   保持图片原始比例
                cover 部分图片不显示
----------------------------------------------------------------------------

                    （★）（★）（★）
设置图片位置（可接受1-4个参数）
   参数结构： 定位符（top right left bottom）偏移量 定位符 偏移量
    background-position:right 0px top 0px（四个参数）

三个参数举例：right top 10px 紧贴着右  据顶部10px  
    right 10px bottom 距右10 紧贴这下

两个参数：（left）偏移量  （top）偏移量   第一个参数控制水平，第二个参数控制垂直

一个参数 ：默认控制水平方向  垂直方式默认center
-------------------------------------------------------------------------
背景图片显示原点：
    background-origin:border-box;（从边框开始显示）  padding-box（默认）   
                        content-box(从内容显示区域出发展示)

设置背景是滚动的还是固定的
background-attachment:fixed（一般给body或container设置这样的效果）基于视口
                        scrool跟随对象滚动
                        local 跟随对象内容

background:背景颜色  背景图片地址 背景平铺  背景滚动 背景位置 

-------------------------------------------------------------------
列表
list-style-type:circle(空心圆) disc(默认) square(实心方框)
            upper-alpha(大写英文字母) lower-alpha（小写英文字母）
            upper-roman(大写罗马数字) lower-roman(小写罗马数字)
    以0开头的数字： :decimal-leading-zero
            常规：decimal

list语法：type position image
超链接伪类顺序 lvha      link>visited>hover>active