css盒模型
一.边框
边框的宽度:border-width
边框的线型:border-style
1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状 5.none 无边框
边框的颜色: border-color
复合写法:border:宽度 线型 颜色
利用边框实现三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 0px; height:0px; /* background-color: beige; */ } .box1{ border: 100px solid ; border-color: transparent transparent red transparent; } .box2{ border: 100px solid; border-color: transparent transparent transparent pink; } .box3{ border: 100px solid; border-color: transparent red transparent transparent; } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </body> </html>
利用边框实现梯形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ border: 100px solid; border-color: pink red yellow green; width: 50px; height: 50px; } .box2{ width: 100px; /* height: 400px; */ border: 100px solid ; border-color: transparent transparent yellow transparent; } .box3{ width: 400px; height: 100px; border: 100px solid ; border-color: transparent transparent transparent pink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
外边距问题及解决方法
1.兄弟关系外边距塌陷问题
现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象
原因:并列关系的两个元素共用了一个外间距区域
解决办法:分别给这两个元素套一个父元素,并为父元素设置overflow:hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .box, .box2{ width: 200px; height: 200px; background-color: aqua; } .box{ margin-bottom: 50px; } .box2{ background-color: blue; margin-top: 50px; } .father{ overflow: hidden; } </style> </head> <body> <div class="father"> <div class="box">box1</div> </div> <div class="father"> <div class="box2">box2</div> </div> </body> </html>
2.父子关系外边距塌陷问题
现象:
1.元素嵌套关系,子元素的margin-top值会叠加给父元素
2.如果父元素也有margin-top值,会与子元素margin-top值合并,取两者较大值
原因:父元素和子元素共用一个上边距区域
解决方法:
1.为父元素设置上边距或上填充
2.为父元素设置overflow:hidden
3.转换思路:巧用padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 400px; height: 400px; background-color: aqua; overflow: hidden; padding-top: 1px solid transrarent; margin-top: 100px; } .box1{ width: 200px; height: 200px; background-color: salmon; margin-top: 100px; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>
overflow详解
溢出元素
取值
overflow:visible 溢出显示,默认值
overflow:hidden 溢出隐藏
overflow:scroll 溢出显示滚动条,横向和纵向滚动条都显示
overflow:auto 自动,内容溢出时自动显示滚动条
overflow-x 水平方向
overflow-y 垂直方向
css背景
1.背景颜色 background-color
1.red
2.#000000
3.rgb
4.rgba
2.背景图像 background-image
url(路径)
默认值:背景图片位于元素左上角,在水平与垂直方向平铺
注:
背景图片与背景颜色的占位区域: content+padding+border
3.背景图像如何重复 background-repeat
repeat:重复
no-repeat:不重复
repeat-x:在水平方向上重复
repeat-y:在垂直方向上冲服
4.背景图像的起始位置 background-position
background-position:x,y
background-position:水平,垂直
background-position百分比
5.background简写
颜色 背景图片 如何重复 起始位置