1).块状元素:(div,p,form,ul,ol,li) ,独占一行,默认情况width为100%

2).行内块状元素:(span,img,a),不会独占一行,相邻的元素一直排在同一行,排满了才会换行,不受..top..bottom的影响

3).display:行内,块状元素设置

display:block; ----将该元素设置为块状元素

display:inline-block;----将该元素设置为行内块状元素

  

 

display:block 和display:inline-block的区别和用法的更多相关文章

  1. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  2. display:inline-block,block,inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  3. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline、block、inline-block三者之间的区别

    1. display:block就是将元素显示为块级元素. block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度:(<d ...

  6. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  7. CSS——display(Block none inline等)属性的用法

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

  8. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  9. block,inline,inline-block的区别

    block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...

  10. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. Android开启OTG功能/USB Host API功能

    Android USB 模式简介 设备模式 当计算机或其他USB主机需要连接安卓设备时,此时安卓设备是作为"USB设备"角色的,在计算机上显示为 USB 外设.现在的安卓设备已经被 ...

  2. ansible一键安装GreatSQL并构建MGR集群

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 利用ansible一键安装GreatSQL并完成MGR部署. 本次介绍如何利用ansible一键安装GreatSQL并完成 ...

  3. Docker 08 部署Elasticsearch

    参考源 https://www.bilibili.com/video/BV1og4y1q7M4?spm_id_from=333.999.0.0 https://www.bilibili.com/vid ...

  4. thinkphp 5 及一下或php项目里实现模糊查询

    想在thinkPHP或者PHP项目实现模糊查询怎么实现呢? 今天在网上搜了一下用 mysql里的 like 就可以实现 怎么用呢? 看代码: 错误用法: where('title','like',$s ...

  5. 将 Word 文本转换为表格

    文本转换为表格的功能,首先点击"插入"选项卡"表格"组中的"表格"下拉按钮,打开下拉列表中选择"文本转换成表格"选项.

  6. 如何使能512个virtio_blk设备

    一例virtio_blk设备中断占用分析 背景:这个是在客户的centos8.4的环境上复现的,dpu是目前很多 云服务器上的网卡标配了,在云豹的dpu产品测试中,dpu实现的virtio_blk 设 ...

  7. ipv6临时地址

    关闭ipv6临时地址 win+r输入cmd进入后输入代码 netsh interface ipv6 setprivacy state=disable 控制面板中找到网卡禁用后在启用 win+r输入cm ...

  8. 【MIDO】乐理基础 与 python - 从零开始到编写柱式和弦与分解和弦

    本篇文章从律学开始,从十二平均律出发,介绍一些基础必要的乐理知识,然后编写python文件,输出和弦音频文件. 乐理知识部分: 一.律学简述(temperament)   1.概论   律学,又称&q ...

  9. 【java】学习路径42-六种字符流使用实例

    第一种 OutputStreamWriter OutputStreamReader 第二种 FileWriter FileReader 第三种 BufferedWriter BufferedReade ...

  10. Jenkins+SpringCloud(多模块)+Vue项目详细配置

    一.Jenkins安装及所需插件安装 安装过程略. 我这用到工具包括JDK.Git.Maven.NodeJS:可以选择自行在服务器安装,也可以通过Jenkins自动安装,位置在系统管理 >全局工 ...