当inline元素包裹block元素时会发生什么
经常有图片链接写法如下:
<a href="www.baidu.com"><img src="baidu.jpg" /></a>
点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳。
但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比:
<div>这里是块元素</div>
<span>用于测试(没有包裹 a 标签之前)</span>

猜想一下,被 a 标签包裹之后 ,span 标签是否会和 div 标签处于同一行呢?(div即使设置了宽高也不会触发BFC)
<a href="www.cnblogs.com"><div>这里是块元素</div></a>
<span>用于测试(已经包裹 a 标签)</span>

很明显,a 标签包裹block元素后变成了block元素。
当inline元素包裹block元素时会发生什么的更多相关文章
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
随机推荐
- 在Android studio模拟器中运行apk文件
菜鸟级玩家比看文. win平台下下载的apk文件,怎么能模拟运行出来. 首先得安装Android SDK,不会的自行百度一下. 接下来,打开AVD模拟器,自己创建一个模拟器(过程自己实践) 然后,将你 ...
- asp.net -mvc框架复习(10)-基于三层架构与MVC搭建项目框架
一.三种模式比较 1.MVC框架(适合大型项目) (1).V视图 (网页部分) (2).M模型 (业务逻辑+数据访问+实体类) (3).C控制器 (介于M和V之间,起到引导作用) 2.三层架构 (1) ...
- OpenGL+OpenCV实现立方体贴图
我屮艸芔茻,转眼就7月份了. 今天试了一下立方体贴图,比较简单,大概说下和平面贴图的区别. 1. 平面贴图需要的是纹理坐标vec2:立方体贴图需要的是一个方向向量vec3,长度没有关系,重要的是方向, ...
- IOS @proporty 关键字(一)retain strong
@interface User : NSObject @property (nonatomic,retain) NSString* tRetain; @property (nonatomic,assi ...
- 使用SQL 提示优化sql
use index 在查询语句中表名的后面,添加use index来提供希望mysql去参考的索引列表,就可以让mysql不再考虑其他可用的索引 explain select * from renta ...
- 原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
- Linux指令--chown
chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...
- 创建md5摘要,规则是:按参数名称a-z排序,遇到空值的参数不参加签名。
/** * 创建md5摘要,规则是:按参数名称a-z排序,遇到空值的参数不参加签名. */ private function createSign($parameters,$key) { $signP ...
- 异常org.xml.sax.SAXParseException; lineNumber: 5; columnNumber: 11; 注释中不允许出现字符串 "--"。的原因
是由于编码格式不统一导致的. 把ecplise的workpace的编码改成utf-8
- Java Cookie和Session
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...