块级元素和行内元素是布局中常见的两种基本元素，但是未必有很多人深入的研究它们的细微差别。

　　常见块级元素：div  p  form ul ol li 等；

　　常见的行内元素：span stronh em;

它们的区别主要有以下几点：

　　1.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。

　　如图：

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <style type="text/css">

    </style>

</head>

<body>

        <p>块级元素一</p>

        <p>块级元素二</p>

        <span>行内元素一</span>

        <span>行内元素二</span>

</body>

　　2.块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。

如图：

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <style type="text/css">

    p{background-color: red;height: 50px;width: 50%;}

    div{background-color: green;height: 50px;width: 40%;}

    span{background-color: gray;height: 70px;}

    strong{background-color: blue;height: 70px;}

    </style>

</head>

<body>

        <p>块级元素一</p>

        <div>块级元素二</div>

        <span>行内元素一</span>

        <strong>行内元素二</strong>

</body>

　　3.块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <style type="text/css">

    p{background-color: red;height: 50px;width: 50%;padding: 20px;margin: 20px;}

    div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}

    span{background-color: gray;height: 70px;padding: 40px;margin: 20px;}

    strong{background-color: blue;height: 70px;padding: 40px;margin: 20px;}

    </style>

</head>

<body>

        <p>块级元素一</p>

        <div>块级元素二</div>

        <span>行内元素一</span>

        <strong>行内元素二</strong>

</body>

　　4.最后是块级元素和行内元素的相关属性：display

　　其中块级元素对应display：block，行内元素对应display：inline。可以通过修改元素的display属性来切换行内元素和块级元素。

如图：

补充说明一个属性：display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性

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系列】块级元素和行内元素

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

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

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

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

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

随机推荐

  1. PyCharm中设置字体大小

    1.在file(文件)里面找到setting(设置) 2. 然后再左面Editor里面找Font,再到右面Size里面设置字体大小

  2. HBuilder 插件开发（openinstall 集成）

    离线打包 如果要集成使用非基座包下的第三方 SDK,就必须使用离线打包.可以参考 官方文档 进行离线打包,如果嫌官方文档看不懂,可以查看 其他技术人员的教程 开发插件 编写 Android 原生代码 ...

  3. SSM-Spring-05：Spring的bean是单例还是多例，怎么改变？

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- Spring的bean是单例的 它在Spring容器初始化的时候创建对象 可以修改为多例,在此bean节点中添 ...

  4. JFrame图形界面 ----绝对布局和按钮

    开始 绝对布局应该是最简单的一种布局方式了,只需要确定好大小和位置就可以固定不变 代码 ` package window; import java.awt.Color; import java.awt ...

  5. 整合 ucenter 注册自动激活

    http://my.oschina.net/banbo/blog/311691 应用整合 UCenter,同步注册到 Discuz 的用户,在 Discuz 登录时得手动激活,用户体验很不好,不过解决 ...

  6. cmder中文乱码、文字重叠等问题

    对于玩linux的同学来说,win7中的cmd弱爆了,今天我在微博中看到cmder这个工具,自己安装了,觉得不错,就此分享给大家 下载安装到这里http://bliker.github.io/cmde ...

  7. python实现简单的一个刷票点赞功能

    投票网址:http://best.zhaopin.com/?sid=121128100&site=sou 在以上网址中找到"XXX技术有限公司",通过Python进行刷票. ...

  8. POJ_2318_TOYS&&POJ_2398_Toy Storage_二分+判断直线和点的位置关系

    POJ_2318_TOYS&&POJ_2398_Toy Storage_二分+判断直线和点的位置 Description Calculate the number of toys th ...

  9. BZOJ_3685_普通van Emde Boas树_权值线段树

    BZOJ_3685_普通van Emde Boas树_权值线段树 Description 设计数据结构支持: 1 x  若x不存在,插入x 2 x  若x存在,删除x 3    输出当前最小值,若不存 ...

  10. Python爬虫入门教程 64-100 反爬教科书级别的网站-汽车之家，字体反爬之二

    说说这个网站 汽车之家,反爬神一般的存在,字体反爬的鼻祖网站,这个网站的开发团队,一定擅长前端吧,2019年4月19日开始写这篇博客,不保证这个代码可以存活到月底,希望后来爬虫coder,继续和汽车之 ...