2019.6.26 每日随笔

1.关于content-box和border-box

• 我们在CSS的时候，会使用的box-sizing，这里面有两个选项

box-sizing: border-box;
box-sizing: content-box;

1. 比方说border-box，如果你设置了div的宽度为56px，然后再设置padding，那么这个padding是不会导致宽度增大的，改div的宽度还是56px；
2. 用官方的说法 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3. 而content-box（默认值）则刚好相反，

---

2. swiper中的slidesPerView属性

• 举个栗子

slidesPerView: 2.3
// 意味着在一个屏幕上，可以显示2.3个幻灯片
slidesPerView: 3
// 意味着在一个屏幕上，可以显示3个幻灯片

---

3. 关于nth-child()的使用

• 比方向设置第三个开始往后的div，那么可以酱紫

&:nth-child(n+3){
}

---

4.html中的dl、dt、dd

• 代码如下

<dl>
  <dt></dt>
  <dl><dl>
  <dl><dl>
</dl>

• dl：定义列表
• dt：定义标题
• dd：定义描述
• dt里是放置信息标题的，dd则是这个信息的简单概要的描述， 也就是说一个dt对应有一个dd来描述它
• dd里面的内容可以是任意的，图片、文本甚至是视频或音频，多个类似的dt和dd组成一个dl

---

5.清除浮动

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}