position:定位 可选值:
static:默认值
absolute:绝对定位,脱离文档流,特点:当没有父元素或者父元素没有定位的时候,
参照物就是浏览器窗口的第一视口,当父元素有绝对定位的时候,则参照父元素定位
relative:相对定位,不脱离文档流,相对于自己的初始位置发生偏移,
fixed:固定定位,脱离文档流,相对于浏览器第一视口位置不发生改变
sticky:黏性定位,脱离文档流,可以做吸顶的效果,css3新增的属性,兼容性问题
z-index:层叠次序,整数值,值越大越优先显示,解决图层遮盖显示问题
导航里的下拉三角图标:利用边框属性来制作,三个方位设置边框,一方为颜色,另外两方为透明,不给大小,就可以实现不同朝向的三角图标
定位控制元素的水平居中:
position:absolute;
top:50%;
left:50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;
浮动跟绝对定位的区别:浮动为半脱离,有文字环绕效果,绝对定位为全脱离,不会有文字环绕效果
锚点:a链接
锚点作用:实现页面不同区域的跳转
格式:<a href=”#锚点名字”>
<div id=”锚点名字”></div>
精灵图(雪碧图):将导航背景图,按钮背景图片等规则的合成一张背景图,多张图片和成一张,让后用background-position
实现背景图的定位技术。使用的雪碧图的优势:通过整合图片减少对服务器的请求次数,,提高加载速度,可以减小图片的体积。
宽高自适应:元素的宽度和高度大小能够根据窗口的大小自动调整;
浮动中的高度自适应:
高度塌陷:
解决方法:1、给父元素写一个高度塌陷,随带问题浮动元素过多会出现换行问题
2、 给最后加一个空元素,设置clear:both;
3、给父元素加一个overflow:hidden;(缺点是会隐藏溢出的元素);
4、伪元素选择器进行,在末尾插入空标签,代码如下:
.box::after{
content:””;伪元素的内容为空
clear:both; 清除伪元素前后的浮动
display:block;将行内块元素转化成块元素
width:0;设置宽度
height:0;设置高度
visibility:hidden;将内容隐藏,
}