笔记 - CSS基础

浏览器与支持特性

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语法检查：

1. w3c css validator
2. 编辑器自带纠错

border调试法：

1. 给需要调试的元素第一行加上醒目border
   border: 1px solid red;
2. 如果能够显示出，则该元素可以被匹配到，选择器未出错
3. 将border下移，逐行检查，如果哪一行未能显示border，则前一行出错
4. 问题解决删除border
   （类似js log调试法，脚本语言万岁）

练习素材：
1.模仿psd

• freepik
  -365psd

2. 效果图
   dribbble.com
3. 商业网站
   
   

Normal Flow 文档流

实际上HTML5并未区分内联元素与块元素，display:inline则显示成内联元素，display:block显示成块元素。
而浏览器的默认样式中：

• 内联元素(inline)
  从左到右排列，超出一行则折入下一行。
  inline不接受 width 和 height 设置宽高。
  inline的宽度由其内部的元素宽度总和决定。
  inline的高度由line-height间接决定。即如果使用padding增加内边距，其可见高度会增加，但实际高度未增加。但line-height能增加其实际高度。line-height可被继承。
  e.g.

    
    

        span元素+padding
    

• 块级元素(block)
  从上到下排列，一行只有一个块级元素，每一个另起一行。
  block接受width和height设置宽高。
  block的宽度默认是auto width=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;
}

截屏2021-02-03 21.42.20.png

相对而言border-box更好用

margin合并

上下不合并，左右不合并

1. 父子margin合并

• 可用padding，border挡住
• 可用overflow: hidden挡住
• 可用display: flex

2. 兄弟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 颜色

1. 关键词颜色 e.g. red 红，transparent 全透明
2. 十六进制 e.g. #FF6600 淘宝专用色
3. rgb, rgba
   e.g.
   rgb(255,0,127) 完全不透明
   rgba(255,0,127,0.2) a的最大值1为完全不透明，最小值0为完全透明
4. 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 (半透明）