三种元素

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

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

块元素

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

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

内联元素

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

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

内联块元素

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

  • 支持全部样式
  • 如果没有设置宽高,宽高由内容决定
  • 盒子并在一行
  • 代码换行,盒子会产生间距
  • 子元素是内联块元素,父元素可以用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. split(resource,limit) 中limit 的含义

    limit 参数控制模式应用的次数,因此影响结果数组的长度.如果该限制 n 大于 0,则模式将被最多应用 n - 1 次,数组的长度将不会大于 n,而且数组的最后项将包含超出最后匹配的定界符的所有输入 ...

  2. Java程序员必备:序列化全方位解析

    前言 相信大家日常开发中,经常看到Java对象"implements Serializable".那么,它到底有什么用呢?本文从以下几个角度来解析序列这一块知识点~ 什么是Java ...

  3. Qt发送一次信号触发两次槽函数的原因

    在手动为控件编写槽函数的时候,如果将槽函数名字按如下格式编辑,则不需要再次进行手动关联 void on_pushButton_1_clicked(); void on_radioButton_clic ...

  4. 技术债务(Technical debt)的产生原因及衡量解决

    第一次发布代码,就好比借了一笔钱.只要通过不断重写来偿还债务,小额负债可以加速开发.但久未偿还债务会引发危险.复用马马虎虎的代码,类似于负债的利息.整个部门有可能因为松散的实现,不完全的面向对象的设计 ...

  5. GeoGebra的一些指令名字

    列举出老师上课提出的一些命令 比较不常见的命令 1.取得函数上一点的坐标值x(A).y(A).z(A) 2.复数指令real() imaginary() 复数中的虚数应该使用Alt+i打出 点的表示指 ...

  6. cheat sheet 简介

    cheat sheet 速查表 /小抄 如果期末考试老师只让你让带一张A4纸,合法"作弊",纸上能写多少全凭自己本事,你会写什么?大部分人应该把整个课程的知识重点梳理一遍,方便记忆 ...

  7. First Training

    B B - Local Extrema CodeForces - 888A You are given an array a. Some element of this array ai is a l ...

  8. SQL Server 之T-SQL基本语句 (3)

    继续来用例子总结sql基本语句用法. 在这里在建一个表:课 课程名 上课时间 数学 周一 数学 周二 数学 周三 语文 周一 语文 周二 英语 周一 数据分组:GROUP  BY select  课程 ...

  9. Java中BigDecimal类

    由于在运算的时候,float类型和double很容易丢失精度,演示案例,所以,为了能精确地表示.计算浮点数,Java提供了BIgDecimal BigDecimal类的概述 不可变的.任意精度的有符号 ...

  10. 【认证与授权】Spring Security的授权流程

    上一篇我们简单的分析了一下认证流程,通过程序的启动加载了各类的配置信息.接下来我们一起来看一下授权流程,争取完成和前面简单的web基于sessin的认证方式一致.由于在授权过程中,我们预先会给用于设置 ...