【子元素设置margin-top作用到了父元素】的更多相关文章

为什么子元素设置margin-top会作用在父元素上？

原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <…

透视 HTML子元素的margin-top样式会应用在父元素上的原由

情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{margin:0; padding:0;} .outerdiv{background: #;} .innerdiv{margin-top: 30px; background: #d33; height: 80px;} </style> <div class="outerdiv"…

子元素设置margin-top作用到了父元素

子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解…

CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 display:flex; 设置属性来调整此盒子的子元素的布局方式:如 flex-direction: 明确主侧轴及方向 可互换主侧轴,也可改变方向 各属性: 设置主轴方向 a)  flex-direction:row(默认属性) row:从左往右 b)  flex-direction:row-reverse…

css 给inline和inline-block元素设置margin和padding

经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom.经过测试,margin-top和margin-bottom都没有作用.而设置padding-top以后,元素边框则会向上超出父元素,如下图所示,而不是像正常的块元素一样表现. 而给行内元素加上padding-bott…

关于IE处理margin和padding值超出父元素高度的问题

两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让父padding+子margin-top的值大于父div的高度.这时,chrome,firefox,opera中效果都会把子div"挤出".唯独IE,居然敢擅自增加父div的高度(父div高度是设置好的),用来容纳子div.以下是代码和效果图: <html> <head&…

html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript"> function onLoads(){ document.getElementById("div1").addEventListener("click",(e) => { alert('1'); }, true); document.getElemen…

元素设置float属性后，其后面的元素的位置问题

分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00f; } .content2{ margin-top:10px; } .one{ background-color:#f00; float: left; } .two{ background-color: #3dfeca; } .content1 .one, .content2 .one{ heig…

jQuery获取元素上一个、下一个、父元素、子元素

jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents…

如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

<div onclick="alert();"> <div onclick="alert();"></div> </div> 上面给一个很简单的例子,当点击第二个div的时候,会同时触发此div与其父元素的点击事件,按照官方的说法,这是事件的浮升,那么要怎么阻止这种情况呢? 可以使用 event.cancelBubble=true; 代码如下: <div onclick="alert();"&…