css+css3

css+css3

背景

background: 颜色 图片 是否平铺 是否固定 起始位置; 
background-color:red;   //背景颜色
background-image:url('');   //背景图片
background-repeat:repeat-x|repeat-y|no-repeat;  //背景图片 水平平铺 垂直平铺 不平铺
background-position:水平位 垂直位;  //背景图像起始位置  若只有一值，另一个默认为center （使用top.../百分比/px）
background-attachment:scroll(默认)|fixed(固定); //背景图像是否固定或者随着页面的其余部分滚动
background-size:109px|cover;        //背景图片大小 cover完全覆盖背景定位区域的最小大小
background-clip: border-box|padding-box|content-box;
//背景绘制区域  包括边框区域里/边框内区域/内容区域(内部不含padding)
background-origin: padding-box|border-box|content-box;  //背景图片相对位置 （填充框的相对位置,边界框的相对位置,相对位置的内容框）
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;   //定义了背景层的混合模式（图片与颜色）  正常/正片叠底模式/滤色模式/叠加模式/变暗模式/变亮模式/颜色减淡模式/饱和度模式/颜色模式/亮度模式

文本

color:red;  //文本颜色
text-align:center|right|justify;    //对齐方式 居中对齐/从左到右/两端对齐（适用报纸，杂志）
text-decoration:overline|line-through|underline|none|blink;
//文本修饰 上划线/中划线/下划线/取消样式/闪烁文本
text-transform:uppercase|lowercase|capitalize;  //大小写转换   全部大写/全部小写/首字母大写
text-indent:50px;   //文本缩进 第一行缩进长度
letter-spacing:2px;     //文本字符间距
word-spacing:30px;      // 字间距 增加文本之间空白内容长度
line-height:70%;        //文本设置行高
direction:ltr|rtl;      //文本方向 从左向右/从右向左
vertical-align:sub|super|top|text-top|middle|bottom|text-bottom|%|px;       
//垂直对齐 下标/上标/最高顶端/父顶端/父中部/最低端/父低端/百分比/像素
white-space:normal|pre|nowrap|pre-wrap|pre-line;
//元素内的空白 默认/空白保留(类似pre)/文本不换行(除了遇到br)/保留空白且正常换行/合并空白符保留换行符
text-shadow:水平位置 垂直位置 模糊距离 颜色;      //阴影文本
text-overflow: clip|ellipsis|string;  //当文本溢出包含它的元素时样式   修剪/用省略号/用给定字符串
word-wrap: normal|break-word;    //允许长的内容可以自动换行  无/自动换行
word-break: normal|break-all|keep-all;  //非CJK脚本的断行规则 浏览器的/允许单词内换行/只能在空格或连接换行

字体

font-family:宋体;     //属性设置文本的字体系列
font-style:normal|italic|oblique;   //字体样式 正常/斜体/斜体
font-size:40px;     //字体大小  
font-variant:normal|small-caps; //定义小型大写字母文本
font-weight:normal(400)|bold(700)|bolder|lighter;   //字体加粗  正常/加粗/更粗/更细/数值(100~900)

h5 文字大小不变的方法(使用百分比和em组合):
body{font-size:100%}
h1{font-size:2.5em}

链接

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 a:hover 必须跟在 a:link 和 a:visited后面   a:active 必须跟在 a:hover后面 */

列表

list-style-type: circle|square|upper-roman|lower-alpha|none;    //列表项样式 前两个无序列表 后两个有序列表 删除样式
list-style-image: url('sqpurple.gif');  //列表项 设为图片 但不适配浏览器
ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}//浏览器兼容性解决方案 设置列表项为图片

list-style-position:inside|outside; //列表项目标记是否放置在文本以内 outside默认为不在文本内

弹性盒模型

flex:1|0|auto;  //设置或检索弹性盒模型对象的子元素如何分配空间
flex-basis: 80px;    //用于设置或检索弹性盒伸缩基准值
flex-direction: row|row-reverse|column|column-reverse;    //项目的方向  水平/水平相反/列/列相反
flex-wrap: nowrap|wrap|wrap-reverse;  //规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向 不拆/拆行/拆且相反
flex-flow: flex-direction flex-wrap;   //设置或检索弹性盒模型对象的子元素排列方式
flex-grow: 1;    //设置或检索弹性盒的扩展比率
flex-shrink:1;   //设置或检索弹性盒的收缩比率
justify-content: flex-start|flex-end|center|space-between|space-around;   //设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式   容器的开头/容器的结尾/容器的中心/各行之间留白/各行之前之间之后都留白
order:0;  //弹性盒子中元素的顺序  从0开始...

表格

table, th, td{border: 1px solid black;}     //表格边框
border-collapse:collapse|separate;      //表格折叠边框 重叠/分开
width:100%;height:50px;         //表格宽高
text-align:left|center|right;   //表格内容水平对齐
vertical-align:top|middle|bottom;   //表格内容垂直对齐
padding:15px;                   //表格里空格边框内填充
background-color:green;         //表格内背景颜色
color:white;                    //表格内容文本颜色
border-collapse:10px 20px;      //表格边框间距 两个值为  水平和垂直
empty-cells:hide|show;   //是否显示表格里空单元格 隐藏/显示
table-layout:auto|fixed;    //设置表格布局算法   列宽度由单元格内容设定/列宽由表格宽度和列宽度设定
<caption>表格表头</caption>
caption-side:top|bottom;        //表格表头放置位置 放在上方/下方

分列

column-count:3;    //元素分为的列数
column-gap: length|normal;   //列之间的差距
column-rule:宽度 样式 颜色;  //列之间样式
column-rule-color:red；  // 列之间的颜色
column-rule-style:dotted;     // 列之间的样式
column-rule-width: 1px;      // 列之间的宽度
column-span: 1|all;         //某个元素应该跨越多少列 1列/所有列
column-width:100px;    //列宽度
columns:列宽 列个数; 

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

滤镜

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

边框

border:宽度 样式 颜色;
border-style:none|solid|.....;      //边框样式( border-top-style:dotted; 可以分别设置各边)
border-width:5px;                   //边框宽度
border-color:red;                   //边框颜色
border-radius:25px;                 //边框圆角
border-radius: 50px/15px;           //边框椭圆形
border-top/bottom-left/right-radius:2em;   //单独一角弧度
box-shadow: 10px 10px 5px #888888;  //边框阴影
border-image: url(border.png) 内偏移 边界宽度 round|repeat|stretch;
// 使用图片作为边框  重复（repeat）、拉伸（stretch）或铺满（round）
border-image-source: url(border.png);  //使用的图像
border-image-outset: 30 30;   //边框图像与边框的距离
border-image-repeat:stretch|repeat|round|space;  图像边界是否应重复、拉伸或铺满  默认/平铺/缩放平铺/扩展平铺
border-image-width: number|%|auto;  //指定图像边界的宽度
border-image -slice:1px 1px|% %|fill   //指定图像的边界向内偏移    fill保留图像的中间部分

transform:rotate(30deg);    //旋转30度 rotate(angle) 是个2S旋转函数  其他样式需查表
transform-origin:x位 y位 z位;    //更改转换元素的位置,设置旋转元素的基点位置
transform-style: flat|preserve-3d;  //嵌套元素是怎样在三维空间中呈现  2d/3d

轮廓
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline:颜色 样式 宽度;
outline-style:none|solid|...;       //设置轮廓样式
outline-color:red;                  //设置轮廓颜色
outline-width:3px;                  //设置轮廓宽度

Margin(外边距)
Margin(外边距)属性定义元素周围的空间。

auto    //设置浏览器边距  依赖浏览器
length  //固定值    （px,pt,em....）
%       //用百分比

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin:100px 50px 25px 50px;    //上 右 下 左

Padding(填充)

length  //固定值    （px,pt,em....）
%       //用百分比

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
padding:25px 50px 75px 100px;   //上 右 下 左

尺寸

height:100px;   //设置元素高度
line-height:100px;      //设置行高
max-height:100px;       //设置元素的最大高度
min-height:100px;       //设置元素的最小高度
max-width:100px;        //设置元素的最大宽度
min-width:100px;        //设置元素的最小宽度
width:100px;            //设置元素的宽度

1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

例:  <h1>    <p>     <div>

内联元素只需要必要的宽度，不强制换行。

例:  <span>  <a>     

align-content:stretch|center|flex-start|flex-end|space-between|space-around|initial;
//容器内必须有多行的项目，该属性才能渲染出效果。 拉伸适应容器/容器中心/容器开头/容器结尾/各项目中间留空白/默认值
align-items: stretch|center|flex-start|flex-end|baseline|initial;   //子项目为display:flex在容器的当前竖方向对齐 拉伸适应容器/容器中心/容器开头/容器结尾/容器基线上/默认值
align-self:auto|stretch|center|flex-start|flex-end|baseline;    //(元素继承父容器的align-items 如果没有则为stretch)/拉伸适应容器/容器中心/容器开头/容器结尾/容器基线上
box-sizing: content-box|border-box;  //适应指定区域 
resize:none|both|horizontal|vertical;   //是否由用户调整大小   无法调整/可调整宽高/仅可调宽/仅可调高

可见性

visibility:hidden;  //隐藏元素  会影响布局 占位隐藏
visibility:collapse;    //占位隐藏 表格 里想要隐藏的内容
display:block|none|inline|inline-block|flex;        //显示块元素 隐藏 内联元素  行内块元素

position定位

static 定位:

 1. HTML元素的默认值，即没有定位，元素出现在正常的流中。
 2. 静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位:

 1. 元素的位置相对于浏览器窗口是固定位置。
 2. 窗口是滚动的它也不会移动。
 3. 元素的位置与文档流无关，因此不占据空间。
 4. Fixed定位的元素和其他元素重叠。

relative 定位:

 1. 相对定位元素的定位是相对其正常位置。
 2. 可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
 3. 相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位:

 1. 绝对定位的元素的位置相对于最近的已定位父元素。
 2. 如果元素没有已定位的父元素，那么它的位置相对于。
 3. absolute 定位使元素的位置与文档流无关，因此不占据空间。
 4. absolute 定位的元素和其他元素重叠。

clip:rect(0px,60px,200px,0px); //可将绝对定位内容剪裁（如果先有"overflow：visible"，clip属性不起作用。）

重叠元素： z-index

z-index属性指定了一个元素的堆叠顺序,一个元素可以有正数或负数的堆叠顺序
需先用定位 absolute,relative,fixed

光标形状

cursor:move|auto|....;  //鼠标指针放在一个元素边界范围内时所用的光标形状

滚轮

overflow:visible|scroll|hidden; //滚轮被裁剪部分是否见 默认 可见 不可见 
overflow-x/overflow-y:visible|hidden|scroll|auto|no-display|no-content; 
//它溢出了元素的内容区是否剪辑左/右边缘内容 不裁剪 裁剪不滚动 裁剪滚动 若溢出则滚动 若内容不合适删除整个框 若内容不合适删除里内容

浮动

• 浮动元素之后的元素将围绕它
• 浮动元素之前的元素将不会受到影响

float:left|right|none;  //元素浮动之后，周围的元素会重新排列
clear:left|both|right|none;     //清除浮动  both是元素两侧不能出现浮动元素。

水平&垂直对齐

居中对齐

• 元素

     margin: auto;
     width: 50%;   //指定宽度, 使用margin:auto; 

• 文本

    text-align: center;  //文本在元素内居中对齐

• 图片

     display: block;
     margin: auto;     //先变成块元素 然后对齐

动画

animation:选择器关键帧名称 秒数 如何一周期 延迟启动秒 播放次数 是否反复播放 不播放或结束的样式 是否运行中或暂停;
animation-delay:2s;    //动画几s后开始
animation-duration:2s;  //动画共几秒
animation-direction:normal|reverse|alternate|alternate-reverse|initial;  //定义是否循环交替反向播放动画    正常/反向/奇数次正 偶数次反/奇数次反 偶数次正/默认值
animation-fill-mode: none|forwards|backwards|both|initial;  //当动画不播放时,要应用到元素的样式
animation-iteration-count:n|infinite;   //动画播放次数 infinite为永远
animation-name:mymove;      //动画指定一个名称
animation-play-state: paused|running;   //是否动画运行中/暂停   暂停/正运行
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.42,0,1,1) 0~1;  //从开始到结束速度  速度相同/慢快慢/慢开/慢结束/慢开慢结束/自定义

动画过渡

transition:过渡属性 过渡持续时间 过渡函数 过渡延迟时间;
transition-property: none|all| 属性名(多个用逗号);  //过渡属性 默认为all
transition-duration:0;  //过渡持续时间  默认0
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);   //过渡函数   默认为ease
transition-delay:0;    //过渡延迟时间  默认0

transition-timing-function：

值	描述	相等
linear	一直相同速度	cubic-bezier(0,0,1,1)
ease	慢开，加快，慢结束	cubic-bezier(0.25,0.1,0.25,1)
ease-in	慢开	cubic-bezier(0.42,0,1,1)
ease-out	慢结束	cubic-bezier(0,0,0.58,1)
ease-in-out	慢开，慢结束	cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n)	自己定义值	n值为0~1数值

无分类内容

all: initial|inherit|unset; //重置所有属性,除了unicode-bidi 和 direction  修改该元素或父元素初始化值/修改该元素或父元素值/只继承父元素或初始值
backface-visibility: visible|hidden;  //当元素不面向屏幕时是否可见  背面可见的/背面不可见的
opacity:0.5;   //透明度  0~1

左右对齐

• 使用定位

position: absolute;
right:0px;/left:0px;    //左对齐 右对齐

• 使用float浮动

垂直居中对齐

• padding

  padding: 70px 0;   //上下距离70px  垂直居中
  text-align: center;
  //垂直水平居中

• line-height

    line-height: 200px;
    height: 200px;    //需行高和高度一致

选择符

• 后代选取器：所有值得元素的后代元素（div p）
• 子元素选择器：只能选择作为某元素子元素的元素（div > p）
• 相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素（div+p）
• 后续兄弟选择器：所有指定元素之后的相邻兄弟元素（div~p）
• 第一个子元素（p:first-child）
• 匹配所有p元素内的第一个i （p > i:first-child）
• 匹配所有作为第一子元素的p中的所有i（p:first-child i）

选择器	实例	说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择每个父元素是p元素的第一个p子元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有p元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有”required”的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有”required”属性指定的元素属性
:root	root	选择文档的根元素
:target	news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个p元素的第一个字母
:first-line	p:first-line	选择每个p元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的p元素
:before	p:before	在每个p元素之前插入内容
:after	p:after	在每个p元素之后插入内容
:lang(language)	p:lang(it)	为p元素的lang属性选择一个开始值

浏览器前缀

        -moz-        //火狐浏览器 
        -webkit-     //谷歌浏览器  苹果浏览器
        -o-          //欧鹏浏览器 
        -ms-         //IE浏览器 

属性	IE	火狐	谷歌	苹果	欧鹏
@keyframes			-webkit-	-webkit-
animation		-moz-	-webkit-	-webkit-	-o-
animation-name			-webkit-	-webkit-
animation-duration			-webkit-	-webkit-
animation-timing-function			-webkit-	-webkit-
animation-delay			-webkit-	-webkit-
animation-iteration-count			-webkit-	-webkit-
animation-direction			-webkit-	-webkit-
animation-play-state			-webkit-	-webkit-
all	不支持			不支持
align-content				-webkit-
align-items				-webkit-
align-self				-webkit-
appearance		-moz-	-webkit-	-webkit-
backface-visibility	-ms-	-moz-	-webkit-	-webkit-
border-image				-webkit-	-o-
box-align		-moz-	-webkit-	-webkit-
box-direction		-moz-	-webkit-	-webkit-
box-flex		-moz-	-webkit-	-webkit-
box-ordinal-group		-moz-	-webkit-	-webkit-
box-orient		-moz-	-webkit-	-webkit-
box-pack		-moz-	-webkit-	-webkit-
box-sizing		-moz-
column-gap		-moz-	-webkit-	-webkit-
column-rule		-moz-	-webkit-	-webkit-
column-rule-color		-moz-	-webkit-	-webkit-
column-rule-style		-moz-	-webkit-	-webkit-
column-rule-width		-moz-	-webkit-	-webkit-
column-span		-moz-	-webkit-	-webkit-
column-width		-moz-	-webkit-	-webkit-
columns		-moz-	-webkit-	-webkit-
column-count		-moz-	-webkit-	-webkit-
marquee-direction			-webkit-	-webkit-
marquee-play-count			-webkit-	-webkit-
marquee-speed			-webkit-	-webkit-
marquee-style			-webkit-	-webkit-
perspective			-webkit-	-webkit-
perspective-origin			-webkit-	-webkit-
transform			-webkit-	-webkit-
transform-origin			-webkit-	-webkit-
transform-style			-webkit-	-webkit-
transition				-webkit-
transition-property				-webkit-
transition-duration				-webkit-
transition-timing-function				-webkit-
transition-delay				-webkit-

….