第二十天学习：额外的规则+CSS定位功能

关键字：额外的规则+CSS定位功能

学习计划：

• 额外的规则
  • @import规则
  • @charset规则
  • ！import规则
• CSS定位功能
  • 普通流
  • position特性
  • 框偏移量特性
  • 相对定位
  • 绝对定位
  • z-index特性
  • 使用float特性浮动
  • clear特性

学习记录：

• 额外的规则
  • @import规则
    • 可用于从另一个样式表中导入样式，它应当出现在样式表的起始位置以及任何规则之前，并且它的值是一个url
    • 编写方式
      • @import “mystyle.css”
      • @import url（“mystyle.css”）
    • @import规则的重要性在于，它能够使开发人员以模块化的方法开发样式表，开发人员可以为站点的不同方面创建独立的样式表
  • @charset规则
    • 指示样式表所使用的字符集
    • 规则必须出现在样式表的起始位置，在它的前面甚至不能出现空格，它的值位于双引号中。
  • ！import规则
    • 表明重写站点中关于该特性的样式表
• CSS定位功能
  • 控制元素的内容出现在页面中的位置，方式是指定将框定位在页面中的哪个位置
  • 普通流
    • 默认情况下，通过使用称为普通流的技术在页面中布局元素，页面中的块级元素从上往下排列（记住，每一个块级元素将出现在一个新行中），而内联元素从左到右排列（因为他们不需要从新行开始）
  • position特性
    • 规定元素的定位类型
    • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移
    • 可能的值：
      • static：默认值，没有定位，与普通流相同，因此很少看到指定该值
      • absolute：生成绝对定位元素，相对于static定位以外的第一个父元素进行定位，元素位置通过“left、top、right、bottom”属性进行规定
      • fixed：生成绝对定位元素，相对于浏览器窗口进行定位，元素位置通过“left、top、right、bottom”属性进行规定，位置充一个固定点开始计算：对于浏览器，这个点是浏览器窗口的左上角，如果用户滚动窗口，不会改变该位置
      • relative：生成相对定位元素，相对于其正常位置进行定位，因此“left：20”会向元素的left位置添加20像素
  • 框偏移量特性
    • 当框具有一个position特性并且该特性的值是relative、absolute或fixed时，则将同时使用框偏移特性来指示这些框的位置
    • 特性：
      • top：偏移位置从包含它的元素的顶部开始
      • right：偏移位置从包含它的元素的右边开始
      • bottom：偏移位置从包含它的元素的底部开始
      • left：偏移位置从包含它的元素的左边开始
    • 每一个特性都可以采用长度、百分比或者auto值。相对单位（包括百分比）通常以相对于包含它的框的面积或者特性进行计算。
  • 相对定位
    • 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为未定位前的形状，它原本所占的空间仍保留
    • 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
    • 
  • 绝对定位
    • 设置为绝对定位的元素从文档流完全删除，并对于其包含块定位，包含块可能是文档中另一个元素或者是当初包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素不存在一样。元素定位后生成一个块级框，而不论原来它在正常正常流中生成何种类型的框。
    • 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
    • 
  • z-index特性
    • 绝对定位元素具有重叠其他元素的趋势。当发生重叠时，默认的处理方式是第一个元素位于后面元素的下方，这称为堆叠上下文。
    • 如果具有一些绝对定位或者相对定位的框，可以使用z-index特性修改堆叠上下文来控制哪些框出现在上方。如果熟悉图形设计程序包，则堆叠上下文类似于使用“带到顶部”和“发送到底部”功能
    • z-index特性的值是一个数值，数值越大，则元素的显示就会越接近顶部
  • 使用float特性浮动
    • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动的边框为止。
    • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
    • 
    • 
    • 通过float属性实现元素的浮动
    • 可能的值：
      • left：框浮动在包含元素的左边，而包含元素的内容将流动到它的右边
      • right：框浮动在包含元素的右边，而包含元素的内容将流动到它的左边
      • none：框不浮动，将位于其在普通流中的位置处
    • 指定folat特性之后，也必须设置width特性，用于指示浮动框占用包含匡的宽度，否则，浮动框将自动占用100%的包含框宽度，不为环绕它的其他内容留下任何空间，从而使其类似于块级元素
  • clear特性
    • 规定元素的哪一侧不允许其他浮动元素
    • 可能的值：
      • left：在左侧不允许浮动元素
      • right：在右侧不允许浮动元素
      • both：在左右两侧均不允许浮动元素
      • none：默认值，允许浮动元素出现在两侧

扩展阅读：

问题的记录与解答：

• 绝对定位和相对定位的区别：
  • 绝对定位使元素的位置与文档流无关，因此不占据空间。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置
  • 相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块