HTML中块级元素(block)和行级元素(inline)；比如div就是常见的块级元素，span就是常见的行级元素。

　　可以通过css的display属性来设置一个元素到底是块级，还是行级元素；display:block将元素设置成块级的，display:inline将元素设置成行级的。

　　span的实际显示宽度和高度由其内容决定。

一、display:block的特点

　　1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
　　2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
　　3、block元素可以设置margin和padding属性。

二、display:inline的特点

　　1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
　　2、inline元素设置width,height属性无效。
　　3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, 　　margin-bottom不会产生边距效果。

三、display:inline-block的特点

　　1、让行内块可以设置宽度高度。

　　span是行级元素，所以不能设置其宽度和高度；如果将span设置成block，那么又会自动换行。怎么让多个span在同一行显示，而且能够固定宽度呢？这就需要用到display:inline-block了。

例子：

<head>

     <style>

         span{

            background-color:#43be60;

            width:100px;

            height:50px;

            margin-top:20px;

            margin-left:20px;

            display:inline-block;

         }

     </style>

</head>  

<body>

    <div style="background-color:#ededed;width:400px;height:400px;">

         <span>1</span>

         <span>10</span>

         <span>100</span>

         <span>1000</span>

    </div>

</body>

CSS 基础 例子 display属性：block、inline和inline-block的区别的更多相关文章

  1. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  3. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  4. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  5. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  6. HTML&CSS基础-标签的属性

    HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...

  7. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  8. CSS基础-行快属性，hover

    CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可 ...

  9. CSS visibility与display 属性

    所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...

随机推荐

  1. POJ3621或洛谷2868 [USACO07DEC]观光奶牛Sightseeing Cows

    一道\(0/1\)分数规划+负环 POJ原题链接 洛谷原题链接 显然是\(0/1\)分数规划问题. 二分答案,设二分值为\(mid\). 然后对二分进行判断,我们建立新图,没有点权,设当前有向边为\( ...

  2. Data Dictionary 数据字典

    数据字典是一种通用的程序设计方法.可以认为,不论什么程序,都是为了处理一定的主体,这里的主体可能是人员.商品(超子).网页.接口.数据库表.甚至需求分析等等.当主体有很多的属性,每种属性有很多的取值, ...

  3. Laravel自定义Api接口全局异常处理

    在做API时,需要对一些异常进行全局处理,比如添加用户执行失败时,需要返回错误信息 // 添加用户 www.bcty365.com $result = User::add($user); if(emp ...

  4. mybatis 插入数据并返回主键值

    <insert id="insert" parameterType="com.pojo.TSubject" useGeneratedKeys=" ...

  5. Spring Boot学习笔记：ApplicationEvent和ApplicationEventListener事件监听

    采用事件监听的好处 以用户注册的业务逻辑为例,用户在填写完信息表单后,提交信息到后台,后台对用户信息进行处理,然后给用户返回处理结果的信息. 如上图所示,用户在注册时,后台需要处理一些系列流程,实际业 ...

  6. python3版本main.py执行产生中间__pycache__详解

    __pycache__ 用python编写好一个工程,在第一次运行后,总会发现工程根目录下生成了一个__pycache__文件夹,里面是和py文件同名的各种 *.pyc 或者 *.pyo 文件. 先大 ...

  7. 【轻松前端之旅】<!DOCTYPE>标签

    前端学习,先学习HTML,CSS,Javascript HTML - HyperText Markup Language HTML-超文本标记语言,提供了一种标记网页内容的方法. 浏览器怎么知道如何显 ...

  8. js网页上画图

    保存 1.d3.js  (http://www.d3.org/)使用svg技术,展示大数据量,动态效果很好,但是API暴露的不好,得靠自己摸索. 2.http://raphaeljs.com/refe ...

  9. 在 Anaconda下解决国内安装tensorflow等下载慢和中断，出错，异常问题的一点思路

    把镜像地址改为清华大学开源软件镜像站,打开 管理员身份打开cmd 输入conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/ ...

  10. 2019.01.22 zoj3583 Simple Path（并查集+枚举）

    传送门 题意简述:给出一张图问不在从sss到ttt所有简单路径上的点数. 思路: 枚举删去每个点然后把整张图用并查集处理一下,同时不跟sss和ttt在同一个连通块的点就是满足要求的点(被删去的不算). ...