2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>盒子模型</title> 7 <style> 8 .box1{ 9 /* 10 内容区(content)，元素中所有的子元素和文本内容都在内容取中个 排列 11 内容区的大小是由width和heigth两个属性来设置 12 width设置内容区的高度 13 height 设置内容区的高度 14 */ 15 width:200px; 16 height:200px; 17 background:orange; 18 /* 19 边框(boeder)，边框属于盒子边缘，边框里面属于盒子内部，除了> 边框就是盒子的外部 20 -要设置边框，需要至少设置三个样式 21 -边框的宽度border-wedth 22 -边框的颜色border-color 23 -边框的样式border-style 24 25 */ 26 /*border-10px;表示边框的粗细*/ 27 /*border可以省略不写，其有默认值，一般为3个像素 28 border-width可以用来指定四个方向的边框的宽度 29 -顺序:上，右，下，左 30 -三个值：上，左右，下 31 -两个值：上下，左右 32 -一个值：上下左右 33 除了border-width还有一组border-xxx-width 34 -xxx可以是top,right,bottom,left 35 -用来单独指定某一个边的宽度 36 37 */ 38 border-color:red; 39 /* 40 border-color用来指定四个边的颜色，同样可以分别制定四个边框> 的颜色 41 -规则和border-width一样 42 border-color如果省略不写，则自动使用color值 43 */ 44 border-style:solid;/*实线*/ 45 /* 46 border-style指定边框的样式 47 -solid表示实线 48 -dotted 点状虚线 49 -dashed 虚线 50 -double 双线 51 border-style的默认值是None 52 */ 53 /* 54 border简写属性，通过该属性可以同事设置边框所有相关样式，并> 且没有顺序要求 55 border:solid 10px orange; 56 57 */ 58 border:10px red solid; 59 border-left:None; 60 /* 61 内边距(padding): 62 -内容区和边框之间的距离 63 -一共有四个方向的内边距 64 -padding-top 65 -padding-left 66 -padding-right 67 -padding-bottom 68 -内边距的设置会影响盒子的大小 69 -背景颜色会延伸到内边距上 70 一个盒子的可见框的大小是由内容区，内边距，边框共同决定 71 -所以在计算盒子的大小时，需要将这三个区域加到一起计算 72 padding-top:100px; 73 padding-right:100px; 74 padding-left:100px; 75 padding-bottom:100px; 76 padding内边框的简写属性，可以同时指定四个边框的内边距 77 -规则和border-width一样 78 */ 79 /* 80 外边距(margin) 81 -外边距不会影响盒子可见框的大小 82 -但是外边距会影响盒子的位置 83 -一共有四个方向的外边距 84 -margin-top 85 -上外边框，设置一个正值，元素会向下移动 86 -margin-right 87 -默认情况下设置margin-right不会产生任何效果 88 -margin-bottom 89 -下边编剧，设置一个正值，其下面的元素会向下移动 90 -margin-left: 91 -左外边距，设置一个正值，元素会向有移动 92 -margin也可以设置负值，如果是负值则会向相反的方向移动 93 -元素在页面中的排序是自左向右的顺序排列的 94 -所以默认情况下如果我们设置左和上边编剧则会移动元素自身 95 而设置下和右编剧则会移动其他元素 96 -margin的简写属性 97 -margin可以同是设置四个方向的外边距，用法和padding> 一样 98 99 */ 100 } 101 102 </style> 103 </head> 104 <body> 105 <!-- 106 盒模型，盒子模型，框模型(box model) 107 -css将页面中的所有元素都设置为一个矩形的盒子 108 -将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子 摆放到不同的位置 109 -每一个盒子都由以下几个部分组成： 110 -内容区(content) 111 -内边距(padding) 112 -边框(border) 113 -外边距(margin) 114 - 115 116 117 --> 118 <div class="box1"></div> 119 </body> 120 </html>
CSS盒子模型
笨鸟先飞