前端面试思维导图-CSS相关知识点
2021-01-28 17:11:30 0 举报AI智能生成
前端面试思维导图-CSS相关知识点以及优化方法
作者其他创作
大纲/内容
基础属性
背景
属性
background-color
背景颜色，支持十六进制、RGB、颜色英文名称
background-image
url('xxx.jpg')
background-repeat
是否平铺，属性值有no-repeat、repeat-x、repeat-y
background-attachment
背景图像是否固定或者随着页面的其余部分滚动
background-position
图像在背景中的位置，[left/right, top/bottom]
文本
属性
颜色
color
对齐方式
text-align
center
right
justify
文本修饰
text-decoration
overline
line-through
underline
文本转换
text-transform
uppercase
lowercase
capitalize
文本缩进
text-indent
字体
字型
通用字体系列：拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列：一个特定的字体系列（如 "Times" 或 "Courier"）
衬线与非衬线
衬线Serif：带有花边的字体
非衬线Sans-serif：无花边字体，更利于阅读
属性
字体系列
font-family：可设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
字体样式
font-style
normal
italic
oblique
字体大小
font-size
px：像素单位，显示器中实际像素点大小
em：默认16px
百分比
字体粗细
font-weight
抗锯齿
-webkit-font-smoothing，仅支持webkit内核
-webkit-font-smoothing:antialiased; 仅面向MacOS
链接
链接状态
:link，未访问过的链接
:visited，已访问过的链接
:hover，鼠标放在链接上时，必须在link和visited之后才有效
:active，鼠标点击链接时，必须在hover后面
列表
属性
list-style-type
circle
square
upper-roman
lower-alpha
list-style-image
url()
list-style-position
outside
inside
inherit
list-style
简写，值可以为squre url()
表格
属性
边框折叠
border-collapse
盒模型
构成
margin：外边距
margin重叠问题
问题定义：同一个BFC内，块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合并”
分类
相邻兄弟元素合并
单独设置兄弟元素其中一个为BFC
设置float
设置position: absolute/fix
底部元素变为行内元素
父级与第一个/最后一个子元素合并
margin-top合并
子元素设置为BFC，float
父元素设置border-top值
父元素设置padding-top值
父元素和第一个子元素间设置内联元素分隔
margin-bottom合并
子元素设置为BFC，float
父元素设置border-bottom值
父元素设置padding-bottom值
父元素和最后一个子元素间设置内联元素分隔
父元素设置height、min-height、max-height
border：边框
属性
border-style
none
dashed
solid
double
groove
沟槽边框
ridge
3D脊边框
inset
3D嵌入边框
outset
3D突出边框
border-width
指定长度
thick
medium
thin
border-color
padding：内边距
content：内容
分类
W3C标准盒模型（content-box)
定义：属性width，height只包含内容content，不包含border和padding
IE盒模型（border-box）
定义：属性width，height包含content、border和padding
分组和嵌套
分组：相同样式可采用逗号分隔，一组共用相同样式
嵌套：两种样式可以使用空格表示嵌套
display
none
隐藏元素
display: none
可以隐藏某个元素，且隐藏的元素不会占用任何空间
visibility: hidden
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局
属性
visible
默认
hidden
collapse
用在表格元素可删除一行或一列，其他元素会呈现hidden效果
inherit
inline
inline-block
清除元素间距
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
block
定位position
属性值
static
默认值，遵循正常的文档流对象
relative
相对其在正常文档流对象中的位置的位置
fixed
元素位置相对于浏览器窗口是固定位置
absolute
相对于最近的已定位父元素的位置
sticky
基于用户的滚动位置来定位
overflow
用于控制内容溢出元素框时显示的方式
属性值
visible
内容不会被修剪，溢出元素框展示
hidden
内容被修剪，不可见
scroll
内容被修剪，可通过滚动条查看内容
滑动卡顿问题可以使用-webkit-overflow-scrolling:touch;
auto
如果内容被修剪，可通过滚动条查看其余内容
inherit
float
定义：元素水平方向浮动，起初为了实现文字环绕的效果
定位方式：元素脱离正常文档流，向父容器左边或右边移动直到碰到包含容器的边（padding)。
父元素没有高度而子元素设置了浮动时，父元素无法撑开
清除浮动
给父元素设置高度，但是需要计算内容高度
给需要撑开的父元素设置 clear:both，但是会造成margin失效
clear清除浮动
none
left
right
both
none
inherit
overflow:hidden
对齐
块级元素对齐
居中
水平
margin: auto
父元素需要设置width属性
position: absolute;
left: 50%;
margin-left: -(content-width);
垂直
padding: 50px 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
左右对齐
position: absolute;
left: 0px;
float: right;
父元素添加overflow: auto;解决子元素溢出问题
文本元素对齐
水平
text-align: center
垂直
line-height === height
组合选择符
后代选择器
元素下所有相同的元素，以空格分隔
子元素选择器
直接子元素，以>分隔
相邻兄弟选择器
有相同父元素并紧跟在另一元素后的元素，以加号分隔，div+p
后续兄弟选择器
所有指定元素之后的相邻兄弟元素，以~分隔，div~p
属性选择器
a[rel="external"]
伪类与伪元素
伪类
语法：selector[.class]:pseudo-class {property:value;}，单个冒号开头；为已存在的元素添加特殊的类
分类
anchor伪类
:link
:visited
:hover
:active
:focus
序号伪类
:first-child
:last-child
:nth-child()
:first-of-type
:last-of-type
:not()
表单状态
:enabled
:disabled
:checked
特殊
:lang
为不同的语言定义特殊的规则
:lang 类为属性值为 no 的q元素定义引号的类型：q:lang(no) {quotes: "~" "~";}
伪元素
语法：双冒号开头，需要定义该元素的内容和相应的样式，需要有content属性
.list li::before{
content: '';
}
分类
位置
::before
::after
属性选择器
样式优先级
最近的祖先样式比其他祖先样式优先级高
"直接样式"比"祖先样式"优先级高
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
1.ID 选择器的个数 a
2.类选择器、属性选择器以及伪类选择器的个数之和 b
3.标签选择器和伪元素选择器的个数之和 c
4.a/b/c顺序比较大小，大的优先级高
!important属性拥有最高优先级
布局
布局上下文
Formatting Context：页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
BFC(Block Formatting Context)
块级上下文
触发因素
根元素
float!=none
position=absolute/fixed
display=inline-block/table-cell/table-caption/flex
overflow!=visible
IFC(Inline Formatting Context)
行内级上下文
触发因素
display：inline
用处
水平居中：设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中
GFC(GridLayout Formatting Context)
栅格格式化上下文
触发因素
display: grid
设置为grid布局之后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
属性
容器属性
grid-template-columns
定义每一列的列宽，空格间隔
repeat(3,30px)/repeat(2, 10px 20px 30px)分别定义3列和6列
fr，相对单位，150px 1fr 2fr
minmax()取其之间的值
auto
定义网格线名称
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
grid-template-rows
定义每一行的行高， 空格间隔
grid-gap
grid-row-gap
设置行与行之间间隔
grid-column-gap
设置列与列之间间隔
grid-template-areas
为grid单元格命名，每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
grid-auto-flow
单元格内容填放的顺序
column
row
设置单元格位置
justify-items：内容水平位置
start
end
center
stretch
align-items：内容垂直位置
start
end
center
stretch
place-items：以上两种的缩写：<align-items> <justify-items>;
整个内容在容器的位置
justify-content
start
从左排起
end
从右排起
center
水平居中
stretch
水平撑满
space-around
每列左右空白
space-between
最左最右顶满，中间左右空白
space-evenly
每列左右空白折叠
align-content
place-content
项目属性
项目位置：无指定则按照容器的grid-auto-flow属性值进行布局，右边四个属性的值可以是网格线序号，也可以是网格线名字
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-area
将制定class的项目放在指定命名好的区域
单元格中内容位置
justify-self
start
end
stretch
center
align-self
start
end
stretch
center
place-self
<align-self> <justify-self>
FFC(Flex Formatting Context)
Flex布局
display: -webkit-flex; /* Safari */
display: flex;
display: inline-flex;
属性
容器属性
flex-direction
布局主轴方向
row
row-reverse
column
column-reverse
flex-wrap
一条线排不下时如何换行
nowrap
wrap
wrap-reverse
flex-flow
<flex-direction> <flex-wrap>;默认值为row nowrap
justify-content
主轴上的对齐方式
flex-start
主轴起点对齐
flex-end
主轴终点对齐
center
主轴居中
space-between
两端顶齐，中间项目两边空白
space-around
每列左右都有空白
align-items
交叉轴的对齐方式
flex-start
交叉轴起点对齐
flex-end
交叉轴终点对齐
center
交叉轴中点对齐，垂直对齐
baseline
项目第一行文字基线对齐
stretch
沾满整个容器交叉轴上的高度
align-content
多根轴线的整体对齐方式
flex-start
flex-end
center
space-between
space-around
stretch
项目属性
order
定义项目排列顺序，数值越小越靠前
flex
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>
flex-grow
定义项目放大比例
0：有剩余空间也不放大
1：平均分配宽度
flex-shrink
定义项目缩小比例
0：空间不足也不缩小
1：等额缩小
负值无效
flex-basis
定义项目占据主轴的控件
auto
px：占据固定空间
flex-align-self
允许单个项目和其他项目有不同的对齐方式
auto
flex-start
flex-end
center
baseline
stretch
CSS3
边框
圆角
border-radius
border-left-top-radius
border-right-top-radius
border-right-bottom-radius
border-left-bottom-radius
盒阴影
box-shadow
图片
border-image
背景
background-image
支持多张图片叠加
background-size
background-origin
content-box
padding-box
border-box
background-clip
content-box
渐变
线性渐变
background-image: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
重复渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变
background-image: radial-gradient(shape size at position, start-color percent, ..., last-color percent);
形状
circle
ellipse
默认值
渐变大小
closest-side
farthest-side
closest-corner
farthest-corner
文本效果
text-shadow
text-overflow
clip
ellipsis
string
word-wrap
normal
unrestricted
none
suppress
word-break
normal
keep-all
只能在半角空格或连字符换行
break-all
允许单词内换行
变形transform: translate/rotate/scale/skew/matrix
2D转换
translate()
定义：根据左x轴和顶y轴位置给定参数，从当前位置移动
例子：transform: translate(50px,100px);
ratote()
定义：给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转
例子：transform: rotate(30deg);
scale()
定义：缩放的大小，取决于宽度（X轴）和高度（Y轴）的参数
例子：transform: scale(2,3);
skew()
定义：X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
例子：transform: translate(50px,100px);
matrix()
定义：2D变换方法合并成一个，包含旋转，缩放，移动（平移）和倾斜
例子：transform:matrix(0.866,0.5,-0.5,0.866,0,0);
3D转换
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
perspective(n)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
过渡 transition
元素从一种样式逐渐改变为另一种的效果
单项过渡
div {
width: 30px;
transition: width 2s;
}
div:hover {
width: 60px;
}
多项改变
可以使用all
属性
transition
可设置四个过渡属性，可以设置过渡时间transform 2s
transition-property
transition-duration
transition-timing-function
transition-delay
动画
属性
@keyframes
定义动画帧变量，是动画基础
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
animation
动画绑定，缩写
div {
animation: myfirst 5s;
}
属性
animation-name
animation-duration
animation-timing-function
animation-fill-mode
animation-delay
animation-iteration-count
animation-direction
animation-play-state
其他
动画最小时间间隔
16.7ms：1/刷新频率*1000ms
用户界面操作
resize
指定一个元素是否应该由用户去调整大小
属性值
none
both
horizontal
vertical
box-sizing
outline-offset
对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
div {
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
图片
设置圆角
border-radius
响应式图片，房大尺寸不大于其原始最大值
max-width: 100%;
图片滤镜
filter
属性值（方法）
grayscale(%)
hue-rotate(deg)
invert(%)
opacity(%)
blur(px)
brightness(%)
contrast(%)
drop-shadow(h-shadow v-shadow blur spread color
saturate(%)
sepia(%)
url()
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素
initial
inherit
响应式设计
多媒体查询
@media
all
print
screen
speech
viewport
布局视口layout viewport
一般大小为980px，通过拖动和缩放来查看页面
视觉视口visual viewport
移动设备可见的区域大小，相当于窗口，而布局视口为窗外的风景
理想视口ideal viewport
layout一般比visual打，理想就是修改layout至设备宽度
CSS预处理器
CSS MODULES
加入了局部作用域和模块依赖
Sass
Less
特点
可以进行样式文件模块化
选择符嵌套
可以使用变量
计算
样式注入
运算
函数
Mixin
工程化
性能优化
加载性能
css压缩
减少属性缩写，使用单一属性
减少@import，尽量使用link
选择器性能
CSS选择符是从右到左匹配，所以尽量减少选择器深度，避免使用后代选择器
如果有id选择器，则不要添加其他选择器
避免使用通配
避免对标签选择，而是添加class
尽量使用继承样式
渲染性能
减少使用浮动、定位
减少页面重排、重绘
去除空的样式规则{}
属性值为0不要添加单位，小数时省略前面的0
带浏览器前缀的属性值在前，标准属性在后
图片尽量使用css雪碧图
不滥用web字体
可维护性/健壮性
整合相同样式，提升可读性和可维护性
样式与内容分离
兼容性
移动端
安卓
position: fixed;无效
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>
font-size用rem，某些元素没有设置font-size直接继承body，字体会异常变大
body设置一个px单位的默认font-size
click事件300ms延迟
用touch事件代替click，引入fastClick
图片相关
图片格式
BMP
无损，支持索引色/直接色，点阵图，比较大
GIF
无损，8bit索引色，点阵图，LZW编码压缩，文件小，支持动画、同名，颜色种类少
JPEG
有损，直接色，点阵图，色彩丰富，比较大
PNG-8
无损，索引色，点阵图，支持透明，可代替GIF
PNG-24
无损，直接色，点阵图，文件比BMP小，但还是很大
SVG
无损，矢量图，放大不失真，适合绘制logo、icon
WebP
谷歌开发新格式，同时支持有损无损、直接色点阵图，文件格式小，仅支持Chrome和Opera
0 条评论
下一页
