如何给段落首行缩进？
一看题目居然没想起text-indent🤣，它的规定如下
适用于块元素
直至单位如下
长度值：px em rem
百分比：取决于包含块的width
关键字： each-line：文本缩进会影响第一行，以及使用
强制断行后的第一行；hanging：该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。
全局值：inherit initial unset
如何使用CSS实现段落首字母或首字放大效果？
::first-letter 伪元素选择器
p::first-letter {
font-size: 2em;
font-weight: bold;
}
border-radius:50%和border-radius:100%有什么区别？
这个实际上可以仔细区分一下，楼上的两个图具体来说应该是 border-top-left-radius 的50%和100%的区别，
假如我们直接设置border-radius: 100%; 或者为50%
我们会发现这两个图实际上没有区别（长方形也一样），所以我们需要了解一下border-radius值真正的含义，
它的值如果是百分比的话，就相当于盒子的宽度和高度的百分比，所以border-radius为50%时，对应的是边长的一半，所以正方形会显示圆形，当我们再增加至100%这个过程中他的显示结果都不会改变，这是因为W3c有对于’曲线重合‘这样的规范，当两个邻角的 半径和超出了总边长，浏览器会重新计算保证不会重合，所以建议使用border-radius:50%来避免浏览器进行不必要的计算
举例说明伪类:focus-within的用法
类似于事件的冒泡机制，可以从获取焦点的元素一职冒泡到根元素上
请用css写一个扫码的加载动画图
@Keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
height和line-height的区别是什么呢？
height：元素content area的高度
line-height：元素中，多行文字基线的距离
手写一个使用css3旋转硬币的效果
两种实现方式：1、animation+keyframes 2、transition：
//第一种实现方式
<style type="text/css"> .around{ width:200px; height:200px; background:orange; /*圆形的话看不出效果，所以这里border-radius没有取50%*/ border-radius:40%; transform:rotate(0deg); animation:move 3s ease; } @Keyframes move{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(360deg); } 100%{ transform:rotate(0deg); } } </style>
//第二种实现方式
<style type="text/css"> .around{ width:200px; height:200px; background:orange; /*圆形的话看不出效果，所以这里border-radius没有取50%*/ border-radius:40%; transform:rotate(0deg); transition:transform 3s linear; } .around:hover{ transform:rotate(360deg); } </style>
使用css3做一个魔方旋转的效果
总的来说，用了一些 3D 效果的样式，如 translate3d，rotate3d，perspective，transform-style: preserve-3d; 等，感兴趣的可以去看看它的样式文件
如果给一个元素设置background-color,它的颜色会填充哪些区域呢？
当全国哀悼日时，怎么让整个网站变成灰色呢？
body{
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
/* OR */
body{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
怎样用纯CSS实现禁止鼠标点击事件？
pointer-events: none;
是css3新出现的属性，意思就是禁止鼠标点击事件，当元素中有这一属性时，链接、点击事件统统失效。
实现一个上下固定，中间自动填满的布局
利用flex布局，flex-direction:column 定义排列方向为竖排
header footer 定高，中间部分flex:1; 一样可以实现
需要注意的是body和container容器需要设置高度100%;
请写出:link、:visited、:hover、:active的执行顺序
:link
未访问链接
:visited
已访问的链接
:hover
鼠标悬停
:active
鼠标按下
顺带一提，可交互式的组件还有一个
:focus
选中状态（鼠标点击、TAB键）
举例说明clear取值有哪些？
none 默认值。允许浮动元素出现在两侧。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
inherit 从父元素继承 clear 属性的值。
举例说明常用的cursor取值有哪些？
1、cursor: move; (移动)
2、cursor: pointer;(手型)
3、cursor: not-allowed;(禁用)
你有用过vw布局吗？和使用rem有什么区别？
vw/vh 是屏幕视图的百分比，
rem 是根据 html的font-size 来设置的相对值。
实现文本的竖向排版
writing-mode: vertical-lr;/从左向右 从右向左是 writing-mode: vertical-rl;/
writing-mode: tb-lr;/IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；/
怎么使图片宽度自适应呢？
百分比 vw padding:百分比
怎么让div中的图片和文字同时上下居中？
<div>
<img src="./"/>
<label>文字内容</label>
</div>
<style>
img {
vertical-align: middle;
}
</style>
给 img 设置 vertical-align: middle; 并且 vertical-align 只对行内元素，还有表格内的单元格有效，对块级元素的垂直居中是没有任何效果的
举例说明:not()的使用场景有哪些
/* 子级之间留 10px 空隙 */
.gap-right-10 > :not(:last-child) {
margin-right: 10px;
}
/* 有数据时加上标题 */
.list-wrap:not(:empty):before {
content: attr(data-title);
}
/* flex 容器中都不压缩宽度 */
.flex-row {
display: flex;
align-items: center;
& > .grow { flex-grow: 1; }
& > :not(.grow) { flex-shrink: 0 }
}
使用css写一个水平翻转文字的效果
letter-spacing: -2em;
box-reflect: below;
你有使用:valid和:invalid来校验表单吗？
很不好控制，拿必填来举例，:invalid 标红。
初始时就红的，那 :focus:invalid 吧，blur 就不标了；
刚 focus 就标红，不见得是设计想要的，:placeholder-shown 能解决一点。
后来还是加上了一些 js，因为需求变化得比解决它的坑要快。
举例说明attr()的使用场景
css content 的 attr() 呀，开始还以为是 jquery 的 attr()
可以用于 tooltips
可以用于多个内容文本替换，比如菜单效果
存放 i18n 信息
总的来说，是将一些文本存在 html 中，在 css 中可以被使用。
怎么使用纯css实现左右拉伸拖动？
核心属性
resize:horizontal
用css实现饼图效果
方法一、使用伪元素 + transform + css渐变实现
.pie {
width: 100px;
height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0);
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
transform: rotate(.3turn);
}
方法二、svg解决方案
<svg width="100" height="100">
<circle r="25" cx="50" cy="50"/>
</svg>
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 50;
stroke-dasharray: 60 158;
}
svg {
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}
用css实现倒影的效果
box-reflect
使用overflow: scroll时不能平滑滚动怎样解决？
scroll-behavior: smooth;
请说下你对css对象模型(CSSOM)的理解
CSSOM 是一组允许 JavaScript 操作 CSS 的 API。它非常类似于 DOM，但是用于 CSS 而不是 HTML。它允许用户动态读取和修改 CSS 样式。
使用css画出一个五角星
#star-five {
margin: 50px 0;
position: absolute;
display: block;
color: red;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
left: 200px;
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
说出至少十条你理解的css规范
命名规范（连字符-分隔的字符串）
文件宽度限制（每行80个字符）
加注释
编写选择器应有助于重用
尽量不要加 !important
避免使用CSS表达式
选择<link> 舍弃 @import
避免使用滤镜（IE 专有的 AlphaImageLoader 滤镜）
把样式表放在顶部 / 把CSS放在外部文件
压缩CSS
写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环
.animation-block {
width: 50px;
height: 50px;
background: red;
margin-top: 200px;
animation: up 1s linear, down 1.5s linear 1s;
}
@keyframes up {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-100px);
}
100% {
transform: translateY(0px);
}
}
@keyframes down {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0px);
}
}
<div class="animation-block"></div>
var box = document.querySelector('.animation-block');
var i = 0
box.addEventListener("webkitAnimationEnd", function() {
i++
if (i == 2) {
i = 0
box.classList.remove('animation-block');
setTimeout(function() {
box.classList.add('animation-block');
}, 0)
}
}, false);
在css中为什么说不建议使用@import？
@import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；
当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
当父元素使用opacity时，子元素也会继承该透明度，即使重新设置透明度也不行。楼上的两种方法要么是放弃使用opacity，要么是放弃使用父子关系。但这都不符合和题意。按照题意，既要使用opacity又要父子关系，暂时无解。
请问触发hasLayout的后果是什么？
继承父元素的布局。
css中兼容ie浏览器的前缀是什么
-webkit- 谷歌
-moz- 火狐
-o- opera
-ms- ie
css中class和id选择器有什么区别？
id 在部分浏览器的 js 中会直接生成同名变量；
id 的唯一性，获取该 id 的 dom 时，会取同名 id 的前者；
id 层叠权重非常高，1000 个 class 也覆盖不了 id 的样式；
class 可以用空格给同个元素设置多个 class，id 用空格会让 id 失效；
id 可以和链接锚点一起玩耍。
移动端页面不满一屏时如何实现满屏背景？
body {
min-height: 100vh;
}
写一个高度从0到auto的transition动画
写不了吧，max-height 定值倒是可以
如何设置背景图片不随着文本内容的滚动而滚动？
直接对div设置background：url不就好了嘛？上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.img-wrap {
width: 800px;
height: 500px;
background: url("./src/assets/404_images/404.png") 100% no-repeat;
background-size: 100% 100%;
overflow: auto;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<div class="img-wrap">
<p>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</div>
</body>
</html>
<script>
</script>
如何使用CSS3的属性设置模拟边框跟border效果一样？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #000;
position: relative;
}
.box:after {
content: '';
width: 204px;
height: 204px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
怎么IE6下在使用margin:0 auto;无法使其居中？
浏览器解析的问题，IE6下需要对居中的元素设置text-align:center属性使其margin:0 auto;生效。
使用css实现彩虹的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩虹</title>
<style>
.rainbow-wrap {
width: 500px;
height: 500px;
background-color: red;
position: relative;
left: 20px;
top: 20px;
border-radius: 100%;
}
.rainbow-wrap::after {
content: '';
width: 500px;
height: 250px;
background-color: white;
position: absolute;
bottom: 0;
}
.rainbow-wrap::before {
content: '';
width: 200px;
height: 200px;
background-color: white;
position: absolute;
bottom: 0;
border-radius: 100%;
top: 150px;
z-index: 10;
left: 150px;
}
.rainbow-wrap .rainbow-item {
position: absolute;
width: 400px;
height: 400px;
border-radius: 100%;
background-color: yellow;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rainbow-item:nth-child(2) {
background-color: blue;
width: 300px;
height: 300px;
}
.rainbow-item:nth-child(3) {
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="rainbow-wrap">
<div class="rainbow-item"></div>
<div class="rainbow-item"></div>
<div class="rainbow-item"></div>
</div>
</body>
</html>
css中padding和margin是相对于父元素还是子元素呢？
padding就是往自己身体里塞东西（盒子里面），margin就是穿衣服（盒子外面）。
==>padding相对于子元素，margin相对于父元素
你有使用过vmax和vmin吗？说说你对它们的理解
vmax和vmin都是相对于窗口大小的长度单位。
100vmax相当于100%当前窗口长或者宽的长度，取其中最大值，vmin反之。
如果css函数max()和min()普及后，100vmax相当于max(100vw, 100vh)
个人最常用的是vmin，可以在确保在保持宽高比的情况下，不论窗口如何缩放都可以不让元素超出窗口范围。
解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？
手机端中比较常用的三段式布局, 头尾固定高度 中间自适应 它可以修改父元素下所有子元素的位置 和排序方式 相对于浮动 更加强大 要注意的是指定flex之后,子元素的float、clear和vertical-align属性将失效
使用rem布局时怎样合理设置根标签字体大小？
UI出2倍稿，然后用js计算当前设备和UI设计稿之间的比例关系，通过resize实时计算根标签字体大小，即可。
使用rem时应该注意什么？
看了下 绝对单位 和 相对单位。
em 是相对元素本身的 font-size 的相对单位，比如元素本身的 font-size 是 14px，那么 1.2em = 1.2 * 14px = 16.8px。注意，是相对元素本身的 font-size，会随着元素的 font-size 的改变而改变。
rem 是 root em 的缩写，相对根元素的 font-size 相对单位，比如根元素的 font-size 是 14px，那么 1.2rem = 1.2 * 14px = 16.8px。注意，是相对根元素的 font-size，不论元素处于什么位置，乘法的基数都是 14px(根元素的 font-size)。
em 一半用于设置元素的 padding, margin, border-radius 等。
rem 一半用于设置元素的 font-size。
px 一半用于设置 border。
如果用 em 设置 font-size 很容易会出现意想不到的问题。比如嵌套的 div。
// css
div {
font-size: 0.8em;
}
<!--html-->
<div>
div1
<div>div2</div>
</div>
上面的代码，假设根元素用的是默认值 16px，那么第一个 div 的字体是 0.8 * 16px = 12.8px，第二个 div 的字体会先继承第一个 div 的 font-size = 12.8px，然后再乘以 0.8，0.8 * 12.8px = 10.24px，就会导致两个 div 的字体不一样大。
如果使用的是 rem，那么基数都是 16px，两个 div 的大小都是 12.8px。
当页面采用rem布局时，如何解决用户设置字体大小造成的页面布局错位？
禁止用户缩放页面
使用rem的优缺点是什么？和使用百分比有什么区别？
rem在处理小数的时候会有误差，百分比要按照父级的尺寸去计算，不灵活
rem是如何实现自适应布局的？
其大小与设置的html根大小相对
通过js获取当前页面的宽度，动态的调整
html{
font-size: 5px;
}
来改变整个页面对应的字体大小
在rem下如何实现1像素？
先用px开发，最后把px转换成rem
你是如何压缩字体的？
压缩字体文件么，有研究过，平时用 font-spider。
webpack 集成没怎么实践过，还只知道 url-loader。
有三种不同的压缩处理策略的，
自己决定压缩打包哪些文字，如 FontZip，iconFont
自动检测要压缩打包哪些文字，如 font-spider
动态生成本页有哪些文字的文件，如 有字库
forever-z-133/blogs#3
另外值得一提的是字体分包是真的棒，
比如字体 A 中包含 大 字，字体 B 中包含 佬字，然后用 font-family: A B 是可行的。
比如压缩后还有 1M 那么大，就可以拆为常见的 6000 个文字，和异步加载的不常用文字。
如何使用CSS绘制一个汉堡式菜单
比较常见的两种方法：
利用元素自身、::before和::after伪元素绘制3个长宽一致的矩形，然后设定其y偏移值。
利用上下border和自身元素内容绘制：
.burger {
--width: 20px;
--thickness: 4px;
--color: black;
display: inline-block;
width: var(--width);
height: var(--thickness);
background-color: var(--color);
background-clip: content-box;
border-top: solid var(--thickness) var(--color);
border-bottom: solid var(--thickness) var(--color);
padding-top: var(--thickness);
padding-bottom: var(--thickness);
}
头部设置meta也可以做到自适应为啥还要用rem？
媒体查询如果需要适应的情况比较多 就得写多个条件的代码 代码太多太繁琐 rem只用判断是几倍图 就可以做出调整
解释下什么是PPI和DP？
PPI（pixel per inch）：像素密度，1英寸屏幕上显示的像素量。值越高，屏幕越细腻。
DP（Density-independent pixel）：安卓开发用的长度单位。
1dp 等于屏幕像素密度为 160ppi 时 1px 的长度，因此 dp 在整个系统大小是固定的。
公式：1dp=（屏幕ppi / 160）px。
如何修改美化radio、checkbox的默认样式？
利用after伪元素自定义radio或者checkbox
或是利用图片进行样式修改
说说display:none和visibility:hidden的区别
display:none dom对象不渲染。
visibility:hidden 隐藏但是dom对象渲染。
css的user-select:all 有什么用处？
none：
文本不能被选择
text：
可以选择文本
all：
当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：
可以选择文本，但选择范围受元素边界的约束
如何让一个块元素绝对居中？
div{
position:fixed;
right:0;
left:0;
bottom:0;
top:0;
margin: auto auto
}
你知道什么是CSS-in-JS吗？说说你对它的了解
有好多种呀，只能列几个我知道的了
const styles = {
color: red,
};
return <div style={styles} />
// index.module.css
.x { color: red }
// index.js
import styles from './index.module.css';
return <div className={styles.x} />
const styles = {
x: { color: red }
};
return <div className={styles.x} />
const styles = {
x: { color: red }
};
return <styles><div className="x" /></style>
分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
opacity 0: 单纯视觉效果，除了看不见，其他都正常。
visibility: hidden: 可继承也可覆盖。
display: none: 元素不会渲染，不影响布局，不会被css计数，也不支持transition。
你对伪类了解多少？分为几大类？
:hover ::after ::before :nth-child :nth-of-child :first-child :last-child
总结分为两类：页面节点效果操作和获取指定元素选择器
小渣渣一枚，只能写几个出来。
使用sass的方式有哪些？
得编译，有的项目中可以用<style type="sass"> 来使用（也得编译） 记不清楚是不是了
为什么要使用sass/less？
为了提示开发效率，使得css编写更加灵活
sass是怎么定义变量的？
sass变量可以理解为以$+变量名为键的键值对，例如$color-black:#000
检测sass中错误的指令是哪个？
@debug伪指令检测错误，并将SassScript表达式值显示到标准错误输出流。
你有用过sass中的Mixin功能吗？它有哪些作用？
1.混合用法
2.函数用法
1. @mixin ellipsis-one {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.test {
@inculde ellipsis-one;
}
2. @mixin hoverColor ($color, $deepColor) {
color: $color;
cursor: pointer;
&:hover {
color: $deepColor;
}
}
.test {
@inculde hoverColor(#555, #333);
}
在sass中可以执行布尔运算吗？
布尔运算？sass 有 @if @else if @else，这样也算是有并交关系了
说说sass有哪些你认为很棒的特性
预处理
嵌套
变量
模块
继承
计算
请使用CSS画一个带锯齿形边框圆圈
@import
css如何消除字体的锯齿？
-webkit-font-smoothing：antialiased;
css图片缩放失真出现锯齿的如何解决呢？
1、-ms-interpolation-mode，这是针对IE的解决方案。其值设置为bicubic。
2、image-rendering，这是提供了一个速度VS质量之间做权衡的图像缩放关系。
额外的思考：
1、微信上传图片时，服务端会自动把图片做不同尺寸的处理。我们可以采用这个思路来解决图片缩放产生的问题。
2、SVG的技术，是一种矢量图的解决方案，缩放不会产生失真，我们可以把图片转为SVG来展示。
3、canvas技术，也是一种绘图技术，可以把图片转为canvas。
如何清除在项目中无用的css代码呢？
1、IDE中，会对没有使用到的样式，自己进行检测，删除时候，还需要手动删除。
2、webpack中，有基于消除无用css的插件（purifycss-webpack purify-css），不过需要提供html文件的模板，因为需要遍历这个模板，才知道用了哪些css。
3、单页面应用中，由于都是组件化的开发，无法提供一个最终版的html文件，所以不能适用上面2提供的方案。
一个页面引用多个文件，如何防止样式冲突？
编码层面：
1、定制规则：不同的样式文件表，增加不同的前缀。
2、按照功能区分文件：不同的文件样式表，针对页面不同的部分写样式，通过样式层级的方式，确认样式的边界。（例如header部分：#header p { }，footer部分：#footer p { }）。
工具层面：
1、postCss的使用
2、vue中scoped、react中的css module配置等等
使用css将图片转换成黑白的效果
filter: saturate(0);
请使用css3来模拟中/英文打字的效果
:after 加个竖条闪啊闪，至于文字一个个出现嘛，text-indent 需要知道字数，clip-path 需要知道宽高，好像也没有特别好的办法。当然如果是单行文本的话用 width overflow 也是阔以的。
使用css3画一个扇形
四个半圆叠加，过半调整 z-index
.container {
width: 200px;
height: 200px;
position: relative;
border-radius: 100%;
}
div {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.fan-1,
.fan-3 {
background: #CC9999;
}
.fan-2,
.fan-4 {
background: white;
}
.fan-1,
.fan-2 {
border-radius: 100px 0 0 100px;
transform-origin: 100% 50%;
z-index: 2;
}
.fan-3,
.fan-4 {
z-index: 1;
left: 50%;
border-radius: 0 100px 100px 0;
transform-origin: 0% 50%;
}
.fan-4 {
animation: rotate-2 2s linear both infinite;
}
.fan-2 {
animation: rotate-1 2s linear both infinite;
}
.fan-3 {
animation: zIndex 2s linear both infinite;
}
@keyframes zIndex {
from {
z-index: 1;
}
50% {
z-index: 1;
}
50.000001% {
z-index: 2;
}
to {
z-index: 2;
}
}
@keyframes rotate-1 {
from {
transform: rotate(0);
}
50% {
transform: rotate(0);
}
to {
transform: rotate(180deg);
}
}
@keyframes rotate-2 {
from {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(180deg);
}
}
clip-path 切多边形， border-radius 裁剪
1 .sector { display: inline-block; margin: 20px; background: #CC9999; width: 100px; height: 100px; border-radius: 100%; animation: sector 4s linear both infinite; transform: rotate(45deg); }
@keyframes sector{
from {
clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
}
25% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
25.000001% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
}
50%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
}
50.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
}
75%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
75.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
}
to{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}
}
静态：
先画一个圆，外加两个绝对定位的半圆
扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现
这只能切出180°以内的扇形
超过180°的扇形，就把圆作为底色，两个遮罩作为扇形的组成部分
想获得不同度数的扇形，改变 mask 样式里的度数即可。
1 2 3 4 5 .contain { position: relative; width: 200px; height: 200px; } .main { height: 100%; background: lightgreen; border-radius: 100px; } .common { position: absolute; top: 0; width: 50%; height: 100%; } .mask1 { transform: rotate(83deg); border-radius: 100px 0 0 100px; left: 0; transform-origin: right center; background: red; } .mask2 { transform: rotate(-76deg); transform-origin: left center; left: 100px; border-radius: 0 100px 100px 0; background: blue; }
你知道什么是动态伪类吗？
锚点伪类（a标签）
1、:link 未操作的链接
2、:visited 该链接已被访问，一旦:visited，:link/:active不再起作用。
用户行为伪类
1、:hover 鼠标悬停该元素
2、:active 鼠标点击该元素
3、:focus 鼠标在输入框中input
UI元素状态伪类
1、:enabled
2、:disabled
3、:checked
css中的baseline，你知道吗？
baseline是西文字体里面的一种定位，vertical-align:baseline是指行内元素里的文字，在垂直方向上，按字体的基线排列，基线就是可以类似我们小学写英文字母时的带线的格子，axec这些字母的底部就是baseline，然后lh的baseline也一样，g的baseline则在于中间，就是西文字体如何在一条看不见的线上排练形成整齐的视觉效果。汉字很少提及baseline的概念，但汉字有中宫的说法。
如何将元素的所有css属性恢复为初始化状态？
all:upset
移动端1px像素的问题及解决方案是什么？
viewport结合rem解决像素比问题
比如在devicePixelRatio=2设置meta
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio=3设置meta
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
用CSS实现tab切换
1.用label结合单选按钮radio接受切换tab的单击
2.用zindex层级来显示当前tab页对应的内容
3.用css兄弟选择器选中对应的tab页签和内容页，添加相应的样式
用CSS实现一个轮播图
使用CSS实现的话，可以使用 animat属性和overflow:hidden 属性来做。
字体的粗细的属性是用哪一个？它有哪些属性值？
font-size指的应该是字体大小，字体粗细应该是font-weight，值有normal,bold,bolder,lighter,inherit,也可以自己定义100~900之间的某一个值
举例说明跟字体相关的属性有哪些
font-size：字体大小
font-weight：字体粗细
font-family：字体类型
color：字体颜色
等等
你所理解的css高级技巧有哪些？
各种动画效果，能用css的都可以不去用js写的，对我来说就很高级
body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
html是body的父级，在缺少了父级的宽高之后，如果给body设置一个渐变色背景的话将不会正常显示。
你有使用过font-size-adjust属性吗？说说它的作用是什么？
很少用。
实际应用场景：
实际应用场景
在指定字体时，出于安全考虑，人们通常会为一个元素指定多种字体，希望当首选字体不可用时，让浏览器自动使用备选字体。
如，以下样式将 Verdana 字体作为段落的首选字体，当 Verdana 字体不可用时，则使用 Georgia 字体，当 Georgia 字体不可用时，则使用 Times 字体：
p {
font-family: Verdana, Georgia，Times;
}
由于 Georgia 和 Times 字体比 Verdana 字体的 aspect 值要小，当使用备选字体时，必然会影响文本的易读性，甚至导致页面布局产生混乱。
为了避免这种情况，在CSS3中，新增加了 font-size-adjust属性。实际应用中，只需把 font-size-adjust属性的值，设置为首选字体的 aspect 值，就可以保证使用备选字体后，文本的显示尺寸不发生变化。
当使用@font-face的时候，为什么src中要加入local呢？
网上的说法片面不一，CSDN和掘金都没见到正确回复，然后我在MDN找到了比较明确的说法。
MDN的 @font-face 这是一个CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。
src
远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它。
代码：
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替。意味着加入local后，代码加载时会优先采用电脑资源，而不是从网络加载，这个可以加快加载速度，提升用户体验感。
如何解决css加载字体跨域的问题？
刚才碰到一个css加载字体跨域问题，记录一下。
站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com，而静态文件的域名为 st.domain.com。
问题：
页面中加载css文件：<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />
此css中调用了外部字体如下：
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
浏览器报请求跨域的错误。
解决方案：
我们使用Access-Control-Allow-Origin：* 通过启用cors 来解决跨域问题。
具体步骤如下：
1.开启apache的mod_headers模块
LoadModule headers_module modules/mod_headers.so
2.设置Access-Control-Allow-Origin
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
done!
说下你对css样式的这几个属性值initial、inherit、unset、revert的理解
initial（初始）、inherit（继承）、unset（未设置）、revert（还原）
inherit可以继承父级元素的属性，initial则是不继承
unset - 表示如果该属性默认可继承，则值为inherit，否则值为initial
revert - 表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于unset 。
其实前两个我还是理解的 后面两个其实不太理解
如何取消从父级元素继承下来的CSS样式呢？
如果是恢复单个属性样式，例如font-size，可以使用
font-size: initial;
如果是将所有属性样式恢复为默认状态，可以使用
all: initial;css的哪个属性可以把所有元素或其父元素的属性重置呢？
all:unset
你认为sass和less的最大区别是什么呢？你喜欢哪个？为什么？
less 没有循环只有递归；
less 没有 if 只有 when；
sass 多个 @function 很棒，否则只能堆变量了；
less 拼接类名的字符串需加上 ~；
应该还有很多内置方法的不同，但现在还没用到。
其实我更青睐 stylus，写 flex: left center 这种自定义属性，很简便很舒服，
但这种肯定会被加到全局里，多人合作时就很怕有人会乱玩了。所以用的最多的还是 sass。
另外，不用 mixin 会造成很多废代码，而 scss 需要加 @include some($x) 才行，
这个时候就觉得 less 很舒服了，.some(@x) 就行。
但是吧，less 的递归和条件玩起来真的不舒服，所以还是选了 sass。
说说你对sass的嵌套规则的理解？
嵌套类型有：选择器嵌套、属性嵌套、伪类嵌套、群组选择器嵌套 。
.tenant-detail {
background: transparent!important;
.tenant-container { //1.选择器嵌套
width: 100%;
> div {
margin: 0{ //2.属性嵌套 相当于margin:10px 0 0 0 ;
top:10px
}
&:hover{ //3.伪类嵌套 :hover
background:#fff;
}
}
p,h2,h3{ //4.群组选择器嵌套
color:red;
}
}
}
css的height:100%和height:inherit之间有什么区别呢？
上周在微博上无节操吐槽了下inherit的段子，没想到回声还不少：
微博inherit无节操段子
不过inherit确实是个好东西，不仅节约代码，尤其与background之流打交道；而且还利于维护。
注意，如果想要继承background的图片，不能这样缩写，会显得很天真：
background: #fff inherit left top;
可以这样子：
background-image: inherit;
二、height:100%和height:inherit的异同
-
兼容性差异
height:100% IE6+ √
height:inherit IE8+ √ -
大多数情况作用是一样的
除去兼容性，大多数情况下，两者作用是一样的，甚至都很难想出不一样的理由。
① 父容器height: auto，无论height:100%或者height:inherit表现都是auto.
② 父容器定高height: 100px，无论height:100%或者height:inherit表现都是100px高.
难道没有差异吗？难道没有使用height:inherit的理由吗？当然有，记住，江湖上所发生的一切事情，都绝非偶然！
- 绝对定位大不同
当子元素为绝对定位元素，同时，父容器的position值为static的时候，呵呵呵，height:100%和height:inherit的差异就可以明显体现出来了！
呵呵
您可以狠狠地点击这里：height:100%和height:inherit差异demo
CSS如下：
.outer {
display: inline-block;
height: 200px; width: 40%;
border: 5px solid #cd0000;
}
.height-100 {
position: absolute;
height: 100%; width: 200px;
background-color: #beceeb;
}
.height-inherit {
position: absolute;
height: inherit; width: 200px;
background-color: #beceeb;
}HTML如下：
结果，height:100%的冲破云霄，哦，不对，是深入地域地狱： height:100%深入地域截图 
而height:inherit却完美高度自适应没有定位特性的父级元素：
绝对定位元素高度自适应与普通元素
对绝对定位有所了解的应该都知道原因，我就不解释了。
总之，这里，height:inherit的强大好用可见一斑。回头，容器高度变化了，里面的绝对定位元素依然高度自适应。这是很赞的特性，因为如果页面很复杂，避免使用position: relative会让你少去很多z-index混乱层级覆盖的麻烦。
如何禁止长按保存或复制图像？
img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
img标签是行内元素，为什么却能设置宽高
原来CSS中还有一个概念：可替换元素
MDN上是这么解释的：
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。 典型的可替换元素有：
<iframe>
<video>
<embed>
<img>
有些元素仅在特定情况下被作为可替换元素处理，例如：
<input> "image" 类型的 <input> 元素就像<img>一样可替换
<option>
<audio>
<canvas>
<object>
<applet>（已废弃）
CSS的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
这些元素有一个共性，就是他们的内容都不是通过在标签内添加文本，而是通过某个属性（src、data（<object>）、label（<option>）或js控制（<canvas>））来显示内容的。
可替换元素拥有内置宽高，他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。
ps：我在看别人的资料的时候，看到个误区，textarea、button等并不是可替换元素，他们是浏览器默认的内联块元素。
display: inline-block;
display: inline-block;
额外知识：
1. 当需要给图片设定固定宽高，并需要不拉伸时（等类似情况），
1）背景图，background-size配合background-position。（适用于装饰性图片）
background-size: [ <length-percentage> | auto ]{1,2} | cover | contain;
background-position: [ left | center | right | top | bottom | <length-percentage> ]{1,2}
background-position值还可以是边偏移量：例：background-position: bottom 10px right 20px;
2）img元素，object-fit配合object-position。（适用于内容图片）
object-fit: fill | contain | cover | none | scale-down;
object-position: 同background-position;
object-position和background-position的区别在于默认值不同，
object-position默认为50% 50%;
background-position默认为0% 0%;
2. 图片img元素下面有一段空白区域，是因为vertical-align和line-heigh
空白区域
空白区域
解决：img元素display: block;
3.vertical-align 只对行内元素、表格单元格元素生效。 vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>;
css中的选择器、属性、属性值区分大小写吗？
选择器和属性区分大小写，属性值如果是颜色可以不区分大小写吧
说说你对相对定位、绝对定位、固定定位的理解
position 属性指定了元素的定位类型。
position 属性的五个值：
static（默认值）
relative（相对定位）
fixed（固定定位）
absolute（绝对定位）
sticky（粘性定位）
relative 相对定位：相对自身元素的原来进行定位。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
用途：
第一个，为微调元素的位置
第二个，做绝对定位的参考(父相子绝)
absolute 绝对定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>（初始包含块）
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
fixed 固定定位：元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间
Fixed定位的元素和其他元素重叠
用途：
固定到浏览器窗口固定位置的元素
跟随导航
回到顶部
sticky 粘性定位：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
用途：页面吸顶效果
什么是hack？css的hack有哪些？
一、总结
1、CSS hack：由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
2、hack：本意：修改，引申为对软件的二次修改 css hack的意思是浏览器兼容
3、hack实例： 1、属性级Hack：比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。
二、hack是什么
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
Hack，顾名思义是修改的意思。 这次普通的词汇在IT上得到了很广泛的应用： 1、针对Discuz!系统，Dvbbs系统等论坛软件的二次修改。 Hack是基于开源的程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。 目前，Hack大多和插件混为一谈，其实二者是有很大区别的：插件一般是利用程序的API（接口），复用程序底层，利用一些程序既有的函数和类制作新的小作品，一般有文件的增加，且符合标准的插件，其目录结构和文件名都是有一定格式的（如Discuz!的插件文件需放在plugin目录下）。而Hack则是针对原程序文件的直接修改，在格式上也自然没有太严格的规定，且一般没有文件的增加。 由于基础是开源免费的，一般的Hack也都是开源免费的，许多程序爱好者会根据自己或者朋友的需求，去制作一些小Hack在各个程序的官方交流论坛发布（比如动网的hack就会发布在动网的交流论坛的插件区），以获得站长们和官方的肯定和鼓励。
三、那么在HTML中CSS hack究竟是什么意思呢？
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;
以下是引自百度百科的定义
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
注意： 我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（Mozilla Firefox）即可，至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT傲游浏览器。
CSS Hack常见的有三种形式：
CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1、属性级Hack：比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。
2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
CSS<wbr>Hack技术介绍及常用的Hack技巧集锦
3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
回到顶部
二、CSS hack的实际应用
CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题，如margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：.kwstu{margin-left:20px;_margin-left:20px;}。比如要分辨IE6和firefox两种浏览器，可以这样写：
div{
background:green;/forfirefox/
*background:red;/forIE6/(bothIE6&&IE7)
}
我在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green} ,于是理所当然这个div的背景是绿色的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;} ,于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。CSS hack:区分IE6，IE7，firefox区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green!important;background:blue;
区别IE7与FF：
background:orange;*background:green;
区别FF，IE7，IE6：
background:orange;background:green;_background:blue;
background:orange;background:green!important;background:blue;
注：IE都能识别;标准浏览器(如FF)不能识别；IE6能识别；不能识别 !important ;IE7能识别*，能识别!important;FF不能识别*，但能识别!important;
浏览器优先级别:
FF<IE7<IE6,CSS hack
书写顺序一般为FF IE7 IE6
以: " #demo {width:100px;} "为例:
#demo {width:100px;} /被FIREFOX,IE6,IE7执行./
- html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
+html #demo {width:130px;} /会被IE7执行/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack：
“9” 例:“border:1px 9;”.这里的"9"可以区别所有IE和FireFox.（只针对IE9 Hack）
“0” IE8识别，IE6、IE7不能.
"" IE6、IE7可以识别.IE8、FireFox不能.
“" IE6可以识别"”,IE7、IE8、FireFox不能.
IE6 hack
_background-color:#CDCDCD;/ie6/
IE7 hack
background-color:#dddd00; / ie 7*/IE8 hack
background-color:red 0; /* ie 8/9*/IE9 hack
background-color:blue 90;火狐，傲游，浏览器通用
background-color:red!important;
注意写hack的顺序，其中：
background-color:red0;IE8和IE9都支持；
background-color:blue90; 仅IE9支持；
另外，background-color:eeeeee9;的HACK支持IE6-IE8，但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。
IE9 和 IE8 以及其他版本的区别说明
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red9;9所有的ie浏览器可识别；
background-color:yellow0; 0 是留给ie8的，最新版opera也认识，后面自有hack写了给opera认的，所以，0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple9; } :root是给ie9的，网上流传了个版本是 :root #test { background- color:purple0;}，这个，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}
@media all and (min-width:0px){ #test {background-color:black0;} } 这个是老是跟ie抢着认0的神奇的opera，必须加个0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后这个是浏览器新贵chrome和safari的。
选择符级HackCSS内部选择符级Hack语法
selector{ sRules }
说明选择不同的浏览器及版本尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。简单列举几个：
- html .test{color:#090;} /* For IE6 and earlier */
-
- html .test{color:#ff0;} /* For IE7 /
.test:lang(zh-cn){color:#f00;} / For IE8+ and not IE /
.test:nth-child(1){color:#0ff;} / For IE9+ and not IE */
内部属性HackCSS内部属性级Hack语法：
- html .test{color:#ff0;} /* For IE7 /
selector{?property:value?;}
取值：
注意： 不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。补充：IE6能识别* ，但不能识别 !important,IE7能识别 *，也能识别!important;FF不能识别 *，但能识别!important;下划线” _ “,IE6支持下划线，IE7和firefox均不支持下划线。
回到顶部
三、为什么不推荐不推荐使用CSS hack来解决兼容性问题
CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此，在设计之初，写CSS hack需要遵循以下三条原则：
有效： 能够通过 Web 标准的验证
只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器
代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。
回到顶部
常用的CSS Hack
代码如下:
你知道什么是面向对象的css（oocss）吗？有没有实践过？
oocss(Object Oriented CSS)不是一种技术也不是一种语言，它是一种css的书写方法，其核心是用最简单的方式编写最整洁的css代码，使代码更具重用性、可维护性和可拓展性。
OOCSS的两条主要准则：
1.结构和皮肤分离;
2.容器和内容分离;
比如一些常用的字体大小、padding、margin值等可以封装为公共样式，html中引用多个类似的类名达到UI效果，减少特性css的代码量
.text-12{ font-size: 12px; } .text-14{ font-size: 14px; } .text-16{ font-size: 16px; }
flex布局的缺点有哪些？（除兼容性外）
无法直接定义列数(要使用百分比的方式实现)
padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？
box-sizing:border-box
如何让IE6支持min-width和max-width？
利用IE特有的css语法
.className {
max-width:620px;
min-width:1px;
_width:expression(this.scrollWidth > 620 ? "620px":(this.scrollWidth < 1? "1px":"auto"));
}
如何解决IE6浮动时产生双倍边距的BUG？
1.当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距
2.给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item 这样在元素浮动的时候就不会在ie6下面产生双倍边距的问题了
OOCSS有哪些好处？对应的库有哪些？
有语义的类名，逻辑性强的层次关系
可重用，样式和结构的分离，容器和内容的分离
Kite
CSS中哪些属性会引起GPU渲染，会增加耗电吗？
肆无忌惮的开启GPU硬件加速，会导致大量消耗设备电量，降低电池寿命等问题。
如何在白天和黑夜自动切换页面的颜色？
媒体查询的内容都是设备的属性：宽度高度，旋转方向，打印样式，分辨率
所以用媒体查询的话，需要用户的设备拥有切换黑暗模式的功能
借助 js 切换页面颜色的话，那就是
获取地理位置
查询日出日落时间
根据时间修改全局 theme
如何给文字的color设置渐变
.text {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
为什么说css中能用子代选择器的时候不要用后代选择器？
选择从右到左依次解析匹配，所以后代选择器会去找它的所有父级，
而子代选择器只会选择直接的父级；减少匹配次数，提高效率
你有没有使用过“形似猫头鹰”（例：* + *{ ... }） 的选择器？
以前常用，比如
li + li {
margin-top: 1rem;
}
这样可以给除了第一个li以外的li指定样式，比如在两个li之间加上margin
用css画一个五边形和一个六边形
五边形：
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
六边形：
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
七边形：
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
使用纯css来创建一个滑块
.checke{
position: relative;
-webkit-appearance: none;
width:90px;
height: 44px;
line-height: 44px;
background: #eee;
border-radius: 30px;
outline: none;
}
.checke:before{
position: absolute;
left: 0;
content: '';
width: 44px;
height: 44px;
border-radius: 50%;
background: #eee;
box-shadow: 0px 0px 5px #ddd;
transition: all 0.2s linear;
}
.checke:checked{
background: #18ff0a;
}
.checke:checked:before{
left: 45px;
transition: all 0.2s linear;
}
使用css3实现一个斑马线的效果
@ferrinweb 如果需要很多或者无限扩展的斑马线，你这个方案就有缺点了
@cxwht 你的方案需要增加额外的元素，不太理想
最好的办法是用渐变背景实现
linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
/*角度|方向、开始颜色 开始位置、结束颜色 结束位置*/
我们将开始位置与结束位置设置为相等或大于，就可以得到条纹图案。
示例：https://codepen.io/xiangshuo1992/pen/qLdWdY （含11个demo）
水平条纹
{
background: linear-gradient(#fb3 33.3%,
#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
}
垂直条纹
{
background: linear-gradient(to right, /* 或 90deg */
#fb3 50%, #58a 0);
background-size: 30px 100%;
}
45deg斜条纹
{
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
}
/*计算准确的15px宽斜条纹*/
{
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 42.43px 42.43px;
}
更好的斜向条纹
/*循环渐变实现斜条纹*/
{
background: repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
}
/*两种方式结合*/
{
background: repeating-linear-gradient(45deg,
#fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42.43px 42.43px;
}
灵活的同色系条纹
{
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}
如何使用css实现跨浏览器的最小高度？
div{
height:auto!important;
height:200px;
min-height:200px;
}
这个第一个已经 important 了，后面的属性设置应该也没用了吧
浏览器兼容接触的比较少了，目前项目只兼容 blink
怎么设置可点击的元素上强制手型？
cursor 属性
使用css实现悬浮提示文本
<div class="tips-demo" data-tips="提示文本">演示文本</div>
<style>
.tips-demo {
position: fixed;
bottom: 15px;
right: 15px;
}
.tips-demo:after {
content: attr(data-tips);
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
white-space: nowrap;
opacity: 0;
transform: translateY(-150%);
transition: .1s;
}
.tips-demo:hover:after {
opacity: 1;
transform: translateY(-100%);
}
</style>
如何禁用移动的选择高亮？
*{
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none;/*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}
*{ -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
颜色hsla的字母分别表示什么？
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
说说你对table-layout的理解，它有什么运用场景？
table-layout 值为 fixed时单元格的宽度只与表格，单元格的宽度有关，与内容无关
table-layout 值为 auto 时，单元格的宽度为当前列的最长行有的宽度来计算
如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout:fixed。
怎么使用css选择空链接？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a[href=''], a:not(href) {
color: #ff3333;
}
</style>
</head>
<body>
你好<a>地球人</a>
</body>
</html>
你有使用过css的writing-mode属性吗？说说它有哪些应用场景？
用于规定文字的书写方式
horizontal-tb 从左到右从上到下(水平书写)
vertical-rl 从上到下从右到左 (垂直书写)
vertiacl-lr 从上到下从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列
如何隐藏没有静音、自动播放的音视频？
浏览器已禁止打开页面时自动播放，可以用iframe先播触发播放权限，然后再播放
做一个opacity:0 的假隐藏
使用css实现对话气泡的效果
方法：使用圆角矩形作为对话的主体框，左侧或右侧增加附加三角形，三角形使用border样式设置来实现，相对定位和绝对定位结合使三角形附于圆角矩形左侧或右侧；
html:
<div class="dialog-box">测试对话框</div>
css:
.dialog-box{
display: inline-block;
background-color: #ccc;
font-size: 14px;
padding: 10px;
border-radius: 5px;
color: #fff;
position: relative;
}
.dialog-box:before{
content: "";
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-color: transparent #ccc transparent transparent;
position: absolute;
left: -12px;
top: 50%;
margin-top: -6px;
}
css中Scroll-behavior属性有什么应用场景？
当用户手动点击导航或者API调用导致触发滚动操作时，scroll-behavior属性可以为滚动框设定滚动行为。auto表示立即滚动到指定位置，smooth则表示平滑过渡，需要一定的过度时间滚动到相应位置。
兼容性支持不太好：
scroll-snap-align属性的应用场景是什么？
滚动一个列表时，控制列表中一个块始终完全在可视区内,如果滚动到一半可以回弹，保持整个块都在可视区。
如何用css实现把“我不爱996”变成“699爱不我”？
unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。
用direction属性设置rtl表示从右到左，默认是ltr从左到右的，另外还要搭配unicode-bidi: bidi-override，这样就解决了
举例说明你对指针事件（pointer-events）的理解
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
当point-events 为none时，比如a连接不再生效
鼠标事件css的:hover和js的mouseover有什么区别？
JavaScript中鼠标事件有：
onmouseover和onmouseout： 当鼠标移入和移出时触发事件
onmousedown和onmouseup： 当鼠标按钮被按下或者松开时触发事件
onclick和ondbclick ：当鼠标单击或者双击时触发事件
onmousemover ：当鼠标移动时触发事件
CSS：hover是css中的一种伪类选择器，指鼠标移入然后移出的过程，这个操作可以改变元素的样式，而且它相应的子类也被改变。但无法改变元素的内容。比如，鼠标经过实现弹出窗口的效果，它用的是onmousemove实现的，如果用hover则没办法做出这样的效果。
总结：CSS只能改变元素的样式，无法改变元素的内容，如果要改变内容应该使用JavaScript鼠标事件onmouseover和onmouseout。所以只是为了样式效果，用CSS的伪类hover，如果需要动态改变，则选择js的事件。
使用css的attr()写一个类似a标签title的提示框
.box{
position:relative;
}
.box:hover{
content: attr(data-title);
display: inline-block;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 5px;
position: absolute;
top: -50px;
left: -10px;
}
举例说明如何从html元素继承box-sizing？
html{
box-sizing:border-box;
}
*,*:before,*:after{
box-sizing:inherit;
}
异步加载CSS的方式有哪些？
异步加载CSS
说到加载 CSS 这种事儿不是很简单吗？像这样咯：
这不就完事儿了嘛！
这样是没错！但是这样有问题啊——会阻塞渲染！浏览器看到这个标签就会停下手里的活儿，去加载 CSS 并解析了。
当然了，如果这个 CSS 文件是接下来要渲染的内容所需的，那无可厚非，必须先要有了这个 CSS 才能接着渲染，阻塞也是情理之中。
但实际的情况却是，我们很多 CSS 内容其实在首屏的时候是不需要，起码等到后续才会使用，那么这个时候这些 CSS 这样加载去阻塞内容渲染就不对了。
也就是说，针对优先级不那么高的（暂时用不到）CSS，就应该要想办法让它异步加载，不要阻塞浏览器渲染。
那么怎么弄呢？
老方子
现在介绍第一种老办法：通过 JS 动态插入 link 标签来异步载入 CSS 代码，就像这样：
var myCSS = document.createElement( “link” );
myCSS.rel = “stylesheet”;
myCSS.href = “mystyles.css”;
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
这个很好理解吧，就是后续 JS 执行的时候，去创建一个 link 标签来加载 CSS 代码。
还有一个办法呢就是利用 link 上的 media 属性，将它设置为和用户当前浏览器环境不匹配的值，比如：media=“print”，甚至可以设置为一个完全无效的值 media=“jscourse” 之类的。
这样一来，浏览器就会认为这个 CSS 文件优先级非常低，就会在不阻塞的情况下进行加载。但是为了让 CSS 规则生效，最后还是要将 media 值改对才行。所以，这个办法落实到代码就是这样：
介绍完了老方子，我们再来看看新药方。
新的异步加载方式
新方子就是利用规范中新增加的 rel=“preload” ，就像这样：
通过 preload 属性值就是告诉浏览器这个资源文件随后会用到，请提前加载好。但是这只是加载，所以你看当它加载完毕后，还是需要将 rel 值改回去，这才能让 CSS 生效。
你是不是想问：这和老方子也没多大区别嘛！
看上去确实如此，但是呢，语义上更加好一些。另外就是你仔细点就会发现 as="style"这个属性，所以 preload 不仅仅可以用在 CSS 文件上，而是可以用在绝大多数的资源文件上。比如：JS 文件
然后要用的时候，就创建一个 script 标签指向它：
var script = document.createElement(“script”);
script.src = “scriptfile.js”;
document.body.appendChild(script);
这个时候浏览器就直接从缓存中拿这个文件了，不会再发请求了，因为此前已经加载好了。
那么 preload 中的 as 属性支持哪些资源文件呢？下面这些都可以：
audio
document
embed
fetch
font
image
object
script
style
track
worker
video
是不是迫不及待想去试试了？告诉你个坏消息，目前 preload 只有 Chrome 是完美支持的，其他浏览器惨不忍睹，哎！
css的加载会阻塞DOM树解析和渲染吗？为什么
css的加载不会阻止DOM树的解析
css的加载会阻止DOM树的渲染，因为css的下载完成后解析成CSSOM与DOM生成渲染树后，页面才会渲染，绘制出来
css的加载会阻塞js运行吗？为什么？
会阻塞js的执行，因为js可能会去获取或改变元素的样式，所以浏览器为了不重复渲染，
等所有的css加载渲染完成后在执行js
使用纯css能否监控到用户的一些信息？怎么实现？
利用:active 伪类实现监控用户的点击
.button-1:active::after {
content: url(./pixel.gif?action=click&id=button1);
display: none;
}
.button-2:active::after {
content: url(./pixel.gif?action=click&id=button2);
display: none;
}
请使用css3实现图片的平滑转换
以全局监听的方式通过 a 标签的描点进行 view 动态切换页面，只要把 a 标签带有 id 的 href 属性的值指到锚点，用 CSS3 的动画进行切换页面.
使用css画个钟表的时间刻度
写一下思路，先定义一个钟表的大小位置，用absolute,从1点到12点用ul,li。每个li可以用nth-child(对应第几个)来控制位置，角度用transform，然后分钟的刻度也是照样子分别控制位置，要用48个li，这个就要慢慢算了。
<div id="watch">
<ul class="minute-marks">
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<ul class="digits">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
</ul>
</div>
ul { list-style:none; margin:0; padding:0 }
#watch .minute-marks li {
display:block;
width:.2em;
height:.6em;
background:#929394;
position:absolute;
top:50%; left:50%;
margin:-.4em 0 0 -.1em;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#watch .digits {
width:30em;
height:30em;
border-radius:15em;
position:absolute;
top:0; left:50%;
margin-left:-15em;
}
#watch .digits li {
font-size:1.6em;
display:block;
width:1.6em;
height:1.6em;
position:absolute;
top:50%; left:50%;
line-height:1.6em;
text-align:center;
margin:-.8em 0 0 -.8em;
font-weight:bold;
}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }
ui设计中px、pt、ppi、dpi、dp、sp之间的关系？
做了几个移动端的项目之后，深感移动端尺寸换算的必要性，在此做个总结。
先介绍下各自的定义：
px：pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元
pt: point，点，印刷行业常用单位，等于1/72英寸
ppi: pixel per inch，每英寸像素数，该值越高，则屏幕越细腻
dpi: dot per inch，每英寸多少点，该值越高，则图片越细腻
dp: dip，Density-independent pixel, 是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度
sp: scale-independent pixel，安卓开发用的字体大小单位。
以下是换算关系：
一、pt和px
公式一： 1pt= (DPI / 72) px
当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 )， 1pt=1px； 当新建画布分辨率为72*2=144ppi时，1pt=2px
二、ppi和dpi
dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时，就应称之为ppi。同理： PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此，在电子屏幕显示中提到的ppi和dpi是一样的，可认为
公式二：dpi=ppi
三、ppi计算方法
ppi是指屏幕上的像素密度，其计算方法为：
公式三： ppi= 屏幕对角线上的像素点数/对角线长度 = √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/对角线长度
以小米2s为例，该屏幕分辨率为720px*1280px，4.3英寸。则点密度为 √ (720^2 +1280^2) /4.3 = 342ppi。
四、px和dp
dp为安卓开发时的长度单位，根据不同的屏幕分辨率，与px有不同的对应关系。
安卓端屏幕大小各不相同，根据其像素密度，分为以下几种规格：
QQ20150717160404
1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。 以mdpi为标准，这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=2px；在hdpi情况下，1dp=1.5px。其他类推。
公式四： 1dp=（屏幕ppi/ 160）px
以WVGA屏为例，该屏幕为480px*800px，按3.8寸屏算，点密度 √ (480^2 + 800^2) / 3.8 = 245，约等于240，对应于hdpi屏幕，所以该屏幕1dp=1.5px
五、dp和sp
dp和sp都是安卓的开发单位，dp是长度单位，sp是字体单位。sp与dp类似，但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小（小、正常、大、超大等等），
公式五：当文字尺寸是“正常”时1sp=1dp，而当文字尺寸是“大”或“超大”时，1sp>1dp。
一般情况下可认为sp=dp。
总结：由于做设计时以xhdpi为模板，xhdpi条件下，1dp=2px。若新建画布时，将画布分辨率设为144ppi，则1pt=2px=1dp。此时，即可将pt等同于dp。标注长度的时候，将长度像素除以2即为dp值。
PS：在photoshop cc中切图时，可直接在.png 图片图层名称前加上200%获得2倍大小的图，其他比例的切图以此类推。输出的两倍图不模糊的前提是，该图是photoshop中用形状工具画出来的未被栅格化的图形，而不是已被栅格化的图层或外部导入的图片。
android获取屏幕尺寸、密度
有些时候，我们需要获取Android手机或Pad的屏幕的物理尺寸，以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸：
从网上找过不少资料，发现获取屏幕尺寸并不是很复杂的编程操作，下面的代码即可获取屏幕的尺寸。
在一个Activity的onCreate方法中，写入如下代码：
DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 屏幕宽度（像素）
int height = metric.heightPixels; // 屏幕高度（像素）
float density = metric.density; // 屏幕密度（0.75 / 1.0 / 1.5）
int densityDpi = metric.densityDpi; // 屏幕密度DPI（120 / 160 / 240）
但是，需要注意的是，在一个低密度的小屏手机上，仅靠上面的代码是不能获取正确的尺寸的。比如说，一部240x320像素的低密度手机，如果运行上述代码，获取到的屏幕尺寸是320x427。因此，研究之后发现，若没有设定多分辨率支持的话，Android系统会将240x320的低密度（120）尺寸转换为中等密度（160）对应的尺寸，这样的话就大大影响了程序的编码。所以，需要在工程的AndroidManifest.xml文件中，加入supports-screens节点，具体的内容如下：
这样的话，当前的Android程序就支持了多种分辨率，那么就可以得到正确的物理尺寸了。举例说明shape-outside的属性的用途有哪些？
shape-outside定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。
比如使用 shape-outside: circle(); 属性可以实现文字圆形环绕图片的效果。
用css3画出一个立体魔方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>立方体</title>
<style>
.box{
width: 300px;
height: 300px;
margin: 100px auto;
perspective: 500px;
}
.con{
position:relative;
width:300px;
height:300px;
transform-style:preserve-3d;
transform-origin:50% 50% -150px;
animation:rotate 4s infinite;
}
.con .side{
position:absolute;
width:300px;
height:300px;
font-size:44px;
line-height: 300px;
text-align: center;
}
.con .before{
background-color: rgba(0,0,0,0.4);
}
.con .left{
background-color: rgba(255,0,0,0.4);
left:-300px;
top:0;
transform:rotateY(-90deg);
transform-origin:right;
}
.con .right{
background-color: rgba(255,255,0,0.4);
left:300px;
top:0;
transform:rotateY(90deg);
transform-origin:left;
}
.con .top{
background-color: rgba(0,255,0,0.4);
left:0;
top:-300px;
transform:rotateX(90deg);
transform-origin:bottom;
}
.con .bottom{
background-color: rgba(0,0,255,0.4);
left:0;
top:300px;
transform:rotateX(-90deg);
transform-origin:top;
}
.con .back{
background-color: rgba(200,122,0,0.4);
transform:translateZ(-300px);
}
@keyframes rotate{
0%{
transform:rotateX(0) rotateY(0);
}
50%{
transform:rotateX(0) rotateY(360deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<div class="side before">前</div>
<div class="side back">后</div>
<div class="side top">上</div>
<div class="side bottom">下</div>
<div class="side left">左</div>
<div class="side right">右</div>
</div>
</div>
</body>
</html>
如何重写行内样式？方法有哪些（至少两种）？
1, !important 最高级
2, var divStyle = document.querySelector('#div').style; 修改属性
有哪些标签是不支持伪元素的？
首先我们要知道伪元素有哪些：
::after ::before ::first-letter ::fist-line （单双冒号皆可）
::selection ::backdrop （仅双冒号）
伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。
诸如 img 、input、iframe，这几个标签是不支持类似 img::before 这样使用。
究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。
请问class与[class=xxx]的区别是什么？两者是否等价？
不等价
class是类选择器，可以作用于任何dom元素
[class=xxx]是属性选择器 只能作用于特定类型的dom元素
为什么说对opacity进行动画要比box-shadow进行动画性能更好呢？
opacity的动画过程既不会影响布局，也不需要重绘
能不能使用纯css使你的浏览器卡死？怎么实现？
可以，用计算属性calc，变量
如何使用css实现鼠标跟随？
铺满元素,hover + box-shadow你有使用过css的属性background-blend-mode吗？说说它的运用场景有哪些？
背景的混合模式,可以是背景图片与背景图片的混合,也可以是背景图片和背景色的之间的混合.
用css3实现文字发光的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>霓虹文本</title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: black;
}
.neon {
color: #cce7f8;
font-size: 2.5rem;
font-family: 'Pacifico', cursive;
text-transform: uppercase;
animation: shining 0.1s alternate infinite;
}
@keyframes shining {
from {
text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),
0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
0 0 54px rgba(15, 115, 223, 0.9);
}
to {
text-shadow: 0 0 6px rgba(182, 211, 207, 1),
0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
0 0 60px rgba(15, 115, 223, 1);
}
}
</style>
<body>
<div class="neon">Good evening, and good night!</div>
</body>
</html>
用css3实现伪3D的文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 交错跳跃3D Loading</title>
</head>
<style>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #2980b9;
}
.loading {
display: flex;
color: white;
font-size: 5em;
text-transform: uppercase;
}
.loading span {
text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
transform: translateY(20px);
animation: bounce 0.3s ease infinite alternate;
}
@keyframes bounce {
to {
text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2);
transform: translateY(-20px);
}
}
</style>
<body>
<div class="loading">Loading</div>
</body>
</html>
<script>
let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) => {
let span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = `${i / 10}s`;
loading.append(span);
});
</script>
如何解决html设置height：100%无效的问题？
在外层包一个给定高度的 div用css画出一个圆圈，里面有个对号
#right {
width: 150px;
height: 150px;
margin: 100px auto;
border-radius: 50%;
border: 5px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
#right::before {
content: "";
display: block;
width: 88px;
height: 50px;
border: 20px solid #000000;
border-right: none;
border-top: none;
transform: rotate(-45deg) translate(7px, -10px);
}
用css画出一个圆圈，里面有个叉号（不能用英文字母x）
#cyc {
width: 150px;
height: 150px;
margin: 100px auto;
border-radius: 50%;
border: 5px solid #000000;
position: relative;
}
#cyc::before {
content: "";
display: block;
width: 100px;
height: 20px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
#cyc::after {
content: "";
display: block;
width: 100px;
height: 20px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
未完待续...
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
