浏览器与支持特性
caniuse.com
关于CSS优先级：
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
选择器语法
选择器 {
属性: 值;
/* 注释 */
}
at语法
/* 编码声明，必须放在第一行！ */
@charset "UTF-8";
/* 导入CSS文件 */
@import url(2.css);
/* 媒体查询 */
@media (min-width: 100px) and (max-width: 200px){
syntax
}
css语法检查：
- w3c css validator
- 编辑器自带纠错
border调试法：
- 给需要调试的元素第一行加上醒目border
border: 1px solid red; - 如果能够显示出，则该元素可以被匹配到，选择器未出错
- 将border下移，逐行检查，如果哪一行未能显示border，则前一行出错
- 问题解决删除border
（类似js log调试法，脚本语言万岁）
练习素材：
1.模仿psd
- freepik
-365psd
- 效果图
dribbble.com - 商业网站
Normal Flow 文档流
实际上HTML5并未区分内联元素与块元素，display:inline则显示成内联元素，display:block显示成块元素。
而浏览器的默认样式中：
-
内联元素(inline)
从左到右排列，超出一行则折入下一行。
inline不接受 width 和 height 设置宽高。
inline的宽度由其内部的元素宽度总和决定。
inline的高度由line-height间接决定。即如果使用padding增加内边距，其可见高度会增加，但实际高度未增加。但line-height能增加其实际高度。line-height可被继承。
e.g.
<style>
span {
border: 1px solid red;
/* 增加可见高度
padding: 10px 20px；
*/
/* 增加实际高度
line-height: 100px;
*/
}
div {
border: 1px solid red;
}
body {
padding: 20px;
}
</style>
<div>
<span>span元素+padding</span>
</div>
-
块级元素(block)
从上到下排列，一行只有一个块级元素，每一个另起一行。
block接受width和height设置宽高。
block的宽度默认是autowidth=auto;，而不是100%，即能有多宽占多宽。加上例如margin之类属性后其本身宽度也会自动缩短。
block的高度由内部文档流元素决定。 -
内联块(inline-block)
inline block元素具有两者的特点，一行中可显示多个元素，但超出一行的元素不会折入下一行，而是完整出现在下一行。
接受width和height设置宽高。
（尽量不要写width=100%，极易出错）
tips: 一口气生成多行
e.g.
element.class{$数字 内容}*num
element: 需要生成的元素
.class: 生成的元素拥有的class name
{...}: 正则+内容，$代表数字
*num: 生成个数
overflow 溢出
/* overflow */
overflow: visible; 默认
overflow: hidden; 隐藏
overflow: scroll; 滚动，即使内容没有溢出也会显示滚动条，丑
overflow: auto; 自动，不超出时不显示滚动条，超出时显示
脱离文档流
脱离文档流之后不算在所在容器的高度中
float: left / right / etc.;
position: absolute / fixed;
盒模型
margin -> border -> padding -> content
content box width = content width
border box width = content width + padding width + border width
e.g.
.content-box {
margin: 25px;
border: 5px solid red;
padding: 15px;
/* box-sizing属性决定盒类型 */
box-sizing: content-box;
width: 100px;
}
.border-box {
margin: 25px;
border: 5px solid green;
padding:15px;
box-sizing: border-box;
width: 100px;
}
相对而言border-box更好用
margin合并
上下不合并，左右不合并
- 父子margin合并
- 可用padding，border挡住
- 可用overflow: hidden挡住
- 可用display: flex
- 兄弟margin合并
- 可用display: inline消除
基本单位
- px 像素
- em 相对字号的倍数
e.g.
font-size: 20px;
width: 3em;
则width为20px*3=60px
- % 百分比
- 整数
windows only 的选色/截图工具：
snipaste
https://sspai.com/item/83
color 颜色
- 关键词颜色 e.g. red 红，transparent 全透明
- 十六进制 e.g. #FF6600 淘宝专用色
- rgb, rgba
e.g.
rgb(255,0,127) 完全不透明
rgba(255,0,127,0.2) a的最大值1为完全不透明，最小值0为完全透明 - hsl
hsl(色相, 饱和度%,亮度%)
色相：0-360 赤橙黄绿青蓝紫红
饱和度：百分比，一般70-80%，饱和度低则不显眼，饱和度高则亮眼
亮度：0为全暗，100为全白
tips: 关于alpha通道
rgb, hsl, hex均可使用a
rgb(r, g, b) -> rgba(r, g, b, a)
hsl(h, s, l) -> hsla(h, s, l, a)
#FF6600 -> #FF660000（全透明） #FF660011（不透明） #FF660088 (半透明）
