20181011日学习笔记 - CSS

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.固定定位

　　　　固定定位相对于屏幕固定显示在某个位置

　　　　固定定位的元素也是脱离文档的

　　　　返回顶部按钮

20181011日学习笔记 - CSS

原文：https://www.cnblogs.com/lijinming110/p/9774740.html