前端学习03

选择器

• 通用*

*{font-size:12px;}

• 标签
• id
• class
• 后代选择器/子选择器/并列选择器 and so on

元素分类

块级元素

• 设置 display:block 将元素显示为块级元素

• < div> 、< p>、< h1>、< form>、 < ul> 、 < li>

• 特点

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行（一个块级元素独占一行）
  • 元素的 高度、宽度、行高以及顶和底边距都可设置
  • 元素宽度在不设置的情况下，本身是父容器的100%

内联元素

• < span>、 < a> 、< label>、 < strong> 、< em>

• display:inline 设置为内联元素

• 特点

  • 和其它元素在一行
  • 元素的高度、宽度及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度
  • 内联元素之间有间隔，当作字体处理，有间隔

内联块级元素

• display:inline-block
• 总结：
  - 块级元素主要负责网站模块的重构工作
  - 内联元素主要负责网站模块中内容部分

盒模型

原理

• 内容（content）、填充（padding）、边框（border)、边界（margin)

特点

• 每个盒子都有 边界、边框、填充、内容四个属性
• 每个属性都包括：上、右、下、左
  
• 边界（外边界）margin：盒子和其它盒子之间的间隙，调整页面中模块与模块之间的间隙的时候用此属性
• 填充（内边距） padding：内容与边框之间的间隙
• border边框：通过调整宽高属性值再设置边框就能具体看到该模块大小
• margin 属性

10px	10px	10px	10px
上	右	下	左

10px	10px	10px
上	左右	下

10px	10px
上下	左右

10px

上右下左

总结：

• 移动盒子用 margin
• 移动内容用 padding
• 当margin不生效时，，，