display: inline、block、inline-block的区别_reactnative display:inline-block-程序员宅基地

技术标签: html  

     display:block就是将元素显示为块级元素。

  block元素的特点是: 此元素将显示为块级元素,此元素前后带有换行符。
  高度,行高以及顶和底边距都可控制;
  宽度缺省是它的容器的100%,除非设定一个宽度
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

  display:inline 就是将元素显示为行内元素。

  inline元素的特点是: 默认。此元素会被显示为内联元素,元素前后没有换行符。和其他元素都在一行上;
  高度,行高及顶和底边距不可改变;
  宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

  inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:

  让一个inline元素从新行开始;
  让块元素和其他元素保持在一行上;
  控制inline元素的宽度(对导航条特别有用);
  控制inline元素的高度;
  无须设定宽度即可为一个块元素设定与文字同宽的背景色。

  display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

  inline-block的元素特点:行内块元素。

  将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

  并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38719039/article/details/81031723

智能推荐

交流电直流电转换图解-程序员宅基地

文章浏览阅读2.7k次,点赞5次,收藏11次。三步,降压+整流+滤波1. 首先降压交流电波形图, 其方向和大小都随时间变化,要得到直流电,要分两个步骤,统一方向,统一大小。2. 二极管整流但这样电流有太大损耗,可以用4个二极管做成桥式整流电路,得到如下波形图,电流方向得到统一,但电压大小还是波动的,要用电容器再次过滤3. 电容器滤波稳压电容滤波就是利..._直流电转交流电转换器符号

NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9802)-程序员宅基地

文章浏览阅读1.1k次。升级Xcode7以及以上后,出现 NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9802) 下面有两种方式解决: 一、在info.plist里面添加红色框框的内容即可: 二、在info.plist图形化界面显示如下(添加红色框框的内容):_kcfstreamerrordomainssl

chunk 15 [mini-css-extract-plugin],加载顺序错误导致的警告_error: chunk subpackages/sub-vendors [mini-css-ext-程序员宅基地

文章浏览阅读1.5k次。项目运行时,[mini-css-extract-plugin] 警告!注意看这两个文件,在项目中找到引用的位置,交换一下顺序,重新运行即可_error: chunk subpackages/sub-vendors [mini-css-extract-plugin]

MATLAB坐标轴不使用科学计数法_matlab坐标轴不用科学计数法-程序员宅基地

文章浏览阅读6.5k次,点赞7次,收藏12次。set(gca, 'xticklabel', get(gca, 'xtick'), 'yticklabel', get(gca, 'ytick'));_matlab坐标轴不用科学计数法

成为顶尖数据工程师的五种思维模式_数据工程思维-程序员宅基地

文章浏览阅读142次。《THe Effective Engineer》的作者Edmond Lau采访了很多硅谷顶级科技公司的顶尖软件工程师。他发现这些给世界带来巨大影响的的工程师们至少有以下5个共同的思维模式。看看你是否具备? 勇于去研究你不懂的代码一般人都不愿意去研究自己不曾接触过的代码,很多人都没有尝试就放弃了。如果你经常去研究你没有接触过的代码,你就会越来越熟悉不同的代码结构和设计模式。现在人们很..._数据工程思维

centos8 使用yum 安装 rabbitmq_error: unable to find a match: rabbitmq-server-程序员宅基地

文章浏览阅读1k次。centos8 使用yum 安装 rabbitmq(3.8.2版本)网上centos8的本来就不多,装起来也是各种坑,终于遇到一种简单粗暴的,特别好用,现记录一下1、进入/etc/yum.repos.d/ 文件夹cd /etc/yum.repos.d/2、新建rabbitmq-erlang.repo 并编辑文件vim rabbitmq-erlang.repo3、添加以下内容[rabb..._error: unable to find a match: rabbitmq-server

随便推点

normalize.js-程序员宅基地

文章浏览阅读659次。[code="java"]//>>excludeStart('excludeRequireCss', pragmas.excludeRequireCss)/* * css.normalize.js * * CSS Normalization * * CSS paths are normalized based on an optional basePath and the ..._normalize.js

Centos7 Failed to start xxx.service: Unit not found_failed to start apt-news.service: unit apt-news.se-程序员宅基地

文章浏览阅读1.5w次,点赞3次,收藏7次。Centos7 Failed to start xxx.service: Unit not found一、查看systemctl list-unit-files --type=service //查看服务列表我们先要通过这个命令去查看一下我们系统中是否有这个服务。二、重启在我们有这个服务的情况下,通过命令重启服务。systemctl daemon-reloadsystemctl start dhcpd.service..._failed to start apt-news.service: unit apt-news.service failed to load prope

Java使用C3P0连接池详解_java c3p0-程序员宅基地

文章浏览阅读5.2k次,点赞4次,收藏6次。什么是C3P0连接池:开源的JDBC连接池,C3P0连接池是在程序操作数据库之前预先根据配置文件创建一定数量的连接,当线程需要时直接取走,缩短了创建连接的时间,当使用完毕后,释放连接后放回连接池,以此类推,如果连接池中的连接使用完后,程序会根据配置文件配置的数据再次创建一批,使用完后放回连接池,并不是真正的关闭连接。C3P0和DHCP对比:DHCP没有自动回收空闲连接的功能C3P0有自动回收空闲连接功能C3P0连接池的重要性:在Java开发中连接数据库使用到的场景很多,一般我们在项目_java c3p0

2020最新前端面试题(一)_having count(1)=3-程序员宅基地

文章浏览阅读2.8k次,点赞8次,收藏18次。由于最近一直在忙,没有时间写博客,最近面试了多家公司这是其中一家的面试题分享给大家,其中有一些题目我也不会做,希望大家可以评论或者私信交流一下!1.下面代码执行后 dvar c=1,d=1;for(;c<3;c++){d+=++c;}d=3;2.请补充代码var a=[{x:1},{x:2},{x:3}];//1) 给a数组最前面插入{x:0}var a=[{x:1},{x:2},{x:3}];a.unshift({x:0});//2) 给a数组最后追加 {x:6}var a_having count(1)=3

java基础(数组、二维数组)_数组作为一个引用型的数据类型。对于数组a来说,a.length是数组a对象的一个属性。-程序员宅基地

文章浏览阅读178次。java之数组1.概括数组是存储同一种数据类型多个元素的集合,可以看作是一个容器。可以存储基本数据类型,也可以存储引用数据类型。换句话说,例如要定义100个变量并赋值,普通定义变量的方法太麻烦了,用数组轻松搞定。int [] arr=new arr[100]2.格式格式1: 数据类型[] 数组名;格式2: 数据类型 数组名[];3.数组的初始化在Java中,数组必须初始化才能赋..._数组作为一个引用型的数据类型。对于数组a来说,a.length是数组a对象的一个属性。

nginx --- http-stream-module_nginx stream模块下载-程序员宅基地

文章浏览阅读551次。在网上看到一个好东西,于是决定来使用以下。这个东西之所以好是因为,在自己的项目中尝试了关于sse的东西,可是sse本身就很难控制,加上uwsgi+nginx超时以后会继续占用服务器的线程,而我也搞不清楚服务器要怎么样才可以优雅的关闭连接,折腾了好久,打算直接用这个好用的工具了。安装# 克隆 http-stream-push 项目到本地git clone https://github..._nginx stream模块下载

推荐文章

热门文章

相关标签