css的这些内容你可能知道，但是又不完全知道(二)（BFC解决一些问题的本质）

Spirited_Away
1,590 阅读8分钟

书接上篇

transform

并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变，例如span, a） image.png

scale

值类型：

  • 数字： 1：保持不变 2：放大一倍 0.5：缩小一半
  • 百分比：百分比不常用

放大时，虽然不会撑大父盒子，但是可能会超出父盒子。

rotate

rotate的单位

  • 度（degrees）、
  • 百分度（gradians）
  • 弧度（radians）
  • 圈数（turns）

image.png

transform-origin

默认的转换原点是 center

transform-origin：当前元素形变的原点。比如在进行scale缩放，rotate旋转，skew倾斜时，都会有一个原点。对于translate位移来说没有用。

一个值：设置x轴的原点

两个值：设置x轴和y轴的原点。

值的类型：必须是<length>, <percentage> 或 left, center, right, top, bottom关键字中的一个。

<length>：从左上角开始计算。

百分比：参考元素本身大小。

transform设置多个值

就是给transform设置多个形变的函数。完成多个变形效果。多个函数通过空格分隔。

      /* 
        <transform-function>+
          +: 一个或者多个, 并且多个之间以空格分隔
          transform: scale() translate();

        <box-shadow>#
          #: 一个或者多个, 多个之间以, 分隔
          box-shadow: 1px 1px 1px 1px #f00, 
      */
      transform: translate(50px) scale(1.2) rotate(45deg);

哪些css属性支持动画

可以参考mdn文档： developer.mozilla.org/zh-CN/docs/…

Animation

transition可以来过渡动画，但是过渡动画有如下的缺点：

  • transition只能定义开始状态和结束状态，不能定义中间状态，只有两个状态。
  • transition不能重复执行，除非一再触发动画。
  • transition需要在特定状态下会触发才能执行，比如某个属性被修改了。

如果我们希望可以有更多状态的变化，我们可以使用CSS Animation。

具体的内容请看这里

代码规范

可以去参考一下凹凸实验室代码规范

css书写顺序

image.png

  • 公共css样式类名

通过_连接多个单词。

  • 多单词连接

通过-连接。

HTML5新增

HTML5语义化元素

  • header 头部元素
  • nav 导航元素
  • section 定义文档某个区域的元素
  • article 内容元素
  • aside 侧边栏元素
  • footer 尾部元素

image.png

video

常用属性 image.png 了解更多，请访问mdn

一些视频文件的后缀 image.png 做兼容性，可能一些浏览器不支持video指定的文件

  <video src="./assets/fcrs.mp4" width="600" controls muted>
    <source src="./asset/fcrs.ogg">
    <source src="./asset/fcrs.webm">

    <p>当前您的浏览不支持视频的播放, 请更换浏览器查看!</p>

  </video>

audio

常用属性 image.png

一些音频的后缀

同video一样，并非所有的浏览器都支持当前指定的音频格式，所以我们需要做兼容性处理。

  <audio src="./assets/yhbk.mp3" controls autoplay muted>
    <source src="./assets/yhbk.ogg">
    <p>当前您的浏览不支持音频的播放, 请更换浏览器查看!</p>
  </audio>

HTML5 input补充

  • placeholder：输入框的占位文字。
  • multiple：多个值。比如select option可以选中多个值。
  • autofocus：自动聚焦。

input的type值也有很多扩展：

  • date
  • time
  • number
  • tel
  • color
  • email

具体请查看mdn

全局属性

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性。

data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到。通常用于HTML和JavaScript数据之间的传递。


  <div class="box"  data-name="zh"  data-sex="1"></div>

  <script>
    const boxEl = document.querySelector(".box")
    console.log(boxEl.dataset.name) // zh
  </script>

white-space

white-space用于设置空白（空格，tab， 换行）处理和换行规则 注意换行也算是空白。

  • normal：合并所有连续的空白，允许单词超屏时自动换行。（默认值）
  • nowrap：合并所有连续的空白，不允许单词超屏时自动换行
  • pre：阻止合并所有连续的空白（如果有换行符，他不合并，就会出现换行效果），不允许单词超屏时自动换行
 <style>
    .box {
      width: 200px;
      background: orange;
      white-space: pre;
    }
  </style>
  
  <div class="box">
    zhanghao       111   222222
    333      444
  </div>

image.png

  • pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
  • pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

text-overflow

text-overflow通常用来设置文字溢出时的行为,text-overflow生效的前提是overflow不为visible。

  • clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
  • ellipsis：溢出那行的结尾处用省略号表示

常见的是将white-space、text-overflow、overflow一起使用，来做到添加省略号操作。

  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

css函数

var: 使用CSS定义的变量

calc: 计算CSS值, 通常用于计算元素的大小或位置

计算支持加减乘除的运算（不同单位）。+ 和 - 运算符的两边必须要有空白字符。

通常用来设置一些元素的尺寸或者位置。

blur: 毛玻璃(高斯模糊)效果

blur() 函数将高斯模糊应用于输出图片或者元素

blur(radius)。radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊。

通常会和两个属性一起使用：

  • filter（元素自身添加）: 将模糊或颜色偏移等图形效果应用于元素。
  • backdrop-filter（元素覆盖层添加）: 为元素后面的区域添加模糊或者其他效果。默认只有模糊效果，没有透明效果，如果想要透明效果，我们可以增加一个半透明背景。
  background-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);

gradient：颜色渐变函数

gradient是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。所以他可以设置在任何image属性下。（background-image, border-image,...）

linear-gradient()

除了可以设置top ,right, bottom, left外，还可以通过角度设置渐变方向。正值顺时针，负值逆时针。（在元素中心来看角度偏移）。默认是从上到下

方向关键字 to

radial-gradient()

方向关键字at cr xy，指定渐变开始的原点。默认是元素的正中心。

浏览器前缀

CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀。

防止在以后w3c对该属性做修改或者移除时，浏览器做一些相应的处理。

浏览器私有前缀，只有对应的浏览器才能解析使用

  • -o-、-xv-：Opera等
  • -ms-、-mso-：IE等
  • -moz-：Firefox等
  • -webkit-：Safari、Chrome等

FC – Formatting Context

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的。

  • 块级元素的布局属于Block Formatting Context（BFC）， 也就是block level box都是在BFC中布局的。
  • 行内级元素的布局属于Inline Formatting Context（IFC）， 而inline level box都是在IFC中布局的。

一些触发BFC的条件

MDN上有整理出在哪些具体的情况下会创建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的描述 image.png

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

BFC作用

解决折叠问题

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

官方文档明确的有说： The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

解决浮动高度塌陷

BFC解决高度塌陷需要满足两个条件：

  • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）。
  • 浮动元素的父元素的高度是auto的。

BFC的高度是auto的情况下，是如下方法计算高度的 image.png

  • 如果只有inline-level，是行高的顶部和底部的距离。
  • 如果有block-level，是由最底层的块上边缘和最底层 块盒子的下边缘之间的距离。
  • 如果有绝对定位元素，将被忽略。（所以BFC不能解决绝对定位元素的高度塌陷）
  • 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘。
avatar
文章
阅读
粉丝
相关推荐
词法作用域之欺骗词法
938阅读
 · 
28点赞
JS处理一些数据
277阅读
 · 
0点赞
剑指 Offer 38. 字符串的排列 js
665阅读
 · 
1点赞
JS的arguments
7.9k阅读
 · 
68点赞
重新带你认识「事件循环」
62阅读
 · 
0点赞