关于浮动,边距,调试的

1.div块如果不设置宽高的话,他根本显示不出来,只有有内容时会把他给撑起来。
2.我用一个高为201的图片将其撑开的话,他并不是201,在chrome里面是204.在火狐206
但是我用div块吧他撑开的话,他就刚好是100,就是100。
3,如果上一个元素有30px的下边距,而他下面的元素有60px的上边距,这样的话会产生边距合并。他们
之间的边距只有60px,不是90px。
4.旁边的那个滚动条有17px。发现自从那个滚动条出来之后,body的宽度就少了17px。我的div没有设置
宽度,是由图片撑开的,他的宽度也随着滚动条的出现减少了17px。当我把div的宽度设置了一个特定的
宽度时,他不会随着滚动条的出现和没有而改变width.
5.当我把div的宽度设为了1400px的时候,他会出现横向的滚动条,但是此时看body的大小,他仍然是1333
366,外边距还是有8px。本来浏览器的宽是1366,这个1333就是减去了两边的边距16和滚动条的距离17px
6.1400px超出了body,虽然给他设置了 右边距,但是他并没有显示出来。他超出的部分也是用1400-1333+30-8。在调试的时候会出现侧边的滚动条,他是紧挨着div的,在没有调试的时候,他也是紧挨着div的,只是他的整体都缩短了17px。
7.包含图片的div我没有设置宽高,然后我让里面的图片浮动,会发现父元素的高度塌陷了。下面的div都补上来了。如果我给他设置了宽度还是不行。如果我给他设置了大于图片的宽高,则可以把下面的div给挤下去,如果设置的高度小于图片,则会在图片底下,下面的div也会顺势补上来。也会在图片底下。但是图片虽然是脱离了文档流,但是他还是再包含他的div的左上角,也就是像w3school里面写的一样,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
8.清除浮动: 在包含这个浮动元素div块的下面的div块给他设置overflow:hidden,发现他确实从图片里面跑出来了,但是他的左边距已经不是60px了,上边距还是60px。他从图片底下像右平移出来了。
如果是吧他再加上一个width: 100%;这样就是整体的向下平移出来了。还是保持了与body的左边距的60px,但是与他上面的那个div就不是60px了。如果给他的宽度不是设置的100%;而是一个具体的数值,那么他还是从他底下向右平移出来。如果把它的宽度设置的更宽一点,在他的右边放不下则会跑到他的下面来。用clear也可以实现。
为元素设置clear或者设置width;100%(或固定宽度)+overflow:hidden;这两种是对受到浮动影响的元素来设定。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       #div1
        {
            margin: 30px;
            background: red;
           width: 300px;
           height: 100px;
        }
       img
       {
           float: left;
       }
        #div2
        {
            margin: 60px;
            background: yellow;
            overflow: hidden;
        }
        #div3
        {
            width:200px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="div1">
<img src="082211207.jpg"/>
</div>
<div id="div2">
    <div id="div3"></div>
</div>

</body>
</html>
时间: 2024-10-13 00:38:37

关于浮动,边距,调试的的相关文章

css 关于&quot;浮动边距加倍&quot;及其解决方法-------解决方案是在这个div里面加上display:inline;

写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外道..昨晚刨根问底了一次...我靠..原来是IE的问题-_,-今天跟半半唠叨起这件事,还说要加入反IE的行列来着...为啥别的都没问题就IE有问题嘛..-x- 浮动边距加倍错误(The IE Doubled Float-Margin Bug )如果某条边与浮动方向同向,则向该边上的浮动框应用边距时,

IE6/7中li浮动外边距无法撑开ul的解决方法

昨天群里有人提出了这样的问题: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&

关于清除浮动 外边距 塌陷的问题

一.html <div class="left">div1</div> <div class="left">div2</div> <footer> <p>66666666666666666666666</p> </footer> 二.css .left{ width: 200px; height: 200px; color: #fff; background: red;

左右浮动边距为0,中间间隔一定

很常见的一种布局:有容器A,里边排1~6,六个小层,每行3个实现:两侧的小层和容器的左右边缘对齐,中间间隔10像素,而这六个小层是循环的,都用同一个样式 解决这个问题的关键因素是:1> .list 的宽度设置成需要的宽度,这里为320px,因为下面3个li的宽度和 中间间距一起是320px,可以加上overflow:hidden;不过不加也不会有问题,已测试2> .list ul 的宽度设置为330px ,这样好容纳一行3个li的宽度效果截屏: 举例说明: <!DOCTYPE html

div固定浮动某位置

效果图,图片始终处于这个位置. 代码 <style> #NavTop { width: 140px;/*图片盒子的宽度 右移*/ height: 250px; margin-top: 50px; position: fixed; right: 0px; top: 200px; /*固定位置,右浮动,距上200px*/ } #NavTop #NavCon { width: 140px; height: 250px; background: url('images/d.png') repeat-y

css对网页样式控制

1.方便修改网页格式:css对网页样式的控制可以独立地进行,因而修改.更新起网页起来都显得异常轻松容易. 2.轻松增加网页的特殊效果:在网页中过多的使用图像会破坏原有文字的存储格式,并且会加长下载时间,如果使用了css中的图像滤镜,就可以在不增加网页体积的情况下实现一些特殊的视觉效果,为网页添加生气. 3.使用网页元素更准确的定位:之前HTML中使用的表格用来定位表格元素,而且表格只适用于规则的网页排版,对于复杂的不规则的网页结构就显得力不从心,而css能很好的解决排版问题. 4.良好的适应性:

初学DIV+CSS要记住的

初学DIV+CSS?有六个问题需要您关注一下!作为DIV+CSS初学者,如果在动手写代码之前对网页整体结构由一个清晰认识的话,写起来会事半功倍!但是,写的过程中总是有这样那样的问题,使得我们不得不停下来去查找资料,弄清属性定义等等! 其实有很多方法可以在提高我效率的同时让我们对DIC+CSS有更深刻的理解!下面我们列举几点: 一.CSS命名规范: 1.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印

【引用】Div+CSS规则整理!

一.善用css缩写规则 /*注意上.右.下.左的书写顺序*/ 1.      关于边距(4边): 1px 2px 3px 4px (上.右.下.左) 1px 2px 3px    (省略的左等于右) 1px 2px         (省略的上等于下) 1px            (四边都相同) 2.      简化所有: */ body{margin:0}------------表示网页内所有元素的margin为0 #menu{ margin:0}------------表示menu盒子下的所

css样式清零及常用类

@charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1","Microsoft YaHei" "黑体","\9ED1\4F53" "新宋体","\65B0\5B8B\4F53" "宋体","\5B8B\4F53" "幼圆"

CSS语法 部分 3

方框属性:(Box) width:    ; height:  ; float:      ; clear: both;                       margin:    ; padding:    ; 顺序:上右下左 长             高          浮动           清除多样式 针对div浮动         外边距         内边距 边框属性:(Border) border-style: dotted;(点线) dashed;(虚线) soli