1.浮动的特性：
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
4.收缩的效果
前提是标准文档流，margin的垂直方向会出现塌陷问题。
如果盒子居中：margin：0 auto；如果盒子浮动了，margin：0 auto；就不起作用了
需求：让浮动的盒子居中
给浮动的盒子，加一个父盒子，设置宽度和浮动盒子一样，并且overflow：hidden；设置该盒子margin：0 auto；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width: 400px; height: 300px; background-color: red; } .main{ width: 100px; overflow: hidden; margin: 0 auto; } .child{ width: 100px; height: 100px; background-color: green; margin: 0 auto; float: left; } </style> </head> <body> <div class="box"> <div class="main"> <div class="child"> </div> </div> </div> </body> </html>
文本水平居text-align：center；
文本垂直居中：行高=盒子的高度
text-indent:2em; 首行缩进两个字符
font-weight:800;字体粗细（100-900）
font-family：“华文行楷”
font：12px/240px "华文行楷"
盒子如果浮动了，那么垂直方向上不会出现塌陷问题
css中有三种方式让盒子“脱标”
1.浮动float
2.绝对定位
3.固定定位
一些知识点backkground-image：精灵图技术
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 24px; height: 35px; background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png); /*图片默认水平平铺，垂直平铺，这样就不平铺了*/ background-repeat: no-repeat; background-attachment: fixed; background-position-x:0; background-position-y: -162px; /*固定定位*/ /*background-attachment: fixed;*/ background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -162px; } </style> </head> <body> <div class="box"> </div> </body> </html>
2.定位
默认：position:static; 静态定位
position: relative; 相对定位
absolute;绝对定位
fixed;固定定位
- ralative:
如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别
不脱标
参考点：
相对于原来的位置
形影分离
作用：
1.层级提高，做压盖（不建议）
2.布局方案 "子绝父相"的参考
- absolute
1.脱标：不占位置
2.层级提高
参考点：
单个盒子
如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分）
如果以bottom描述，是以浏览器的左下角为参考点
父子盒子之间
如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点