原地址:http://www.studyofnet.com/news/398.html

本文导读:HTML中的元素可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素:显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行,如p,ul,form,div等标签元素。行内元素:元素在一行内水平排列,高度由元素的内容决定,height属性不起作用,如span,input等元素。

一、块级元素:block element

每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;

块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。

DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

二、行内元素:inline element

也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。

三、block(块)元素的特点

①、总是在新行上开始;

②、高度,行高以及外边距和内边距都可控制;

③、宽度缺省是它的容器的100%,除非设定一个宽度。

④、它可以容纳内联元素和其他块元素

四、inline元素的特点

①、和其他元素都在一行上;

②、高,行高及外边距和内边距不可改变;

③、宽度就是它的文字或图片的宽度,不可改变

④、内联元素只能容纳文本或者其他内联元素

对行内元素,需要注意如下

  • 设置宽度width 无效。
  • 设置高度height 无效,可以通过line-height来设置。
  • 设置margin 只有左右margin有效,上下无效。
  • 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

五、常见的块状元素

  • address – 地址
  • blockquote – 块引用
  • center – 举中对齐块
  • dir – 目录列表
  • div – 常用块级容易,也是CSS layout的主要标签
  • dl – 定义列表
  • fieldset – form控制组
  • form – 交互表单
  • h1 – 大标题
  • h2 – 副标题
  • h3 – 3级标题
  • h4 – 4级标题
  • h5 – 5级标题
  • h6 – 6级标题
  • hr – 水平分隔线
  • isindex – input prompt
  • menu – 菜单列表
  • noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
  • noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
  • ol – 有序表单
  • p – 段落
  • pre – 格式化文本
  • table – 表格
  • ul – 无序列表

六、常见的内联元素

  • a – 锚点
  • abbr – 缩写
  • acronym – 首字
  • b – 粗体(不推荐)
  • bdo – bidi override
  • big – 大字体
  • br – 换行
  • cite – 引用
  • code – 计算机代码(在引用源码的时候需要)
  • dfn – 定义字段
  • em – 强调
  • font – 字体设定(不推荐)
  • i – 斜体
  • img – 图片
  • input – 输入框
  • kbd – 定义键盘文本
  • label – 表格标签
  • q – 短引用
  • s – 中划线(不推荐)
  • samp – 定义范例计算机代码
  • select – 项目选择
  • small – 小字体文本
  • span – 常用内联容器,定义文本内区块
  • strike – 中划线
  • strong – 粗体强调
  • sub – 下标
  • sup – 上标
  • textarea – 多行文本输入框
  • tt – 电传文本
  • u – 下划线

七、行内元素与块级元素有什么不同?

区别一:

块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度

行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二:

块级:块级元素可以设置宽高

行内:行内元素不可以设置宽高

区别三:

块级:块级元素可以设置margin,padding

行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四:

块级:display:block;

行内:display:inline;

可以通过修改display属性来切换块级元素和行内元素

[转]CSS块级元素和行内元素的更多相关文章

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

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

  2. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  3. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

  4. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  5. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  6. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  8. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  9. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

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

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

随机推荐

  1. Java 简单图片截取

    package cn.byref.demo.image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import ...

  2. explicit修饰构造函数

    问题描述:对于单参数的构造函数C++允许隐含的类型转换,容易破坏代码可读性,并导致难以发现的错误,通过关键字explicit修饰构造函数可以禁止单参数构造函数创建隐式临时变量.

  3. Leetcode 509. Fibonacci Number

    class Solution(object): def fib(self, N): """ :type N: int :rtype: int ""&q ...

  4. 使用visio 2010建立sql server数据模型——手动画、利用逆向工程

    基础数据库这个词不在新鲜,老早就提出了.咱们从出生,个人信息就被放到一个基本信息库中了,在全国各地,通过身份证号就能知道你的基本信息.最近米老师 下发了一个任务,让我们开发几个小项目,考试系统.选修课 ...

  5. THUPC2017 小 L 的计算题

    求 $k=1,2,\cdots,n \space \space \sum\limits_{i=1}^n a_i^k$ $n \leq 2 \times 10^5$ sol: 时隔多年终于卡过去了 之前 ...

  6. UVA - 11925 Generating Permutations (思维,构造)

    给你一个长度为n(n<=300)的排列,有两种操作,第一种是交换前两个数,第二种是把第一个数放到最后,让你用不超过2n^2次的操作把一个初始为1-n升序的排列变为该排列. 一开始被紫薯蛋疼的翻译 ...

  7. C#托管代码、非托管代码及回收机制

    网上找了下相关文字,发现一些很不错的,转过来,方便以后查看 托管代码 托管代码就是Visual Basic .NET和C#编译器编译出来的代码.编译器把代码编译成中间语言(IL),而不是能直接在你的电 ...

  8. 洛谷 P1854 花店橱窗布置

    题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...

  9. Makefile中的路径

    使用 $(shell pwd) 可以在Makefile中指定为当前Makefile所在目录的路径

  10. java中List、Map、Set、Collection、Stack、Queue等的使用

    java中这几个东西是比较常用的,虽然我用的不多,也正是因为用的不多,所以我一直搞不清楚他们之间的具体用法以及相互之间的关系,现在特单独作为一个东西来总结一下. 本文参考一下资料: 1.<jav ...