• block元素的特点是:

  总是在新行上开始;
  高度,行高以及顶和底边距都可控制;
  宽度缺省是它的容器的100%,除非设定一个宽度
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

  • inline元素的特点是:

  和其他元素都在一行上;
  高,行高及顶和底边距不可改变;
  宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

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

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

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

  inline-block的元素特点:

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

block,inline,inline-block的更多相关文章

  1. block,inline和inline-block概念和区别

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

  2. block、inline、inline-block

    block: block - 块级元素 常见的块级元素包括:div,form,p,table,ul,ol,dl,h1~h6,pre block 可以包含 inlne 和 block 和 inline- ...

  3. block,inline和inlinke-block细节对比

    block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...

  4. display:inline、block、inline-block的区别

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

  5. block,inline和inline-block概念和区别(转)

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

  6. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

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

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

  8. block,inline和inline-block对比

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

  9. display:inline、block、inline-block 的区别

    一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...

  10. CSS 概念 Block Inline Containing block

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

随机推荐

  1. 判断浏览器IE6

    <!--[if lte IE 6]><LINK rel="stylesheet" type="text/css" href="ima ...

  2. git基础命令

     git pull 更新git status 查看文件状态git add .添加所有git commit -a -m "xxxx" 提交git push 推送至服务器git dif ...

  3. 使用委托解决"线程间操作无效: 从不是创建控件“textBox1”的线程访问它" 问题

    在winform编程中常遇到此类问题,造成辅助线程无法给控件赋值 //定义委托 private delegate void SetTextCallback(string text); //在给text ...

  4. std::map的insert和下标[]访问

    在map中插入元素 改变map中的条目非常简单,因为map类已经对[]操作符进行了重载 enumMap[1] = "One";enumMap[2] = "Two" ...

  5. Oracle 修改密码 解锁

    1.怎么修改oracle用户密码 在以SYSDBA身份登陆时可以修改其他用户的密码,比如: SQL> alter user 用户名 identified by 新密码; 用户已更改. 这个是把U ...

  6. android Xml生成一条细线,以及获取屏幕宽度和高度

    <View android:layout_width="match_parent" android:layout_height="2dip" androi ...

  7. Eclipse图标含义

    学习了这么久,之前也没注意,这次在csdn找个了文章,记录一下: Eclipse的Package Explorer中用图标表示了很多内容,刚刚开始接触Eclipse时对这些图标表示的内容并不清楚,而且 ...

  8. MEMS开关

    MEMS器件在射频比如无线通信上有很好的应用.RF MEMS谐振器和诱导器品质因子在微波上有大幅度提高.MEMS开关极大地改进了高频性能和降低了能耗.本篇概要介绍MEMS开关. 自从1979年彼特森( ...

  9. haproxy hdr和path

    path : string This extracts the request's URL path, which starts at the first slash and ends before ...

  10. 网页前台的iframe控制内部刷新子页

    <body> <!--Header--> <uc1:top runat="server" ID="top" /> <! ...