文章目录
复杂选择器解决外边距溢出※解决高度坍塌弹性布局的语法主轴方向设置项目的换行主轴方向和项目换行的缩写项目在主轴上的对齐方式项目在交叉轴的对齐方式项目的排列顺序单个项目交叉轴对齐方式位移缩放旋转倾斜3D旋转过渡过渡的延迟时间过渡的简写方式动画动画的简写方式steps ()项目中动画使用animate.css ``动画和过渡的使用契机复杂选择器
1.兄弟选择器
兄弟元素:具备相同父元素的平级元素,称之为兄弟元素
兄弟选择器,只能往后找,不能往前找,只能通过哥哥找弟弟,不能往前找
①相邻兄弟选择器
选择器1+选择器2{}获取紧紧挨着某元素后面的兄弟元素
li+li{margin-left: 10px;}设置不挤开位置的间距
②通用兄弟选择器
选择器1~选择器2{}获取选择器1 后面所有符合选择器2 要求的兄弟元素
两种兄弟选择器的使用场景,多用于淘汰第一个元素,其它兄弟都使用的样式,(一组元素,除了老大以外,其他的元素的公共样式)ul>li{float:left;} li~li{margin-left:20px;}
2.属性选择器attr表示属性名称
[attr]{}匹配页面中所有带有attr这个属性的元素[class] {color:#f00;}
[attr1] [attr2]{}匹配同时定义了attr1和attr2属性的元素[class] [title] { }
elem[attr1][attr1]...{}匹配页面中同时带有attr1,attr2,…属性的elem元素span[title]{color:#f00;}
elem[attr1=value1] [attr2=value2]{}匹配页面中同时带有attr1并且值为value1,attr2并且值为value2,属性的elem元素p[title="XXX"]{color:#f00;}
属性值的模糊查询
[attr^=value]{}匹配attr值的开头是value的元素
[attr$=value]{}匹配attr值的结尾是value的元素
[attr*=value]{}匹配attr值里有value的元素
[attr~=value]{}匹配attr值有value这个单词(前后有空格)的元素
3.伪类选择器
①:target{}目标伪类 让被激活的锚点,应用的样式(结合锚点使用)
<head><style>/*隐藏*/img{display:none;}/*显示*/img:target{display:block;}</style></head><body><ul><li><a href="#hx">海鲜面</a></li><li><a href="#sj">四季春饼</a></li><li><a href="#bd">八大碗</a></li></ul><img id="hx" src="img1.png" alt=""><img id="sj" src="img2.png" alt=""><img id="bd" src="img3.png" alt=""></body>
②结构伪类selector:first-child{}匹配属于selector(selector是子元素选择器)父元素的第一个子元素, 并且这个元素还得符合selector(找到是selector的大哥,这个大哥也得符合selector)
selector:last-child{}匹配属于selector父元素的最后一个子元素, 并且这个元素还得符合selector (找到是selector的小弟弟,这个小弟弟也得符合selector)
√:nth-child(n){}匹配属于父元素的第n个子元素( n是从1开始) ,这个是万能选择器用的比较多
③:empty匹配内部没有任何元素的标签 , 注意:所谓没有元素,包括不能有空格,回车,标签,文本
④:only-child属于其父元素的唯一子元素 , 唯一仅限于元素,可以有其它的文本,空格,回车 , 只是不能有其它标签
⑤:not(selector){}否定伪类 , 符合selector都不要 eg:h6:not(:only-child){background:#0ff;}，li:not(:last-child){margin-bottom:9px}
4.伪元素选择器
::first-letter或者:first-letter匹配元素的第一个字符
::first-line或者:first-line匹配元素的首行 匹配第一行文本(如果与首字母冲突,按首字母的样式)
::selection(只有双冒号) 匹配用户鼠标选中的内容 首字母无效 只能设置字体颜色和背景颜色其他不能设置
*5.内容生成使用css代码,动态的添加html元素
::before或者:before是在当前元素的内容区域的最前方(还是在内容区中),添加一个假的元素
这个元素默认是行内元素
使用content添加内容 (content只能设置文本和图片)
可以设置其他任意样式
可以设置display改变元素的显示方式
::after或者:after在元素内容区域内部的最后端,添加一个假的元素 , 内容生成,可以解决的问题
<head><style>#d1::before{content:"梦奇.D.路飞说:";/*::before后面写的是设置伪元素的 */background:#ff0;color:#f00;display:block;//导致添加元素换行}</style></head><body><div id="d1">我是要成为海贼王的男人</div></body>
解决外边距溢出
父元素:before{ content:""; display:table; }①父元素内容区域的最前方 ②内容为空 ③变成table的显示方式
<head><style>#d1{width:200px;height:200px;background:#ff0;}#d2{width:100px;height:100px;background:#0ff;margin-top:0px;}#d1:before{content:"";display:table;}</style></head><body><div id="d1"><div id="d2"></div></div></body>
※解决高度坍塌
#parent:after{ content:""; display:block;clear:both;}在父元素中,追加一个空的块级元素,设置clear:both;
<head><style>#parent{border:2px solid #f00;}#c1,#c2,#c3{width:100px;height:100px;float:left;}#c1{background:#ff0;}#c2{background:#0ff;}#c3{background:#f0f;}#parent:after{content:"";display:block;clear:both;}</style></head><body><div id="parent"><div id="c1"></div><div id="c2"></div><div id="c3"></div></div></body>
☆弹性布局是一种布局方式 主要解决某个元素中的子元素的布局方式(横向或者纵向),为布局提供很大的灵活性,不会溢出和坍塌
弹性布局的相关概念
①容器: 要发生弹性布局的子元素,他们的父元素称为容器 , 设置了display: flex的那个元素,就是容器
②项目: 要发生弹性布局的子元素们,叫做项目
容器本身不是弹性,子元素们按照弹性布局的方式排列
③主轴(四根) : 项目们的排列方向,就是主轴 , 项目们横向排列,主轴就是x轴 ; 项目们纵向排列,主轴就是y轴
项目们在主轴上的排列顺序,称为主轴的起点和终点
④交叉轴(两根) : 与主轴方向,垂直相交,称为交叉轴
项目们在交叉轴的对齐方式,称为交叉轴的起点和终点
弹性布局的语法
将元素设置成弹性容器后 , 他的所有子元素将变成弹性项目 , 都允许按照弹性布局的方式排列
display:flex将块级元素设置为容器
inline-flex将行内元素设置为容器
特点1.容器的text-align/vertical-align失效 2.项目的float/clear 失效(弹性不要跟浮动一块写,按弹性属性设置)
总结,项目们,水平对齐和垂直对齐,只能够靠主轴和交叉轴控制
容器的属性
主轴方向
flex-direction:取值:row默认值,主轴是x轴,主轴起点是左侧
row-reverse主轴是x轴,主轴起点是右侧(reverse反转)
column主轴是y轴,主轴起点是上
column-reverse主轴是y轴,主轴起点是下
设置项目的换行
容器空间不足时,项目是否换行flex-wrap:nowrap默认值,不换行 ;wrap换行 ;
wrap-reverse;换行并反转
主轴方向和项目换行的缩写
flex-flow: direction(方向) wrap(换行);flex-direction和flex-wrap的缩写
项目在主轴上的对齐方式
justify-content:flex-start默认值,主轴起点对齐
center;主轴中间对齐
flex-end主轴终点对齐
space-around每个间距大小相同,两端有距离(space空 around环绕)
space-between两端对齐,两端无空白 (两端贴边,每个间距大小相同)
项目在交叉轴的对齐方式
主轴不管是从左往右还是从右往左,交叉轴一直是从上往下不变;主轴不管是从上往下还是从下往上,交叉轴一直是从左往右不变,所以有四根主轴,只有两根交叉轴
align-items:flex-start默认,交叉轴起点对齐
center交叉轴中心对齐
flex-end交叉轴终点对齐
stretch前提是项目不定义高度,设置stretch,项目充满整个交叉轴
<head><style>*{margin:0;padding:0;}ul{width:1000px;height:150px;margin:0 auto;list-style:none;text-align:center;font-size:16px;background:#e8e8e8;/*弹性 都设置给父元素*/display:flex;justify-content:space-around;/*主轴对齐*/align-items:center;/*交叉轴对齐*/}</style></head><body><ul><li><img src="icon1.png" alt=""><p>品质保障</p></li><li><img src="icon1.png" alt=""><p>品质保障</p></li><li><img src="icon1.png" alt=""><p>品质保障</p></li><li><img src="icon1.png" alt=""><p>品质保障</p></li></ul></body>
项目的属性只能设置在某一个项目上,不影响其他项目
项目的排列顺序
order:无单位的整数,永远都是离主轴起点距离跟终点没关系数字越小,项目离主轴起点越近
②flex-grow:默认值为0,不放大定义项目的放大比例,如果容器主轴方向有足够大的剩余空间,项目将变大
取值数字越大 , 项目放大的越快(速率)
③flex-shrink 默认值是1 设置为0不缩小如果容器主轴的方向空间不足 , 设置项目缩小 , 取值数字越大,变小的越快
单个项目交叉轴对齐方式
align-self:flex-start默认值,在交叉轴起点对齐
center在交叉轴中间对齐
flex-end在交叉轴终点
stretch前提,项目不定义高度,设置stretch,项目充满整个交叉轴
auto继承容器的align-items的值
css hack(过时)
由于不同浏览器对css的解析认知不同,会导致同一份代码,在不同浏览器下,页面的显示效果不同,开发人员要针对不同的浏览器写不同的样式,这个行为就叫写css hack
让代码能够被ie8以下浏览器正确识别
background-img:-webkit-linear-gradient(top,#aaa,#000);
background-img:-o-linear-gradient(top,#aaa,#000);
background-img:-moz-linear-gradient(top,#aaa,#000);
background-img:-ms-linear-gradient(top,#aaa,#000);
转换改变元素在页面中的位置,大小,角度,以及形状 , 2D转换,x轴和y轴的转换 ; 3D转换,模拟的,添加了z轴
转换属性transform:转换函数转换函数 2d 4个 , 3d 1个transform:转换函数1 转换函数2 转换函数3.....;
2D转换
位移
transform:translate()取值:translate(v1)和translateX(v1),都是x轴位移 , translateY(v1) y轴的位移 , translate(v1,v2) v1是x轴,v2是y轴 , x:+ →, - ← , y:+ ↓ , - ↑
如何让一个div在任何屏幕尺寸下,都处于屏幕的正中间
div{width:200px;height:200px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); /*transform:translate(-100,-100);*//*magin-top:-100;magin-left:-100;*/}
缩放
transform:scale(v1)x轴和y轴同时设置缩放 , scale(v1,v2) x轴和y轴分别设置缩放 , scaleX(v1) x轴缩放 , scaleY(v1) y轴缩放
v>1 放大,0<v<1 缩小,-1<v<0 反转并缩小,v<-1 反转(倒过来)并放大(设置两个值的时候v1<-1只上下翻转,v2<-1只左右翻转)
<style>img{transition:10s;}img:hover{transform: scale(1.2); }</style></head><body><img src="1.png" alt=""></body>
旋转
transform:rotate(ndeg)n:+ 顺时针, - 逆时针 , deg : (度) °
注意:转换原点会改变旋转效果,默认元素中心transform-origin:right center;取值:以px为单位的数字 , % , 关键字 x:left/center/right , y:top/center/bottom
取值数量:2个值,原点在x轴y轴上 , 3个值,添加了z轴
旋转是连同坐标轴一起旋转的,旋转之后,会影响位移方向transform:rotate(45deg) translate(400px);
倾斜
transform:skew(ndeg)
1.skew(45deg) / skewX(45deg)y轴向着x轴倾斜45
+ 逆时针 , - 顺时针
2.skewY(45deg)x轴向着y轴倾斜45
+ 顺时针 , - 逆时针
3.skew(45deg,45deg)
3D转换
3D转换都是模拟的
①透视距离 : 模拟人的眼睛到3D转换的元素之间的距离,距离不同,效果不同
perspective:距离 此属性,要定在3d转换元素的父元素上
3D旋转
transform:rotateX(xdeg);以x轴为中心,旋转元素角度
transform:rotateY(ydeg)以y轴为中心,旋转元素角度
transform:rotateZ(zdeg)以z轴为中心,旋转元素角度
transform:rotate3D(x,y,z,ndeg)x,y,x 取值为0,代表不参与旋转 , >0 代表参与旋转 , 1~10代表速率
过渡
让css的属性值,在一段时间内,平缓的变化(css是两个值) 两个状态之间的变化可以使用过渡可以使用动画,但是超过两个状态,只能使用动画 , 过渡是通过hover激活
过渡的语法
transition-property① 指定使用过渡的属性
transform不添加进过渡属性,也自动参与过渡
取值,css的属性名称,多个属性名称之间,用空格分开
all,所有支持过渡的属性,都参与此次过渡
注意,transform必须执行过渡效果
支持过渡的属性: 1.颜色属性 , 2.大多数取值为具体数字的属性 , 3.阴影 , 4.转换 , 5.visibility
transition-duration② 过渡效果持续的时长, 指定多长时间完成此过渡效果 单位 s/ms
transition-timing-function:③ 过渡时间曲线函数
ease:默认值,慢速开始,中间加速,慢速结束
linear:匀速
ease-in:慢慢开始,一直加速
ease-out:快速开始,慢速结束
ease-in-out:慢速开始,中间先加速再加速,慢速结束
<head><title></title><style>#d1{width:200px;height:200px;background:#00f;/*1.指定过渡属性*/transition-property:all;/*2.过渡时长*/transition-duration:5s;/*3.速度时间曲线函数*/transition-timing-function:linear;}#d1:hover{background:#f00;border-radius:50%;transform:translate(800px);box-shadow:0px 0px 50px 50px #ff0;}</style></head><body><div id="d1"></div></body>
过渡的延迟时间
transition-delay:1s;
过渡的简写方式
transition:property duration timing-fucntion delay;
最简方式 : transition:duration;transition: 1s
写在原本的样式中
总结:什么时候使用过渡
①css的属性值,只有两个状态(起始状态,终止状态)
②css的变化,只能用hover激活(终止状态必须写在hover里)
这个时候使用过渡
过渡代码的编写位置
1.写在原本的样式中 , 过渡效果有去有回
2.写在hover中 , 过渡效果有去无回
动画
多个过渡效果放到一起,就是动画 , 元素从一种样式逐渐变为另一种样式(两个或者多个)
动画就是将一个或者多个过渡放到一起 , 动画可以不通过hover激活
使用关键帧,来控制动画的每一个状态
关键帧 (某一个时间点,在这个时间点上样式) 1.动画执行的时间点 , 2.在这个时间点上的样式
动画的使用步骤
①@keyframes 动画名称{ 0%{动画样式} ...100%{动画样式} }申明动画 @keyframes关键帧 , 申明名称随意 0%~100%时间点中间可以加任意时间点
调用动画
②animation-name:动画名称;使用动画名称 申明名称随意
③animation-duration:3s;动画执行的时间
④animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out;动画执行的时间曲线函数
⑤animation-delay:1s;动画执行的延迟
动画可以不使用hover激活,hover也可以激活动画,离开就没了
动画的其它属性
①设置动画执行次数animation-iteration-count:具体数字/infinite无限;
②动画的执行顺序animation-direction:默认值normal 0%—>100%顺序执行 , reverse 100%—>0%反着执行 , alternate 轮流播放奇数次顺着播放0%—>100% , 偶数次倒着播放100%—>0%
动画的简写方式
③动画的简写方式animation:name duration timing-function delay count direction;
最简方式animation:name duration;
④设置动画播放前后的填充状态animation-fill-mode:none默认不填充 ,.backwards动画播放前的延迟时间内,显示动画的第一帧 ,forwards动画结束后,显示最后一帧 ,both开头结尾都填充
⑤设置动画的播放状态animation-play-state:paused暂停 ,running播放
动画的兼容性低版本的浏览器,需要在定义动画的时候添加前缀 , 定义动画的时候,写css hack
@keyframes 动画名称{关键帧}
@-webkit-keyframes 动画名称{关键帧}
@-moz-keyframes 动画名称{关键帧}
@-o-keyframes 动画名称{关键帧}
@-ms-keyframes 动画名称{关键帧}
什么时候用动画,什么时候用过渡
①超过两个css的样式状态,必须用动画
②不使用hover触发,F5刷新,直接出效果,必须用动画
③如果只有两个状态,并且hover触发,动画和过渡都可以使用
推荐使用过渡
steps ()
@keyframes animate {to {background-position: -3420px;}}.kai.animate {animation: animate 0.75s steps(19) infinite;}
steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
动画完整的效果是将这幅图在0.75s内，分19次，水平方向向左移动3420px（图像的宽度）
项目中动画使用animate.css<link rel="stylesheet" href="animate.css">
https://daneden.github.io/animate.css/
