CSS笔记
1.visibility:hidden;---隐藏并占位 visible--默认值,可见
display:none;--隐藏,不占位
2.用百分比的方式做屏幕适配
以下代码在不同屏幕表现不一样,可能是一行显示3个div,也可能是三行,每行各显示一个div
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ border: 1px solid black; float: left; } .box1{ width: 200px } .box2{ width: 300px } .box3{ width: 500px } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
改用百分比方式:
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ border: 1px solid black; float: left; } .box1{ width: 20%; } .box2{ width: 30%; } .box3{ width: 50%; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
无论多大屏幕都是两行(box1和box2有边框,所以加起来超过50%,所以box3会另起一行)
3.hr可能会导致屏幕可以左右滑动,出现横向滚动条,给hr定义一个宽度可以解决此问题
4.margin:auto并不能使inline或inline-block居中,只对block有效
5.float会脱离文档流,后面的元素会占据它的位置,但是它不能占据前面的元素的位置
- 上一篇 »CSS 学习笔记
- 下一篇 »读书笔记--Head First Html与Css 目录