CSS学习小记（三）

max-width 属性和 min-width属性

这两个属性由字面上来看是就是最大和最小长度，的确是这样。

max-width 属性用来给元素设置最大宽度值. 定义了 max-width 的元素会在达到 max-width 值之后避免进一步按照 width 属性设置变大.也就是说 width 的值怎么也不能超过这个值。一个有点意思的值就是 fit-content ，设置值为 fit-content 时可以使其根据内容的长度来决定最大宽度。设置了 max-width 后，之前设置的 width 就会失效被覆盖。

min-width 属性与 max-width 差不多，设置指定元素的最小宽度，不过它比 max-width 更强，如果设置了 min-width ，之前设置的 width 和 max-width 都会失效被覆盖。

这两个属性一般用于 CSS 媒体查询中

CSS 媒体查询

好吧，媒体查询，看名字我还真猜不出是干啥用的。上网查了资料总结一些就是：能够实现“响应式设计”，针对不同的浏览器和设备“呈现”不同显示效果，毕竟不同的设备屏幕大小都会有不一样的状况出现，要使页面能够适应不同的浏览器和设备，可以用弹性盒子实现，也可以用媒体查询来实现

嗯，看起来用处很大，看看是怎么用的

举一个例子：

@media(max-width: 600px) {
  .facet_sidebar {
     display: none;
  }
}

声明一个媒体查询的方式是@media，一个页面中可以有多个，后面跟的是一个或多个表达式，表达式内容会被解释成true或false，当表达式的值都是true时，则执行花括号里的语句，否则不执行。诶….？？？是不是跟什么好像？对，就那个判断语句if，正确则执行。所以媒体查询其实是 CSS 的判断语句？其实也不算，本质是相同的，不过媒体查询还有很多玩法

表达式可以有多个，那么各表达式怎么连起来？可以使用not，and和only 。

当使用and连接时，如下：

(min-width: 700px) and (orientation: landscape) { ... }

起到合并多个表达式（下面统称媒体属性）的作用，只有所有媒体属性都为真时，才执行内容。这相当于&& 吧。

那么，使用or时就是任一个为真就执行咯，除了用or来连接媒体属性还可以用,逗号来代替，效果一样。这个相当于||

然后使用not就是当媒体属性为假时就为真！！相当于!

使用only用来防止老旧的浏览器不支持呆媒体属性的查询而执行的样式。

除了这些，媒体查询还有很多媒体属性，这里不一一介绍，总结一下，我总算明白媒体查询的意义和名字代表的意思了，这是用于对不同设备做出不同的页面布局调整，用媒体属性来作为一种判断方法区分各种设备，然后在花括号中对不同设备的调整。

:checked

又遇到一个伪类了，先从名字上看，马上想到checkbox，对，没错就是与这玩意有关的，而且还和radio有关，当我们选中radio或checkbox或select中的option时，:checked就生效了。所以根据这一特性，我们可以实现选中radio或checkbox或option而使页面产生某种变化的功能。

常规的用法是，给radio加个 :checked ，然后隐藏 radio ，再弄个label标签关联radio ，在：checked 中改变 label 的状态，然后只要点击 label 就会勾选上 radio ，然后触发：checked 改变 label 样式。流程就是这样。用来自定义一个radio的样式我想大概就是用这种方法的吧，毕竟不能直接改它们的样式，真有点想不明白为什么这样设计

赏

谢谢你请我吃糖果