根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。
div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。
如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了.

<span style="width:100px;height:100px;display:block;background-color:blue;"></span>

在xhtml中每个对象而言,都拥有自己默认的显示模式。div对象的默认显示模式是display :block。从而使div成为一个块状容器,其默认空间是占据整行空间。而span的对象的默认显示模式为display:inline 。而display属性的用法是改变元素的显示模式。
margin可以控制内联和块级元素的间距,而不光是内联元素。
主要注意他们之间的转换问题,如块级元素加float属性会变为内联元素。
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

CSS块级元素和行内元素的更多相关文章

  1. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  2. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  3. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

  4. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  5. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  6. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  8. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  9. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  10. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

随机推荐

  1. js 中的闭包

    /** *闭包就是在一个函数的外面访问函数内部的变量 **/ var name = "xiao A"; var obj = { name : "xiao B" ...

  2. Python正则表达式指南(转载)

    转载自:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html#3353540 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不 ...

  3. SecureCRT, SecureFX连接Linux时中文乱码解决办法

    SecureCRT可以在GUI界面设置,但SecureFX没有设置界面.不过可以直接在配置文件中修改. 1. 找到配置文件夹(选项--全局选项,常规下的配置文件夹),默认是:C:\Documents  ...

  4. QReadWriteLock上锁容忍的等待时间是多久?

    非递归上锁情况下,同一个锁,已经被锁过一次,那么另外一个线程尝试上锁,会被挡在外面,但是会被挡多久呢?挡一分钟会被崩溃,还十分钟,还是永久等待而不崩溃(希望如此)?还是会立刻崩溃?因为不可以重复上锁. ...

  5. Windows 系统消息范围和前缀,以及消息大全

    Windows系统定义的消息类别消息标识符前缀 消息分类ABM 应用桌面工具栏消息BM 按钮控件消息CB 组合框控件消息CBEM 扩展组合框控件消息CDM 通用对话框消息DBT 设备消息DL 拖曳列表 ...

  6. nginx 编译参数

    jrhnpt01:/root# nginx -V nginx version: nginx/1.7.7 built by gcc 4.4.7 20120313 (Red Hat 4.4.7-4) (G ...

  7. 关于Struts2的碎碎念

    一:安全,还是安全 我入行比较晚,那会Spring MVC什么的都很流行了,一直觉得struts2作为一个Web MVC框架实在太笨重了点.所以虽然之前一直在用,但是其实没有真正研究过. 今天公司又遇 ...

  8. HDU 5758 Explorer Bo(树形DP)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5758 [题目大意] 给出一棵树,每条路长度为1,允许从一个节点传送到任意一个节点,现在要求在传送次 ...

  9. POJ 1226 Substrings(后缀数组+二分答案)

    [题目链接] http://poj.org/problem?id=1226 [题目大意] 求在每个给出字符串中出现的最长子串的长度,字符串在出现的时候可以是倒置的. [题解] 我们将每个字符串倒置,用 ...

  10. ajax异步通讯 遮罩滚动栏,防止并发及误操作

    加入滚动栏的遮罩,滚动栏图片须要自己调整路径 function loading() { var divloading = "<div id=\"loadingdiv\&quo ...