css3属性基本骨架

css3属性
浏览器前缀
-ms-代表IE浏览器
-khtml-代表苹果浏览器
-moz-代表火狐浏览器
-o-代表欧朋浏览器
-webkit-代表谷歌浏览器
字体
1.text-shadow设置文字阴影//可以叠加
值：设置阴影水平距离 垂直距离 模糊 颜色
2.text-overflow 文本超出的显示效果
clip裁切 elipsis显示省略号
注意：必须与两个属性连用
overflow:hidden;是为了让文字超出边框隐藏
white-space:nowrap;是为了让换行的文字不换行
3.Word-wrap文本超出是否换行
break-word内容在边界换行 normal默认
颜色
1.background-color:rgba(255,0,0,0.3);透明度 取值范围 ：0-1
2.opacity 透明度 取值范围 ：0-1注意：会让孩子元素也变成透明
边框
1.box-shadow 边框阴影
值：inset内阴影 不加为外阴影 水平距离 垂直距离 模糊 颜色
2.border-radius边框圆角
一个值：四边圆角
两个值：左上/右下 右上/左下
三个值：左上 右上/左下 右下
四个值：左上 右上 右下 左下
例如：border-radius-left-top
背景
1.background-size背景大小
单位：像素或百分比
2.background-clip背景裁切
border-box边框 padding-box内面积content-box填充(去除padding的面积)
text按形状裁切（将文字颜色变为透明 它不能覆盖文字颜色）
用户界面
1.outline-offset边距和轮廓的距离
单位：像素或百分比
2.resize 设置标签宽高可鼠标调整
必须与overflow：auto进行连用
none无both都可以调整 horizontal水平调整 vertical垂直调整 inherit默认继承
3.zoom 等比缩放（不要调字体）
单位：数字，可以为小数，不能为负数
css3选择器
1.ul li:first-child{}查找第一个孩子 li的父元素的第一个孩子且属性为li
2.ul li:last-child{}查找最后一个孩子
3.ul li:nth-child(3){}查找制定孩子
even偶数 odd基数 3n找倍数
4.ul li:only-child{}查找只有一个孩子
5.div p:first-of-type{}查找第一个同类型 选择div 下的p元素其父级的第一个p元素
6.div p:last-of-type{}查找最后一个同类型
7.div p:nth-of-type(2){}查找指定兄弟
8.div p:only-of-type(2){}查找只有一个兄弟
9.div:not(.class){}刨除一类的
10.div:empty{}选择没有任何子元素的（空格回车也不行）
html5标签
媒体文件
音乐
视频标签
src路径 autoplay自动播放 controls显示控件
例如：
表单
1.日期<inpur type=“date”>
年月<inpur type=“month”>
时钟<inpur type=“time”>
2.数字<inpur type=“number”>
3.滚动条<inpur type=“range”>
min最小值 max最大值 step步长
4.颜色<input type=“color”>
5.邮箱<input type=“email”>
6.电话<input type=“tel”>
7.搜索框<input type=“search”>
8.地址框<input type=“url”>
属性
required 设置文本框为必输项
placeholder 设置文本框的提示语
布局标签
1.header 头部
2.footer 尾部
3.section 段落部分
4.aritcle 文章部分
5.aside 旁边部分
6.nav 菜单
都是块级元素
css渐变色
线性渐变
background:-webkit-gradient(linear,left center,right center,frome(red),to(yellow),color-stop(0.4,blue));
值：线性渐变，开始位置，结束位置，开始颜色，结束颜色，插入颜色(位置,颜色)…
background:linear-gradient(to left top,开始色，插入色，截止色)
值：开始位置，颜色1，颜色2，颜色3…
径向渐变
backgroud:-webkit-gradient(radial,150 150,10,150 150,300,from(red),to(yellow),color-stop(0.4,blue));
值：径向渐变，内圆坐标，内圆半径，外圆坐标，外圆半径，开始颜色，结束颜色，插入颜色…
background:radial-gradient(circle at 30%,yellow,blue)
值：中心点位置，颜色1，颜色2，颜色3…
svg画图
特点：
1.svg支持IE9以上
2.svg叫做伸缩矢量图形
3.svg可以通过文本编辑器来创建
4.可以被搜索，索引，脚本化和压缩
5.svg图形放大缩小尺寸不会失真
定义：
<svg class=“can”>创建画布
绘制图形
线体
<line x1=“50” y1=“50” x2=“200” y2=“200” stroke=“red” stroke-width=“3”>
值：x1，y1表示起始坐标，x2，y2表示终止位置坐标，stroke线体颜色 stroke-width线体粗细
圆
<circle cx=“100” cy=“100” r=“30” stroke=“red” fill=“pink”>
值：cx,cy圆的中心点坐标 r圆的半径 fill填充色
椭圆
<ellipse cx="100 cy=“100” rx=“60” ry=“40” fill=“blue”>
值:rx水平半径 ry垂直半径
矩形
<rect x=“50” y=“50” width=“100” height=“150” rx=“10” ry=“90”>
值：x，y表示起始位置坐标 width宽度 height高度 rx，ry圆角弧度
多边形
<polygon points=“0,100 100,0 200,100”>
值：xy以逗号分隔，多个值以空格分割(x1,y1 x2,y2 x3,y3)
路径
<path d="M0 100 C100 10 150 50 200 100 " fill=“white” stroke=“red”>
M开始位置 z结束位置 L直线连接 H水平线 V垂直线 C曲线 S代表平滑曲线 Q贝塞尔曲线 A椭圆曲线
阴影
不太正确<filter id=“f1” x=“0” y=“0” width=“200%” height=“200%”>
<feOffse result=“offOut” dx=“20” dy=“20” in=“SourceGraphic”>
<feGaussianBlur result=“blurout” stdDeviation=“5” in=“offOut”>
<feBlend in=“SoureGraphic” in2=“offOut” mode=“normal”>
</filter>*/
<filter id=“f1” x=“0” y=“0” width=“200%” height=“200%”>
<feGaussianBlur in=“offOut” stdDeviation=“3” result=“blurout”/>
</filter>
<rect x=“50” y=“50” width=“100” height=“150” rx=“10” ry=“90” filter=“url(#f1)”></rect>
值：x,y表示起始位置坐标 width宽度 height 高度 feOffset偏移位置 dx,dy是xy轴的偏移量feGaussianBlur模糊效果
stdDeviation模糊度 feBlend组合成整个面积 in关联多个标签
引用方式：filter="url(#f1)“找到id名称
过渡
1.transition-property 指定过渡属性
none不指定 all所有
2.transition-duration过渡时间
单位：秒数s
3.transition-timing-function动画速率
linear线性 ease平滑 ease-in由慢到块 ease-out由块到慢 ease-in-out由慢到块再到慢
4.transition-delay延迟时间
单位：秒数s
transform变化
1.translate(x,y,z)移动 默认会给x轴
单位：像素或百分比
translateX()水平移动 translateY()垂直移动 translateZ()前后移动
2.scale(x,y,z)缩放 默认会给xyz轴
单位：数字，可以为小数，不可以为负数
scaleY()宽度缩放 scaleY()高度缩放 scaleZ()厚度缩放
3.旋转 rotate(x,y,z)旋转 默认给z轴旋转
单位：角度 deg
rotateX()水平旋转 rotateY()垂直旋转 rotateZ()中心点旋转
4.skew(x,y)扭曲 默认给x轴
单位：角度deg
skewX()水平扭曲 skewY()垂直扭曲
5.matrix(1,0,0,1,0,0)矩阵
值：宽度缩放 垂直扭曲 水平扭曲 高度缩放 水平移动 垂直移动
transform-style:preserve-3d 开启3d
trasnform-origin:x y z偏移中心点
动画
1.animation-name 动画名称
2.animation-duration 动画时间 单位：秒数s
3.animation-timing-function动画速率
4.animation-delay延迟时间 单位：秒数s
5.animation-iteration-count循环次数
单位：整数数字 infinite无限循环
6.animation-direction 是否反向运动
nromal正常 alternate正反交替
注意：循环次数必须大于2
7.animation-play-state动画
running运动 paused停止
8.animation-fill-model动画时间之外状态
none不设置 backwards开始位置 forwards结束位置
执行动画
@keyframes 名称{
方法1 form{} to{}
方法2 0%{} %50%{} 100%{}
}
响应式
@media媒体查询
例如：
@media all and (max-width:400px){}/0-400/
设备分辨率
电脑：1000-1200
平板：768-992 992-1200
手机：768
例如：
@media all and (max-width:992px){}//平板端
@media all and (max-width:768px){}//手机端
设备关键字
all所有设备 screen显示设备 handled便携式设备 aural 听觉设备 braille点字触觉设备
projecttion投影设备 tty打字机/终端 embossed盲文设备
注意：
and连接符2前后一定要有空格
导入文件做响应式
<link rel=“stylesheet” href=“css/css1.css” media=“all and (max-width:992px)”>
设备响应式标签
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>//帮助识别
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，
这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条
name=“viewport"设备移动端设备
width=device-width 自适应设备
initial-scale=1.0 初始缩放比例
minimum-scale=0.5最小缩放值
maximum-scale=1.5 最大缩放值
user-scalable=yes/no 是否允许缩放
响应式的注意事项
1.必须要写设备响应式标签，否则移动端不会识别响应式
2.media文件写992和768像素就可以
3.所有布局大部分都用百分比去设置宽高
4.间距值，上下距离可以用固定像素，左右距离要设置百分比
5.要用css3的流布局替代浮动元素
6.除了头部的菜单，要减少固定定位的使用
7.文字放大缩小使用em和rem
8.图片或div放大缩小用zoom和transform
9.图片随着分辨率自适应 img{width：100%;height:auto}
em和rem的区别
em:相对单位，相对当前文本字体尺寸，当前标签参照父类标签的字体大小，如果是宽高则是参
照当前标签字体大小
rem :相对单位，相对根元素（html）文本字体尺寸，字体和宽高都参照html的文本大小。
伸缩盒子新-流布局
1.display：flex 开启流布局
2.flex-grow 扩展比率 按份数分配，默认为0
3.flex-shrink 收缩比率 按份数分配，默认为1
4.flex-basis 伸缩基准值
可扩展和收缩，按份数和像素都可
5.flex-flow排列方式
flex-diection位置
row从左到右 row-reverse从右到左布局 cloumn从上到下 column-reverse从下到上
flex-wrap是否换行
nowwrap不换行 wrap溢出换行 wrap-reverse反转换行
6.order 设置顺序
单位：数字，默认为1，数字越大越靠前
7.align-content堆叠伸缩行的对齐方式
flex-start顶端 flex-end低端 center居中
space-around平均分布 stretch占满父类
8.align-items 在侧轴（纵轴）方向上的对齐方式
flex-start 顶端 flex-end低端 center居中 baseline基线 stretch占满父类
9.align-self在侧轴方向上的对齐方式
auto 自适应flex-start 顶端 flex-end低端 center居中 baseline基线 stretch占满父类
10.justify-content 设置或检索弹性盒子在主轴方向上低端对齐方式。
flex-start 顶端 flex-end低端 center居中 space-between两端对齐
space-around平均分布
注意：7和8可以换行对齐，参照父类，9和10不可以换行，还要参考兄弟
流布局默认值
flex：1；表示flex：1 1 0%；
flex：none;表示的是flex：0 0 auto；
flex：auto;表示的是flex：1 1 auto；
flex：10%‘表示的是flex：1 1 10%
浏览器兼容性
1.页面会默认给所有标签保存空隙，解决方法
*{margin:0px;padding:0px}
2.块级元素水平居中
div{width1000px;margin:0px auto}
3.给文字和图片设置水平居中
div{text-align:center}
4.块级元素垂直居中
.box{width:200px;height:200px;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;}
5.清除浮动的方法
1.div{overflow:hidden}
2.div:after{content:””;dispaly:block;clear:both}
6.定位保证不串行
相对定位，嵌套绝对定位，除非此元素要参照浏览器
7.伪类事件的写作顺序
hover必须在link之后，avtive必须在hover之后
8.不要删除，否则会变成IE低版本模式
9.如果要兼容IE8以下浏览器，不要写html5和css3
10.如果高版本浏览器要设置css3属性兼容，要加浏览器前缀
例如：-webkit-flex:1;
11.div嵌套img,会在底部有空隙，解决方法
img{vertical-align:top;}
12.去掉多张图片同行的空隙
img{float：left}
13.谍影重重：当浮动元素中级出现空文本，空标签或者注释，会占空格面积，造成元素串行，解决方法：
1.注释不添加到标签中间
2.把宽度值相应改小
3.不设置浮动，例如：定位，流布局，转化表格法。
14.边距塌陷：产生在嵌套元素中，垂直方向上边距会出现合并现象
1.给父类标签添加内边距
2.给父类添加border
3.给父类添加overflow：hidden