CSS元素|元素框

元素

元素是文档结构的根基，文档中的每个元素对文档的表现起一定的作用。CSS依赖元素，对CSS来说，元素通常有两种形式：置换元素和非置换元素；对于元素的显示方式，CSS把元素分为两种基本类型：块级元素和行内元素

置换元素|非置换元素

置换元素

置换元素内容的部分不由文档内容直接表示。可设置宽高

常见的置换元素：

• img 内容由文档之外的图像文件替换
• input 根据类型不同，可替换为单选按钮、复选框、文本输入框等内容

非置换元素

HTML大部分元素的内容由用户代理（一般是浏览器）在元素自身生成的框中显示。设置宽高无效

常见的非置换元素：

• p 段落
• h1-6 标题
• tr 单元格
• ul | ol | li 列表

display

• display-outside
  • block
  • inline
  • run-in
• display-inside
  • flow
  • flow-root
  • table
  • flex
  • grid
  • ruby
• display-listitem
  • list-item [display-outside] [flow | flow-root]
• display-internal
  • table-row-group
  • table-header-group
  • table-footer-group
  • table-row
  • table-cell
  • table-column-group
  • table-column
  • table-caption
  • ruby-base
  • ruby-text
  • ruby-base-container
  • ruby-text-container
• display-box
  • contents
  • none
• display-legacy
  • inline-block
  • inline-list-item
  • inline-table
  • inline-flex
  • inline-grid

元素框

• 常规流动（文档流） 传统的HTML采用的文本布局方式，从左至右，从上至下的顺序渲染。

• 脱离文档流：浮动、定位、弹性盒或栅格布局

• 块级框：段落、标题或div等元素生成的框，在常规流动模式下，块级框在框体前后都“换行”，块级框是纵向堆叠的。

  • display:block可以声明任何元素生成的框体变为块级框。
  • 盒子会换行
  • 设置width、height有效
  • 设置padding、margin、border会将其他元素从当前元素周围推开
  • 除非指定，标题和段落等标签默认是块级盒子

• 行内框：strong或span等元素生成的框。行内框前后不“换行”。

  • display:inline可以声明任何元素生成的框体变为行内框
  • 盒子不会换行
  • 设置width、heigh无效
  • 设置padding、border有效，垂直方向不会推开其他盒子，水平方向会推开其他盒子
  • 设置水平方向上的margin有效，会推开其他盒子；垂直方向上的margin无效
  • 除非指定，a、span、em、strong等标签默认是内联盒子

• 行内块级框：内部特征向块级框，外部特征像行内框。行内块级框的行为与置换元素相似，但不完全相同。

  • display:inline-block可以声明元素生成的框体变为行内块级框
  • 盒子不会换行
  • 设置width、height有效
  • 设置padding、margin、border会将其他元素从当前元素周围推开
    

改变的是元素的显示方式，而不是元素的本性

盒模型

组成部分

• content 显示内容，大小通过设置width和height
• padding 包围在内容区域外部的空白区域，大小通过padding相关属性设置
  • 内边距位于边框和内容区域之间，不能有负数量的内边距，必须是0或正值
  • 内边距用于将内容推离边框
  • padding：[top right bottom left] | [top bottom] [right left] | [top] [right] [bottom] [left] 一次控制一个元素所有内边距
• border 边框包裹内容和内边距，大小通过border相关属性设置
  • border：[border-width] [border-style] [border-color] | [border-width] [border-color] [border-style]
• margin 盒子和其他元素之间的空白区域，大小通过margin相关属性设置
  • 外边距属性值可正可负，设置负值会导致与其他内容重叠
  • margin：[top right bottom left] | [top bottom] [right left] | [top] [right] [bottom] [left] 一次控制一个元素所有边距
  • 外边距折叠，有两个外边距相接的元素，外边距将合并为一个外边距，取最大的单个外边距。

分类

标准盒模型

设置width和height，实际设置的是content，margin不计入实际大小，但会影响盒子在页面所占空间，影响的是盒子外部空间。

• 盒子的宽度 = width + padding-left + padding-right + border-left + border-right

  ​ = content + padding-left + padding-right + border-left + border-right

• 盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom

  ​ = content + padding-top + padding-bottom + border-top + border-bottom

IE盒模型

设置width和height，实际设置的是border和content，margin不计入实际大小，但会影响盒子在页面所占空间，影响的是盒子外部空间。

• 盒子的宽度 = width

  ​ = content + padding-left + padding-right + border-left + border-right

• 盒子的高度 = height

  ​ = content + padding-top + padding-bottom + border-top + border-bottom

盒模型转换

标准盒模型（默认）：

box-sizing:content-box

IE盒模型：

box-sizing:border-box