margin塌陷与margin合并、浮动流

一、margin 塌陷

父子嵌套元素，垂直方向的margin,父子会粘合在一起，取最大的值。子级不能根据父级定位，好像父级没有棚。
解决方案，触发bfc（block format context），使用另一套语法规则
如何触发一个盒子的bfc,改变父级的渲染规则
position:absolute
display:inline-block
float:left/right
overflow:hidden

也可父级加一个线，border-top:1px solid red;

二、margin 合并
两个兄弟方向的margin是合并的，取最大值。
解决办法，加个父级，父级触发bfc
一般不解决

三、float
子元素加float，变成行级元素,不够就占行
浮动元素产生了浮动流，块级元素看不到他们，产生bfc的元素和文本类属性的元素以及文本都能看到浮动元素。
clear:both,清除浮动流

四、文字溢出
单行文本，溢出用...
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行文本
截断
height:40px;
line-height:20px
五、背景图片
backgroud-image:url(fy.jpg);
backgroud-size:100px 100px;
backgroud-repeat:no-repeat;//不铺满repeat-x,repeat-y
backgroud-position:100px 100px;//left top
六、网速不好的时候,照样显示内容
<a href='http://www.taobao.com' target="_blank">淘宝网</a>
text-indent:200px;
white-space:nowrap;
overflow:hidden;

第二种方法
padding-top:58px;
height:0;
overflow:hidden;

七、行级元素转化
span 在
position:absolute;
float:left/right;
可以有width:100px;

会在内部加属性display:inline-block
span 内部有文字，外部的文字会与里面的文字底对齐。

margin塌陷与margin合并、浮动流相关推荐

解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
margin塌陷和margin合并
一.margin塌陷父子嵌套元素垂直方向的 margin ,父子元素是结合在一起的,他们两个会取其中最大的值正常情况应该是父级相对于浏览器进行定位,子级应该相对于父级定位的 , 但是 margi ...
如何解决margin塌陷以及margin合并
什么是外边距合并,以及常见的几种情况外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 所谓的外边距合并就是,当两个垂直外边距相遇时,它们将形成一个外边距.合 ...
margin设置规则与margin塌陷、合并
① margin 设置规则 margin 复合属性,可以设置一个值.两个值.三个值.四个值,规则如下: margin: 10px; /*设置 4 个方向的外边距*/ margin: 10px 20px ...
【CSS】1035- 再看 margin 塌陷和合并问题
前言小问题总是被人视而不见,等遇到的时候又突然想不起来,所以我们需要经常总结,这可以帮助我们更好的记忆东西.今天我们来总结两个不起眼的小问题:margin塌陷和margin合并 margin塌陷什 ...
15-CSS基础-浮动流
浮动网页的布局方式什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的标准流(文档流/普通流)排版方式其实浏览器默认的排版方式就是标准流的排版方式在CSS中将 ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
【HTML/CSS】margin塌陷和合并问题
1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang="en"> <head><meta char ...
解决margin塌陷的问题_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...

margin塌陷与margin合并、浮动流

margin塌陷与margin合并、浮动流相关推荐

最新文章

热门文章