========================================================================
单词text-indent抬头距离，letter-spacing字与字间距
p{
text-indent：10px；//单词抬头距离
letter-spacing：10px；//间距
}
=========================================================================
heigth如果使用100%，会根据父级的高度来决定，所以使用100vh单位。
.dom{
width:100%;
height:100vh;
}
============================================================================
.wrap {
text-align: justify;
text-justify: distribute-all-lines; //ie6-8
text-align-last: justify; //一个块或行的最后一行对齐方式
-moz-text-align-last: justify;
-webkit-text-align-last: justify;
}
=========================================================================
// 单列展示时
.wrap {
width: 25px;
line-height: 18px;
height: auto;
font-size: 12px;
padding: 8px 5px;
word-wrap: break-word;/英文的时候需要加上这句，自动换行/
}
// 多列展示时
.wrap {
height: 210px;
line-height: 30px;
text-align: justify;
writing-mode: vertical-lr; //从左向右
writing-mode: tb-lr; //IE从左向右
//writing-mode: vertical-rl; – 从右向左
//writing-mode: tb-rl; – 从右向左
}
==========================================================================
.wrap {
// 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。
pointer-events: none;
cursor: default;
}
=======================================================================
.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
=======================================================================
在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。
目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。如果不使用3D变形，我们可以通过下面方式来开启：
.wrap {
transform: translateZ(0);
}
===========================================================================
在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：
.cube {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}
在webkit内核的浏览器中，另一个行之有效的方法是
.cube {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
========================================================================
p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母
==========================================================================
.wrap {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
===============================================================================
.wrap {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
==================================================================================
一般在富文本中返回换行符不是
的标签，而且\n。不使用正则转换的情况下，可通过下面样式实现换行。
body {
white-space: pre-line;
}
=============================================================================
a {
outline: none；//或者outline: 0
text-decoration:none; //取消默认下划线
}
==============================================================================
=====================================================================================
select{
text-align: center;
text-align-last: center;
}
select option {
direction: rtl;
}
=========================================================================================
input{
color: #fff;
caret-color: red;
}
=================================================================================
// 父元素下的子元素是行内元素
.wrap {
white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {
white-space: nowrap; // 子元素不被换行
display: inline-block;
}
==================================================================================
这里不使用flex布局的情况。通过vertival-align
.wrap {
height: 100,
line-height: 100
}
img {
vertival-align：middle
}
// vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素
// vertical-align：baseline/top/middle/bottom/sub/text-top;
=============================================================================
.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}
.item {
position: absolute;
width: 100%;
height: 100%;
background-color: 499e56;
}
这里是所有子元素的容器
34、transfrom的rotate属性在span标签下失效
=============================================================================================
span {
display: inline-block
}
========================================================================
主要是通过css旋转动画的实现：
.dom{
-webkit-animation:circle 1s infinite linear;
}
@keyframes circle{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
实现如下效果：
=========================================================================
========================================================================
========================================================================
=========================================================================
==========================================================================
.swper{
background-image: url(./img/bg.jpg);
width:100%;
height:100%;//父级高不为100%请使用100vh
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
============================================================================
方式一：
.stroke {
-webkit-text-stroke: 1px greenyellow;
text-stroke: 1px greenyellow;
}
方式二：
.stroke {
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
*filter: Glow(color=#000, strength=1);
}
=========================================================================
.dom{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
使用rgba()设置颜色透明度。
.demo{
background:rgba(255,0,0,1);
}
说明：RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。
============================================================================
.dom{
height: 1px;
background: #dbdbdb;
transform:scaleY(0.5);
}
Ps：出现1px变粗的原因，比如在2倍屏时1px的像素实际对应2个物理像素。
===========================================================================
css自己也能够进行简单的运算，主要是用到了calc这个函数。实现不同单位的加减运算：
.div{
width: calc(100% - 50px);
}
============================================================================
.vague_text{
color: transparent;
text-shadow: #111 0 0 5px;
}
==========================================================================
一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果。
================================================================================
当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。
img{
width: 100%;
height: 100%;
object-fit: cover;
}
fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用）none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。
=============================================================================
方式一：父级font-size设置为0
.father{
font-size:0;
}
方式二：父元素上设置word-spacing的值为合适的负值
.father{
word-spacing:-2px
}
其它方案：1将行内元素写为1行(影响阅读)；2使用浮动样式（会影响布局）。
======================================================================================
在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。这里需要注意它生效需要满足的条件：
作用环境： 父元素设置line-height。需要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。
作用对象： 子元素中的inline-block和inline元素。
内部文字
JavaScript
-
js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
-
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
-
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
-
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
-
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
-
call，apply，bind
-
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax，XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试
-
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
