css部分总结

浮动

1、块级元素独占一行，从上往下顺序排列
常用的有 div hr p h1~h6 ul ol form table
2、行内元素会按顺序，从左到右排列，碰到父元素边缘则自动换行
常用元素 span a i em
3、多个块级元素纵向排列找标中军流 横向排列找浮动 float
浮动盒子不再保留原先位置
4、任何元素都可以浮动，添加浮动之后具有行内块相似的特性
5、浮动元素经常和标准流父级搭配使用
6、一个盒子里面如果有多个盒子，一般一个盒子浮动了 其他兄弟也应该浮动，浮动的盒子只会影响后面的标准流，不会影响前面的标准流

清除浮动

方法：选择器{ clear：both}
1、额外标签法 在最后一个子元素后面添加一个额外标签，清除浮动样式
2、给父级元素添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素

定位

1. relative 相对定位，相对于它自己原来的位置移动，不脱离标准流，继续保留原来的位置。
2. absolute 绝对定位 如果没有祖先元素或者祖先元素没有定位 则以浏览器为准定位，绝对定位不再占有原先的位置 也就是脱离了标准流
3. 子绝父相 子级绝对定位的话，父级要用相对定位
4. 固定定位 fixed 以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系 不随滚动条滚动 固定定位不在占有原先位置
5. 定位的叠放次序 z-index 数值越大盒子越靠上 只有定位的盒子才有z-index属性
6. 行内元素添加绝对或者固定定位 可以设置高度和宽度
7. 块级元素添加绝对定位或者固定定位 如果不给宽度或者高度 默认大小是内容的大小
8. 脱离i标准流的元素都不会造成塌陷

元素的显示与隐藏

display属性 设置元素如何显示
none 隐藏对象 display block 除了转换块级元素还要显示元素的意思
display隐藏元素后不再占有原来的位置
visibility visible 元素可见
hidden 隐藏元素
visibility 隐藏元素后继续占有原来的位置
overflow hidden 将超出的部分隐藏掉

网站布局

1.固定布局 固定像素布局 px
2.流动布局 百分比布局 %
3、浮动布局 —就是元素左右浮动 堆叠产生布局模式
4、定位布局 —就是元素使用各种定位 产生的布局模式
5、弹性盒子布局 —flex 进行布局

精灵图的使用

1、主要针对于小的背景图使用
2、借助于背景位置实现 background-实现
一般情况下精灵图坐标都是负值