写一个案例, 演示css中的选择器优先级(忽略js)
实例
<!DOCTYPE html> <html lang="en"> <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> </head> <body> <style> div{ background-color: red; } .color{ width:100px; height:100px; background-color: blue; } #color{ background-color: green; } </style> <div class="color" id="color"> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
写一个盒模型的简单案例,体会padding/border的简写规则
实例
<!DOCTYPE html> <html lang="en"> <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> </head> <body> <style> .box{ width:100px; height:100px; background-color:red; border:2px solid #000; padding: 10px 20px 10px 20px; } </style> <div class="box" > </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例