有关css外边距margin和内边距padding样式,简而述之，顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-bottom:/*距离底边距*/margin-left:/*距离左边距*/；数值排列4-1，比方说margin:10px 11px 12px 13px;/*上右下左*/margin:10px 20px 30px;/*上下不一样，左右一样*/margin:10px 20px;/*上下10px 左右20px*/margin:10px/*上下左右都是10px*/;padding道理一样，把前面的margin更换下就好，注意下：margin:0 auto;marign为0代表上下(垂直方向Y轴),水平(X轴)居中,同时建议阅读“盒模型大小取决于它的padding，margin，border数值”，里面对于margin和padding有完整介绍，还有“margin的bug问题及解决办法”补充一点的是(*盒子添加padding值，它的padding值是往外延的，在里面的有效宽度是不会变化的，盒子模型的内边距是减去宽高所得)

 有关浮动和清浮动问题，个人理解是float:left或者float:right的css样式打破div标准流独占一行的传统，脱离了文档流,所造成的浮动页面影响类似"捆橡皮筋，当你把橡皮都拿走了，橡皮筋就回缩了",这时候，你要做的就是考虑如何有效的防止橡皮筋回缩，就是防止我们布局的div盒子回缩,那清浮动呗，怎么解决？看下“float布局打破标准流,神助攻clear清浮动”，因为课程里面的是增加div，通过<div style='clear:both'></div>，建议用默认伪类::before与::after{content: "";display: block;clear: both;}处理...最后认为比较有意思的一点是课程中浮动的原理介绍/*float浮动只能在文档流之前垂直位置左右浮动，其他不变*//*clear英文清除，计算机里面是阻止的意思,clear:right不允许右边有物体*/

clear小结:1.与float漂浮配合使用2.清除浮动,left/right/both3.可以用来做分割线4.可以解决div不漂浮，内部内部漂浮，在div最后放一个<div style="clear:both"></div>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>89组合margin、padding、float、clear问题</title>

     <style type="text/css">

     body{

         cursor: pointer;

     }

     /*浮动只能在文档流之前垂直位置左右浮动，其他不变*/

     .box1{

         width: 100px;

         height: 100px;

         background-color: red;

         /* float: left; */

     }

     .box2{

         width: 110px;

         height: 110px;

         background-color: green;

         float: right;

     }

     .box3{

         width: 120px;

         height: 120px;

         background-color: blue;

         float: right;

         clear: right;/*阻止清除，不允许右边有物体*/

     }

     </style>

     <script>

         window.onload=function(){

             var obj=document.getElementById('ceshi');

             obj.onclick=function(){

                 console.log('我一生都在等待直到你闯进我的世界我只想对你说：余生请多指教')

             }

         }

     </script>

 </head>

 <body id="ceshi">

     <div class="box1"></div>

     <div class="box2"></div>

     <div class="box3"></div>

 </body>

 </html>

89组合margin、padding、float、clear问题的更多相关文章

  1. DIV+CSS布局重新学习之float/margin/padding

    之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...

  2. css007 margin padding border

    css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周 ...

  3. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  4. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  5. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  6. CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

    display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | ta ...

  7. css之margin && padding讲解

    margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...

  8. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  9. 关于margin padding

    margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比 则以参照定位元素的padding+width做参考 margin 四个同时设定 以margin-lef ...

随机推荐

  1. 记第一场cf比赛（Codeforces915）

    比赛感想 本来21:05开始的比赛,结果记成21:30了...晚了25分钟才开始[捂脸] 这次是Educational Round,所以还比较简单. 前两道题一眼看去模拟+贪心,怕错仔细看了好几遍题, ...

  2. 美食家App开发日记1

    前期一直在看第一行代码Android,这本书感觉讲基础讲得特别细致. 百看不如一试. 因为刚刚接触Android,没办法做到想写什么功能就直接一下写好,只能从最开始基础的控件使用开始练习. 所以一直在 ...

  3. JPA基本注解的使用

    一:JPA基本注解 使用: 使用: 使用: 查看表: 二:用table来生成主键 使用: allocationSize:每次增加多少 tablel:指定使用那张表 执行两次main方法后查看表: jp ...

  4. wget报unable to resolve host address

    Linux系统运行yum安装rpm包的时候提示wget unable to resolve host addresswget:无法解析主机地址.这就能看出是DNS解析的问题. 错误提示 wget: u ...

  5. pku-3321 Apple Tree（dfs序+树状数组）

    Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...

  6. 解题笔记——NIT 遥远的村庄

    某个小镇有 N 个村庄,村庄编号1-N,给出 M 条单向道路,不存在环,即不存在 村庄A可以到达村庄B 且 村庄B也可以到达村庄A的情况.如果村庄A与村庄B之间存在一条单向道路,则说村庄A和村庄B之间 ...

  7. SpringBoot检索篇Ⅳ --- 整合ElasticSearch

    知识储备:  关于ElasticSearch的基本使用我已经在上一篇文章介绍过了(传送门),本篇文章主要讲述的是SpringBoot与ElasticSearch的整合使用. SpringBoot与El ...

  8. MySQL 清理缓存—flush tablesFlush tables的影响

    摘自:http://blog.chinaunix.net/uid-31401119-id-5781305.html 1  Flush tables简介 官方手册中关于Flush tables的介绍, ...

  9. 请注意安全！你的mongodb已经被黑了！互联网安全生产大过天！

    你所不知道的入侵,你的服务器安全吗?你的数据库安全吗? 讲真,也许是我以前一直从事内网应用开发吧,我从来没有想过在互联网上,有那么多扫描器. 10月份的时候,受人委托我做了一个简单的抢单插件,里面有用 ...

  10. c++中值传递，址传递，引用传递

    概念详解 1. 值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值. 从被调用函数的角度来说,值传递是单向的(实参->形参),参数的值只能传入,不能传出: 当函数内部需要修改参数,并 ...