1.文本超出隐藏以...替代
overflow:hidden;//超出隐藏
white-space:nowrap;//不换行
text-overflow:ellipsis;/*超出部分以...替代*/2.input修改焦点样式
input:focus{} /*input获得焦点时的样式*/3.inpu修改placeholder样式
input::-webkit-input-placeholder{
font-size:12px;
color:#d2d2d2;
}4.overflow:scroll
给盒子添加滚动条，当盒子内容超出限制就会以滚动条形式显示
5.修改复选框默认样式
很有意思的一个方法 隐藏默认的input框 自定义一个span来替代
<style>
input {
display: none;
}
.box {
width: 20px;
height: 20px;
background: #ccc;
display: inline-block;
border-radius: 50%;
}
input:checked+span {
background: red;
}
</style>
<body>
<label>
<input type="checkbox">
<span class="box"></span>
<span>1</span>
</label>
</body>6.textarea 不可修改大小
设置css样式 resize:none;
7.font字体斜体属性
写法：font-style:
italic : 斜体
oblique : 倾斜的字体
或者用i标签包裹
8.英文字体设置大小写
text-transform:
capitalze 首字母大写
uppercase 全部大写
lowercase 全部小写
9.取消a标签的下划线效果/给文字添加删除线
text-decoration:
none 无下划线
underline 添加下划线 //这里可以用u标签包裹元素实现下划线效果
line-through 文本添加删除线 很常用
10.文本设置字间距
letter-spacing:1em //中英文，数字，字符都可以使用
word-spacing:1em //英文单词之间间距
11.文本阴影
text-shadow: 水平偏移量 垂直偏移量 模糊值 颜色; //除了横纵值 其他属性可选 box也一样
注意：ie9以下不支持 box-shadow 也一样
12.盒子阴影
box-shadow:水平偏移量 垂直偏移量 模糊值 颜色;
13. 背景尺寸属性
background-size:100% //图片xy都会被拉伸，比例会变化，可能导致图片失真
background-size:cover //图片拉伸到能覆盖容器，比例不变，但是可能会部分无法显示
14.margin塌陷解决方案
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；//不要用这个
（6）利用伪元素给子元素的前面添加一个空元素
15.怪异盒子模型
box-sizing:border-box //用得非常多 重点记住
box-sizing:content-box //转换为正常模型
16.清除浮动的8种方法
面试题
（1）把父级高度写死；---一般不用。
（2）在浮动的元素后面加一个新的块级元素，css设置样式为clear:both; ---偶尔会用
缺点：多出来一个空的元素，影响美观，一般不用。
（3）父级设置属性overflow:hidden-----一般不用（有seo作弊嫌疑）
（4）父级中使用伪类：after
.clearfix:after{
content:'';
height:0;
display:block;
/*前三个属性:相当于创建一个块级元素*/
clear:both;
zoom:1;/*IE6兼容写法*/
}（5）父级div定义overflow:auto
必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
（6）父级也一起浮动----不用。
（7）父级加属性display：table---不用
（8）浮动元素后面加br标签然后给br加属性clear：both----不用
17.固定大小的盒子绝对居中
水平垂直都可用
position：absolute/fixed
top:50%;
margin-botton:盒子高度的一半；
水平方向同理
18.table中设置tr行间距
table 上设置属性 style="border-collapse:separate;//默认，边框会被分开
separate 默认，collapse合并边框
border-spacing:0px 10px;//x y轴边框间的间距
19.精灵图的利弊
优势：1.减少请求数。2.提升网站性能。3.减少图片文件数量。
劣势：1.开发过程比较繁琐。2.需要计算测量每一个背景单元的精确位置，进行定位。3.后期新加或删除图标比较麻烦。
20.文本两端对齐
text-align:justify
21.处理图片三像素问题.
四种方法：
1.父级设字体大小为0；
2.浮动
3.图片img元素设置为块级元素
4.图片使用vertical-align:middle //图片中部对齐
22.BFC原理
23.深度选择器
/deep/ +选择器样式不生效的时候使用，穿透封锁
24.css书写规范
每一个样式书写顺序：布局-宽高-颜色字体
25.背景模糊
backdrop-filter: blur(10px);
26.角度渐变
background-image: linear-gradient(90deg,#FE7354,#FF5A56);
27.图片缩放
object-fit: fill;拉伸填满整个box, 不保证保持原有的比例。
object-fit: contain;。保持原有尺寸比例，可能会在容器内留下空白
object-fit: cover;保证替换内容尺寸一定大于容器尺寸，此参数可能会让替换内容（如图片）部分区域不可见。
object-fit: none;保持原有尺寸比例。同时保持替换内容原始尺寸大小。
object-fit: scale-down;就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
27.隐藏滚动条
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}28.层次选择器
层次选择器（p~ul），选择前面有p元素的每个ul元素
29.css实现第一行文字居中，超出第二行文字左对齐
<div class='out'>
<div class='in'>内容</div>
</div>
//style
.out{
display:flex;
jusctifiy
}30.pointer-events 属性
- auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
- none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默
认就可以穿透当前层，因为pointer-events默认为auto
31.禁用元素
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);32.行内background-image
:style="{ backgroundImage: 'url(' + bgUrl + ')' }"33.隐藏元素并保留位置
style="visibility:hidden;"34.最多显示两行,超出显示...
.text-overflow {
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}35.缩放元素整体
transform: scale3d(0.974257, 0.827619, 1); 缩放元素36.定位完全居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 居中37.鼠标点击穿透
例如:需求：将一张照片盖到一个div上面，但同时下面div上面的点击事件不受影响。
pointer-events: none;
38.html5自定义属性
data-xxx为前端开发者提供了自定义属性
自定义属性可以通过对象的dataset来获取，不支持该属性的浏览器可以通过getAttribute()方法来获取
<div data-xxx = '123'></div>39.调用window打印部分元素
/* 打印时生效 */
@media print {
.has-logo {
display: none;
}
.navbar {
display: none;
}
#app {
.main-container {
margin-left: 0;
}
}
}