之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗。

这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么事块级元素:行级元素指标签不加其他css,两个标签是横向排列;块级元素指标签不加其他css,两个标签是纵向排列。

以下是一些常见的行及元素和块级元素:

行级元素(inline element)

   a - 锚点
  * em - 强调
  * i - 斜体
  * img - 图片
  * input - 输入框
  * label - 表格标签
  * select - 项目选择
  * span - 常用内联容器,定义文本内区块
  * strong - 粗体强调
  * sub - 下标
  * sup - 上标
  * textarea - 多行文本输入框

块级元素(block element)

  * div - 常用块级容易,也是css layout的主要标签
  * dl - 定义列表
  * form - 交互表单
  * h1 - 大标题
  * h2 - 副标题
  * h3 - 3级标题
  * h4 - 4级标题
  * h5 - 5级标题
  * h6 - 6级标题
  * hr - 水平分隔线
  * ol - 排序表单
  * p - 段落
  * table - 表格
  * ul - 非排序列表

块级元素,会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

当然元素的块级还是行级是可以通过本页面的css来修改,将display属性设置为“inline”元素就会变成行级元素,设置为“block”元素就会变成块级元素。

html行级元素和块级元素以及css转换的更多相关文章

  1. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  2. HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

    HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</titl ...

  3. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  4. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  5. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

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

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

  7. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  8. CSS中的行内元素和块级元素

    我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...

  9. 前端-CSS-7-标准文档流&行内元素和块级元素转换

    1.什么是标准文档流 <!--  什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流” 从上而下 ,像 “织毛衣” 而设计软件 ,想往哪里画东 ...

  10. 行内元素和块级元素的具体区别是什么?inline-block是什么?(面试题目)

    一,行内元素与块级元素的区别: 1.行内元素与块级元素直观上的区别二.行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列. 块级元素各占据一行 ...

随机推荐

  1. Apex语言(三)原始数据类型

    1.原始数据类型(Primitive) 整数:Integer 双精度:Double 单精度:Decimal 长整型:Long 日期:Date 日期时间:Datetime 字符串:String ID:I ...

  2. windows的时间同步工具:w32time

    windows 客户端 官方文档自己排查可以看一下 如何在 Windows Server 中配置权威时间服务器 Windows Time Service Technical Reference Win ...

  3. matlab读取mysql数据

    conn = database('ci_bootstrap_3','root','1q1q1q1q','com.mysql.jdbc.Driver','jdbc:mysql://localhost:3 ...

  4. HDU 5729 Rigid Frameworks (联通块计数问题)

    题目传送门 通过看题解画图可以发现: 不论怎么转,一列里的横边/一行里的竖边始终平行 当我们加固一个格子时,会让它所在的这一行的竖边和这一列的横边保证垂直 而我们的目标是求所有竖边和横边都保证垂直的方 ...

  5. Qt Quick编程(1)

    说道QML,不得不先说一下ECMAScript: ECMAScript语言的标准是由Netscape.Sun.微软.Borland等公司基于JavaScript和JScript锤炼.定义出来的. EC ...

  6. 利用Flask-SQLAlchemy提供的paginate()方法实现博客文章的分页显示

    在开发blog系统的时候,我们有一个需求,就是要显示作者已经发表的blog文章的列表,或显示作者关注者的文章列表.实现这个功能并不复杂,只需要在存储文章的数据库中过滤出指定作者的文章,然后渲染HTML ...

  7. java 反射之获取泛型对象的所有字段与对应的值(包括父类的)

    上代码: public static void main(String[] args) throws IntrospectionException { SysUser obj = new SysUse ...

  8. 洛谷 P2483 BZOJ 1975 [SDOI2010]魔法猪学院

    题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的学习之后,iPig对猪世界的世界本原有了很多的了解:众所周知,世界是由元素构成的:元素与 ...

  9. 2767 Proving Equivalences 至少加几条边让全部图变成强连通模板题

    #include<stdio.h> #include<string.h> #define N 21000 struct node { int u,v,next; }bian[N ...

  10. 如何预防SQL注入,XSS漏洞(spring,java)

    SQL注入简介 SQL注入是由于程序员对用户输入的参数没有做好校验,让不法分子钻了SQL的空子, 比如:我们一个登录界面,要求用户输入用户名和密码: 用户名: ' or 1=1-- 密码: 点击登录之 ...