【青训营】CSS&UI设计之我记

css包括改变颜色及大小、修改布局（如将一个单列布局变成双列）、还可以做特效或动画

基础规则：

• 选择器
• 声明：一个单独的规则
• 属性
• 属性的值

选择器类型：

• 元素选择器：<p>
• ID选择器:id
• 类选择器：class
• 属性选择器：img[src]
• 伪类选择器：a:hover

层叠与继承

后面的规则把前面的覆盖掉

浏览器有个选择器优先级来决定规则，基本上是一个选择器越具体越优先

一个元素选择器不是很具体–》会选择页面上该类型的所有元素

一个类选择器稍微具体点–》它会选择该页面中有特定class属性值的元素，所以它的优先级就要高一点

border没有继承属性，浏览器会根据常识判断哪些属性该继承

 
真正的宽度和高度不算margin

扩大文字链接点击区域：设置盒模型

布局

盒模型：从外到内 margin-border-padding-content

正常文档流：每个块级元素会在上一个元素下面另起一行

内联元素不会另起一行，会被挤到下面

修改浏览器【计算面积使用各层叠加法】的默认方法，可以通过设置box-sizing:border-box（默认为content-box)

如果你希望所有元素都使用替代模式，设置box-sizing在元素上，然后设置所有元素继承该属性

html{
  box-sizing:border-box;
}
*,*::before,*::after{
  box-sizing:inherit
}
复制代码

box-sizing:修改宽高的定义

display:改变元素是块级盒子还是内联盒子

 

弹性布局

弹性盒子是一种按照行或列布局的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应大小

display:flex得到横排布局。就盒模型而言，此时容器类似于块级元素，容器可以设置比子元素更大的宽度，更小也行，会被挤起来，宽度默认由子元素决定

flex-direction（主轴方向）:row|row-reverse|column|column-reverse

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

 

justify-content:flex-start|flex-end|center|space-between（中间空间是均匀分布，两个元素水平放在两边，两边挤满）|space-around:在between的基础上左右均匀调间距

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

 

align-items:stretch|flex-start|flex-end|center(重心对齐）|stretch|baseline（更关注文本底线是否对齐）

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

面试常问：有多少种居中的方法

弹性模型应用场景：同时在浏览器和手机端来生效 pc端可以直接横向

display:flex:一键开启弹性盒子模式，替代正常文档流

flex-direction：更改弹性盒子的【主轴】

justify-content：子元素主轴线上如何对齐

align-items：子元素横轴线上如何对齐

 

定位

相对定位position:relative：用的较少

绝对定位position：absolute：完全脱离文章，不是相对于原位置，相对于非静态定位的父元素容器

position:fixed 其top、left等属性是相对于浏览器窗口

 

z-index是负数，越小就排在越前面

grid布局也很实用

装饰相关

文字

font-family:带衬线的字体

颜色color

font-weight:笔触粗细大小 一般字体就有字重的配置

italic字体

text-decoration：undeline 下划线

text-align

font-size

通过伪类设置的样式

 

背景图片不重复：background-repeat:no-repeat

渐变：

background-image:linear-gradient{
    to right,
    red,
    blue,
    yellow
}
复制代码

 

边框

border:1rem solid;实现整体缩放

border:thick double（双实线） 颜色；

border:ridge 相框样式

 

阴影

box-shadow:10px 5px 5px red; 横向上偏移 纵向偏移 偏离半径

box-shadow:inset（阴影打在内容上，直接沉在背景上

负数参数 表示光从左边打过来

文字阴影

跟背景保持对比

 

交互相关

cursor-pointer

transition:width 300ms ease-in（弹性动画函数，可以控制这个动画以什么样的效果变化）

 

动画（动画组件库）

animation: span 5s ease-in-out infinite（无限的定义下去）; eg:loading

@keyframes spin {

from{

transform:rotate(0deg);

}

to{

transform:rotate(360 deg)

}

可以直接使用组件，不用专门写spin

 

css调试

 

css扩展

less

mixin：类似于函数，批量生成样式

css革新

编写样式已经不一定需要写css文件

以styled-components为代表的css-in-js方案，用JavaScript的力量武装css css+js写在一起，动画也可用js实现

以tailwindcss为代表的utility方案，改样式就改html即可，用有限的选择帮助 类似内联式样式

 

css需要在练中学，把基本的属性都清楚，面试看面经

 

ui设计

背景

不能只局限于组件库 没有专业ui，很多交互体验细节要靠前端

功能导向

把功能做好！！！

设计的第一步就是交辅功能

简约设计

用简单的创作工具

mvp：最简单的出版设计产品

设计原则

层级

一个产品要好用，就要让用户很容易地抓到产品重点

在重点里，用户能自在地进入功能

一致性

 

1.对比：如果两个元素内涵不同，请让它们截然不同

2.重复：设计的视觉要素应当在

3.亲密性

4.对齐

设计体系

布局

内容居中放

内容宽度应在600-800px之间，响应式布局

多列布局：主要用组件库

限制好固定的宽度

间距

选项 12px 16px 24px 大尺寸上可以设计得开些

多留白些，从送到紧来调试，从局部到整体，关注的是哪些元素相关，把它们拉到一起

 

表达关联关系

间距差异设计，表明了每个章节的起点

文字

字号、字重等范围框定在

字号大小一般12-20px,大部分组件库会提供

选项设计

字重是css自带的，用好常用的3 4 个

把字体更靠近背景色，可弱化这个字的层级

对齐

基于baseline对齐（重心对齐），即文字的下边缘

行高

行高和字号大小呈反比，用户在视线换行时有稳定的下移体验

色彩

色彩是要尽量克制的，要做好字号、字重的

颜色选项-灰色

主题色 按钮一般用的是网站的主题色

功能色 红色错误，黄色警告 绿色积极的变化

深色用来文字，浅色写背景

主要标题可以用最亮的白色，次要标题可以用灰色（白色背景）或者主题色（即背景颜色的浅色版本）

颜色是用来抓重点的

 

色盲 不同的文化

深度

shadow

阴影选项

 

实用技巧

图片上的前景色怎么设置

1.加蒙层

2.给文字加阴影

 

明晰的用户头像

1.border

2.加内阴影（更好）

 

干掉分界线

1.阴影可以替代边框

2.不同的背景色块也可以

3.间距清晰