今天是2019年6月20日,在这里跟大家分享css基础中外边距、内边距、背景等相关属性的设置及一些问题的解决!话不多说,直接上知识点。
一、轮廓
- 定义:围绕在边框外围的一条线,作用起到突出显示功能
- 属性:outline:width style color
- 备注:outline:none表示无轮廓
- 使用场景:表单轮廓 去除轮廓
二、按钮
- 定义:<input type="button">或<button></button>
三、盒子模型(框模型)
- 框模型:一个元素就是盒子或者框(双标签),给一个元素设置宽高,放内容。
- 盒子模型:定义元素内容、内边距、边框、外边距的处理样式。
- 当框模型介入到元素中,元素的实际尺寸是:
- 左右边框+左右内边距+内容宽度
- 上下边框+上下内部距+内容高度
四、外边距
- 定义:围绕元素周围的空白区域,拉开当前元素和其他元素之间的距离
- 属性:margin 属性值:px,百分比或者auto
- 注意:
- margin取值为1个时:代表的是上下左右四个方向。
- margin取值为2个时:x1代表的是垂直方向,x2代表的是水平方向。
- margin取值为3个时:x1代表的是上,x2代表的是水平方向, x3代表的是下。
- margin取值为4个时:代表的是上下左右四个方向。
- 备注:
- 取值auto使用场景:块元素水平居中,只需要设置margin-left:auto和margin-right:auto。合并就是margin:0 auto。
- 水平居中的前提:需要有指定的宽度
- 单向定义:margin-方向(top bottom left right) 取值:同上
- 负数的使用:margin给正值往相反方向移动,margin给负值往相同方向移动
- 使用场景:用于微调元素的位置
- 问题
- 垂直外边距合并:当两个垂直外边距相遇时,会合并成一个外边距,最终的值取决于两者中较大的一个。
- sample:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直外边距合并</title> <style> div { width: 300px; height: 300px; background: #008000; } #box1 { margin-bottom: 30px; } #box2 { margin-top: 20px; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
- sample:
- 垂直外边距溢出:当我们给一个子元素设置垂直溢出margin时,如果子元素前面没有任何内容,且父元素没有边框,这个时候子元素垂直margin会溢出作用到父元素上。
- 解决方案:
- 给父元素加边框
- 取消子元素的外边距,增加父元素的内边距
- 在子元素前面加一个空的table标签
- 内容生成:
- 原理:可以通过css向一个元素的前面(作为第一个子元素插入)或者后面(作为最后一个子元素插入)加入一个标签(定义标签属性)
- 格式:before {content:"插入元素的内容" width:xx; height:xx; background:xx;.....}
- sample
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>溢出生成</title> <style> .box, #box { width: 200px; height: 200px; background: #008000; } #box { background: #0000FF; } #box:before { content: ""; display: table; } .child { width: 80px; height: 80px; background: #E4393C; margin-top: 100px; } </style> </head> <body> <div class="box"></div> <div id="box"> <div class="child"></div> </div> </body> </html>
- 垂直外边距合并:当两个垂直外边距相遇时,会合并成一个外边距,最终的值取决于两者中较大的一个。
五、内边距
- 定义:元素边框与内容之间的距离
- 属性:padding
- padding取值为1个时:代表的是上下左右四个方向。
- padding取值为2个时:x1代表的是垂直方向,x2代表的是水平方向。
- padding取值为3个时:x1代表的是上,x2代表的是水平方向, x3代表的是下。
- padding取值为4个时:代表的是上右下左四个方向。
- 注意:当给一个元素设置内边距时,会撑开元素的实际宽高,宽高需要保持不变的情况下,需要width/height减去定义的尺寸。
- 单向定义:padding-方向
- 备注:行内元素不可以设置宽高,可以padding撑开
六、背景相关属性
- 背景颜色:background-color
- 背景图片:background-image
- 背景重复:background-repeat
- repeat:重复(默认值)
- no-repeat:不重复
- repeat-x:水平方向重复
- repeat-y:垂直方向重复
- 背景图片尺寸:background-size 两个值,以空格分割
- 备注:
- contain:等比例放大背景图,直到背景图的宽度或者高度有一个适应元素的宽高截止。
- cover:等比例放大背景图,直到背景图的宽度和高度都覆盖了元素宽高截止。
- 备注:
- 背景图片固定:background-attachment
- 值:
- scroll:背景图会跟随滚动条的滚动而滚动
- fix:背景图固定
- 值:
- 背景图定位:background-position 两个值,以空格分割
- 第一个值 水平偏移距离 正值 右移动
- 第二个值 垂直偏移距离 正值 下移动
- 背景综合属性:background:color url() repeat attachment position
- 注意:background-size 如果需要定义背景尺寸,不能使用背景属性必须使用background-size属性
- 常用:background:url() repeat position;
- 精灵图:sprite 雪碧图 将若干个小图合并成一张大图
- 好处:可以减少http的请求,提高页面打开速度。