盒子代码学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> .p1 { background-color: rebeccapurple; width: 100px; height: 100px; } .p2 { background-color: aqua; width: 100px; height: 100px; } img { width: 100px; height: 100px; } .p3 { background-color: blue; width: 100px; height: 100px; border-width: 5px; /*边框的宽度*/ border-color: brown; /*边框的颜色*/ border-style: solid; /*边框的样式*/ /* border: 10px solid red; 简化写法border: 宽度 样式 颜色 */ padding: 20px;/*和margin用法一样 内边距不算在宽高*/ } .p4 { background-color: wheat; width: 100px; height: 100px; border-top: 5px red solid; border-left: 10px blue dotted; border-right: 10px blue dotted; border-bottom: 5px red solid; margin: auto;/* margin 外边距设置 */ /* margin-left: 20px; margin-right: 20px; margin-top: 5px; margin-bottom: 5px; */ } </style> <title>Document</title> </head> <body> <p class="p1">盒子模型高度height宽度width</p> <span class="p2">行内元素常规不能修改宽高</span> <img src="img/html.jpg" width="200px" /><img src="img/css.jpg" height="100px" /> <div class="p3">盒子边框属性 和padding</div> <div class="p4">盒子边框属性 和margin</div> </body> </html>效果图如下
