使用负边距将div1粘贴到div2的左侧_使用负边距%将元素堆叠在彼此的顶部 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS盒子模型-边距合并

div2 运行效果如下： div1和div2 根据盒子模型的计算规则，div1下边距100px和div2...实际CSS规则是合并的，因此div1和div2 之间的距离为100px;如果div1的下边距和div2的上边距，边距值不一样，那么以最大的边距为最终取值。 ?...image.png 3、父子元素合并-上下源代码： ``` div2 运行结果： div2是div1的子元素，完全安装盒子模型，div2应当距离浏览器顶部100px+父元素100px =200px...因为上下边距合并，所以div2距离顶部100px；由于左右边距不合并，所以div2距离浏览器左边的距离是200px。 !...因为空元素上下边距合并。如果div2的内容添加文字，显示效果将会有巨大差异。 ? image.png 6、左右不合并 <!

1K1 0

【CSS】盒子模型外边距 ⑤ ( 模型盒子垂直外边距的合并 - 塌陷 | 相邻模型盒子垂直外边距合并 | 嵌套模型盒子垂直外边距合并 )

: 上面的模型盒子设置了下外边距 margin-bottom , 下面的模型盒子设置了上外边距 margin-top , 这两个模型盒子之间的垂直间距不是两个边距之和 = margin-bottom...+ margin-top , 而是这两个边距中的较大的值 , 即 max (margin-bottom , margin-top) , 该现象称为外边距塌陷 , 如下图所示 : 推荐的解决方案...: 设置上下相邻的模型盒子时 , 只给一个设置上下边距 , 不要都设置 ; 2、代码示例 - 塌陷效果下面的示例中 , div1 设置了下外边距 100 像素 , div2 设置了上外边距...> 展示效果 : 二、嵌套模型盒子垂直外边距合并...与子元素上外边距合并的情况 , 合并后的上外边距为二者之间较大的值 ; 推荐解决方案 : 为父元素设置边框或内边距 , 不要让两个外边距互相接触 ; 为父元素添加 overflow

1.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )

变为行内块元素模式 , 以网格的形式排列 ; 列表项默认左侧带一个原点 , 使用下面的样式 , 去除默认的左侧原点 ; li { list-style: none; } 尺寸精准测量...: 将图片拖到 PhotoShop 中 , 测量尺寸 ; 整体盒子模型 : 使用标尺将盒子内容包裹起来 , 盒子的尺寸 1190 x 370 像素 ; 左侧的两个盒子大小 290 x 370...; 这样无序列表中每个列表项左侧和底部都有 10 像素外边距 ; 列表项 290 x 180 , 加上两个 10 像素间隔 , 宽度正好是 600 像素 ; 三、布局测量摆放 ----...将除外部 box 之外的所有的盒子模型 , 都设置为浮动元素 , 进行从左到右摆放 , 可以达到案例要求的摆放效果 ; 代码示例 : <!...*/ .div1 { float: left; width: 290px; height: 370px; } /* 中间的盒子模型 */ .div2 {

9002 0

CSS3与页面布局学习总结（四）——页面布局的多种方法

大家好，又见面了，我是你们的朋友全栈君。一、负边距与浮动布局 1.1、负边距所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。...当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下： 1.1.1、向上移动当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。...当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移，示例如下：负边距 * { margin...在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，实现的代码如下： <!

2.4K2 0

Android开发人员一次搞懂前端BFC原理

这就是BFC中经常发生的边距重叠的情况。而且重叠的情况会根据重叠的块级盒子的margin值有关，在这里即：div1的margin-bottom和div2的margin-top值有关系。...当div1的margin-bottom和div2的margin-top值一正一负时，则重叠时，取他们之间的差值展示。如下图展示： ?...如何解决margin边距重叠根据BFC规则：属于同一个BFC的两个相邻块级盒子的margin会发生重叠。因此我们只要使div1与div2不属于同一个BFC即可： 1元素2 43 44 45 46 此时我们将...此时，div2不再受到div1的影响。 6、计算BFC的高度时，浮动元素也参与计算。当我们使用漂浮的时候，我们经常会遇到高度塌陷的问题。例如： 1<!

6962 0

CSS

....此处写CSS样式 3·导入式　　　　将一个独立的CSS文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中...内边距会影响盒子的大小，外边距不会影响盒子的大小，需要设置练习:300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒子移到大盒子的中间。　　...此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。...就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在...本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。 ?

2K3 0

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！...div1和div2的垂直距离由大的margin决定，也就是div2的40px而不是二者之和60px。其次，行内元素是会被折断的，当宽度受到限制的时候，它会自动移动到下一行。...在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。...名词解释：边距折叠：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。...折叠的结果：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。

1.1K5 0

CSS基础布局

元素向旁边紧贴 float元素(或者是父元素的边) * float元素不影响其他块级元素的位置 * float元素影响其他块级元素的内部文本 * (float元素)对父级元素的影响...float+margin 实现两列布局 1. div1 左浮动：给出左侧的空间 2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和...div1的BFC块并列。...float+margin 实现三列布局 1. div1 左浮动：给出左侧的空间 2. div2 右浮动：给出右侧的空间 3. div3 的margin-left margin-right 分别留出 div1...div2的宽度这里面需要注意：div3要出现在 div1 和 div2 之后。

2.9K2 0

CSS简单入门

（2）.便于网页的改版：使用css可以有效的控制网页的显示效果。...这要比使用html元素自带的属性更加方便，比较突出的一点就是便于网页的后期改版，因为只要修改样式表中的css代码即可，而不是直接修改html元素的中的属性。...（3）.使用css可以实现精准控制: html元素自带的属性虽然可以在一定程度上控制外观，但通常比较粗糙，使用css则会更加精准。...虽然div浮动，但div2,div3,div4仍然在标准流中，所以div2会自动向上移动，占据div1的位置，重新组成一个流假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随上一个元素的后边...边框用于将边缘和其他框分开 margin:外边距，表示框的边缘与相邻框之间的距离，也称为页边空白 padding:内边距，表示框内容和边框之间的空间一边框的三种定义：然后就是内边距和外边距

5804 0

前端学习--CSS

二引入方式（1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 <!...推荐使用这种方式。 <!...font-style: oblique; } .div1 p1{ {#后代选择器， div1是父代标签class，p1是子代标签class 只要是有这种层级关系的都会被指定...外边距和内边距在html中一切皆盒子。...margin是盒子与盒子之间的距离，border是盒子的边界，padding是盒子边界距离内容的距离注意：当指定一个CSS元素的长度和宽度时，指定的是内容区域的长宽，要指定完全体的长宽，还需指定边宽和边距

4342 0

【说站】css中BFC布局规则是什么

css中BFC布局规则是什么说明 1、BFC是页面上隔离的独立容器，容器中的子元素不会影响外部元素。反之亦然。这一元素的垂直方向边距将重叠，垂直方向的距离由margin决定，取值。...DOCTYPE html> Document .div1... { background-color: #ef6f6f; width: 200px; height: 100px; } .div2 { background-color...: #fff086; width: 200px; height: 100px; } div1 div2 以上就是css中BFC布局规则的介绍，希望对大家有所帮助。

2763 0

如何完成响应式布局，有几种方法？看这个就够了

弹性布局flex ---- 响应式布局的方法媒体查询media 使用方法使用@media媒体查询可以针对不同的媒体类型定义不同的样式...vw/vh 使用方法 vw是将宽度设置成100份儿，给予指定份数设置宽度，vh是将高度设置成100份儿，给予指定份数设置高度。 ...，同级对字体的修改，也可以用在边距上。...什么意思呢比如父元素为2em（32px），子元素又设置了字体大小为1em（16px），子元素边距设置成1em 边距就是16px，子元素如果设置成20px，子元素边距1em，就是20px，他是根据最近的设置的字体大小为依据的...rem在这里就不做演示了他是根据根元素html设置的字体大小为倍率进行显示，边距同样也是根据根元素大小进行显示，这一点rem要好很多，rem的使用体验要比em好很多，因为他们都有一个统一的倍率，不用单独计算

1.1K3 0

div水平布局两边对齐

方法一父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题 html ...1 2 css /* 方法一 */ .div-container { margin...: 10px 0; padding: 10px; width: 400px; border: 2px solid #ccc; position: relative; } .div1 {...width: 100px; height: 50px; border: 2px solid red; } .div2 { width: 100px; height: 50px;...border: 2px solid red; position: absolute; /* 边距设置 */ right: 10px; top: 10px; } 父容器div使用 display

8773 0

CSS入门学习笔记+案例

也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边距值为其中较大的那个外边距值两种情况：当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并...">div1 div2 div3 div4</...常用取值： left左侧不允许出现浮动元素 right右侧不允许出现浮动元素 both两侧不允许出现浮动元素 none允许两侧出现浮动元素，默值结论：对于非浮动元素，两边都可以设置清除（常用）对于浮动元素...table标签中的cellpadding属性，边距） <!...，适合于复杂的布局方式 3.1 简单布局两种形式： 3.2 圣杯布局页面结构，两边的边栏宽度固定，中间主体在一定范围内可自适应，并且主体优先被加载一般防止页面缩放影响浏览，都会为页面设置一个最小宽度

1.5K1 0

【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )

浮动特性 /* 清除标签默认的内外边距...; } 展示效果...: 标准流的块级元素分别占用一行显示 , 排列顺序由上到下 ; 二、浮动特性 - 脱离标准流布局、取消占用位置 ---- 将上面的块级元素设置为浮动 , 则该元素从标准流...: pink; } </html...元素的浮动特性会改变该元素的 Display 显示模式 , 原来的元素不管是块级元素还是行内元素 , 设置浮动样式后 , 其显示模式类似于行内块元素 ; 如果同时将两个 div

5763 0

2018年9月9日用HTML开发网页的总结

padding-top: 内边距距上边的距离 margin： auto; 居中 margin-left: 外边距距左边的距离 line-height：行高 background-positoin...=5px表示距本身盒子上边距5像素，该盒子的高度就会变高5个像素。...Javascript是用来添加特效的相当于2.5个空格使用实现：solid 点状线：dotted 虚线：deashed 双线：double 盒子div默认是块标签...##### #号中的言论待考证如果第一个div1里面的内容高度小于或者等于本身定义的div0的高度的话，下一个div2就会自动靠下边最左边浮动如果div1里面的内容的高度大于div1设置的高度的话...#### 两个div,分别为div1和div2,如果div1的float调为left,div2不调，那个div2就会从div1开始的地方，开始浮动，也就是覆盖在div1的下面，哪个定义浮动，哪个就优先显示

1.1K6 0

js一些案例的使用

1 延迟提示框的使用方式一：延迟提示框的使用1 #div1{ background:red; width:...DOCTYPE html> 延迟提示框的使用1 #div1{ background:red; width:..."> 2 定时器的使用常用使用 offsetLeft //左边距 offsetTop //上边距 offsetWidth //宽度 offsetHeight

5931 0

【基础巩固】- 带你搞懂CSS盒模型

如此之外还有三个api可以使用： dom.currentStyle.width/height 取到的是最终渲染后的宽和高，只有IE支持此属性。...IE9以上支持，除此外还可以取到相对于视窗的上下左右的距离。根据盒模型解释边距重叠当两个外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。...再用一个demo来说明一下：这是一个div 这是一个div .div1{ width:300px; margin...BFC（边距重叠解决方案，还有IFC）解决边距重叠有些时候我们不希望他发生边距重叠，我们采用BFC和IFC来解决。先普及一下概念，FC就是Fomatting Context。...可以看到3的下边距与4是发生了重叠的，这是因为它不具有BFC，就如同之前一样，边距会发生重叠最终合并成较大的那一个。

7172 0

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

c）、外边距将不再与上下文之外的元素折叠示例代码： <!...如果此时将脚本的div1与div2同时变成BFC环境，修改的css如下： #div1 { width: 200px;...与div2都是BFC上下文，但是要求的是：外边距将不再与上下文之外的元素折叠，按照要求，我们应该将div1与div2放在不同的上下文中，修改后的脚本如下： <!...因为div3使用absolute绝对定位，它的参考对象是父元素div2,div1都不满足条件，因为两者都没有进行定位，是默认的定位值static，根据约定最终找到body，所以会出现在页面的右上角。...3.3、清除浮动该属性的值指出了不允许有浮动对象的边。

3.6K8 0

CSS进阶04-块格式化上下文BFC

两个同胞盒间的垂直距离取决于 margin 属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。...两个同胞盒间的垂直距离取决于 margin 属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 div1 div2 div1...这时如果让div2处于一个新的BFC下，则其与处于另一个BFC下的div1不再会有margin折叠。

5763 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭