有关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. Frameworks.Entity.Core 1

    CommonEnums 1系统模块BlockType 2证件类型IDType 3在线支付类型OnLineType 4操作权限,支持位移运算OperatorAuthority 5订单状态: 1000-待 ...

  2. 创建dynamics CRM client-side (十) - 用JS来获取form type

    用户可以用以下代码来获取 form type 更多的信息可以查阅https://docs.microsoft.com/en-us/powerapps/developer/model-driven-ap ...

  3. 2020.2，《The day after tomorrow》

    “The day after tomorrow, where will you be?” 2020春节冠状病毒肆虐被迫禁足家里,无意间打开了2004年由德国罗兰·艾默里奇(Roland Emmeric ...

  4. Express+MySQL实现登录注册的demo

    MySQL5.7.20 demo准备 安装MySQL,安装完毕之后添加系统环境变量在cmd中启动服务:net start mysql57,如果是安装MySQL8.0则服务名默认时mysql80,测试安 ...

  5. 高阶函数及 map、reduce、filter 的实现

    博客地址:https://ainyi.com/85 2020 开年国家经历了不少困难,最为凶猛的局势就是新型冠状病毒的蔓延,国务院最终决定春节假期延长至==2 月 2 号==:公司决定 3 - 7 号 ...

  6. springIOC源码接口分析(七):ApplicationEventPublisher

    一 定义方法 此接口主要是封装事件发布功能的接口,定义了两个方法: /** * 通知应用所有已注册且匹配的监听器此ApplicationEvent */ default void publishEve ...

  7. 解决IDEA使用lombok注解无效,@Data不生效问题

    在settings设置启用注解即可:

  8. Gradle | Gradle项目无法导入依赖包

    Gradle | Gradle项目无法导入依赖包 背景 今天使用idea导入一个Gradle项目,使用 gradle build构建成功,但是项目还是无法正常导入依赖包,显示错误如下: 解决方案 后来 ...

  9. 小程序redio 样式

    小程序 radio 不写样式大概是这样的 数据为测试数据. 为了增加用户体验我们一下 美化后大概是这样的 给他设定头部.左边间距 ,和自身最小宽度 上代码: wxml: <radio-group ...

  10. ATL的GUI程序设计(前言)

    前言 也许,你是一个顽固的SDK簇拥者: 也许,你对MFC抱着无比排斥的态度,甚至像我一样对它几乎一无所知: 也许,你符合上面两条,而且正在寻求着一种出路: 也许,你找到了一条出路--WTL,但是仍然 ...