CSS3小结

兄弟选择器h1~p 以第一个选择器作为开始，选择后面满足第二个选择器的元素

属性选择器
格式：属性选择器 [属性名 符号 属性值]
1.所有拥有skill属性的
li[skill]{
background-color: bisque;
}
2.所有skill=fire的元素
li[skill=fire]{
color:red;
}
3.所有以sell开头的skill属性的元素
li[skill^=sell]{
border:10px solid skyblue;
}
4.所有以s结尾的skill属性的元素
li[skill$=s]{
font-size:30px;
}
5.所有包含了it的skill属性的元素
li[skill*=it]{
background-color: green;
}
6.所有以-进行分割，第一个值为dog的skill属性的元素
li[skill|=dog]{
background-color: hotpink;
}

伪类选择器
li:first-child{}
li:last-child{}
li:nth-child(1){} 索引是从1开始的 是对于所有兄弟节点，就算不是相同的标签也算
li:nth-child(odd){} 奇数
li:nth-child(2n-1){} 奇数
li:nth-child(odd){} 偶数
li:nth-child(2n){} 偶数
li:not([price]) 所有没有price属性的li标签
li:not([price='18']) 所有price属性不等于18的li标签
跳转，锚点
<a href="#title1">去往标题1</a> 跳转到id为title的标签
h2:target{
background-color: skyblue;
font-size:100px;
}

伪元素之before after
可以为双标签添加，最多添加两个，即before after
必须添加content属性，可以为空字符串，默认是行内元素，要转换为块级，一般用定位，不要忘了给父元素设置定位，也可以用display：block;
div:hover::after{}
首字母p::first-letter{} 阿拉伯文文字顺序是反的，首字母在最后面
首行p::first-line{}
选中的文字设置 p::selection{}
placeholder input::-webkit-input-placeholder{}
css3的样式 有一些 浏览器支持的不好 需要添加前缀 才能够使用 不同的浏览器 前缀不同
谷歌:-webkit-
微软:-ms-
火狐:-moz-
opera:-o-

基础语法之
边框阴影
参数0 可选 影子的方向 inset加在里面的阴影，默认在边框外面
参数1 x方向移动的距离 坐标轴
参数2 y方向移动的距离 坐标轴
参数3 影子的模糊程度(会在原来影子的基础上 扩展面积)
参数4 影子 扩充的 大小，有值的话会在外面加一圈阴影
参数5 影子的颜色 默认是黑色
如果 只想 设置影子的 大小 前面的数字 也是需要设置的 可以为0 但是不能留空
box-shadow: 0px 0px 0px 10px yellow;
box-shadow: 0 0 0 10px red, 嵌套多个时用，隔开
0 0 0 20px orange,
0 0 0 30px yellow;

文字阴影
参数1 x方向移动的距离
参数2 y方向移动的距离
参数3 阴影模糊的程度
参数4 阴影的颜色
text-shadow: 10px 20px 20px pink;

颜色的设置
rbg()三个值的取值都是0-255 实际开发中美工会告诉我们具体的取值
rgba()可以设置透明度 ,最后一个值的取值范围是 0-1的小数
hsl(196, 64.81% , 42.35%)
hsla() a的取值 跟 rgba一致 0-1
设置透明度是 使用 rgba 或 hsla 不会 继承
opacity会继承
直接设置 透明 在设置颜色的时候 为transparent
background-color:transparent;

边框圆角
border-radius: 10px 20px 30px 50px;
最大值为边框宽度的一半，再往上设也没有效果
只设置一个值时四个角都是同一个值
设置两个值时第一个值为左上，右下，第二个值为右上，左下
设置三个值时第一个值为左上，第二个值为右上，左下，第三个值为右下
类似于margin的设置
顶部 对应到 这里的 左上
底部 对应到 这里的 右下

盒子模型
box-sizing:border-box；优先保证当前盒子的大小 有padding时盒子的大小不受影响，但里面内容会变形
box-sizing:content-box； 优先保证 内容的大小 有padding时盒子大小会变大

transform
transform:rotate(0deg); 角度
transform:translateX(100px);或者transform:translate 移动距离(100px,100px)
transform:scale(1,0); XY缩放倍数，都为0时不变
transform:skewX(20deg); 扭曲，里面放度数

 

背景图片
背景图大小
background-size:200px 100px;
background-size:contain ;
background-size:cover ;
背景图开始位置
background-origin:border-box ; 边框
background-origin:padding-box; 边框内，不包括边框
background-origin:content-box; padding内
图片裁剪位置
background-clip: content-box;
background-clip: padding-box;
background-clip:border-box;

多重背景
background:
url(img/lzl.jpg) no-repeat top left / 200px 200px,
url(img/szj.jpg) no-repeat top center/200px 200px,
url(img/jl.jpg) no-repeat top right/200px 200px,
url(img/lzl.jpg) no-repeat center left / 200px 200px,
url(img/jl.jpg) no-repeat 100px 300px/200px 200px; 前面两个相当于定位的位置

transition
transition: all 1s;让原本立即发生的改变需要经过一段时间
transition-property: width; 希望过渡的属性，width，height，background-color等
transition-duration:3s; 过度持续时间
transition-delay: 2s; 过度延迟时间
transition-timing-function:linear; 设置动画的效果
linear 匀速
ease
ease-in
ease-out等等
cubic-bezier() 通过贝塞尔曲线设置动画的效果会使用笔记中的网址调整曲线即可
transition-timing-function: cubic-bezier(.27,1.46,.54,-1.81);
all 是让 所有的 css样式 都能够进行过渡
复合写法
参数1 样式
参数2 持续时间
参数3 延迟时间
参数4 动画的 线性(匀速,加减速,贝塞尔曲线)
transition:width 1s 0s , 多个可以用逗号隔开
background-color 1s 2s linear;

html5获取元素的方法querySelector("#container")

body 默认是 没有高度的,他是被 内容 给 撑开的
body 本质是一个 div
html本质也是一个div 默认没有高度
如果想要设置 body跟浏览器窗口一样大
html,body{
height:100%;
}
浏览器厂商 出于 界面美观考虑 不管body多高 设置背景颜色 直接使用到全屏幕

渐变（渐变设置的都是图片）
线性渐变 linear-gradient
参数1 渐变的方向 可以设置为方向 to top left 或者具体的角度（例45deg）
参数2颜色1
参数3颜色2
background-image: linear-gradient(45deg,skyblue,orange);
如果想要实现 多个颜色的过渡 直接往后 添加 即可 爱加多少 加多少
background-image: linear-gradient(to left,skyblue,red,orange,black);

颜色1 默认 从 0% 开始 我们能够设置 结束的位置
background-image: linear-gradient(16deg,blue 25%,yellow 25%,yellow 50%,red 50%,red 75%,blue 75%);
背景图片 能够通过 background-position 修改位置
background-position: 500px 0px;

径向渐变 radial-gradient
参数1 渐变的半径 如果 两个值一样 圆形 否则是椭圆(如果是圆形 给一个值即可)
通过attop left 可以设定 渐变的位置
参数2 颜色1
参数3 颜色2
参数4 也是支持 添加多个颜色的
谷歌浏览器不支持过渡 效果,ie支持
background-image: radial-gradient(300px 300px at center,orange 10%,skyblue 10%,orange,yellow,red,black);

图片边框，相当于用图片做成相框
如果想要使用图片边框必须设置border属性，这样假定图片边框加载不出来,也能够使用默认的边框
border:60px solid #0094ff;
border-image-source:url（）引入背景图片位置
border-image-slice: 281 183;
第一个值 从左往右距离从上往下切 第二个值从上往下距离从左往右切 图片切割 x,y坐标
background:设置照片

动画
animation-name: autoChangePro; 动画名
animation-duration: 2s; 动画时间
animation-iteration-count: infinite; 可以写具体次数或者无限次
@keyframes autoChange{
from{
如果不写 使用的是默认值
}
to{
width: 200px;
}
}

@keyframes autoChangePro{
10%{
width: 200px;
height: 200px;
}
30%{
background-color: orange;
}
80%{
border-width: 100px;
}
100%{
border-radius: 100px;
}
}

animation:autoChange 8s linear infinite;动画设置的连写

停止动画方法
animation-play-state: paused; 暂停
animation-name: niehaha; 输入错误的动画名，不推荐，比较low

transform-style:preserve-3d;获得3D效果
perspective: 1000px; 获得3D效果越近越大，越远越小的效果，数字越小越明显，75px的时候看不到

弹性布局
display:flex;
子元素设置flex=具体数字，会按数字比例分配子元素宽度
当子元素总宽度大于父元素宽度时，按比例减掉子元素的相应宽度，不是缩放，是直接减掉子元素右面的部分
justify-content:center; 水平居中
align-items:center; 垂直居中
display:flex; flex-direction:column;是按Y方向分布 这样设置时
justify-content:center; 垂直居中
align-items:center; 水平居中

align-self:center;就自己执行
order:-1;数字越小越排在前面，默认都为0

box-sizing: border-box;优先保证 盒子的大小
flex-wrap: wrap;弹性布局换行功能
比如父盒子有四个子元素，每个宽度为50%，再加flex-wrap: wrap;就可以实现换行并且布满父盒子