1.背景:
雪碧图:为了减少网页请求图片的次数,将很多小图片放在一个大图片中,通过
background_postion来指定
background-postion:url('xx.png' no-repeat center center)
2.边框
border:1px solid red
3.display
1.none
2.inline
3.block
4.inline-block
display:none 和visibility:hidden 的区别?
都是隐藏页面上的标签
display:none隐藏标签并不会占用位置
visibility:hidden 隐藏标签时同时会占住位置
4.盒子模型:
内容>内填充(padding)>边框(border)>外边距(margin)
5.浮动
1.浮动多用于页面大范围的布局
2.浮动
- left 往左浮动
- right 往右浮动
3.清除浮动的副作用
1.clear
- left 左边不能有浮动元素
- right 右边不能有浮动元素
- both 两把都不能有浮动元素
2.常用class
.clearfix:after {
content: '';
display:block;
clear:both
}
6.溢出
overflow
- hidden
- scroll
- auto
圆形头像例子
7.定位
1.相对定位:相对原来的位置做的定位
position:relative
left:
top:
bottom:
right:
2.绝对定位:相对已经定位过的祖先标签做的定位
多用于页面的局部的布局,注意要和定位的祖先标签配合使用
绝对定位和浮动一样,标签都会脱离文档,别的标签可以占用它的位置
3.固定定位
固定定位相对于屏幕固定显示在某个位置
固定定位的元素也是脱离文档的
返回顶部按钮