box-sizing 属性初探及伪类选择器的参数 an+b 的经典应用
box-sizing 属性的作用
box-sizing 属性用来定义盒模型的边界。
box-sizing：content-box | border-box
1. content-box
box-sizing 的默认值，对于所有接受 width,height 的元素，W3C 标准盒模型中,padding 和 border 不被包含在 width/height 中，width/height 定义的是内容区的边界，所以盒模型的实际宽度/高度 = width/height + padding + border 。
2. border-box
也被称为 IE 盒子，怪异盒子，盒模型的边界在边框处。width/height 定义的就是整个盒模型的大小，它是通过收缩内容区的大小，将 padding 和 border 包含在 width/height 中。
示例：
<body><div class="box c-box"></div><div class="box b-box"></div><style>.box {width: 100px;height: 100px;border: 10px solid blue;}.box.c-box {box-sizing: content-box;}.box.b-box {box-sizing: border-box;}</style></body>
运行结果：
伪类选择器的参数 an+b 的应用
选择器:nth-of-type(an+b){声明块}
- a:系数
- n:计数器
- b:偏移量
<body><ul class="list"><li>item01</li><li>item02</li><li>item03</li><li>item04</li><li>item05</li><li>item06</li><li>item07</li><li>item08</li></ul></body>
1. 选择某一个
.list > li:nth-of-type(3) { color: red; }
2. 选择前几个
.list > li:nth-of-type(-n + 3) { color: red; }
3.选择指定的及其之后的
.list > li:nth-of-type(n + 3) { color: red; }
4.选中偶数
.list > li:nth-of-type(2n) { color: red; }
5.选中奇数
.list > li:nth-of-type(2n+1) { color: red; }
如果需要从后往前选则可以使用:nth-last-of_type(an+b)
媒体查询
移动优先
<style>/* 移动优先：从小屏幕到大屏幕 */@media (min-width: 480px) {html {font-size: 12px;}}@media (min-width: 640px) {html {font-size: 16px;}}@media (min-width: 720px) {html {font-size: 20px;}}</style>
PC 优先
<style>/* 桌面优先/PC优先：从大屏到小屏 */@media (max-width: 720px) {html {font-size: 20px;}}@media (max-width: 640px) {html {font-size: 16px;}}@media (max-width: 480px) {html {font-size: 12px;}}/* 当屏幕大于720时的设置 */@media (min-width: 720px) {html {font-size: 20px;}}</style>
- 移动优先是指媒体查询时从小屏到大屏，PC 优先则是指从大屏到小屏。
- PC 优先时，要注意考虑最大边界的问题，需要设置一条 min_width，以保证当屏幕超过最大值时，不会因为超边界而影响效果。