block，inline和inlinke-block细节对比

  • 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. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

block，inline和inlinke-block细节对比的更多相关文章

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

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

  2. dispay属性的block,inline,inline-block

    转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...

  3. display：block;inline;inline-block大总结

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

  4. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  5. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  6. block, inline和inline-block的区别

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

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

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

  8. div横排放置对齐问题；block,inline,inline-block区别

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...

  9. block inline 和 inline-block

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

随机推荐

  1. 相机拍的图，电脑上画的图，word里的文字，电脑屏幕，手机屏幕，相机屏幕显示大小一切的一切都搞明白了！

    相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片14 ...

  2. linux下JsonServer启动

    1:进入到JsonServer run.sh目录下; 2:执行"export PATH=.:$PATH"; 3:执行"run.sh start"; 这样便把Js ...

  3. Best Part

  4. vim如何配置go语言环境

    go语言没有如source insight般优秀的编辑器,试用了多种,vim算最好的,其次可以用liteide(有反查变量函数引用点.修改行变色功能),两者可配合使用. 更新:最好的是idea+go插 ...

  5. AutoHotkey 使用笔记

    注意事项 为了支持中文需安装 AutoHotkey_L Notepad2对ahk代码高亮和折叠支持良好,SciTE则能够提供输入提示 绿色版*.ahk关联AutoHotkey.exe就能双击运行 Au ...

  6. windows+caffe(五)——实例2MNIST图片

    1. 数据集 MNIST手写体数据.bmp图片:训练集60K张28*28的,测试集10K张28*28的: 训练集: 测试集: 下载地址: 2. 读取图片名称与标签,保存到trainlist.txt与t ...

  7. java 中MAP的按照进入顺序遍历与无序遍历

    public static void main(String[] args) { Map<String,String> map=new HashMap<String,String&g ...

  8. ORACLE表的恢复

         对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: 1.从flash back里查询被删除的表     select * from ...

  9. Git使用指南（2）——工作区，暂存区，版本库

    1 工作区修改添加到暂存区 git add 2 暂存区提交到版本库 git commit 3 版本库更新到暂存区 git reset HEAD 4 删除暂存区文件 git rm --cached< ...

  10. SunRay4(新蕾4) 定时自动关机方案, Linux后台自动任务crontab实践

    目录: 需求和思路分析 具体实现步骤 理解Crontab Crontab具体参数详细说明 最近碰到一个想要实现定时自动关机的功能,关机的指令无非就是: shutdown -h time 调用openw ...