有关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. 高通量计算框架HTCondor(四)——案例准备

    目录 1. 正文 1.1. 任务划分 1.2. 任务程序 2. 相关 1. 正文 1.1. 任务划分 使用高通量计算第一步就是要针对密集运算任务做任务划分.将一个海量的.耗时的.耗资源的任务划分成合适 ...

  2. [洛谷P4178] Tree (点分治模板)

    题目略了吧,就是一棵树上有多少个点对之间的距离 \(\leq k\) \(n \leq 40000\) 算法 首先有一个 \(O(n^2)\) 的做法,枚举每一个点为起点,\(dfs\) 一遍可知其它 ...

  3. mysql中更改字符集为utf8&&mysql中文输入不了问题解决

    写给TT:对不起啦!! 嗯,输入不了中文,大多数问题是mysql的字符集设置的问题,当然,别的问题也有可能, 这里我们用两种方法设置mysql的字符集,图形化工具和命令行的方式(一种操作完即可) 一, ...

  4. selenium，统计某分支下有多少个同类子分支的方法（用于循环获取同类型子分支属性值）

    利用selenium自动化统计微博阅读数 查看微博阅读数的元素路径 微博列表中第一条微博的元素路径“//*[@id="Pl_Official_MyProfileFeed__20"] ...

  5. Azure 认知服务概述

    背景知识 近些年随着机器学习.深度学习等技术的不断发展,人工智能在越来越多的场景得到了应用,如人脸识别.图像识别.语音识别.语音生成.自然语言处理.决策分析等等,让机器拥有了听.说.看和思考的能力,很 ...

  6. IDEA debug下取消后续操作

    有时进行测试时,不想后面的代码执行 具体应该怎么请看下文: 测试代码 public class demo { public static void main(String[] args) { Syst ...

  7. 关于基本布局之——Grid布局

    Gird布局 一.关于概念 网格布局(Grid)是一个很强大的 CSS 布局方案.它可以将网页划分为多个网格任意拼接的布局,可以灵活的运用并实现出多种布局形式. (grid和inline-grid区别 ...

  8. maven远程部署到tomcat8服务器

    maven远程部署到tomcat8服务器 环境准备 linux服务器一台 服务器安装JDK 服务器安装Tomcat 服务器Tomcat8配置 添加Tomcat权限 配置文件路径: tomcat/con ...

  9. GetModuleFileNameEx遍历获取64bit程序路径失败的一种解决方法(Win7-64-bit)

    问题: 32位程序在64位系统上调用GetModuleFileNameEx()遍历获取64位进程的全路径失败,得到的路径都为空. 根据官方的说法: For the best results use t ...

  10. 每日一练PAT_B_PRAC_1005斐波那契凤尾

    NowCoder号称自己已经记住了1-100000之间所有的斐波那契数.为了考验他,我们随便出一个数n,让他说出第n个斐波那契数.当然,斐波那契数会很大.因此,如果第n个斐波那契数不到6位,则说出该数 ...