css --- 浮动元素与块框/行内框重叠时的细节

块框,可以认为是块级元素(如div、h1)的内容区 + 内边距
行内框可以认为是行内元素(如span)的内容区 + 内边距
当块级框/行内框和一个浮动元素重叠时，行内框的边框、背景和内容都在幅度元素之上，块级框的边框和背景都在浮动元素的下面，但内容在浮动元素的上面。

见下图

可以很明显的看到,框级框(h2#jump-up)在与图片重合时,其背景和边框全部,全部在浮动元素(img.sideline)的下面,而文本元素在上面.
对于行内框(px.box strong)来说,其背景、边框和文字(也叫前景)全在浮动元素上面

代码如下:

//css
img.sideline {float: left;margin: 10px -15px 10px 10px;}
p.box {border: 1px solid gray; padding: 0.5em;}
p.box strong {border: 3px double black; background: silver; padding:2px;}
h2#jump-up {margin-top: -30px; background: silver;border:1px solid red;}

<img src="/statics/images/course/klematis2_small.jpg" class="sideline">
<p class="box">
This paragraph, unremarkable in most ways, does contain an inline element.
This inline contains some <strong>strongly emphasized text, which is
so marked to make an important point</strong>. The rest of the element`s
content is normal anonymous inline content.
</p>
<h2 id="jump-up">A Heading!</h2>

css --- 浮动元素与块框/行内框重叠时的细节相关推荐

元素（块、行内、行内块
块元素的特点 1.支持所有样式 2.块级元素独占一行 3.块级元素默认宽度和父元素一样常用块元素块级元素一般 div p ol ul h1-h6 li dl dt dd 等都是初始化(样式重置 ...
CSS 行内级元素和行内框
行内级元素(inline-level element),就是那些在源文档中不会形成新块的元素,这些元素的左右可以放置其他元素.典型的行内级元素有 span.em.strong.a,等等. 根据元素自身 ...
CSS line-hight ,vertical-align，父元素高度以及行框，行内框的关系
参考文章:我对CSS vertical-align的一些理解与认识(一) css行高line-height的一些深入理解及应用大小不固定的图片.多行文字的水平垂直居中 [line-height] l ...
【基线,内容区, 行高/行间距,行距, 行内框,行框的区分说明】
基线,内容区, 行高,行距, 行内框,行框的区分说明 ⑴ 基线 ⑵ 内容区 ⑶ 行高/行间距 ⑷ 行距 ⑸ 行内框 ⑹ 行框 ♣ 结束语和友情链接 ⑴ 基线基线沿着文本最底部的一行线, ...
CSS之块、行内、行内块元素
块元素独占一行如h1-h6.p.div.ul.ol.li等: 宽高内外边距可以调: 宽度默认是父级宽度100%: 都是容器盒子,里面可以放行内或块级元素. 注意点:文字类元素如p. ...
html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
css --- 行内框和内容区
css规定font-size的大小实际上是字体的高度可以将内容区理解为font-size的大小. 行内高可以理解为 ( (line-height) - (font-size) ) /2 然后再fon ...
块元素div转变为行内块元素之后如何消除之间间隙
块元素div转变为行内块元素之后如何消除之间间隙写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊. 最外层父级div宽度width大于三个小div宽度之和父级div: #aa ...
（1-1）line-height的定义和行内框盒子模型
(1-1)line-height的定义和与行内框盒子模型的关系一.line-height的定义 line-height的定义: 行高,又称为两基线的距离.默认基线对齐(因为CSS所有*线:总之就是各 ...

css --- 浮动元素与块框/行内框重叠时的细节

css --- 浮动元素与块框/行内框重叠时的细节相关推荐

最新文章

热门文章

css --- 浮动元素与 块框/行内框重叠时的细节

css --- 浮动元素与 块框/行内框重叠时的细节相关推荐

最新文章

热门文章

css --- 浮动元素与块框/行内框重叠时的细节

css --- 浮动元素与块框/行内框重叠时的细节相关推荐