文章目录
复杂选择器
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/
动画和过渡的使用契机
1817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
