CSS
css3 有哪些新特性
- 弹性盒模型
display: flex; - 多列布局
column-count: 5; - 媒体查询
@media (max-width: 480px) {.box: {column-count: 1;}} - 个性化字体
@font-face{font-family: BorderWeb; src:url(BORDERW0.eot);} - 颜色透明度
color: rgba(255, 0, 0, 0.75); - 圆角
border-radius: 5px; - 渐变
background:linear-gradient(red, green, blue); - 阴影
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); - 倒影
box-reflect: below 2px; - 文字装饰
text-stroke-color: red; - 文字溢出
text-overflow:ellipsis; - 背景效果
background-size: 100px 100px; - 边框效果
border-image:url(bt_blue.png) 0 10; - 转换
- 旋转
transform: rotate(20deg); - 倾斜
transform: skew(150deg, -10deg); - 位移
transform: translate(20px, 20px); - 缩放
transform: scale(.5);
- 旋转
- 平滑过渡
transition: all .3s ease-in .1s; - 动画
@keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
CSS3 新增伪类（ : ）有那些？
p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。p:only-child选择属于其父元素的唯一子元素的每个<p>元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素,oddeven。:after在元素之前添加内容,也可以用来做清除浮动。:before在元素之后添加内容。:enabled已启用的表单元素。:disabled已禁用的表单元素。:checked单选框或复选框被选中。
什么是 FOUC
Flash of Unstyled Content：在用户定义的样式表文件加载之前使用默认样式，加载用户样式后，造成页面闪烁- 解决：把样式表文件放到文档的
<head>
给行内元素设置 padding 和 margin 是否生效？
- 块级元素的 padding 和 margin 值的设置都是有效的。
- 行内元素的 margin-left 和 margin-right 是有效的，margin-top 和 margin-bottom 并没有起作用。
- padding 类似，但要注意 padding-top/bottom 会使得该元素的上下范围变大，但只是表象（实际没有作用），对周围的元素无影响。
display、float、position 的关系
- 如果
display取值为none，那么position和float都不起作用，这种情况下元素不产生框 - 否则，如果
position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。 - 否则，如果
float不是none，框是浮动的，display根据下表进行调整 - 否则，如果元素是根元素，
display根据下表进行调整 - 其他情况下
display的值为指定值 - 总结起来：绝对定位、浮动、根元素都需要调整
display
display 有哪些值？说明他们的作用
block转换成块状元素。inline转换成行内元素。none设置元素不可见。inline-block象行内元素一样显示，但其内容象块类型元素一样显示。元素的高度、宽度、行高以及顶和底边距都可设置。list-item象块类型元素一样显示，并添加样式列表标记。table此元素会作为块级表格来显示inherit规定应该从父元素继承display属性的值
CSS3 动画（简单动画的实现，如旋转等）
依靠
CSS3中提出的三个属性：transition、transform、animationtransition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。transform：定义元素的变化结果，包含rotate、scale、skew、translate。animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction说一说 css3 的 animation
css3 的
animation是 css3 新增的动画属性，这个 css3 动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义每一帧动画元素的状态，通过
animation-name来引用这个动画，同时 css3 动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，这些相关的动画子属性有：
animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function定义播放的方式，如恒速播放、艰涩播放等。
实践
- CSS 实现沿Y轴旋转360度
display: inline-block中间间隙
原因：
inline-block元素间有空格或是换行，因此产生了间隙如何消除：
去除元素之间的空格或者换行，但会比较难看
空格符本质上就是个字符，设置
font-size: 0，但在chrome下无效，在IE6\7残留 1px 间隙letter-spacing字符边距属性可以控制文字间的水平距离的，支持负值，可以让文字水平方向上重叠，但 Opera 支持不好- css
.box { font-size: 0; letter-spacing: -3px; }
- `margin-left` - 添加浮动，但还需要清除浮动的操作
盒子模型
- 构成：内容
content，内边距padding，边框border，外边距margin - 种类：
- 标准（W3C）盒模型
- 元素实际占据宽度
= width + padding + border +margin - 通过设置
box-sizing: content-box触发
- 元素实际占据宽度
- 兼容（IE）盒模型
- 元素实际占据宽度
= width + margin - 通过设置
box-sizing: border-box触发
- 元素实际占据宽度
- 设置通过设置
box-sizing: inherit继承父元素的box-sizing设置
- 标准（W3C）盒模型
opacity 和 rgba、transparent 的透明效果有什么不同？
- 都能实现透明效果
opacity- 作为一个完整属性出现的
- 对于整个元素起作用的
rgba和transparent- 作为属性值出现的
- 任何需要设置颜色的地方都可以根据情况使用
transparent或rgba。比如背景、边框、字体等等。- 哪个属性的颜色设置了 transparent，哪个属性就是透明的，完全透明。
- 哪个属性用 rgba()设置了透明，就对哪个属性起作用，透明程度可设置，从 0.0 （完全透明）到 1.0（完全不透明）。
- 由于
opacity和alpha设置的透明程度可调，就引出一个继承的问题。如果一个元素未设置 opacity 属性，那么它会从它的父元素继承 opacity 属性的值。而 alpha 不存在继承。
什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse
- 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
- 只有垂直的会折叠
- 折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
- 如何避免？
- https://blog.csdn.net/m0_48721669/article/details/121156239?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-9.opensearchhbase&spm=1001.2101.3001.4242.6
- 2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了 BFC 的元素和它的子元素不会发生折叠）
如何使用 CSS 实现硬件加速？
硬件加速是指通过创建独立的复合图层，让 GPU 来渲染这个图层，从而提高性能，
- 一般触发硬件加速的
CSS属性有transform、opacity、filter，为了避免 2D 动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)
如何实现小于 12px 的字体效果
transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;
transform: scale(0.7);css的属性，可以缩放大小
但以我目前的经验，在新版本的浏览器中已经可以设置小于12px的font-size
css sprite
- 精灵图，将多个小图片拼到一个大图中，通过
background-position和元素尺寸调节显示想要的背景图 - 优点：
- 减少 HTTP 请求次数，极大提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 网页整体更换风格方便，只要更改少量图片即可
- 缺点：
- 图片合并麻烦
- 维护麻烦，修改一个图片可能要重新布局整个图片样式
css hack 原理及常用 hack
- 原理：CSS hack 是通过在 CSS 样式中加入一些特殊的符号，让不同的浏览器识别不同的符号。利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式。
- https://www.w3cschool.cn/css/css-hack.html
- 常见的 hack 有
- 属性 hack
- 选择器 hack
- IE 条件注释
CSS 有哪些继承属性
关于文字排版的属性如：
fontword-break单词换行规则letter-spacing字符间距text-aligntext-rendering非标准，文字的渲染规则word-spacing标签单词之间的间距white-space对文本中空白和换行符的处理规则text-indent段首缩进text-transform转换文本，全部小写，大写开头之类text-shadow文字阴影效果text-overflow多余文本的处理方式，省略符、裁剪之类
line-heightcolorvisibilitycursor
CSS 哪些属性可以继承？哪些属性不可以继承
- 可继承的样式：
font-size font-family color, UL LI DL DD DT - 不可继承的样式：
border padding margin width height
css 选择符有哪些
- id 选择器（
## myid） - 类选择器（
.myclassname） - 标签选择器（
div,h1,p） - 相邻选择器（
h1 + p） - 子选择器（
ul > li） - 后代选择器（
li a） - 通配符选择器（
*） - 属性选择器（
input[type="text"]） - 伪类选择器（
a:hover, li:nth-child）
用纯 CSS 创建一个三角形的原理是什么
/* 把上、左、右三条边隐藏掉（颜色设为 transparent） */
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}CSS3 新增伪类有那些
:root选择文档的根元素，等同于 html 元素:empty选择没有子元素的元素:target选取当前活动的目标元素:not(selector)选择除selector元素意外的元素:enabled选择可用的表单元素:disabled选择禁用的表单元素:checked选择被选中的表单元素:after在元素内部最前添加内容:before在元素内部最后添加内容:nth-child(n)匹配父元素下指定子元素，在所有子元素中排序第 n （从1开始）:nth-last-child(n)匹配父元素下指定子元素，在所有子元素中排序第 n，从后向前数:nth-child(odd):nth-child(even):nth-child(3n+1)n（从0开始）:first-child:last-child:only-child:nth-of-type(n)匹配父元素下指定子元素，在同类子元素中排序第 n:nth-last-of-type(n)匹配父元素下指定子元素，在同类子元素中排序第 n，从后向前数:nth-of-type(odd):nth-of-type(even):nth-of-type(3n+1):first-of-type:last-of-type:only-of-type::selection选择被用户选取的元素部分:first-line选择元素中的第一行:first-letter选择元素中的第一个字符
伪元素和伪类的区别和作用
- 伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
- 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {
content: "第一章：";
}
p::after {
content: "Hot!";
}
p::first-line {
background: red;
}
p::first-letter {
font-size: 30px;
}- 伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
a:hover {
color: ##ff00ff;
}
p:first-child {
color: red;
}padding和margin的百分比相对的对象
父级元素的宽度
背景色范围
link和@import的区别
- link属于html标签，而@import时css的语法
- link除了加载css之外，还可以做很多其它的事情
- @import只能加载css文件
- 加载顺序差别
- @import加载css只有当当前css被下载解析之后才会加载
- link加载css会并行下载，因此从性能优化的角度，应尽量避免使用@import
- 兼容性差别，@import是在css2.1提出的标准，仅支持ie5+的浏览器
- 当使用js控制dom去改变样式的时候，只能使用link
- 对于可换肤的网站而言，可以通过改变link的值来切换样式
渐进式渲染
progresive rendering 是为了提高用户感知的加载速度
- 骨架屏
- 图片懒加载
- 图片占位符
- 拆分网页资源
css渲染性能优化
- id选择器非常高效
- 避免深层次的嵌套
- 不要使用属性选择器
- 值缩写
- 背景图优化
css3遮罩
mask: 类似蒙版，透明的部分不显示，非透明，有图像的部分才能显示下面的内容，支持渐变
- mask-image;
- mask-repeat
- mask-size
- ...
滚动吸附
滚动容器 scroll-snap-type: x mandatory; // x轴滚动吸附,不能存在中间状态
子元素 scroll-snap-align: start; // 吸附对齐方式 scroll-snap-stop: always; // 始终要停在下一个元素，不能一次滚动跳过多个
使用 css 实现一个持续的动画效果
div {
animation: mymove 5s infinite;
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}animation-name规定需要绑定到选择器的keyframe名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画
clip-path
Houdini API
允许开发者干预浏览器渲染的各个环节
自定义css属性