在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。在HTML和XHTML中,块级元素不能继承自行内元素(即不能嵌套在行内元素),<p>I like <em>it</em></p>是正确的写法,但是<em>I like<p>it</p></em>是不正确的。

  常用的块状元素有:

  <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  常用的内联元素有:

  <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  常用的内联块状元素有:

  <img>、<input> 

  *可以通过设置display:block就是将内联元素显示为块级元素。块状元素也可以通过代码display:inline将元素设置为内联元素。

  *块级元素特点:

  1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

  3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

  *内联元素特点:

  1、和其他元素都在一行上;

  2、元素的高度、宽度及顶部和底部边距不可设置;

  3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

  内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素

  *内联块状元素元素特点:

  1、和其他元素都在一行上;

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

CSS--基础块级元素与内联元素的更多相关文章

  1. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  4. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  5. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  6. css中块级元素、内联元素(行内元素、内嵌元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  7. CSS的块级元素和内联元素,以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  8. CSS 块级元素、内联元素概念

    p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...

  9. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  10. CSS块级元素、内联元素概念[转]

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

随机推荐

  1. redis 发布订阅实现异步实时发短信

    redis 中发布和订阅可以实现消息的实时传输,这里我只是用它的事件驱动,当客户端发送了消息,服务器端立马可以接收指令处理相应的业务逻辑. 客户端 client.php <?php //发布 $ ...

  2. IT兄弟连 JavaWeb教程 请求重定向案例

    Check2Servlet类与Output2Servlet类之间为请求转发关系.在web.xml文件中,为Check2Servlet映射的URL为"/check2",为Output ...

  3. Mac 开发 Hue

    1)环境准备 Maven 3.6.1 python (Anaconda 2.7.16) MySQL 5.7 git 2.21 2)Hue源码下载 git clone git@github.com:ar ...

  4. 鸟哥私房菜基础篇:Linux是什么习题

    猫宁!!! 参考链接:http://cn.linux.vbird.org/linux_basic/0110whatislinux.php#ex 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-你在你的 ...

  5. 编译安装Apache:出现错误configure: error: mod_deflate

    在进行编译安装Apache时,出现如下错误 checking whether to enable mod_deflate... configure: error: mod_deflate has be ...

  6. Nginx+tomcat集群环境搭建(Windows下)

    实验环境 windows xp sp3 Nginx版本:1.5.12: 下载地址:http://nginx.org/en/download.html Tomcat版本:6.0.39 下载地址:http ...

  7. the little schemer 笔记(2)

    第二章 Do it, Do it Again, and Again, and Again... 假设l是 (Jack Sprat could eat no chicken fat) 那么 (lat? ...

  8. Fiddler抓取HTTPS设置

    做App测试,用Fiddler进行抓包,以下操作记录如何用手机进行设置使其可以捕捉HTTPS协议. 一.电脑端设置 1.手机和电脑保持统一局域网内 2.配置fiddler允许监听到https 打开Fi ...

  9. ES6中的Rest参数和默认参数

    ES6中的Rest参数和默认参数 Rest参数 一个例子 编写一个函数, 用来判断, 某个字符串中, 是否其他的字符串, 如果第一参数以后的字符串, 都包含在第一参数中, 都包含在, 就返回true ...

  10. [转]深入浅出WPF(7)——数据的绿色通道,Binding

    本文转自:http://liutiemeng.blog.51cto.com/120361/95273 小序: 怎么直接从2蹦到7啦?!啊哦,实在是不好意思,最近实在是太忙了,忙的原因也非常简单——自己 ...