块元素

什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素显示为块级元素.如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点.

块级元素特点:

1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.

2.元素的高度,宽度,行高以及顶和底边距都可设置.

3.元素宽度在不设置的情况下,是它本身你窗口的100%(和你元素的宽度一致),除非设定一个宽度.

内联元素

在html中,<span><a><label><strong><em>就是典型的内联元素(inline)元素.当然块状元素也可以通过代码display:inline将元素设置为内联元素.从而使div元素具有内联元素特点.

内联元素特点:

1.和其他元素都在一行上;

2.元素的高度,宽度及顶部和底部边距不可设置.

3.元素的宽度就是它包含的文字或图片的宽度,不可改变.

内联块状元素

内联块状元素(inline-block)就是同时具备内联元素,块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素.<img><input>标签就是这种内联块状标签.

inline-block元素特点:

1,和其他元素都在一行上;

2.元素的高度,宽度,行高以及顶和底边距都可设置.

css块级元素,内联元素,内联块状元素的更多相关文章

  1. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

  2. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

  3. 02 CSS块级元素和行内元素

    02 CSS块级元素和行内元素 划分依据:根据标签内部可以存放的元素内容不同进行划分,它与CSS样式无关. 要先了解这个 得先了解 什么是容器级别的标签和文本级? 容器级标签 什么是容器级标签? 内部 ...

  4. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  5. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  6. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  7. CSS 块级元素、内联元素概念

    p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...

  8. CSS块级元素、内联元素概念[转]

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  9. CSS块级-内联元素,盒子模型

    CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...

  10. 什么是css块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),文档流这个概念理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 文档流 将窗体自上而下分成一行行, ...

随机推荐

  1. XtraReport 添加空行的办法,很详细

    这两天为了做报表,研究了一下XtraReport .为了添加空行,想了很多办法.其中如果有分组时,网上给出的办法就会失败.现将经验公布一下,希望各位都能少走弯路. 1.加入自定义函数CreateCel ...

  2. as3自定义事件

    package EventPackage { import flash.events.Event; /** * * @author tqr <br /> * 创建时间:2015-2-6 下 ...

  3. RedHat 6.7 Enterprise x64环境下使用RHCS部署Oracle 11g R2双机双实例HA

     环境 软硬件环境 硬件环境: 浪潮英信服务器NF570M3两台,华为OceanStor 18500存储一台,以太网交换机两台,光纤交换机两台. 软件环境: 操作系统:Redhat Enterpris ...

  4. 记录容易忘记的知识点(html 内容)

    <xx 表文件名> 导入外部样式表 <link type="text/css" rel="stylesheet" href="xx. ...

  5. MAC 安装j2ee.sh的办法

    It says it needs the DISPLAY variable set - what do I need to set it to? Instead of saying: ./java_e ...

  6. 安装swoole 扩展,在phpinfo中显示,但是php -m 中不显示的问题

    步骤如下: 1 首先找到php.ini的目录:linux命令:find / -name php.ini 我的路径如下:

  7. 2、C语言关键字-auto register static

    文件限定符的作用: 1.auto : 局部变量,修饰的变量在栈中定义.动态内存,随着函数的结束,变量占用的内存空间也随之释放. 2.register : 寄存器变量,请求编译器将此变量存于cpu寄存器 ...

  8. 使用swfobject.js时样式及传参的问题

    swfobject.js 最近需要在项目中引入swf文件. 最初的写法: <div id="recorderDiv"> <object id="reco ...

  9. Intelij IDEA 2016.3安装mybatis插件并激活教程

    转载自:http://blog.csdn.net/solo_talk/article/details/53540449 现在Mybatis框架越来越受欢迎,Intelij IDEA这个编辑器逐渐成为很 ...

  10. java学习教程

    java依然是目前比较流行的语言.虽然,本人是C#开发者,但是由于公司决定使用java开发,所以只好开始学习java.在学校时候只是接触过没有过深的学习过,而且参加工作后基本也一直在搞C#.好在,现在 ...