三种元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素。

了解这三种元素的特性，才能熟练的进行页面布局。

块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

  • 支持全部的样式
  • 如果没有设置宽度，默认的宽度为父级宽度100%
  • 盒子占据一行、即使设置了宽度

内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

  • 支持部分样式（不支持宽、高、margin上下）
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子之间会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，它们在布局中表现的行为：

  • 支持全部样式
  • 如果没有设置宽高，宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式

元素之间的转换

display属性是用来设置元素的类型及隐藏的，常用的属性有：

  • none 元素隐藏且不占位置
  • block 元素以块元素显示
  • inline 元素以内联元素显示
  • inline-block 元素以内联块元素显示(CSS3已经禁用，不过可以生效)

通过hover可以实现常见的鼠标移入显示菜单效果

CSS 块元素、内联元素、内联块元素三者的区别与转换的更多相关文章

  1. JS中的块级作用域，var、let、const三者的区别

    1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } conso ...

  2. Css中的两个重要概念：块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  3. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  4. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  5. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  6. HTML元素被定义为块级元素或内联元素。那么什么是块级元素，什么是内联元素呢

    块级元素(block)特性: 块级元素在浏览器显示时,通常会以新行来开始(和结束). 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制;就像以前用到的 ...

  7. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  8. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  9. HTML的块状、内联、内联块状元素的特点

    元素分类及特点: 1.块级元素: 在html中<div>. <p>.<h1>.<form>.<ul> 和 <li>就是块级元素. ...

随机推荐

  1. Odoo 查看 模块app 对应的 源码 相关依赖模块信息

    安装好app后再路径上 加上debug ,在查看 app 信息 如下 http://127.0.0.1:8069/web?debug#id=138&view_type=form&mod ...

  2. Python递归爬取头条用户的所有文章、视频

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...

  3. lua学习之逻辑运算符not,and,or

    根据某度查询,lua中的逻辑运算符和其他高级语言大不相同,balabala.我们来看看 广大网友怎么说吧. 版本1: 版本2: 版本3:  揭晓答案: lua中的逻辑与或非与其他语言无差别,都是正常的 ...

  4. 快速搭建网站信息库（小型Zoomeye）

    前言:本来是不想重复造车轮的,网上资料有开源的fofa,和一些设计.有的架设太复杂了,好用东西不会用,整个毛线.还有的没有完整代码. 设计方案:    测试平台:windows    测试环境:php ...

  5. 【半译】在ASP.NET Core中创建内部使用作用域服务的Quartz.NET宿主服务

    在我的上一篇文章中,我展示了如何使用ASP.NET Core创建Quartz.NET托管服务并使用它来按计划运行后台任务.不幸的是,由于Quartz.NET API的工作方式,在Quartz作业中使用 ...

  6. 4. git log的常见用法

    git log ======见https://blog.csdn.net/daguanjia11/article/details/73823617 +++++++++++++++++++++++ 使用 ...

  7. 原子类的ABA问题

    原子类AtomicInteger的ABA问题 连环套路 从AtomicInteger引出下面的问题 CAS -> Unsafe -> CAS底层思想 -> ABA -> 原子引 ...

  8. 最新VMware虚拟机安装Linux系统-CentOS(详细教程)

    一.前言 最近有网友反应初学Linx不会安装,找了许多教程不是太全面,总会遇到一些要不是启动不了,要不是连不上网,各种问题,为了让大家能够顺利的安装,小乐写了一个非常详细的教程,让大家少入坑. 二.背 ...

  9. mybatis源码学习：基于动态代理实现查询全过程

    前文传送门: mybatis源码学习:从SqlSessionFactory到代理对象的生成 mybatis源码学习:一级缓存和二级缓存分析 下面这条语句,将会调用代理对象的方法,并执行查询过程,我们一 ...

  10. thinkphp5.0 url跳转

    <a href="{:url('member/index/index',['id'=>5])}">跳转</a> define()自定义常量在thiin ...