Xrepo

Appearance

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> 元素, odd even。
  • :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、animation

  • transition：定义了元素在变化过程中是怎么样的，包含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设置

opacity 和 rgba、transparent 的透明效果有什么不同？ ​

  • 都能实现透明效果
  • opacity
    • 作为一个完整属性出现的
    • 对于整个元素起作用的
  • rgba和transparent
    • 作为属性值出现的
    • 任何需要设置颜色的地方都可以根据情况使用transparent或rgba。比如背景、边框、字体等等。
      • 哪个属性的颜色设置了 transparent，哪个属性就是透明的，完全透明。
      • 哪个属性用 rgba()设置了透明，就对哪个属性起作用，透明程度可设置，从 0.0 （完全透明）到 1.0（完全不透明）。
  • 由于opacity和alpha设置的透明程度可调，就引出一个继承的问题。如果一个元素未设置 opacity 属性，那么它会从它的父元素继承 opacity 属性的值。而 alpha 不存在继承。

什么是外边距重叠？重叠的结果是什么？ ​

外边距重叠就是 margin-collapse

  • 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
  • 只有垂直的会折叠

如何使用 CSS 实现硬件加速？ ​

硬件加速是指通过创建独立的复合图层，让 GPU 来渲染这个图层，从而提高性能，

  • 一般触发硬件加速的CSS属性有transform、opacity、filter，为了避免 2D 动画在 开始和结束的时候的repaint操作，一般使用tranform:translateZ(0)

如何实现小于 12px 的字体效果 ​

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;

text
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 有哪些继承属性 ​

  • 关于文字排版的属性如：

    • font

      • word-break 单词换行规则
      • letter-spacing 字符间距
      • text-align
      • text-rendering 非标准，文字的渲染规则
      • word-spacing 标签单词之间的间距
      • white-space 对文本中空白和换行符的处理规则
      • text-indent 段首缩进
      • text-transform 转换文本，全部小写，大写开头之类
      • text-shadow 文字阴影效果
      • text-overflow多余文本的处理方式，省略符、裁剪之类

    • line-height

    • color

    • visibility

    • cursor

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 创建一个三角形的原理是什么 ​

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 选择元素中的第一个字符

伪元素和伪类的区别和作用 ​

  • 伪元素 -- 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
  • 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
css
p::before {
	content: "第一章：";
}
p::after {
	content: "Hot!";
}
p::first-line {
	background: red;
}
p::first-letter {
	font-size: 30px;
}
  • 伪类 -- 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
css
a:hover {
	color: ##ff00ff;
}
p:first-child {
	color: red;
}

padding和margin的百分比相对的对象 ​

父级元素的宽度

背景色范围 ​

背景色范围包含padding不包含border

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 实现一个持续的动画效果 ​

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 ​

https://www.bilibili.com/video/BV1h6421Z7aA/?spm_id_from=333.1387.0.0&vd_source=13577946ef3878abe2197cc65b72005c

Houdini API ​

https://www.bilibili.com/video/BV1Sw4m1Y7ec/?spm_id_from=333.1387.0.0&vd_source=13577946ef3878abe2197cc65b72005c

允许开发者干预浏览器渲染的各个环节

自定义css属性

苏ICP备2025160170号-1 | 前端进化之路 | Released under the MIT License.

Copyright © 2024-present xpinus