隐藏方式:
溢出隐藏:overflow: hidden; 不占位置
是否可见:visibility: hidden; 占位置
消失:display: none; 不占位置
透明度:opacity:0;(0-1 )占位置
定位
当页面上发生重叠时
相对:relative 不脱离文档流 可重叠别人
绝对:absolute 脱离文档流
固定:fixed 脱离文档流
默认;static 只是属性没有实际意义
相对:relative 不脱离文档流 可重叠别人
position: relative;
left: 100px;
top: 10px;/相当于原来的位置/
不脱离文档流 可重叠别人 相当于原来的位置移动
绝对:absolute 脱离文档流
脱离文档流
position: absolute;
right: 20px;
/相对于谁是发生改变的 如果祖先元素有定位属性,相对于该元素(最近的),
如果祖先元素没有定位属性相对于body/
固定:fixed 脱离文档流
固定于浏览器
z-index:调整层级(-1-999)(需要设置定位属性)
无法调整父子,可兄弟
弹框直接放在body下面
匹配选择器:
全匹配
/*全匹配 每个值都要一样*/
input[type="text"]{
width: 100px;
height: 100px;
}
自定义属性
div[wode="nihao"]{
width: 100px;
height: 100px;
background-color: #000;
}
开头匹配^
/*开头匹配*/
div[wode^="ni"]{
width: 100px;
height: 100px;
background-color: #EEEE11;
}
结尾匹配$
div[wode$="ao"]{
width: 100px;
height: 100px;
background-color: #11EE11;
}
模糊匹配*
/*包含匹配*/
div[wode*="h"]{
width: 100px;
height: 100px;
background-color: #eec0c0;
}
结构性伪类选择器
第一个类型
section>div:first-of-type{/*第一个*/
color: red;
}
最后一个类型
section>div:last-of-type{/*最后一个*/
color: #d8ff47;
}
第几个类型
section>div:nth-of-type(2){/*section下面的第二个div*/
color: #0fff22;
}
第一个孩子
section>div:first-child{
/*第一个儿子*/
}
最后一个孩子
section>div:last-child{
/*最后一个儿子*/
}
第几个孩子
section>div:nth-child(2){
/*第二个儿子*/
/*保证第二个儿子是div标签才能被选中*/
}
唯一的孩子
/*only-child */
section div:only-child{
/*满足条件:section下面的唯一的一个div*/
}
反选:除了id为xx的其他所有孩子
section div:not(#div1){
/*选中section下面的div并且id不是div1的div标签*/
color: red;
}
兄弟选择器
不能选择哥哥
相邻的弟弟
section #div1+div{/*相邻的弟弟*/
}
所有的弟弟
section #div1~div{/*所有的弟弟*/
}
目标伪类选择器
input:checked{/*选中的情况下改变样式*/
width: 50px;
height: 50px;
}
::selection{/*选中的情况下改变样式*/
background-color:pink;
color: white;
}
拓展
复合型
section div:not(:first-child){
color: green;
}/*section的div里不是第一个孩子的*/
body>section:first-of-type>div:first-of-type{
color: yellow;
}/*body的第一个section的第一个div*/
section:first-of-type>#div1~div{
color: #3a75ff;
}/*body的第一个为section的id为div1的所有的弟弟*/
display: inline-block;/将元素转化为具有块元素属性的行内元素/
/display: block; 将元素转化为块元素/
/display: inline; 将元素转化为行内元素/
after:
例子:对话框
#mydiv{
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50px;
background-color: pink;
color: black;
margin-bottom: 100px;
position: relative;
}
#mydiv:after{
content: '\25E4';
color: pink;
font-size: 25px;
position: absolute;
bottom: -30px;
left: 30px;
}
效果图:
before:
过渡: 属性 速度 线性
/transition: all 2s linear;/
transition: bottom 2s linear , color 2s linear , background-color 2s linear;
例子
#div1{
width: 200px;
font-size: 0;
border: 1px solid red;
position: relative;
overflow: hidden;
}
#div1 img{
width: 100%;
}
#div1:before{
content: '这是一个是瓜皮';
background-color: #000;
font-size: 14px;
color: red;
width: 200px;
height: 30px;
line-height: 30px;
position: absolute;
/*transition: bottom 2s linear , color 2s linear , background-color 2s linear;*/
transition: all 2s linear;
bottom: -30px;
display: inline-block;/*将元素转化为具有块元素属性的行内元素*/
/*display: block; 将元素转化为块元素*/
/*display: inline; 将元素转化为行内元素*/
}
#div1:hover:before{
bottom: 0;
color: green;
background-color: pink;
}