1.边框
围绕着内容和内填充区域的线
1.border-width:边框的宽度 单位:像素 注意:只写一个border-width设置不上边框的宽的,得写上边框的线型 2.border-style:边框的线型 1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状边框 5.none 没有边框 3.border-color:边框的颜色 1.关键词 2.十六进制色值 3.rgb() 4.rgba() 默认边框的颜色为元素本身的前景色 4.复合写法 例子: border-color: pink; 一个值:四个边框 border-color: pink gold; 两个值:上下边框 左右边框 border-color: pink gold greenyellow; 三个值:上边框 左右边框 下边框 border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向) border-width和border-style同样效果 5.单独设置 例子: /* 上边框 */ border-top-width: 50px; border-top-style: solid; border-top-color: yellow; /* 下边框 */ border-bottom-width: 50px; border-bottom-style: dashed; border-bottom-color: brown; 单边框复合写法: border-left: 50px solid cyan; 边框的宽度 边框的线型 边框的颜色 6.边框的复合写法 border:边框的宽度 边框的线型 边框的颜色 border: 100px solid purple; 7.去掉边框 border:0; border:none;
利用边框实现三角形
用边框实现三角形的规律: 盒子大小宽高为0 要那个三角形,他的对边为none,他相邻的边框的颜色为透明色,transparent /* 上三角形 实现上边三角形,对边为none,也就是下边框为none,左右边框的颜色为透明色 */ .box1 { width: 0; height: 0; /* border: 100px solid tomato; border-bottom: none; border-left-color: transparent; border-right-color: transparent; */ border-top: 100px solid tomato; border-left: 100px solid transparent; border-right: 100px solid transparent; }
利用边框实现梯形
/* 用边框实现梯形的规律 盒子大小不能为零 要那个梯形,他的对边为none,他相邻的边框的颜色为透明色,transparent */ /* 上梯形 实现上梯形,对边为none,也就是下边框为none,左右边框的颜色为透明色 */ .box1 { width: 100px; height: 100px; /* background-color: brown; */ /* border: 100px solid red; border-color: tomato purple blue olivedrab; border-bottom: none; border-left-color: transparent; border-right-color: transparent; */ border-top: 100px solid tomato; border-left: 100px solid transparent; border-right: 100px solid transparent; } /* 左梯形 实现左梯形,对边为none,也就是右边框为none,上下边框的颜色为透明色 */ .box2 { width: 100px; height: 100px; /* background-color: brown; */ /* border: 100px solid red; border-color: tomato purple blue olivedrab; border-right: none; border-top-color: transparent; border-bottom-color: transparent; */ border-left: 100px solid olivedrab; border-top: 100px solid transparent; border-bottom: 100px solid transparent; }
2.外边距问题及解决方法
1、兄弟关系外间距塌陷问题
兄弟关系外间距塌陷问题 现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象; 两个值一样大,取当前值 两个值不同,取较大值 原因:并列关系的两个元素共用了一个外间距区域 解决办法: 分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden' .box1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 50px; } .box2 { width: 100px; height: 100px; background-color: red; margin-top: 100px; } .father1, .father2 { overflow: hidden; } <div class="father1"> <div class="box1"></div> </div> <div class="father2"> <div class="box2"></div> </div>
2、父子关系外间距塌陷
父子关系外间距塌陷 现象: 1.元素嵌套关系,子元素的margin-top值会叠加给父元素; 2.如果父元素也有margin-top值,会与子元素的margin-top值合并,取两者较大值; 原因: 父元素和子元素公用一个上外边距区域 解决方法: 1.为父元素设置上边框或者上填充 2.为父元素设置overflo:hidden; 3.转换思路,巧用padding,规避margin .father { width: 200px; height: 200px; background-color: tomato; margin-top: 100px; /* border-top: 2px solid royalblue; padding-top: 1px; */ overflow: hidden; } .son { width: 100px; height: 100px; background: blue; margin-top: 50px; } .father1 { width: 200px; height: 200px; background-color: purple; padding-top: 20px; } .son1 { width: 100px; height: 100px; background: pink; /* padding-top: 10px; */ } <div class="father"> <div class="son"></div> </div> <hr> <div class="father1"> <div class="son1"></div> </div>