当给子元素添加margin-top值,会错误的加给父元素

2024-09-05

子元素设定margin值会影响父元素

有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例如: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

点击当前标签给其添加class,兄弟标签class删除然后获取当前点击元素的文字演示地址: https://xibushijie.github.io/static/addClass.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue 点击当前元素添加class 去掉兄弟的class</title> <script src

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the first!</div> <div class="two">I'm the second!</div> </div> css: .one{ width: 100px; height: 100px; background: red; margin-t

CSS 实现：父元素包含子元素，子元素垂直居中布局

☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A</div> </div> √[实现]: ♪ 子元素 A 宽高已知,相对于父元素水平垂直居中 ① position: absolute 布局 *基于自身高度/宽度偏移的缺点:若宽度/高度改变,则偏移会改变,不会持续保持居中 .demo5 { width: $px; height: $px

子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.border边框或使用清除分离方法)结合表示为一个单独的margin.在css2.1中,水平的margin不会被折叠.垂直margin可能在一些盒模型中被折叠:1.在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是

Javascript事件模型（二）：Javascript事件的父元素和子元素

DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. 冒泡事件流当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件.在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出. 条件: 1.父元素没有上边框 2.为第一个子元素设置上外边距时解决方案: 1.为父元素增加上边框弊端:父元素会变高 2.通过为父元素设置上内边距来取代子元

css之子元素获取(未定义高度)父元素的高度

你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版: 我们用一个span来处理这个mask.由于 .sample-1 和 .sample-2 的高度是不确定的,也就是说我们没有对它们定义 height.如果父元素没有定义高度,子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度. 除了IE6,几乎所有的主流浏览器都支持子元素获取父元素(未定义高度)的高度: 对于这个用户创造内容的区域,高度会在一个

html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

模态框: html部分:  <button id="box" onclick="pop_box()">弹出框</button>  <div class="div-container" id="div-container" style="display: none;"> <div class=&

块级元素及内联元素对margin、padding的态度

1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素的边界时,才向相反方向延伸,这时会改变该元素中内容的位置 padding演示: 原样 html: <div>块级元素</div> css: div{ width:100px; border:1px solid #000; } 添加padding后: div{ width:100px; bo

子元素增加margin-top会增加给父元素的问题

假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;"> <div id="child" style="background:green;height:100px;width:100px;margin-top:40px;"></div> </div> 会发现效果如下所示子元素

【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件. 例子: <html> <body> <table border="1" width="26%&qu

子元素margin-top后，跟父元素一起下沉

在一个<div>元素中嵌套一个子div,同时设置子div的margin-top,结果,父元素和子元素一起下沉,留出来个空白区域. 原因就是: 一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 解决方法: 给父元素添加border或border-top. 给父元素添加padding或padding-top. 给父元素设置overflow:hidden. 将margin-top,变为p

jQuery如何阻止子元素继承父元素事件？

<a> <b></b> </a> $("a").click(...); 这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而不对子元素绑定呢?即b被click之后自己并不触发回调函数,而是把事件传递给a. 我现在的做法是:直接在a上写 <a onclick="xxx"></a> ,这样b就不会把自己作为event.target触发回调了. --- 更新 ----大家可能对我的意思有误解,

父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

前言给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1{width: 100%;min-height: 50px;background-color: yellow;} #sp1{width: 20%;height: 100%;display

给父元素与子元素分别设置visibility注意点

由于机顶盒的终端特性原因,不能用display:hidden去做隐藏,就选择了visibility:hidden. 在这里遇到一个现象: 给父元素设置了hidden,但是里面的子元素依然可见.以为只是盒子特性导致渲染出来和浏览器的不一样. 但是后来在做终端特性库的时候在浏览器上单独写了dome测试这个属性,发现父元素设置visibility:hidden,里面的子元素也不见了. 比较之前的项目的代码,找到原因了: 父元素设置hidden的同时,给子元素设置了visibility:visible.

为什么子元素设置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> <

css3中webkit-box的用法（平分父元素）

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome/safari(-webkit-). 注意:其子容器必须是block;块元素才能运用此样式,否则无效: 一.box-flex属性

position:fixed 相对父元素定位

position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fixed元素还是相当于窗口定位的,实现效果上是相对于父元素定位. 此外,position:fixed元素会受到父元素的影响,而出现不能以窗口进行定位: 1. 因为fixed元素并不总是相对于视窗进行定位的,父元素发生变换,也就是transfrom属性发生改变,如平移或旋转,会对固定定位的子元素产生影响

解决图片把父元素向下撑大大约3px问题

现象 bug: 图片在div\li\dt 等图片把父元素向下撑大大约3px <style> img { width: 30%; //这里由于图片过大,等比缩放30% } div { background-color: red; } </style> <body> <div> <img src="

转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误

标准参考元素的包含块 W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute"."fixed"."relative" 之一的祖先元素组成:如果这个祖先元素不存在,则包含块由根元素组成. 绝对定位元素的定位绝对定位元素的定位,依赖于其包含块.也就是说,当绝对定位元素的 "top"."left" 值被设置之后,

当给子元素添加margin-top值,会错误的加给父元素

热门专题