有关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. 外网主机远程ssh局域网Linux

    最近,公司有台配置极高的主机盒子(i7,32G,512G),组长让我装上kali,平时渗透测试时可以用,其余时间归我了,这么高配置的机器,怎么舍得让它吃灰呢 .所以我就去研究了一下,如何远程访问局域网 ...

  2. [bzoj4568] [loj#2013] [Scoi2016] 幸运数字

    Description \(A\) 国共有 \(n\) 座城市,这些城市由 \(n-1\) 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正 ...

  3. 分布式RPC系统框架Dubbo

    导读 Apache Dubbo是一款高性能.轻量级的开源Java RPC框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. dubbo官网:点我直达 第一 ...

  4. 使用Rclone和WinFsp挂载FTP为磁盘

    介绍 Rclone:是一款的命令行工具,支持在不同对象存储.网盘间同步.上传.下载数据.官网网址:rclone.org WinFsp:是一款Windows平台下的文件系统代理软件(Windows Fi ...

  5. .net core 常见设计模式-IChangeToken

    场景 一个对象A,希望它的某些状态在发生改变时通知到B(或C.D),常见的做法是在A中定义一个事件(或直接用委托),当状态改变时A去触发这个事件.而B直接订阅这个事件 这种设计有点问题B由于要订阅A的 ...

  6. Shell常用命令之echo

    echo 字符串的输出 选项 -n:不换行输出 -e:启用反斜杠转义符 -E:禁用反斜杠转义符 反斜杠转义符 \a:发出警告声 \b:删除前一个字符 \c:最后不加上换行符号 \f:换行但光标仍然停留 ...

  7. SSH(二)

    SSH框架整合的系统架构,Action.Service.Dao.SessionFactory.DataSource都可以作为Spring的Bean组件管理 使用HibernateDaoSupport基 ...

  8. HTTP协议简单理解

    1.概念: “超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准. 设计HTTP最初的目的是为了 ...

  9. LUA学习笔记（第1-4章）

    需要一种简单的脚本语言来代替批处理,它需要足够小巧,同时功能上也应该足够强劲,自然选择了LUA语言. 第一章 Hello World print('Hello World') print(" ...

  10. 关于PreparedStatement.addBatch()方法

    Statement和PreparedStatement的区别就不多废话了,直接说PreparedStatement最重要的addbatch()结构的使用. 1.建立链接,(打电话拨号 ) Connec ...