前端有用的小知识

小菜菜要逆袭
124 阅读3分钟

「这是我参与11月更文挑战的第N天，活动详情查看：2021最后一次更文挑战」。

盒子水平垂直居中的方案

  1. 使用flex布局（给父元素添加）

            display: flex;
        justify-content: center; //在水平轴上居中
        align-items: center; //交叉轴上居中

  2. 使用绝对布局(给子元素添加)

            position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;

  3. 利用transform的属性(兼容性不高,需要支持H5)

            position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);

  4. 利用css3的新增属性table-cell, vertical-align:middle;

            //给父盒子添加
        display: table-cell;
        vertical-align: middle;
        //给子盒子添加
        margin: auto;

CSS盒模型

盒模型总共包括4个部分：

  • content：内容
  • padding：内边距
  • border：边框
  • margin：外边距

两种盒模型的区别：

  • W3C盒模型 box-sizing: content-box

    W3C盒模型中，通过CSS样式设置的width的大小只是content的大小，加其他会撑大盒子

  • IE盒模型 box-sizing: border-box

    IE盒模型中，通过CSS样式设置的width的大小是content + padding + border的和，加入padding等，会缩小content的宽度

link和@import的区别

  1. link 是 XHTML 标签；@import 是 CSS 提供的语法。
  2. 加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
  3. @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 XHTML 元素，不存在兼容性问题。
  4. 可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式。
  5. link 引入的样式权重大于@import 引入的样式。

伪类和伪元素的区别

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

avatar
文章
阅读
粉丝