1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .box1{ 8 width: 100px; 9 height: 100px; 10 background-color: aquamarine; 11 border-width: 10px 20px 30px 40px; 12 border-color: antiquewhite; 13 border-style: solid; 14 border-style: dotted; 15 } 16 /* 17 一、内容区 18 width height 设置盒子内容区的宽度和高度，而不是盒子的整个大小 19 盒子可见框的大小由内容区，内边距和边框共同决定 20 21 为元素设置边框 22 要为一个元素设置边框必须指定三个元素 23 border-width 边框宽度 24 border-color 边框颜色 25 border-style 边框样式 26 27 1.设置边框的宽度 28 如果指定四个值 按顺时针方向 上右下左 29 如果指定三个值 分别设置给 上 左右 下 30 如果指定两个值 分别设置给 上下 左右 31 如果指定一个值 四边宽度一致 32 除了border-width,CSS中还提供了四个border-xxx-width 33 xxx的值可能是top right bottom left 34 专门用于设置指定边的宽度 35 36 2.设置边框颜色 37 指定方式同边框宽度 border-xxx-color 38 39 3.设置边框样式 40 可选值： 41 none 默认值 42 solid 实线 43 dotted 点状边框 44 dashed 虚线 45 double 双线 46 等 47 style也可以分别指定四个边的边框样式规则和前面一致 border-xxx-style 48 49 大部分浏览器中，边框宽度和颜色都有默认值，而边框的样式默认值为none 50 51 简写样式：border 通过它可以设置四个边框的样式，宽度，颜色，而且没有任何顺序要求 52 border 一指定就是同时指定四个边不能分别指定 53 border-top border-right border-bottom border-left 可以单独设置四个边的样式 规则和border一样，只不过它只对一个边生效 54 */ 55 56 /* 57 二、内边距 58 padding 指的是盒子的内容区 59 一共有四个方向的内边距，可以通过 60 padding-top 61 padding-right 62 padding-bottom 63 padding-left 64 来设置四个方向的内边距 指定方式与width相同 65 内边距会影响盒子可见框的大小，元素的背景会延伸到内边距 66 盒子的大小由内容区，内边距和边框共同决定 67 */ 68 69 /* 70 三、外边距 71 指的是当前盒子与其他盒子之间的距离，不会影响可见框的大小，而是会影响到盒子的位置 72 盒子中有四个方向的外边距 73 margin-top 74 margin-right 75 margin-bottom 76 margin-left 77 由于页面中的元素都是靠左靠上摆放的， 78 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变 79 外边距也可以指定为一个负值，则元素会向反方向移动 80 margin还可以设置为auto，auto一般只设置给水平方向的margin 81 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值 82 垂直方向外边距设置为auto，则外边距默认值为0 83 如果将left和right同时设置为auto则会将两侧的外边距设置为相同的值，使元素自动在父元素中水平居中 84 外边距同样可以简写 写法与padding一致 85 */ 86 .box2{ 87 width: 100px; 88 height: 100px; 89 background-color: aliceblue; 90 border: solid 50px yellowgreen; 91 92 margin-left: 100px; 93 margin-right: 100px; 94 margin-bottom: 100px; 95 } 96 .box{ 97 width: 100px; 98 height: 100px; 99 background-color: beige; 100 border-left: red solid 10px; 101 padding: 10px; 102 } 103 .box3{ 104 /* 105 创建一个子元素box占满box3 106 */ 107 background-color: yellow; 108 width: 100%; 109 height: 100%; 110 111 } 112 </style> 113 </head> 114 <body> 115 <div class="box1"> 116 </div> 117 <div class="box2"></div> 118 <div class="box"> 119 <div class="box3"></div> 120 </div> 121 </body> 122 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .box1{ 8 width: 100px; 9 height: 100px; 10 background-color: antiquewhite; 11 margin-bottom: 100px; 12 } 13 /* 14 垂直外边距的重叠 15 在网页中垂直方向的相邻的外边距会发生外边距的重叠 16 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和 17 不是相邻的且垂直方向的 则是取和 18 如果父子元素相邻了，那么子元素的外边距会设置给父元素 19 */ 20 .box2{ 21 width: 100px; 22 height: 100px; 23 background-color: aquamarine; 24 margin-top: 100px; 25 } 26 .box3{ 27 width:200px; 28 height: 200px; 29 background-color: yellow; 30 padding-top: 100px; 31 } 32 .box4{ 33 width: 100px; 34 height: 100px; 35 background-color: yellowgreen; 36 margin-top: 100px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="box1"> 42 </div> 43 <div class="box2"></div> 44 <div class="box3"> 45 <div class="box4"></div> 46 </div> 47 </body> 48 </html>