Web前端基础Day07

这是一个关于Web前端基础Day07的思维导图，包含CSS定位、 CSS 透明、CSS块级格式化【笔试题】等。

Day07

• CSS定位
  • 1.1、定位的作用
    • 普通文档流中块元素垂直排列，行内元素水平排列。
    • 浮动可以实现多个块级盒子在一行无缝排列显示。
    • 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）。
  • 1.2、定位的实现
    • 使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置。
    • 定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。
    • 边偏移定位元素的位置，使用 top 、 right 、 bottom 和 left 来描述。
    • 通常水平位置通过left或right控制，垂直位置通过top或bottom控制。
    • 位置属性 left：设置距离包含块左侧的距离 right：设置距离包含块右侧的距离 top：设置距离包含块顶部的距离 bottom：设置距离包含块底部的距离
      • 取值 长度值：px/em等 百分比：相对于包含块计算 auto 默认值 允许使用负值
  • 1.3、定位模式详解
    • 1.3.1、相对定位：position:relative; 相对于自己原来所在的位置进行定位的
      • 1.3.1.1、基础特性
        • 不脱离文档流
        • 提升元素层级
        • 不定义偏移量时对元素基本没有影响
      • 1.3.1.2、应用场景
        • 通常作为定位父级配合绝对定位使用
    • 1.3.2、绝对定位：position:absolute; 相对于离自己最近的定位父元素来进行定位（偏移量是相对于定位父元素的padding区域开始），如果没有定位父元素会一直往上寻找，直到html为止
      • 1.3.2.1、基础特性
        • 脱离文档流
        • 提升元素层级
      • 1.3.2.2、应用场景
        • 通常配合绝对定位使用（父相子绝）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等。
    • 1.3.3、固定定位：position:fixed 相对于浏览器窗口进行定位的;
      • 1.3.3.1、基础特性总结
        • 脱离文档流
        • 提升元素层级
      • 1.3.3.2、应用场景
        • 相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏。
    • 1.3.4、静态定位：position:static;
      • 1.3.4.1、基础特性总结
        • 静态定位的元素不会受到 top， bottom，left，right影响
      • 1.3.4.2、应用场景
        • 常用于重置定位属性
  • 1.4、定位元素的层级顺序
    • 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面）。
    • 取值
      • auto(默认值) 堆叠顺序与父元素相等
      • 数值：拥有更高堆叠顺序（数值越大）的元素总是会处于堆叠顺序较低的元素的前面
    • 总结
      • 普通层，浮动层，定位层覆盖关系总结
      • 提示：从父原则
  • 1.5、实现盒子居中的方法
    • 方法一： 实现思路：margin负值配合百分比。
      • 子绝父相                子元素top:50%;left:50% 子元素margin-top:-自身高度的一半;margin-left:-自身宽度的一半;
    • 方法二： 实现思路：left，right，top，bottom并用，配合margin：auto。
  • 1.6、定位对元素的影响
    • 相对定位基本不改变元素本身的特性
    • 绝对、固定定位
      • 脱离文档流
      • 提升元素层级
      • 未定宽度的块元素适应内容
      • 使行内元素生成块级框
      • 对浮动高度塌陷问题，margin值叠加问题的不同表现
    • 注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置
  • 1.7、定位与浮动的区别对比
    • 1.7.1、使元素脱离文档流的属性
      • float:left | right
      • postion:absolute | fixed
    • 1.7.2、表现上的区别
      • 浮动元素：
        • 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本、图片、表单标签依然会 为这个元素让出位置，环绕在周围
      • 定位元素：
        • 使用position脱离文档流的元素，其他盒子完全无视它，包括元素内部的文本、图片、表单标签
      • 总结：
        • 不同点：浮动脱离文档流，不脱离文本流，定位元素既脱离文档流，又脱离文本流
        • 相同点：宽高默认由内容撑开，生成块级框（可以设置width和height及所有盒模型属性等）
• 2、CSS 透明
  • 2.1、rgba()
    • 语法：rgba(r,g,b,a) 说明：r表示red,g表示green,b表示blue,a表示alpha透明度 取值：r,g,b取值范围 0-255 a透明度，取值0-1 使用说明：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。 兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持
  • 2.2、opacity
    • 语法：opacity:0.5 取值：0-1，0表示全透明，1表示全不透明，0-1之间表示半透明 使用说明：设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度 兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持h
  • 2.3、IE专属滤镜
    • 语法：filter:Alpha(opacity=x) 取值：x取值0-100 兼容性：仅支持IE6、7、8、9，在IE10版本被废除 注意：在IE6、7、8中，设置了filter:Alpha的元素，其子元素为【相对定位】，可让子元素不透明
• 3、CSS块级格式化【笔试题】
  • 3.1、概念
    • BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式——直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
  • 3.2、生成BFC的条件
    • 根元素 float:left | right;
    • position:absolute | fixed;
    • display为inline-block等
    • overflow:auto | hidden | scroll;
  • 3.3、BFC渲染规则（特性）
    • 内部的Box会在垂直方向，一个接一个地放置
    • Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
    • 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
    • BFC的区域不会与float box重叠 BFC特性5：BFC区域不会与浮动区域发生重叠
    • 计算BFC的高度时，浮动元素也参与计算
  • 3.4、BFC解决的问题
    • 清除浮动：清浮动的原理：利用的是BFC特性6：计算BFC区域高度时，浮动子元素也参与计算 解决：让父元素生成一个BFC就可以让浮动子元素参与高度计算，就可以让父元素有高度了
    • 防止margin重叠 ：外边距塌陷的原因： BFC特性2：垂直方向上的外边距是由margin决定的，属于同一个BFC区域的margin会发生重叠 解决： 让两个兄弟元素不处于同一个BFC区域就可以了-----让某一个兄弟元素生成一个新的BFC
    • 避免文字环绕
    • 自适应两栏布局
    • 根据特性5可以实现自适应两栏或者三栏布局 两栏： 以左侧固定宽度，右侧宽度自适应为例，步骤如下： 给左侧盒子设置固定的宽度 给左侧盒子左浮动 右侧盒子overflow:hidden | auto | scroll，右侧盒子会生成一个BFC区域，就不会与浮动区域发生重叠了