padding-top 是父元素的宽度还是自身的宽度

2024-10-23

【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

引言书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的. padding 属性用于设置元素的内边距,其值可以是length.inherit,当然也可以是百分比. 今天为什么会聊到padding-top设置百分比时的参考对象这个话题呢,这还要从一道不那么正经的面试题说起~ 一道不那么正经的css布局面试题在对面,一本正经的面试官和蔼可亲的说道:我们来道简单的面试题,写写代码吧.你一脸微笑的说道:好哒. 题目须知: 页

关于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&

ie7 父元素宽度自适应且为浮动的话子元素的宽度将不能按比例设置问题

好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: 解决方法: 1.给父元素添加固定的宽度: 如果方法一违背了想要的效果,那么只能采用js来处理,即获取h4的同级节点ul的宽度,然后将其赋给h4. 如下: <script>window.onload = function(){ if(navigator.appName == "Micros

为什么margin-top不是作用于父元素

为什么margin-top不是作用于父元素:建议:尽可能的手写代码,可以有效的提高学习效率和深度.至于margin-top属性的基本用法再简单不过,那就是设置一个对象的上外边距,看下面的代码实例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam

input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素

http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题.为满足不同分辨率下正常显示,页面的input元素宽度需要撑满整个父级元素,而父级元素则是占满整行的,由于input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素,代码如下: <inputtype="text"class="text_input

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法一.总结一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-sizing的三个属性分别是什么? 根据意思来记很好记的值一.content-box (向外边框) 值二.border-box (向内边框) 值三.inherit (继承爸爸) 2.设置边框的样式用什么属性? box-sizing box-sizing:border-box; 二.div宽度设置wi

使用flex防止fit-content子元素冲出父元素宽度的方法

父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度

定义和用法 padding-top 属性设置元素的上内边距(空间). 说明该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠.不允许指定负内边距值. 注释:不允许使用负值. 默认值: 0 继承性: no 版本: CSS1 JavaScript 语法: object.style.paddingTop="10px" 可能的值值描述 length 规定以具体单位计的固定

ie10中元素超出父元素的宽度时不能自动隐藏

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设定一下隐藏. 给其父元素使用overflow自动隐藏子元素超出的部分. 认识CSS overflow 属性定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 可能的值 visible默认值.内容不会被修剪,会呈现在元素框之外. hidden内容会被修剪,并且其余内容是不可见的.

父元素高度为auto,子元素使用top:-50%没有效果的问题

无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效后来查阅w3c看到这样一句话: <percentage> 百分比 The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if th

子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案

最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的son他的宽度远远的超出了我们父级的宽度,那么问题是怎么引起的呢? <div class="fathor" style="width:1024px"> <div class="son" style="position:fix

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！

最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2:怎么让Echarts图表宽度随着父元素自动适应? 网上对于这两个的解决方案大同小异,手动的记录父元素的宽度,或者侦听display属性,解决方案要么感觉极其复杂,要么治标不治本, 这两个缠绕多年的问题,我们将通过一个插件彻底完美解决它们!!! 问题探究: 问题1复现: 问题1原因: 究极原因其实出

透视 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"

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{

都是以父元素的width为参照物的

本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Note that in a horizontal flow, percentages on ‘margin-top’ and ‘mar

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

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

position:fix相对父元素定位

大家都知道,当position的值为fix时,生成绝对定位的元素,相对于浏览器窗口进行定位. 它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间. 如果需要将导航栏div固定到浏览器顶部,只需要将top设置为0即可. 如果要将广告div固定在特定位置,只需要用js计算出div应显示的位置,再设置top和left属性. 当我们想要设置一个div相对于其父元素定位,大家一定会想,将父元素position设置为relative,子元素为absolute不就可以了吗?

改变父元素的透明度，不影响子元素的透明度—css

1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:20

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

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

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

padding-top 是父元素的宽度还是自身的宽度

热门专题