经常有图片链接写法如下:

<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元素时会发生什么的更多相关文章

  1. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  2. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  3. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  4. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  5. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  6. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  7. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  8. CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  9. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

随机推荐

  1. 使用notepad++作为keil的外部编辑器

    之前一直不喜欢keil的编辑界面,但是又不想太浮夸.看到很多群里有人用vscode写stm32的序,但是直接用vscode编写的花,各种设置很麻烦.而且还不能调试.于是想到有没有一个轻便简约的外部编辑 ...

  2. jquery ajax 请求中多出现一次OPTIONS请求及其解决办法

    http://www.tangshuang.net/2271.html 在上一篇<服务端php解决jquery ajax跨域请求restful api问题及实践>中,我简单介绍了如何通过服 ...

  3. bootstrap-multiselect 的简单使用,样式修改,动态创建option

    1.bootstrap-multiselect 顾名思义基于bootstrap,bootstrap基于jquery,所以第一步,引入文件 bootstrap.css/ juery.js /bootst ...

  4. Java数据持久层框架 MyBatis之背景知识二

    对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

  5. Java compiler level does not match the version of the installed java project facet错误的解决

    因工作的关系,Eclipse开发的Java项目拷来拷去,有时候会报一个很奇怪的错误.明明源码一模一样,为什么项目复制到另一台机器上,就会报“java compiler level does not m ...

  6. Django文件上传三种方式以及简单预览功能

    主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...

  7. Django之Model组件

    Model组件在django基础篇就已经提到过了,本章介绍更多高级部分. 一.回顾 1.定义表(类) ##单表 from django.db import models class user(mode ...

  8. Qt出现堆溢出(Error Code -1073741823)

    症状 在使用Debug模式时,程序可以正常启动,但是切换到Release模式,程序报错,错误码-1073741823 原因 程序中使用了过多的new.比如: QActionGroup *mProtoc ...

  9. mybatis实战教程三:mybatis和springmvc整合

    一.搭建maven环境,引入相关jar 参考demo 二.写web.xml <?xml version="1.0" encoding="UTF-8"?&g ...

  10. python3 第十二章 - 数据类型之List(列表)

    Python内置的一种数据类型是列表:list. list是一种有序的集合 可以随时添加和删除其中的元素. 它可以作为一个方括号内的逗号分隔值出现. 列表的数据项不需要具有相同的类型 创建一个列表,只 ...