html各种元素特性笔记（块级，行内，可变，不可变，等等）

元荣
415 阅读3分钟

块级元素

  1. 元素前后带有换行符，此元素总是单独占据一行；
  2. 宽度缺省是它的容器的100%；
  3. 可以设置width，height属性;(注意：块级元素即使设置了宽度，仍然是独占一行的)；
  4. 可以设置margin和padding；
  5. 块级元素只能出现在body元素内；
  6. 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

行内元素

  1. 元素前后没有换行符，和其他元素都在一行上；
  2. 设置width，height无效。（可以使用css将元素变为块级元素，设置宽高）；
  3. 宽度就是元素内文字或图片的宽度；
  4. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果（水平方向有效，竖直方向无效）；
  5. 行内元素只能包含文本或者其他行内元素。

行内块元素

  1. 和相邻行内元素在同一行，但是之间会有空白缝隙。
  2. 默认宽度是他本身内容的宽度。
  3. 宽度、高度、行高、外边距以及内边距都可以手动设置。

空元素

不存在子节点的元素。

不可替换元素

  • (X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端(例如浏览器)
  • 如：<h1>我是标题</h1>

可替换元素

  • 浏览器根据元素的标签和属性，来决定元素的具体显示内容
  • 例如浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据 <input> 标签的type属性来决定是显示输入框，还是单选按钮等
  • (X)HTML中的 <img>、<input>、<textarea>、<select>、<object> 都是替换元素。这些元素往往没有实际的内容，即是一个空元素
  • 如：<img src="tigger.jpg"/>、<input type="submit" name="Submit" value="提交"/>
  • 可替换元素的性质同设置了display:inline-block的元素一致

特殊的可替换元素

  • <img>属于可替换元素

  • <img>同时具有行内元素，行内块，和块级元素的特性

  • 替换元素一般有内在尺寸，所以具有 width 和 height，可以设定

    • 例如你不指定 <img> 的 width 和 height 时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度

  • 对于表单元素，浏览器也有默认的样式，包括宽度和高度

  • <img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

以上引用：

avatar
文章
阅读
粉丝