浮动元素依然位于父元素之内 4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 注意 1、一行内，显示不下所有的已浮动元素时，最后一个将换行 2、元素一旦浮动起来之后，那么宽度将变成自适应...疑问 为什么会margin边距重叠？...属于同一个BFC的两个相邻Box的margin会发生重叠 注意：发生重叠后，外边距的高度等于两个发生重叠的外边距的高度中的较大者 从上面的例子可以看出，虽然红色 和 蓝色 的 div 都有设置...看代码和效果图，可以看出，这次的代码比上面的代码多了一行overflow:hidden;用这行代码触发新的BFC后，由于这个新的BFC不会与浮动的top重叠，所以bottom的位置改变了 ...总结 清除浮动的方式有很多种，但是实现的原理主要是靠clear属性，和触发新的BFC，通过详细的解释与比较，最后两种内容生成的方式是比较推荐使用的，如果需要考虑margin重叠的问题，就用方案7，不考虑就用方案
1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性： 只发生在block水平元素（例如：p、div、list、item...只发生在垂直方向（margin-top/margin-bottom） margin重叠三种情况： 相邻的兄弟元素 父级和第一个/最后一个子元素 空的block元素（自己和自己重叠） demo 1: 1... 第二行 兄弟元素的上下margin发生了重叠 2.父级和第一个/最后一个子元素 demo 1: <!...对最后的子元素设置的margin-top：80px；等同于为父元素设置了margin-top：80px；（父元素的margin-top=0，最后的子元素的margin-top=80px，发生了外边距重叠...去掉margin-bottom重叠与上面类似。
最近测试给了我一大堆BUG，一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同，而且最明显的一点应该是padding左右内边距往往比别的浏览器大了一倍。...比如，我在chrome浏览器中给一个div设置样式 div{ padding:0 12px; } 那么，在IE11中想要实现上面效果，需要在这个下面再添加一行样式 div{ padding...;} } 这里需要注意一下IE11的样式要写在最后面防止被覆盖，当浏览器为IE11时，@media中的样式会被执行一遍。 ...还有一个就是IE11针对h5的表单验证部分，验证失败后input标签会出现一个红色的框，比较丑。...这个时候你只要针对专门的input标签，增加一个input{outline:none};就可以将红色的边框去掉了。 今天大拿直接一行代码把我之前的IE11兼容性问题全解决了。不服不行。
在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？ 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...当设置绿色的div为绝对定位之后，发现黄色的div不见了。 其实，黄色的div并不是不见了，而是跟绿色的div重叠了。...因为当绿色div设置为绝对定位之后，就会脱离文档流布局，此时绿色的div就相当于漂浮了起来，黄色的div就没有被绿色div挤下来，自然就上去与绿色div重叠在一起了。 那么下面来设置一下偏移看看。...因为上面我缩放了浏览器的宽度一半。 ? 那么为什么绿色的div是与body进行偏移呢？因为绿色div的父级元素外层div没有设置定位。...从上图可以看出最后写的红色div就是层级最高的，没有被其他div覆盖。 实现代码如下： <!
; 而不是： return ( // "div" 与 "return" 不在同一行 ...... ); 对 HTML 的属性进行对齐和排序 如果属性不是太多，那就放在同一行，否则就把每一个属性都单独写一行： <div className="highlight" key="highlight-div..."highlight-div" >> 而不是： <div className="highlight" // 属性没有在单独行 key="highlight-div" > div...这样有利于测试，因为这些测试框架要求一个文件导出的就是一个函数。 注意：你依然可以在一个文件中定义多个类，只要保证导出的只有一个即可。...每一个 this.props 的属性都应该有一个与之对应的 propTypes。
对于不浮动的元素来说，它们是能够撑开外部div的高度的，但是一旦浮动，元素脱离文档流，父级div就相当于没有了内容（上面的例子中类名为main的高度为0了）。这时是没有办法实现内容撑开高度的。...独行冰海博客中已经讲解了清除浮动的几种方法——http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120131130959204/ 梦幻雪冰今天给大家分享的是清浮动的具体代码实现...> 注释：上面用p标签进行空标签清浮动，当然可以用别的标签；如果用行元素的话需要进行转化为块，块元素就没有必要转化啦。...class="wrap"> 梦幻雪冰 独行冰海 效果： 注释：使得与父元素相邻的元素的布局会受到影响（影响到了类名为footer的元素）。
目前来说，移动端的实现方法没有一个统一的标准，大家各自采用自己的实现方法，所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏 给大家分享之前，先说几句话。...，还需要考虑盒模型，不然浮动不上去（不会处于同一行，如下图），表格的话很方便，设置边框的话，它的宽度自己适应，表格在这方面比较好。...效果分析 虽然用display：inline-block能让元素处于同一行，但是display：inline-block会产生间隙，原因是HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符...: inline-block支持程度 如上图 效果分析 淘宝中也是用display：inline-block能让元素处于同一行，间隙的解决方法通过HTML文件的压缩来实现。...可以决定伸缩项目在伸缩容器中的空间大小。如果每个都设置为1，每个伸缩项目在伸缩容器内都相等。
看上面这段代码，id=div0的元素创建了一个BFC区域，该元素下面的id为div1、div2、div3都属于div0所创建的BFC区域下。...如何解决margin边距重叠 根据BFC规则：属于同一个BFC的两个相邻块级盒子的margin会发生重叠。因此我们只要使div1与div2不属于同一个BFC即可： 1<!...进行了漂浮，而div2与div1处于BFC0中，所以div2和div1还是会发生重叠； 要解决漂浮重叠，我们也可以通过BFC进行解决，我们依旧给div2放到一个新的BFC区域中，那么根据BFC的规则，BFC...此时我们通过给div2新建了一个BFC区域，因此它没有与div1漂浮发生重叠。 这时候仔细的小伙伴可能会问，根据BFC的规则1，为什么div2没有垂直方向独占一行？...这是因为div1发生了漂浮，它会影响它后面的一个元素，因此并不是div2没有在垂直方向独占一行，而是因为div1漂浮的缘故，div2和div1一起占了一行，而又因为新建了一个BFC，因此div2没有和div1
块级元素与行内元素的区别以及BFC布局的简单解释 工作中其实经常用到一些span标签和div标签来进行内容的显示，但涉及到文本标签的换行，总得多花那么一两分钟多写一下，今天就专门来瞅一瞅。...我们常用的div、h、p等标签都属于块级元素 可以看到，对于一个普通的div标签而言，其内部元素是可以超出其限定高度进行显示，有与外界内容重叠的情况 ``` 就上述代码而言可以看到#content中的内容会跟div2中的内容重叠，同时也可以看到div2是直接换行，紧贴着其父元素的左侧往下排列，这就是普通文档流的排列规则...> 像上面的代码，content会自动换行，div的左侧有内容，右侧则直接留白，有兴趣的手动练习一下 当然，如果行内元素你没给他设置word-wrap属性的话，文本内容也会在同一行内往右延伸，不会自动换行的...来避免其与div2中的内容重叠。
文章目录 写在前面 什么是BFC 解决了什么问题 如何解决 包含内部浮动元素 排除外部浮动 解决margin重叠 解决margin塌陷 总结 写在前面 因为这篇文章内容属于比较常见的一个面试题，所以帖子里面很多讲过了...，比如块级元素默认就会占据文档一行，高度会根据内容填充，行内元素可以相互挨着，不会占据多余的空间等规则，BFC很明显你可以浅显的将他理解为将一块元素封闭起来，与别的元素进行隔开，自己内部的属性不干扰外部的元素的属性...（marginTop-marginBottom 或者是marginRight-marginLeft）的时候，只会有一个较大的属性值生效，这个现象就叫做margin重叠 看代码 看现象 可以看到，我们明明设置了距离上面100 和距离下面100 但是最后距离只有100 这个现象就做margin重叠 给其中一个子元素添加BFC进行解决...float：none或者是overflow:hidde等操作或者是上面解决margin塌陷的时候使用padding或者是添加一个border都是具有副作用的，添加border之后根据盒模型来计算的时候你的盒子的宽度就发生了变化
先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。 ...如上面的例1中box2宽度是100，只需要对box3设置margin-left：102px就可以实现不重叠。...例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。
/padding-right将作用于第一个的inline-level box，margin/border/padding-left将作用于最后一个的inline-level box。...将作用于最后一个的inline-level box。...也就是block-level box A与block-level box B的FC特性值BFC可能是不同的。 当两个相邻box的FC值不为同一个BFC时，它们的margin绝对不会重叠。 ...英语单词移行有一定规则,归纳如下： 1．移行处要用连字符号“-”,只占一个印刷符号的位置并放在该行的最后. 2．移行时一般按照音节进行,故只可在两音节之间分开,不能把一个完整的音节分写在上下两行.例如：...等. 5．两个不同的辅音字母在一起时,移行时前后各一个.如：cap-tain,ex-pose等. 6．当两个音节间只有一个辅音字母时,如果该辅音字母前的元音字母按重读开音节的规则发音,该辅音字母移至下一行
在以下情况下，margin 会重叠： 相邻的兄弟姐妹 完全空盒子 父元素和第一个或最后一个子元素 依次来看看这些场景。...但是你会发现实际的效果是第一项和最后一项与父元素的的margin齐平，好像子元素和父元素之间没有50px的margin一样。...image.png 仅块元素 margin 重叠 在CSS2中，只指定垂直方向的 margin 重叠，即元素的顶部和底部 margin。因此，上面的左右边距不会重叠。...然而，假设你遇到了上面示例中的几种情况，那么如何才能阻止 margin 重叠呢？ 例如，一个完全空的盒子，如果它有border或padding，它的上下 margin就不会重叠。...这个解决方案并不能解决你可能遇到的问题，因为子元素的margin会与父元素相互重叠。这个特定的问题往往不那么常见，但知道它为什么会发生可以帮助你想出一个解决方案。
在以下情况下，margin 会重叠： 相邻的兄弟姐妹 完全空盒子 父元素和第一个或最后一个子元素 依次来看看这些场景。...但是你会发现实际的效果是第一项和最后一项与父元素的的margin齐平，好像子元素和父元素之间没有50px的margin一样。...image.png 仅块元素 margin 重叠 在CSS2中，只指定垂直方向的 margin 重叠，即元素的顶部和底部 margin。因此，上面的左右边距不会重叠。...然而，假设你遇到了上面示例中的几种情况，那么如何才能阻止 margin 重叠呢？ 例如，一个完全空的盒子，如果它有border或padding，它的上下 margin就不会重叠。...这个特定的问题往往不那么常见，但知道它为什么会发生可以帮助你想出一个解决方案。
： (1)CSS2.1规范中的一个概念 (2)它是指页面中的一块渲染区域，并拥有一套渲染规则，它决定了其子元素将如何定位，以及与其他元素的关系和相互作用。...(3)CSS2.1 中只有BFC和IFC，CSS3中还增加了GFC和FFC BFC： 块级格式化上下文，它是一个独立的渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，并且与这个区域外部无关。...(3)生成BFC元素的子元素中，每一个子元素的margin与包含块的左边界border相接触（对于从左到右的格式化，否则相反），即使存在浮动也是如此； (4)BFC的区域不会与float元素区域重叠 可应用到两栏布局中...说明第一行的margin-bottom和第二行的margin-top发生了重叠，不然第一行到第二行的距离，应该是50px，是第一行距离顶部距离的两倍。...解决方法上面已经介绍过：可在其中一个元素外包裹一层容器，并触发该容器生成BFC（overflow:hidden;），这样两个元素就不属于同一个BFC了，就不会发生margin重叠的问题了。
没错，在一般情况下（没有浮动，不是行内框），并排的div 的margin可以彼此重叠,而且重叠后值为两者中较大的那个 ?...间距变为20px，这时候margin已经不重叠了 五.浮动/定位对其他元素物理空间的影响 这首先要提到我们经常挂在耳边的一个词——“脱离文档流” 脱离文档流 == 不占据元素的空间（物理上） .div2...“标准流”，那么： 1.浮动流顺序排列，这个顺序是和HTML中元素的顺序一致的,HTMl中先浮动的元素排在前面，这个“前面”指的是靠近屏幕边缘的一端，“后面指的是远离屏幕的一端” 以上面的例子为基础 ....3.浮动流本身并不会影响标准流元素的定位,但是却影响着标准流文本的定位 如果我们仔细看一下五中开头的demo会发现一个难以忍受的bug: ?...4.浮动流位居标准流之上(也就是说浮动流的元素会覆盖标准流的元素) 这个根据上面那个例子就可以看出来，这里就不多说了 六.实践案例 好，说了这么多，还是用以上的知识点来一个实践的案例比较痛快，下面这个案例是
，环绕于周围 应用: 阻止margin重叠 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中) 自适应两栏布局 可以阻止元素被浮动元素覆盖 20 为什么会出现浮动和什么时候需要清除浮动...清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...27 在网页中的应该使用奇数还是偶数的字体？为什么呢？ 使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。...解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。...行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。 13 常见的兼容性问题？...Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin box 的左边，与包含块border box的左边相接触。...清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
第二种全屏的品字布局: 上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。 13 常见的兼容性问题？...Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin box 的左边，与包含块border box的左边相接触。...清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...27 在网页中的应该使用奇数还是偶数的字体？为什么呢？ 使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。...行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
