溢出处理盒子模型背景图片float（浮动）
Posted nzcblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了溢出处理盒子模型背景图片float（浮动）相关的知识，希望对你有一定的参考价值。
一、overflow:溢出内容的处理
overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)
overflow:auto; 自动滚动(有溢出产生滚动，没有就不产生滚动条)
overflow:scroll; 不管有没有溢出均产生滚动条
图片精灵技术
服务器
前项目部署到服务器上，图片当然也是在服务器上。网页如果要显示a图片，如果显示b图片，如果套很多图片
二、盒子模型：
margin(外边距)、border(边框)、padding(内间距)、内容区域
1.w3c盒子模型(默认盒子模型-标准的盒子模型)：
a.w3c盒子模型设置的宽高为内容区的宽高;
b.padding(内间距)、border(边框)、margin(外边距)均属于所设置宽高外的部分；
c.盒子宽高：border宽高+padding宽高+内容区域宽高【设置的宽高】
d.所占屏幕宽高：盒子宽高+margin宽高
2.ie盒子模型
a.ie盒子模型设置的宽高为盒子宽高
b.盒子宽高【设置的宽高】：border宽高+padding宽高+内容区域宽高
c.所占屏幕宽高：盒子宽高+margin宽高
3.两种盒子的比较代码如下：
<style type="text/css"> div width: 100px; height: 100px; background-color: pink; .one background-color: teal; /*width: 80px; height: 80px;*/ padding: 10px; box-sizing: border-box; border-left: 10px solid cyan; border-bottom: 10px solid coral; border-right: 10px solid cyan; border-top: 10px solid coral; </style> <body> <div class="one">one</div> <div class="two">two</div> </body>
三、border属性：
1.border-radius:5px(或百分比); 设置边框圆角
2.border-top-left-radius: 40px; 设置左上角边框圆角
3.border-bottom-right-radius: 40px; 设置右下角边框圆角
4.如果设置子元素圆角且父元素有背景颜色则父子元素均需要设置圆角边框：
eg：
<style type="text/css"> div width: 200px; height:200px; background-color: pink; .inner,.outer border-radius: 30px; .inner background-color: teal; </style> <body> <div class="outer"> <div class="inner"> </div> </div> </body>
四、background属性：
1.background-image:url(图片路径); 设置背景图片
2.background-repeat:(背景图片平铺方式)
eg：
<style> /*背景图片重复出现的方式*/ background-repeat: no-repeat; /*在x方向铺满一行*/ background-repeat: repeat-x; /*在y方向平铺一列*/ background-repeat: repeat-y; /*默认的铺满整个区域*/ background-repeat: repeat; </style>
3.background-size:100% 100%;(宽、高) 设置背景图片大小
4.图片精灵技术：(在元素区域内显示背景图片中指定区域图像)
实例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片精灵技术</title> <style type="text/css"> div width: 153px; height: 156px; background-image: url(./images/QQ图片20190620112449.jpg); .one /*设置背景图片的位置*/ background-position: -113px -120px; .two background-position: -633px -652px; </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
5.background-attachment： 固定显示图片背景
实例代码：
<style type="text/css"> body background-image: url(./images/d2a9ccbfe758a6619d25d0299257f860.jpg); /*背景图片绑定的位置，视口区？元素*/ /*1、固定背景 不随滚动条的滚动而滚动*/ background-attachment: fixed; /*2、默认的 随着滚动条滚动*/ background-attachment: scroll; </style>
五、float(浮动)
1、浮动
实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> div width: 100px; height: 100px; /*浮动文字不会被覆盖*/ .one height: 200px; background-color: red; /*左浮动 浮动元素脱离文档流 原来的位置不保留*/ float: right; .two background-color: orange; float: right; .three background-color: yellow; /*margin-top: 100px;*/ /*清除其他元素的浮动对自身元素(位置等)产生的影响*/ /*清除兄弟元素的浮动*/ /*clear: both;*/ float: right; .four background-color: green; float: right; .five background-color: blue; /*float: right;*/ clear: both; .six background-color: cyan; /*float: right;*/ </style> </head> <body> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </body> </html>
2、父子浮动
实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子浮动</title> <style type="text/css"> * margin: 0; padding: 0; ul border: 1px solid blue; list-style: none; /*清除浮动 给父元素设置了高度*/ /*overflow: hidden;*/ li border: 1px solid red; width: 100px; height: 100px; float: left; div width: 100px; height: 100px; background-color: cyan; /*清除浮动*/ clear: both; </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <div></div> </body> </html>
以上是关于溢出处理盒子模型背景图片float（浮动）的主要内容，如果未能解决你的问题，请参考以下文章
前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度