有关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. 动画 | 什么是平衡二分搜索树（AVL）？

    二分搜索树又名有序二叉查找树,它有一个特点是左子树的节点值要小于父节点值,右子树的节点值要大于父节点值.基于这样的特点,我们在查找某个节点的时候,可以采取二分查找的思想快速找到这个节点,时间复杂度期望 ...

  2. 10、python函数

    前言:本文主要介绍python函数的定义和调用.函数的参数.函数的作用域.内置函数. 一.函数的定义和调用 1.函数的作用 对特定的一些功能进行封装,提高代码的重用率,进而提升开发的效率,格式: de ...

  3. 《编写高质量代码:改善C#程序的157个建议》是C#程序员进阶修炼的必读之作

  4. 客户端 jQuery 跨端口 调用 node 服务端

    一句话 很顶用 response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8020'); 说 响应的头文件里设置 一个 h ...

  5. Python里使用转义字符\r时遇到的问题

    在Pycharm里使用转义字符\r和在IDLE里使用\r产生的结果是不一样的. 例子如下: print("你好!\r我是Python!") 输出结果为: 我是Python! 前面的 ...

  6. 创建dynamics CRM client-side (四) - Namespace Notation in JS

    我们在开发的时候会写很多functions. 但是这些functions 管理起来很麻烦. 微软内部建议我们使用namespace notation的形式管理我们的代码 // Converting f ...

  7. day01_前言、入门程序、常量、变量

    day01_前言.入门程序.常量.变量 sysout :System.out.println(); Java 概述 本节主要内容: java 概述.常 DOS 命令.JRE.JDK 与 JVM.环境搭 ...

  8. JDK源码之Boolean类分析

    一 简介 boolean类型的封装类,将基本类型为boolean的值包装在一个对象中,实现序列化接口,和Comparable接口 额外提供了许多便捷方法,比较简单,直接贴代码分析 二 源码分析 //t ...

  9. python中的变量和字符串

    一.变量 1.python变量 *变量用于存储某个或某些特定的值,它与一个特定标识符相关联,该标识符称为变量名称.变量名指向存储在内存中的值.在创建变量时会在内存中开辟一个空间.基于变量的数据类型,解 ...

  10. Python多重继承之菱形继承

    继承是面向对象编程的一个重要的方式,通过继承,子类就可以扩展父类的功能.在python中一个类能继承自不止一个父类,这叫做python的多重继承(Multiple Inheritance ). 语法 ...