360前端星计划day1

了解CSS

CSS是什么

用来定义页面元素的样式：字体和颜色、位置和大小、添加动画效果

一条规则

选择器 { 
   声明(属性：属性值);
}

在页面中使用css

外链 <link>标签
嵌入 <style>标签
内联写在style属性中

CSS是如何工作的

在解析HTML的过程中，加载CSS，解析CSS，添加样式到DOM节点，展示页面

选择器Selector

找出页面中的元素，以便给他们设置样式，按照标签名，类，id，属性以及在Dom树的位置

通配选择器 *
标签选择器标签名
Id选择器 id属性 # 唯一的
类选择器 class属性 . 可以出现多次
属性选择器 [属性名] 也可以根据属性值 input[type=”password”] 也可以限制属性名以什么为开头或者结尾 a[href^=”#”] a[href$=”.jpg”]
伪类选择器不基于标签和属性定位元素
- 伪类有状态伪类和结构性伪类
- 状态：比如链接的四种状态 :link :visited :hover :active input框有:focus状态
- 结构：根据元素在dom树的位置，比如li:first-child li:last-child
简单选择器的组合
- 直接组合：AB 同时满足A和B 比如元素选择器加class选择器 input.error
- 后代组合：A B 选中B 如果它是A的子孙 nav a 也可以写多级
- 亲子组合：A>B 选中B，如果它是A的子元素（直接）section>p
选择器组多个选择器逗号隔开 body,h1,h2,h3{ } [type=””],[type=””]{}

文字样式

颜色

颜色-RGB 两种写法：rgb(155，158，118) 或者 #9b9e76
颜色-HSL 三个值色相H（0-360）饱和度S（0-100%）亮度L（0-100%）hsl(118,100%,50%)
颜色-keyboard 使用颜色的关键字 red blue gold gray
透明度 alpha 0完全透明 1完全不透明比如#ff0000c2 rgba(255,0,0,0.4) hsla(0,100%,50%,1)

字体

font-family

设置多个字体以防止设备不支持某个字体
为了保证通用性，最后的serif表示通用字体族
通用字体族：serif衬线体，sans-serif无衬线体，cursive手写体，fantasy，monospace等宽字体
使用建议：字体列表最后写上通用字体族，英文字体放在中文字体前面

Web fonts

把web字体放在服务器上用url去访问，渲染页面时下载字体资源，@font-face 设置src为外部资源，中文也有web fonts

font-size

关键字：small、medium、large
长度：px，em（相对于父级大小）
百分比：相对于父元素字体大小

font-style

正常：normal 斜体：italic

Font-weight

文字的粗细 100-900或者normal（400）、bold（700）

line-height

行间距，文字基线之间的距离 45px 或者1.6（字体大小的1.6倍）

合并

//font: style weight size/height family
font: bold 14px/1.7 Helvetica, sans-serif; 
font: 14px serif;

格式

对齐：text-align（left、center、right、justify分散对齐）
间距：letter-spacing字母之间的间距默认0px word-spacing 单词之间的距离
缩进：text-indent默认0px
装饰：text-decoration（默认值none、underline下划线、line-through删除线
空格和换行的行为：white-space (normal空格被合并为一个、nowrap不换行、pre保留原始代码中空格和换行不进行合并、pre-wrap和pre类似只有当一行显示不下会自动换行、pre-line会合并空格但是保留换行)

调试css

开发者工具 option+command+i

深入CSS

选择器的特异度（Specificity）

计算：数每种选择器的个数 id （伪）类标签 1 2 2 > 0 2 2

继承

某些属性会自动继承父元素的计算值，除非显式指定一个值
和文字相关的大部分属性可以继承，有些属性不能继承，可以使用inherit实现继承 *{box-sizing:inherit}
初始值： css中每个属性都有一个初始值，比如background-color是transparent, 也可以使用initial关键字显式重置为初始值

CSS求值过程

拿到html解析出dom树和样式规则
filtering找到能匹配的选择器
声明值
cascading 选出优先级高的一个属性值
层叠值
defaulting（当层叠值是空的时候，使用继承或者初始值）
指定值
resolving（把相对值或者关键字转换成绝对值）
计算值
formatting（将计算值进一步转换，比如百分比转换为绝对值）
使用值（实际布局时候的值）
constarining（限制：将小数像素转为整数）
实际值（渲染时候实际生效的值）

布局Layout

确定内容的大小和位置的算法
依据元素、所在容器、兄弟节点和里面的内容综合计算
确定布局（布局相关技术）：常规流（行级、块级、表格布局、flexbox、grid布局）、浮动、绝对定位

盒模型

Content

width 指定content box的宽度取值为长度、百分数（相对于容器的content box宽度）、auto（由浏览器根据其他属性确定） height 指定content box的高度取值为长度、百分数（相对于容器的content box高度，容器有指定的高度时百分数才生效）、auto（由内容计算）

Padding

指定元素四个方向的内边距，百分数相对于容器的宽度 10px 上下左右 10px上下 20px左右 10px上 20px 右10px 下20px左

Border

指定容器边框样式、粗细和颜色

样式border-style：solid（实线）、dashed（虚线）、dotted（点状线）
粗细border-width
颜色border-color
四个方向，可以组合：border-left-width
可以用来画三角形

Margin

四个方向的外边距，取值可以是长度、百分数（相对于父容器的宽度）、auto

Margin collapse现象只会发生在垂直方向水平不会

box-sizing

border-box width = content + padding + border 可以设置用来防止内容水平方向超过浏览器宽度

overflow溢出

默认值是visible，会超出
hidden 隐藏
scroll加了滚动条
auto 没有超出就没有滚动条，超出就有滚动条

块级和行级

Block level box 不和其他盒子并排摆放，试用所有盒模型属性
Inline level box 盒其他盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
块级元素生成块级盒子 body article div main section h1-6 p ul li等（大部分元素是块级）可以使用display：block设置成块级
行级元素生成行级盒子，内容有可能被分散在多个行盒中 span em strong cite code等可以使用display：inline设置成行级
display：inline-box：本身是行级，但是为里面的元素生成一个块级，可以设置宽高，作为一个整体不会被拆散成多行
display：none排版时候完全被忽略

常规流 normal flow

根元素、浮动和绝对定位的元素会脱离常规流
常规流中的盒子，在某种排版上下文中参与布局：行级排版上下文（从左到右）、块级排版上下文（从上到下）、table排版上下文、flex、grid

Inline formatting context行级排版上下文

只包含行级盒子的容器会创建ifc
排版规则：盒子在一行水平摆放，一行放不下换行（类似于文字排版），text-align决定行内盒子的水平对齐，vertical-align决定行在盒子的垂直对齐，避开float元素
overflow-wrap：break-word可以给单词换行

Block formatting context块级排版上下文

创建：根元素、浮动、绝对定位、inline-block、flex子项和grid子项、overflow不是visible的块盒
本质是一个流的容器，比如给绝对定位元素内部创建一个新的流
内部排版规则：盒子从上到下摆放、垂直margin合并、bfc内盒子的margin不会与外面的合并、不会和浮动元素重叠

Flex box

可以控制子级盒子的摆放流向（上下左右）、顺序、盒子的宽度高度、水平垂直对齐、是否换行
display：flex产生一个块级flex容器，display：inline-flex产生一个行级flex容器
flex-direction：元素的流向 row左到右 row-reverse右到左 column 上到下 column-reverse下到上
flex弹性（当容器有剩余空间时候会伸展，空间不够时候会收缩）：
- flex-grow 伸展能力（比如设置了1以后它把剩余空间充满了）
- flex-shrink收缩能力（比如设置了0以后不具备收缩的能力）
- flex-basis没有伸展和收缩的基础长度（比如设置为content就是根据内容变）
flex-wrap：默认nowrap不换行 wrap换行
justify-content：主轴对齐方式：flex-start左对齐 flex-end右对齐 center居中 space-between第一个和最后一个在两端贴边 space-around两端也有空白 space-evenly 所有的空白均分等宽
align-items侧轴对齐默认值stretch占满容器高度 flex-start、flex-end、center、baseline按照基线对齐
align-self：子元素自己有一个特殊的对齐
order：默认是0 按照数字从小到大排列

Grid布局二维布局方式划分网格

用法：display：grid -
使元素生成一个块级的grid容器，使用grid-template相关属性将容器划分为网格，设置每一个子项占哪些行/列
划分网格：grid-template-columns（列的宽度）和grid-template-rows（行的高度）fr单位相当于一份 100px 1fr 1fr（第一列100px，剩下的两列各1份，即二等分）
划分区域：根据编号比如1 1 3 3 行开始列开始行结束列结束

浮动float

float：left左浮动，文字右边环绕展示

position

static
relative：常规流，流内其他元素不受影响，当这个元素没有偏移
absolute：流内元素当它不存在
fixed：相对于viewport定位，不会随页面滚动而发生变化

CSS进阶

transform 变形

对元素进行平移translate、旋转rotate、缩放scale、倾斜skew，不会对其它元素布局产生影响
translate两个距离 translateX、translateY只在一个轴如果使用百分数相对于自身大小
rotate 单位deg是度，turn是圈，旋转围绕自身的中心点
scale传入放大倍数可以用transform-origin决定基于哪里
skew扭曲，skewX skewY在某个轴倾斜
transform可以设置多个变换函数旋转后坐标系也旋转
3D变换：perspective设置视角（人眼和屏幕的距离）translate3d在3d空间平移（3个轴移动的距离）

transition 过渡

一个状态到另一个状态如何过渡，为了告诉用户发生了什么而不是突然变化
transition-property哪些属性变化时候有过渡效果
duration持续时间
timing-function变化函数:linear、ease-out先快后慢、ease缓冲效果、ease-in先慢后快、ease-in-out慢快慢、steps越阶函数
delay变化马上开始还是延迟

animation 动画

可以实现更复杂的样式变化效果，使用方法定义关键帧样式（@keyframes定义起一个名字，写每一个阶段的变化），再把这个动画效果应用到元素上（animation属性第一个值就是关键帧的名字）
animation属性 name、duration、timing-function、delay、iteration-count、direction（比如alternate正反交互）

响应式设计

同一个页面可以适应不同屏幕大小设备的设计方案
设置viewport，手机的viewport不是手机视口，使用<meta>标签设置viewport的尺寸
图片
- 尺寸设置：max-width:100%
- 背景图片：background-size：cover和contain 图片宽高和外面宽高不匹配 contain把图片缩放到容器内，比例正确，重要图片；cover保证图片把容器完整覆盖，可能有一小部分裁切，装饰性图片
- <img>标签上使用srcset指定多个url并且指定对应的宽度，浏览器渲染图片时可以根据屏幕尺寸加载其中一个图片
媒体查询，针对不同的屏幕尺寸，应用不同的样式，可以查询的media：width/height，device-width/device-height，device-pixel-ratio，orientation
字体：媒体查询+rem：当宽度改变的时候改变font-size的大小（font-size用px做单位），对应的以rem为单位的元素也随之改变

CSS