一.定位
1.三种定位方式:标准流,浮动,定位;
2.定位使用步骤:
01.设置定位方式:position ;
relative:相对原来的位置移动了,原来的显示模式特点不变,占一行还是一行;如果四个定位都有,以左,上为准;
absolute:先找已经定位的父级,相对定位和绝对定位无所谓;如果有,以父级为准;如果父级没有定位,以浏览器窗口为参照进行定位;托镖,不占位置了,改变了显示特点,具备了行内块的特点,加宽度高度生效,如果不设置也没有内容尺寸据变成子了 。绝父相;
子绝父相居中:
位移居中:
position: absolute;
left: 50%;
margin-left: -150px;
transform: translate(-50%, -50%);
3.底部半透明遮罩效果
. mask{
background-color: rgba(0,0,0, .5);
position: absolute;
}
4.固定定位
1.托镖,不占位置,具备行内块特点;
.box{
position: fixed;
left: 0;
top: 0;
}
5.元素的层级关系
1.定位>浮动>标准流
两个定位在一起,后定位的在最上边;使用z-index属性,取值是整数;取值越大越靠上;
二.装饰
1.vertical-align垂直对齐方式
浏览器遇到行内和行内块标签按文字处理,默认按基线处理
2.光标类型
cursor属性
.box{
cursor: pointer;
cursor: default;
cursor: text;
cursor: move;
}
3.圆角边框
从左上角开始赋值,顺时针,没有赋值的看对角;
.box{
border-radius: 10px 10px 20px 50px;
}
画一个正圆:
.box{
border-radius: 50%/100px;
}
胶囊按钮:值变成高度的一半就可以了,盒子本身是长方形;
4.overflow溢出部分显示效果
.box{
overflow: hidden;
溢出隐藏
overflow: visible;
溢出可见
overflow: scroll;
无论是否溢出,都加滚动条
overflow: auto;
根据是否溢出,自动显示
}
5.元素本身隐藏
visibility: hidden;
/*不常用*/
display: none;
不占位隐藏
}
6.元素整体透明度
取值0-1;
.box{
opacity: 0.5;
}
7.精灵图
将多张小图合并成一张大图;减少发送次数,减轻服务器的压力,提高页面加载速度;
步骤:1.设置盒子大小等于小图;2.小图设置为盒子的背景;精灵图的标签都用行内标签 span,b,i,记得转换display:inline-block;3.修改背景图位置;