wordpress私人建站主题,毕业设计模板网站,深圳市有方科技有限公司,广州怎么做网站外边距合并
CSS中的外边距合并指的是当两个相邻元素都设置了上下外边距时#xff0c;它们之间会发生重叠。这种现象被称为margin collapsing#xff08;外边距合并#xff09;或者margin collapse#xff08;外边距塌陷#xff09;。 可以看出上…外边距合并
CSS中的外边距合并指的是当两个相邻元素都设置了上下外边距时它们之间会发生重叠。这种现象被称为margin collapsing外边距合并或者margin collapse外边距塌陷。 可以看出上下两个盒子之间的边距是30px这是一个常见的CSS现象
CSS中的外边距合并是为了解决一些布局问题而设计的。在早期的HTML布局中开发者经常遇到元素之间出现意外的空白区域这通常是由于浏览器默认的外边距行为导致的。为了解决这个问题CSS引入了外边距合并的概念允许开发者更好地控制元素之间的间距。
通过允许垂直方向上的外边距合并开发者可以更方便地控制页面元素之间的间距特别是当页面中包含多个行内元素或行内块元素时。这种合并行为可以帮助消除不必要的空白区域使页面布局更加紧凑和一致。
如果确实需要实现上面的效果给其中一个盒子套一个外壳给这个外壳设置BFC因为BFC的规则是盒子内的和盒子外的是不互相影响
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.div-1 {width: 300px;height: 100px;margin-bottom: 30px;background-color: green;}.div-2 {width: 300px;height: 100px;background-color: red;margin-top: 20px;}/style
/head
body
div styleoverflow: hidden;border: 1px solid #000div classdiv-1margin-bottom: 30px;/div
/div
div classdiv-2margin-top: 20px;
/div
/body
/htmlMargin塌陷
我们先正常设置两个盒子一个父盒子和一个子盒子给子盒子设置 margin-top会发现没有撑开并且会带着父盒子一起动 解决方法: 1、给父元素设置 border、padding 2、父盒子设置 overflow: hidden
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.div {/*选择其中一个*//*overflow: hidden;*//*border: 1px solid #000;*/padding-top: 1px;}.div-1 {width: 300px;height: 100px;background-color: red;margin-top: 30px;}/style
/head
body
div classdivdiv classdiv-1margin-bottom: 30px;/div
/div
/body
/html何为BFC
BFCBlock Formatting Context是CSS布局模型中的一部分用于控制元素在页面上如何进行定位、显示以及与其他元素交互等操作。通过创建新的BFC可以改变元素的默认布局行为。
形成BFC的条件 1、浮动元素float 除 none 以外的值2、定位元素positionabsolutefixed3、display 为以下其中之一的值 inline-blocktable-celltable-caption4、overflow 除了 visible 以外的值hiddenautoscrollBFC的特性 1.内部的Box会在垂直方向上一个接一个的放置。2.垂直方向上的距离由margin决定3.bfc的区域不会与float的元素区域重叠。4.计算bfc的高度时浮动元素也参与计算5.bfc就是页面上的一个独立容器容器里面的子元素不会影响外面元素。解决什么问题
1、可以用来解决两栏布局BFC 的区域不会与 float box 重叠 2、解决 margin 塌陷和 margin 合并问题 3、解决浮动元素无法撑起父元素
利用bfc实现一个左侧固定宽度、右侧自适应的效果
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.column1 {float: left;width: 200px;height: 300px;margin-right: 10px;background-color: red;}.column2 {overflow: hidden; /*创建bfc */height: 300px;background-color: purple;}/style
/head
body
div classcolumn1/div
div classcolumn2/div
/body
/html
