彻底理解行内元素和块级元素，不必硬背

初窥门径：

什么叫行内元素？

常见的span、a、lable、strong、b等html标签都是行内元素

什么叫块级元素？

常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素

略知一二：

行内元素有：
a, span, label, strong, em, br, img, input, select, textarea, cite,
块级元素：
div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

粗通皮毛：

（行内元素）内联元素(inline element)

  • 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 - 下划线

  • var - 定义变量

块元素(block element)

  • 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 - 非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者行内元素。

  • applet - java applet

  • button - 按钮

  • del - 删除文本

  • iframe - inline frame

  • ins - 插入的文本

  • map - 图片区块(map)

  • object - object对象

  • script - 客户端脚本

驾轻就熟：

区别：

  1. 块级元素会独占一行，其宽度自动填满其父元素宽度
    行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

  2. 块级元素可以设置 width, height属性，【注意：块级元素即使设置了宽度，仍然是独占一行的】
    行内元素设置width, height无效;

  3. 块级元素可以设置margin 和 padding.
    行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

青出於蓝:

  • 行内元素与块级元素直观上的区别
    行内元素会在一条直线上排列，都是同一行的，水平方向排列
    块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

  • 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

  • 行内元素与块级元素属性的不同，主要是盒模型属性上
    行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

     display：inline 行内元素/内联元素
     display:block 块级元素
     display:inline-block 设置成行内块级元素。

行内块级元素:和其他元素同一行（行内元素特点），可以设置元素的宽高等（块级元素特点）；这样的元素有img input；它们为行内元素，但可以改变宽和高；
但我在我印象中，貌似没有默认样式是inline-block的元素。

融会贯通：

  • 行内元素属性
    1. 行内元素属性标签它和其它标签处在同一行内
    2. 行内元素属性标签无法设置宽度，高度 行高 距顶部距离 距底部距离
    3. 行内元素属性标签的宽度是直接由内部的文字或者图片等内容撑开的
    4. 行内元素属性标签内部不能嵌套行属性标签（a链接内不能嵌套其他链接）
  • 块级元素属性
    1. 每一个块级元素属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始（因为每一个块属性标签都会直接占据一整行的内容，导致下面的内容也只能从新的一行开始）
    2. 块级元素属性标签都是可以设置宽度、高度，行高，距顶部距离，距底部距离
    3. 块级元素属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%
    4. 块级元素属性标签是可以直接嵌套的
    5. p标签中不能嵌套div标签

出类拔萃：

  • CSS设置行内元素的
    • 水平居中
          div{text-align:center} /*DIV内的行内元素均会水平居中*/
    • 垂直居中
          div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/
  • CSS设置块级元素的
    - 水平居中
    div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度， 才能相当于DIV父容器水平居中*/
    - 垂直居中
    div{width:500px} /*DIV父容器设置宽度*/ div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度， 以达到相对于DIV父容器的水平居中效果*/

在以后的实际项目中，块级元素的垂直居中布局方式可能会碰到比这个更复杂, 会尝试用inline-block去解决问题，希望后续多多关注；另外推荐各位一本书肖志华《CSS核心技术详解》

返璞归真：

在标准文档流里面，块级元素具有以下特点：

① 总是在新行上开始，占据一整行；
② 高度，行高以及外边距和内边距都可控制；
③ 宽带始终是与浏览器宽度一样，与内容无关；
④ 它可以容纳内联元素和其他块元素。

行内元素的特点：

① 和其他元素都在一行上；
② 高，行高及外边距和内边距部分可改变；
③ 宽度只与内容有关；
④ 行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
posted @ 2017-07-26 07:56  逍遥超儿  阅读(17983)  评论(2)  编辑  收藏  举报