margin不影响盒子实际大小margin

2024-09-05

详述盒子模型（包含padding、border、margin的详细用法和描述）

提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识. 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解.我知道定义一个元素的宽度和高度时,设置的仅仅是内容(content)区域,也知道内边距.外边距.边框,但是都没有动手尝试过-之前没想着好好学习前端,总觉得这不是很简单的东西么,能用.能将样式调成自己想要的就行了,但是最近开始学习前端之后,才发现自己以前对很多东西的理解都不够全面,对很多东西都一知半解.即使是一个简单的盒子模型,当问出一些

CSS基础-7 盒子模型大小

在盒子模型当中,有些元素是影响盒子大小的. 首先border就会影响盒子的大小. 其次padding也会影响盒子的大小. 例子: .one { width:100px; height:100px; background:pink; } 我们设置了一个盒子,大小宽和高都为100px; 然后我们增加以下代码 padding:0px 10px; border:1px solid blue; 当我们增加了内边距和边框以后,盒子本身宽度就变成了122px. 我们以宽度为例盒子最后的大小=我们设置的盒子大

CSS负margin的影响

原文简书原文:https://www.jianshu.com/p/87677fd2ea34 相关文章: CSS负边距margin的应用:https://www.cnblogs.com/shcrk/p/9310877.html 大纲 1.负边距对元素自身的影响 2.负边距在普通文档流中的作用 3.负边距对绝对定位的元素的影响 1.负边距对元素自身的影响 1.1.对自身宽度的影响利用margin为负值添加增加宽度——可用于多列布局增加边距从而不需要增加宽度或者单独设置margin-right:0

布局时margin会影响父元素

布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login"> 12345 </div></div><style>.login-bg{ background-color:red; width: 400px; height: 400px; margin: 0 auto; background: url(imac.png) n

echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示

项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自适应 1.窗口大小自适应好说,可以通过 let myChart = This.$echarts.init(document.getElementById(This.id)); window.addEventListener('resize',() => { myChart.resize(); });

边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

边框 solid实线 dotted虚线 dashed点线盒子在页面中实际的宽高都是5部分组成宽=borderleft+paddingleft+width+paddingright+borderright 在块元素中宽度auto 适配到父元素,占满高度auto 由内容撑开在文本或者行元素居中在他的块父元素上加text-align:center; padding不能加负值行元素没有上下外间距盒子模型内容content padding border margin margin外间距块

定位之float 同一父元素的float相互影响，float是margin盒子在父元素的padding盒子内

解决盒子浮动时margin会显示两倍的美观问题

当给几个大小一样有boder的盒子浮动时,会出现margin自动加起来的结果. 此时可以给每个盒子一个margin-left:-border的长来实现很好的效果,这样右边的盒子会把左边盒子的右边border压住,如图所示. 还可以使用伪元素实现动态效果,代码如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Co

盒子模型的margin负数用法

盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-left: -50px;后如图所示如图,蓝色盒子移动了,但是粉色盒子自身只是被压住了,并没有移动. 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

盒子模型之margin相关技巧！

废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并指当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 解决外边距合并的方法: a.使用这种特性. b.设置一边的外边距,一般设置margin-top c.将元素浮动或者定位(元素浮动或定位时,不会出现margin合并) margin-top塌陷在两个盒子嵌套时候,内部的盒子设置的m

“margin塌陷” 嵌套盒子外边距合并现象

来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间若两者都为正外边距以最大的外边距为准: 若存在负边距, 合并后的外边距为最大正外边距减去绝对值最大的负边距: 若无正外边距,则用0减去绝对值最大负边距. 2.父元素与第一个/最后一个子元素之间如果块级元素的 margin-top/margin-bottom 与它的第一个/最后一个子元素的margin-t

css过渡效果和盒子缩放大小的结合

给盒子一个鼠标经过时放大里面的图片效果在css中使用过渡效果transition结合 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&quo

行内元素的上下margin 和 img元素的上下margin

行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置其实这4个属性是可以设置的,但是不建议设置. 如以下代码所示,给行内元素a设置 margin-top:20px;margin-right:20px; 样式中简写为margin:20px 20px 0 0; padding-top:5p

CSS中margin：auto什么意思？margin：auto属性的用法详解

我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto如果它适用于垂直居中,那么又是一种什么情况,下面我们来看具体内容. 首先auto是做什么的? 定义auto元素,因元素类型和上下文而异.在边距中,auto可以表示两种情况:占用可用空间或0 px.这两个将为元素定义不同的布局. "自动"占用可用空间这是我们利用auto最常见的用法.通过分

margin的BUG

在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug. bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上. 下面是body里的代码: <div class="red"> <div class="black"></div> </div> style里

林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形.矩形还是三角形)都被看作一个矩形盒子,这个盒子包含了内容区.内边距.边框和外边距. 图1. CSS盒模型我们可以把它想象成现实世界中网购的快递盒子,外边距就是这个盒子离其他盒子的距离,边框就是这个盒子的材料,内边距就是内层缓震的泡沫,而内容区自然就是你网购的物品.但难以理解的是CSS的盒模型与现

CSS3盒子模型(上)

CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 下面通过一个例子来观察整个页面布局的本质: 看透网页布局的本质网页布局中,我们应该如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢? 牛奶是怎样运输,让消费者购

CSS 小结笔记之盒子模型

网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签,在右侧的styles拉倒最后可以看到这个标签的盒子模型.具体如下图所示: 1.边框 border : border-width || border-style || border-color border-style 代表边框的样式,常用的样式有以下几种 none:无边框 hidden:与none

[19/06/06-星期四] CSS基础_盒子模型

一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒子摆放到网页中对应的位置即可完成网页布局. 模型图片: 参数: 1.width 和height:设置内容区.元素的高度和宽度,而不是盒子的整个大小,盒子的可见大小=内容区+内边距+边框 2.border:为一个元素设置边框,必须指定3个元素,缺一不可.但是不写的话,有默认值,都不写是没有的,写至少一

CSS初识- 选择器 &背景& 浮动& 盒子模型

# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 > 5. 熟练掌握CSS三种显示模式(inline.block.inline-block) > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性(层级性.继承性.优先性) > 8. 熟练掌握CSS盒子模型(border.padding.margin) > 9. 熟练掌握

margin不影响盒子实际大小margin

热门专题