89组合margin、padding、float、clear问题

有关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>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>89组合margin、padding、float、clear问题</title>
 7     <style type="text/css">
 8     body{
 9         cursor: pointer;
10     }
11     /*浮动只能在文档流之前垂直位置左右浮动,其他不变*/
12     .box1{
13         width: 100px;
14         height: 100px;
15         background-color: red;
16         /* float: left; */
17     }
18     .box2{
19         width: 110px;
20         height: 110px;
21         background-color: green;
22         float: right;
23     }
24     .box3{
25         width: 120px;
26         height: 120px;
27         background-color: blue;
28         float: right;
29         clear: right;/*阻止清除,不允许右边有物体*/
30     }
31     </style>
32     <script>
33         window.onload=function(){
34             var obj=document.getElementById(‘ceshi‘);
35             obj.onclick=function(){
36                 console.log(‘我一生都在等待直到你闯进我的世界我只想对你说:余生请多指教‘)
37             }
38         }
39     </script>
40 </head>
41 <body id="ceshi">
42     <div class="box1"></div>
43     <div class="box2"></div>
44     <div class="box3"></div>
45 </body>
46 </html>

原文地址:https://www.cnblogs.com/dhnblog/p/12347939.html

时间: 2024-10-08 05:15:08

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

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

之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

css007 margin padding border

css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2.用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间: p

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

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.

验分享:CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素

css 巧用 margin/padding 的百分比值实现高度自适应(多用于占位,避免闪烁)

一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点:当 margin/padding 取形式为百分比的值时,无论是 left/right,还是top/bottom,都是以父元素的width为参照物的! 高度自适应占位 假设有这么个场景: 如上图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可).在 PC 端好办,容器的宽高都写死是多少 px,这样即使图片加载不出来容器都不会变型.但是在移动端,由于各机型分辨率

css浮动(float,clear)

1. 以div元素布局为例,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流,是指标准流中的div. 无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”,显然标准流已经无法满足需求,这就要用到浮动. 浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 2. 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行):如果A元素上一个元素

【CSS黑科技2】CSS百分比实现高度占位自适应(margin/padding)

| 导语 在很多场景下,我们都需要给容器设定宽高比,实现自适应占位,巧用margin/padding可以让我们实现我们的需求 基本知识点 本文依赖于一个基础却又容易混淆的css知识点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! 哈,top/left以父元素的width为参照物还好理解,但top/bottom不是以height更符合我们的预期吗?有疑惑很简单,看官方解释: 举个栗子 我们有个页面,如

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

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

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

display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |  |  |  |  |  | |  默认值:inline 适用