块状元素和内联元素、盒子模型

div+css布局

• 表格布局 table布局
• div+css布局 浮动布局

块状元素和行内元素

• display: inline/block/none/inline-block

• 块状元素

  • 独占一行，总是在新行开始
  • 块状元素： 格式标签、列表标签、div、table、form、tr
  • 块状元素的内部可以嵌套其他元素

• 行内元素

  • 不会独占一行
  • 行内元素： 文本、span、a、img、td、input、select、textarea
  • 行内元素可以被当做文本处理 ， 文本属性会对行内元素生效
  • 行内元素一般不需要再嵌套其他元素
  • 行内设置设置 widht/height 不生效的，padding生效，margin只有左右两边生效

• 行内元素 块状元素 转换

  • display 值：block inline

• inline-block

  • 元素既有块状的特点，也有行内的特显
  • 可以设置 宽高，边距
  • 文本修饰可以对其起作用
  • 不会独占一行

盒子模型

• content 内容
• padding 填充 内边距 补白
• border 边框
• margin 外边距 外补白
• 盒子的实际大小 = 内容宽高+padding+border

Document树

• 父元素
• 子元素
• 后代元素
• 祖先元素
• 兄弟元素（具有相同父元素）

盒子 在标准文档流 中的点位原则

• 行内元素（水平方向的兄弟元素） 水平margin （两个兄弟元素之间的距离是margin之和）
• 块状元素 （margin塌陷） 上下兄弟元素的距离，margin比较大
• 给子元素设置margin-top，会作用在父元素上（margin塌陷）。 可以给父元素设置border，或者设置overflow

相关CSS属性

布局样式

• display: none/ block/ inline / inline-block
• position: static / relative / absolute / fixed

尺寸属性

• width
• max-width
• min-width
• height
• max-height
• min-height

内补白

• padding-left
• padding-right
• padding-top
• padding-bottom
• padding

外补白

• margin-left
• margin-right
• margin-top
• margin-bottom
• margin