liuqinh2s' blog

Do something cool!

发表于 更新于 分类于 本文字数： 113 阅读时长 ≈ 1 分钟

参考

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

伪类

伪类是选择器的一种，用于选择处于特定状态的元素，开头为冒号

1
:pseudo-class-name;

例子：

  1. :first-child
  2. :last-child
  3. :only-child
  4. :invalid 表示任意内容未通过验证的<input>或其他<form>元素
  5. :hover
  6. :focus

伪元素

伪元素像新的元素，开头为双冒号

1
::pseudo-element-name

例子：

  1. ::first-line
  2. ::before
  3. ::after

发表于 更新于 分类于 本文字数： 122 阅读时长 ≈ 1 分钟

参考

https://www.zhihu.com/question/20597072

https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix

主流浏览器引擎前缀

  • -webkit-（谷歌，safari，新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 webkit 内核的浏览器）
  • -moz-（火狐浏览器）
  • -o-（旧版 Opera 浏览器）
  • -ms-（IE 浏览器和 Edge 浏览器）

示例：

1
2
3
4
5
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

发表于 更新于 分类于 本文字数： 258 阅读时长 ≈ 1 分钟

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

可选项有四种：

  1. static
  2. relative
  3. absolute
  4. sticky

static

默认就是 static，在这个选项下，设置 top, bottom, left, right, z-index 无效。

relative

设置了 relative，也就是说会在该元素原本的位置留白，不会改变页面原来的布局。

absolute

设置了 absolute，就不会在原本的位置留白，就会影响到页面原来的布局了。相对偏移的对象是最近的非 static 祖先元素。一般是父元素用 relative，子元素用 absolute 这样搭配着来使用，让子元素根据父元素进行绝对定位。

fixed

固定在视口（viewport）的某个位置，也就是说相对于视口来偏移。元素的位置在屏幕滚动时不会改变。

sticky

相对于最近的滚动祖先（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时）偏移。sticky 一般用来实现表格的表头固定

总结

强烈建议用 MDN Web Docs 的例子，亲身体会一下。

发表于 更新于 分类于 本文字数： 642 阅读时长 ≈ 2 分钟

BFC，Block Formatting Context，块级格式上下文

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性及应用

同一个 BFC 下外边距会重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<style>
    div{
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
</style>
</head>
<body>
    <div></div>
    <div></div>
</body>

如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .container {
        overflow: hidden;
    }
    p {
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
</style>
<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

BFC 可以阻止元素被浮动元素覆盖

1
2
3
4
5
6
<div style="height: 100px;width: 100px;float: left;background: lightblue">
  我是一个左浮动的元素
</div>
<div style="width: 200px; height: 200px;background: #eee">
  我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;
</div>
1
2
3
4
5
6
<div style="height: 100px;width: 100px;float: left;background: lightblue;">
    我是一个左浮动的元素
</div>
<div style="width: 200px; height: 200px;background: #eee; overflow: hidden;">
    我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;
</div>

BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

1
2
3
<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

1
2
3
<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

发表于 更新于 分类于 本文字数： 578 阅读时长 ≈ 2 分钟

基本概念

  • margin
  • border
  • padding
  • content

标准模型和 IE 模型的区别

  • 标准模型的 width = content
  • IE 模型的 width = content + 2*padding + 2*border

通过 css3 新增的属性 box-sizing: content-box | border-box 分别设置盒模型为标准模型（content-box）和 IE 模型（border-box）。默认是标准模型。

标准模型

1
2
3
4
5
6
7
8
.content-box {
  box-sizing: content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box 设置为标准模型，它的元素宽度 width=100px。

IE 模型

1
2
3
4
5
6
7
8
.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box 设置为 IE 模型，它的元素宽度 width = content + 2*padding + 2*border = 70px + 2*10px + 2*5px = 100px。

javascript 如何设置获取盒模型对应的宽和高

  1. dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
  2. dom.currentStyle.width/height 取到的是最终渲染后的宽和高，只有 IE 支持此属性。
  3. window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。
  4. dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离

外边距重叠

当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。

可以是兄弟元素，也可以父子元素之间发生外边距重叠。

看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<section id="sec">
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    #sec {
      height: 200px;
      width: 200px;
      background: red;
      margin-top: 20px;
      /* overflow: hidden; */
    }
    .child {
      height: 100px;
      width: 100px;
      background: yellow;
      margin-top: 10px;
    }
  </style>
  <article class="child"></article>
</section>

在线演示：父子元素外边距合并

子元素的 margin-top: 10px 没有生效，当我们加了 overflow: hidden 后才生效。给父级加了 overflow: hidden, 其实就是给父级元素创建一个 BFC(块级格式化上下文)，那什么是 BFC，请看下一个话题。

BFC

0%