CSS学习笔记（七）

发表于 更新于 分类于 阅读次数： 本文字数： 2.8k 阅读时长 ≈ 3 分钟
创建BFC的情况,BFC的作用,DPR,PPI,媒体查询

创建BFC的情况

  • 根元素(<html>)
  • 浮动元素（元素的 float不是none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素（(元素的display 为inline-block)
  • 表格单元格(元素的display为 table-cell，HTML表格单元格默认为该值)，表格标题(元素的 display 为 table-caption，HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的display 为 table、table-row、table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot 的默认属性)或inline-table)
  • overflow计算值(Computed)不为 visible的块元素
  • 弹性元素(display为flex或inline-flex元素的直接子元素)
  • 网格元素(display为grid或inline-grid元素的直接子元素)
  • display值为flow-root的元素

BFC的作用

  • 在BFC中，box会在垂直方向上一个挨着一个的排布;
  • 垂直方向的间距由margin属性决定;
  • 在同一个BFC中，相邻两个box之间的margin会折叠(collapse)(margin折叠的本质) ;
  • 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的;

作用：

解决浮动高度塌陷问题；

注意：说解决高度塌陷问题不准确，高度塌陷的情况有两种：浮动和绝对或者固定定位

BFC解决不了由于绝对或者固定定位造成的高度塌陷问题，能解决浮动造成的高度塌陷问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
 .box {
    overflow: hidden;
  }

  .box .item {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
    margin-right: 20px;
  }
</style>
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

解释：给box盒子设置overflow: hidden;box形成了BFC

但是BFC解决浮动高度塌陷还需另外一个条件：box的高度为auto（height不设置，默认值为auto）

BFC的高度是auto的情况下，计算高度的方法如下：

  • 1.如果只有inline-level，是行高的顶部和底部的距离;

  • 2.如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离

  • 3.注意：

    在高度为auto的情况下，

    • 绝对定位的元素的高度是不会汇报给BFC的父盒子的，所以父盒子高度仍为0
    • 浮动的元素的高度也不会汇报给BFC的父盒子，但是BFC会一直增加自己的高度，直到包含所有浮动元素的下边缘。所以高度可计算

解决margin的折叠以及传递问题

（参看学习笔记一）

DPR

device pixel ratio（设备像素比）

即：物理像素和逻辑像素的比

逻辑像素：由操作系统规定的

物理像素：硬件设备在出厂时就初始化了的

DPR:可以理解为物理像素和逻辑像素之间的映射关系，DPR越高，画面显示越细腻。

（DPR越高，一个逻辑像素映射的物理像素越多，即单位逻辑像素使用的物理像素越多。因此画面就越细腻。）

在浏览器终端，可以使用window.devicePixelRatio来获得

PPI

每英寸（in）的物理像素

1in = 2.54cm;

媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。
你可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性<比如屏幕的宽度)来修改你的页面。

媒体查询的方式

  • 在style中使用@import使用媒体查询（常用);
1
2
3
<style>
  @import url('./test.css') (max-width:800px) and (min-width:300px);
</style>
  • link标签
1
<link rel="stylesheet" href="./test.css" media="(max-width:800px) and (min-width: 300px)">
  • @media
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  @media screen and (min-width:375px) {
  html {
    font-size: 37.5px;
  }
}

@media screen and (min-width:320px) {
  html {
    font-size: 32px;
  }
}

@media screen and (min-width:417px) and (max-width:1000px) {
    html {
      font-size: 41.4px;
    }
  }
</style>

其中，screen可以省略，如果省略，默认为all

其他：使用Window.matchMedia()和MediaQueryList.addListener()方法来测试和监控媒体状态;

媒体类型

媒体类型是可选的，并且会(隐式地)应用all类型。

常见的媒体类型：

  • all:适用于所有设备。
  • print:适用于在打印预览模式下在屏幕上查看的分页材料和文档。
  • screen(掌握)∶主要用于屏幕。
  • speech:主要用于语音合成器。

媒体特性

  • 媒体特性(Media features）描述了浏览器、输出设备，或是预览环境的具体特征;
  • 通常会将媒体特性描述为一个表达式;
  • 每条媒体特性表达式都必须用括号括起来;

媒体特性

逻辑操作符

  • and: and操作符用于将多个媒体查询规则组合成单条媒体查询
  • not: not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false；
  • only: only运算符仅在整个查询匹配时才用于应用样式。
  • ，(逗号):逗号用于将多个媒体查询合并为一个规则。