元素关系

元素关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

元素属性

行内元素

  1. 行内元素会在一条直线上排列，在同一行从左至右水平排列。直到一行排不下，才会换行
  2. 行内元素设置宽、高、margin上下、padding上下无效（竖直无效）
  3. 行内元素设置line-height，margin左右、padding左右有效（水平有效）
  4. 行内元素的宽高随标签里的内容而变化

行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示

总的来说，行内元素一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他行内元素，通常被包括在块元素中使用

常见内联元素有“a、b、br” 等

块元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%

块级元素的宽度是 100%，在浏览器中默认独占一行

块级元素内部可以嵌套块级元素或行内元素

行内块元素

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素

和其他行内或行内块级元素元素放置在同一行上

元素的高度、宽度、行高以及顶和底边距都可设置

替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容

替换元素是其内容不受CSS视觉格式化模型控制的元素，例如img标签，嵌入的文档（iframe之类）或者applet，这些叫做替换元素

比如img元素通过src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，却看不到图片的实际内容，而且img元素的内容通常会被src属性指定的图像替换掉

例如input元素的type属性决定是显示输入框，还是单选按钮等

转换元素（此过程需用CSS进行转换）

CSS属性 效果
display：block 定义元素为块级元素
display : inline 定义元素为行内元素
display：inline-block 定义元素为行内块级元素