解决外边距溢出---内容生成

<!DOCTYPE html>

<html>

<head>

<title>解决外边距溢出</title>

<style>

#d1,d2{

width:200px;

height:200px;

background:red;

}

#d2{

background:green;

}

#d3{

width:100px;

height:100px;

background:blue;

}

#d2:before{

concent:""

display:table

}

</style>

</head>

<body>

<!--

1.d2的第一个子元素

2.放一个table元素

-->

</div>

</body>

</html>

时间： 2024-11-04 08:34:03

解决外边距溢出---内容生成的相关文章

[转]如何解决外边距margin叠加的问题探讨

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠,那么如何使元素上下margin不折叠呢?下面的方法或许对大家有所帮助一.首先你要知道什么情况下会触发:两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠 1.两个或多个说明其数量必须是大于一个,又说明,折叠是元素与元素间相互的行为,不存在 A 和 B 折叠,B 没有和 A 折叠的现象. 2.毗邻是指没有被非空内容.padding.border 或 clear 分隔开,说明其位置关系. 注意一点,在没有被分隔

如何解决外边距叠加的问题？

触发block formatting context即可,触发的方法:1. float不为none2. overflow不为visible3. display设为'table-cell', 'table-caption', 或'inline-block'4. position既不是static也不是relative5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context

css3复杂选择器+内容生成+Css Hack

1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过位置关系来匹配元素(平级) 2.只能向后找,不能向前找 2.兄弟选择器-相邻兄弟选择器 1.什么是相邻兄弟紧紧挨在一起的元素,称之为相邻兄弟 <div id="d1"></div> <p id="p1"></p> <

9.内容生成

1.什么是内容生成使用CSS动态的向某元素中插入一部分内容 2.伪元素选择器 1.:before 或 ::before 作用:匹配到某元素的内容区域之前 <p>(:before)举头望明月</p> 2.:after 或 ::after 作用:匹配到某元素的内容区域之后 <p>低头思故乡(:after)</p> 3.属

常见布局修复方案—外边距叠加问题

外边距叠加是一个相当简单的概念. 但是,在实践中对网页进行布局时, 它会造成许多混淆. 简单的说,当两个或更多个垂直边距相遇时,它们将形成一个外边距.这个外边距的高度等于两个发生叠加的外边距的高度中的较大者.只有普通文档流中块框的垂直外边距才会发生外边距叠加. 行内框.浮动框或绝对定位框之间的外边距不会叠加. 一般来说, 垂直外边距叠加有三种情况: 元素自身叠加包含(父子)元素叠加相邻元素叠加元素自身叠加我们知道, 盒模型是内容→内边距→边框→外边距这样逐层包含的结构. 当元素没有内

css盒子模型、垂直外边距合并

css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容区域的宽度后,再设置盒子的填充.边框.边距值,盒子在页面中实际占据的页面尺寸的计算是: 水平方向上::width+2*padding+2*border+2*border, 垂直方向上::height+2*padding+2*border+2*border, 不过需要注意的是行内元素,在不改变它的表现

BFC与垂直外边距合并问题

一.什么情况下发生外边距的合并 1)必须处于普通文档流中(不能脱离文档流),并且处于同一个BFC中 2)相邻的外边距,不能有间隙和边框 3)垂直方向上二.如何合并 1)兄弟元素之间,外边距合并会去最大的那个外边距而不是取和 2)父子元素之间,外边距合并会将子元素的外边距设置给父元素 3)空元素三.如何解决垂直外边距重叠问题? 1)父元素添加透明上边框或者内边距 2)父元素前面块元素隔开 3)开启BFC, *设置 display:table/table-cell/table-captions/

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的

关于overflow:hidden的作用（溢出隐藏，清除浮动，解决外边塌陷等等）

1.overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果如下: 2. overflow:hidden 清除浮动一般而言,父级元素不设置高度时,高度由随内容增加自适应高度.当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0.那么问题来了,如下: 运行结果如下: 如上,由于父级元素