盒子模型（重点）
1 HTML的元素可以看成一个矩形的盒子，每个盒子都是由内容、内边距、
外边距、边框组成
网页布局的本质-----很多矩形盒子组合而成
2 Box Model
width 内容的宽
height 内容的高
border 边框
css3关于边框多了一属性 border-radius 圆角边框
padding 内边距
浮动
定位
01网页的本质.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 300px; height: 300px; background: red; } </style> </head> <body> <div>div盒子</div> <hr /> <div>主体部分</div> </body> </html>
02盒子模型之border.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; /*内容的宽*/ height: 200px;/*内容的高*/ border-width: 8px; /*边框粗细*/ border-color: red; /*边框颜色*/ /* border-style: solid; *//*边框样式实线 用的最多*/ /* border-style: dashed; 虚线*/ /* border-style: dotted; 点线*/ border-style: double; /* 双线*/ border: 10px solid pink; } </style> </head> <body> <div>我是一个盒子</div> </body> </html>
03边框写法总结.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input { border: 0; /*没有边框*/ } .uname { border-width: 1px; border-style: solid; border-color: green; } .nc { border-top-width: 1px; border-top-style: solid; border-top-color: pink; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: brown; } .email { border-left: 1px solid red; border-right: 1px solid #ccc; } .tel { /* border: 2px solid skyblue; */ border-left: 2px solid skyblue; border-top: 2px solid skyblue; border-right: 2px solid skyblue; border-bottom: 2px solid skyblue; } </style> </head> <body> <label for="">用户名:<input type="text" class="uname"></label><br /><br /> <label for="">昵称:<input type="text" class="nc"></label><br /><br /> <label for="">邮箱:<input type="email" class="email"></label><br /><br /> <label for="">手机:<input type="tel" class="tel"></label> </body> </html>