CSS权威指南读书笔记
- 写在前面
- 元素和引入css
- 厂商前缀
- 媒体查询
- 媒体类型
- 特性查询
写在前面
主要是记录在读css权威指南的时候产生的和自己以前的认知不同的点，漏掉的点和有灵魂共鸣的点(并且是个人认识比较重要的点)
元素和引入css
- 置换元素和非置换元素的概念：前者如img，input，会改变的
- 块级元素和行内元素：块级元素能包含行内元素，反之不行
- 把css应用在html
- link标签(候选样式表，title不同。默认第一个)
- @import指令
- import必须放在其他css规则前面，否则不会起作用
- url后面可以提供媒体描述符(后面的章节详细说)
- HTTP链接(不太懂，先放着，也许遇到了就懂了)
- 行内样式：style="" 形式引入
厂商前缀
| 前缀 | 厂商 |
|---|---|
| -epub- | 国际数字出版论坛指定的ePub格式 |
| -moz- | 基于Mozilla的浏览器(Firefox) |
| -ms- | 微软 IE |
| -o- | 基于Opera的浏览器 |
| -webkit- | 基于Webkit的浏览器(如Safari和Chrome) |
媒体查询
用在下面几个地方
- link元素的media属性
- style元素的media属性
- @import生命的媒体描述符部分
- @media生命的媒体描述符部分
例子：CSS 多媒体查询，适配各种设备尺寸
@media screen and (min-width:300px){
body{
background-color: aliceblue;
}
}
@media screen and (min-width:500px){
body{
background-color: blue;
}
}
@media screen and (min-width:700px){
body{
background-color: red;
}
}
媒体类型
| 类型 | 作用 |
|---|---|
| all | 用于所有展示媒体 |
| 为有视力的用户打印文档时使用，也在预览打印效果时使用 | |
| screen | 在屏幕媒体上展示文档时使用，这个应该最常用 |
| projection | 幻灯片 |
| handheld |
常用的媒体查询：
- min-width
- orientation: portrait 竖屏
- orientation: landscape 横屏
- only专门用于保证向后兼容(只能用在开头)
- 其实很多，不列举了，book 32页
特性查询
@supports举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(style.css); // h1{color:red;}
@supports (color:red){
h1{color:blue;}
h2{color:red;}
}
</style>
</head>
<body>
<h1>123</h1> //blue
<h2>456</h2> //red
</body>
</html>
![[前端面试套餐css+js+vue]第三天](/images/no-images.jpg)
