一、overflow:溢出内容的处理
    overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)
    overflow:auto; 自动滚动(有溢出产生滚动，没有就不产生滚动条)
    overflow:scroll; 不管有没有溢出均产生滚动条

二、盒子模型：
    
    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.两种盒子的比较代码如下：

  1. <style type="text/css">
  2.             div{
  3.                 width: 100px;
  4.                 height: 100px;
  5.                 background-color: pink;
  6.             }
  7.             .one{
  8.                 background-color: teal;
  9.                 /*width: 80px;
  10.                 height: 80px;*/
  11.                 padding: 10px;
  12.                 box-sizing: border-box;
  13.  
  14.                 border-left: 10px solid cyan;
  15.                 border-bottom: 10px solid coral;
  16.                 border-right: 10px solid cyan;
  17.                 border-top: 10px solid coral;
  18.             }
  19.         </style>
  20.         <body>
  21.             <div class="one">one</div>
  22.             <div class="two">two</div>
  23.         </body>

三、border属性：
    1.border-radius:5px(或百分比);  设置边框圆角
    2.border-top-left-radius: 40px;  设置左上角边框圆角
    3.border-bottom-right-radius: 40px;  设置右下角边框圆角

4.如果设置子元素圆角且父元素有背景颜色则父子元素均需要设置圆角边框：
    eg：

  1.          <style type="text/css">
  2.             div{
  3.                 width: 200px;
  4.                 height:200px;
  5.                 background-color: pink;
  6.             }
  7.             .inner,.outer{
  8.                 border-radius: 30px;
  9.             }
  10.             .inner{
  11.                 background-color: teal;
  12.             }
  13.         </style>
  14.  
  15.         <body>
  16.             <div class="outer">
  17.                 <div class="inner">
  18.  
  19.                 </div>
  20.             </div>
  21.         </body>

四、background属性：
    1.background-image:url(图片路径);  设置背景图片
    2.background-repeat:(背景图片平铺方式)

　　eg：

  1.         <style>
  2.             /*背景图片重复出现的方式*/
  3.             background-repeat: no-repeat;
  4.             /*在x方向铺满一行*/
  5.             background-repeat: repeat-x;
  6.             /*在y方向平铺一列*/
  7.             background-repeat: repeat-y;
  8.             /*默认的铺满整个区域*/
  9.             background-repeat: repeat;
  10.         </style>

3.background-size:100% 100%;(宽、高)  设置背景图片大小

4.图片精灵技术：(在元素区域内显示背景图片中指定区域图像)
        实例代码如下：

  1.         <!DOCTYPE html>
  2.             <html lang="en">
  3.             <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>图片精灵技术</title>
  6.                 <style type="text/css">
  7.                     div{
  8.                         width: 153px;
  9.                         height: 156px;
  10.                         background-image: url(./images/QQ图片20190620112449.jpg);
  11.                     }
  12.                     .one{
  13.                         /*设置背景图片的位置*/
  14.                         background-position: -113px -120px;
  15.                     }
  16.                     .two{
  17.                         background-position: -633px -652px;
  18.                     }
  19.                 </style>
  20.             </head>
  21.             <body>
  22.                 <div class="one"></div>
  23.                 <div class="two"></div>
  24.             </body>
  25.             </html>


    5.background-attachment：   固定显示图片背景
        实例代码：

  1.              <style type="text/css">
  2.                 body{
  3.                     background-image: url(./images/d2a9ccbfe758a6619d25d0299257f860.jpg);
  4.                     /*背景图片绑定的位置，视口区？元素*/
  5.                     /*1、固定背景 不随滚动条的滚动而滚动*/
  6.                     background-attachment: fixed;
  7.                     /*2、默认的  随着滚动条滚动*/
  8.                     background-attachment: scroll;
  9.                 }
  10.             </style>

五、float(浮动)【清除浮动】
    1、清除兄弟元素间的浮动影响（clear:both;）
        实例代码：

  1.          <!DOCTYPE html>
  2.             <html lang="en">
  3.             <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>浮动</title>
  6.                 <style type="text/css">
  7.                     div{
  8.                         width: 100px;
  9.                         height: 100px;
  10.                     }
  11.                     /*浮动文字不会被覆盖*/
  12.                     .one{
  13.                         height: 200px;
  14.                         background-color: red;
  15.                         /*左浮动  浮动元素脱离文档流 原来的位置不保留*/
  16.                         float: right;
  17.                     }
  18.                     .two{
  19.                         background-color: orange;
  20.                         float: right;
  21.                     }
  22.                     .three{
  23.                         background-color: yellow;
  24.                         /*margin-top: 100px;*/
  25.                         /*清除其他元素的浮动对自身元素(位置等)产生的影响*/
  26.                         /*清除兄弟元素的浮动*/
  27.                         /*clear: both;*/
  28.                         float: right;
  29.                     }
  30.                     .four{
  31.                         background-color: green;
  32.                         float: right;
  33.                     }
  34.                     .five{
  35.                         background-color: blue;
  36.                         /*float: right;*/
  37.                         clear: both;
  38.                     }
  39.                     .six{
  40.                         background-color: cyan;
  41.                         /*float: right;*/
  42.                     }
  43.                 </style>
  44.             </head>
  45.             <body>
  46.                 <div class="one">one</div>
  47.                 <div class="two">two</div>
  48.                 <div class="three">three</div>
  49.                 <div class="four">four</div>
  50.                 <div class="five">five</div>
  51.                 <div class="six">six</div>
  52.             </body>
  53.             </html>
  54.

2、清除子元素浮动对父元素的影响： (overflow:hidden;)
        实例代码：

  1.         <!DOCTYPE html>
  2.             <html lang="en">
  3.             <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>父子浮动</title>
  6.                 <style type="text/css">
  7.                     *{
  8.                         margin: 0;
  9.                         padding: 0;
  10.                     }
  11.                     ul{
  12.                         border: 1px solid blue;
  13.                         list-style: none;
  14.                         /*清除浮动   给父元素设置了高度*/
  15.                         /*overflow: hidden;*/
  16.                     }
  17.                     li{
  18.                         border: 1px solid red;
  19.                         width: 100px;
  20.                         height: 100px;
  21.                         float: left;
  22.                     }
  23.                     div{
  24.                         width: 100px;
  25.                         height: 100px;
  26.                         background-color: cyan;
  27.  
  28.                         /*清除浮动*/
  29.                         clear: both;
  30.                     }
  31.                 </style>
  32.             </head>
  33.             <body>
  34.                 <ul>
  35.                     <li></li>
  36.                     <li></li>
  37.                     <li></li>
  38.                     <li></li>
  39.                 </ul>
  40.                 <div></div>
  41.             </body>
  42.             </html>

　3、使用伪元素::after清除浮动(或使用无高的空兄弟div再清除兄弟浮动)
          实例代码：

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>伪元素清除浮动</title>
  6.         <style type="text/css">
  7.             .inner{
  8.                 width: 200px;
  9.                 height: 100px;
  10.                 background: cyan;
  11.                 float: left;
  12.             }
  13.             .one{
  14.                 width: 200px;
  15.                 height: 100px;
  16.                 background: coral;
  17.             }
  18.             /*
  19.                 伪元素::after或:after【CSS2.1中的伪元素表示】(二者等价只不过是css版本的表示形式不一样)
  20.                 在未设置高度的父容器使用::after伪元素添加一个额外的元素，对该元素使用清除兄弟浮动
  21.                 其实在需要清除浮动的元素后面使用一个没有高度的空div再进行兄弟清除浮动也是可以的，而且这样还不需要借助于父元素
  22.             */
  23.              .outer::after{
  24.                 content: "";
  25.                 display: block;
  26.                 clear:both;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div class="outer">
  32.             <div class="inner">inner</div>
  33.         </div>
  34.         <div class="one">我是inner  div后面的兄弟div</div>
  35.     </body>
  36. </html>

溢出处理、盒子模型、背景图片、float（浮动）的更多相关文章

  1. css盒子模型，定位，浮动

    1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. ...

  2. CSS 盒子模型、RestCSS、浮动、定位

    盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...

  3. css基础-盒子模型+背景和列表

    border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...

  4. CSS - 插入图片img和背景图片

    1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...

  5. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  6. python 之 前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

    11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如 ...

  7. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  8. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

随机推荐

  1. dubbo源码分析之基于SPI的强大扩展

    https://blog.csdn.net/luoyang_java/article/details/86609045 Dubbo采用微内核+插件体系,使得设计优雅,扩展性强.那所谓的微内核+插件体系 ...

  2. nohup: 无法运行命令"java": 没有那个文件或目录

    问题 在一个Linux服务器上有shell 脚本如下: nohup java -jar test.jar >> ./nohup.out 2>&1 & 直接执行脚本 s ...

  3. 009 webpack将ES高级语法进行装换

    一:ES高级转换 1.main.js中的js不能解析 // js的主要入口 import $ from 'jquery' import './css/index.css' import './css/ ...

  4. pip安装yaml

    1.安装:输入pip install pyyaml或者pip3 install pyyaml 2.检查是否安装成功:输入python

  5. django注释

    转自https://www.cnblogs.com/dayouzi/p/10154815.html Django在HTML里面书写的模板语言不能使用这种方法注释,这样注释实际依然有效 <!--{ ...

  6. window操作系统分区

    注意GPT分区模式不能创建扩展分区和逻辑分区

  7. Java 8之Map新增方法<转>

    在Java 8中的Map.Entry接口中增加了comparingByKey, comparingByValue方法,它们都返回Comparator<Map.Entry<K,V>&g ...

  8. EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(三)使用Onvif协议进行设备PTZ云台控制

    背景分析 熟悉EasyNVR产品的盆友们应该都知道,EasyNVR主要完成的是RTSP视频流到RTMP/HLS/Flv的转码,并提供了一套api和一个可视化管理平台来便于调用.同时支持ONVIF协议进 ...

  9. 【ARM-Linux开发】【CUDA开发】NVIDIA Jetson TX2 进阶：Nsight Eclipse Edition

    嵌入式平台:NVIDIA Jetson TX2 嵌入式系统:Ubuntu16.04 虚拟机系统:Ubuntu14.04 一.NSight简介 Jetpack开发工具为人工智能提供了一整套软件架构,包括 ...

  10. springboot 控制台程序读取配置文件（原创）

    首先新建一个springboot项目,此处省略. 1.新建一个application.properties person.name=kevin person.age=6 person.sex=male ...