css
柠檬布丁^O^
越努力越幸运
展开
-
将图片变成灰色状态
.img{ background: url("dis.png") center top no-repeat ; background-size: 100%; filter: grayscale(50%);}原创 2020-04-29 15:51:19 · 593 阅读 · 0 评论 -
用CSS开启硬件加速来提高网站性能
所谓GPU,就是图形处理器的缩写,相当于PC中的显卡。手机中的GPU也是为了对图形、图像处理而存在的,所谓强制渲染,就是hwa(hardware acceleration硬件加载)的一种,其存在的意义就是为了分担cpu的负担,其原理是通过GPU对软件图形的处理来减轻CPU的负担。从而使应用软件能够以更快的速度被处理,以达到提速的目的。1.何为硬件加速就是将浏览器的渲染过程交给GPU处理,而...转载 2019-04-17 17:15:36 · 3000 阅读 · 0 评论 -
css实现两栏布局、三栏布局
1.两栏布局//html<div class="wrapper"> <div class="left"> 左边固定宽度,高度不固定 </div> <div class="right"> 这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。 </div></div>(1) grid...原创 2019-03-20 19:11:24 · 601 阅读 · 0 评论 -
CSS实现元素的水平居中、垂直居中、水平垂直居中
1.元素的水平居中<1>行内元素水平居中利用text-align:center可以实现块级元素内部的行内元素的水平居中,此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效,如果内部是块级元素没有设置宽度,宽度会占满父级元素,内容也会居中。如果设置宽度内容会在子元素的宽度范围内居中,如果希望子元素相对父级内容居中,可以将...原创 2019-03-19 19:39:58 · 135 阅读 · 0 评论 -
css常考面试题资料连接
50道CSS基础面试https://segmentfault.com/a/1190000013325778《50道CSS基础面试题(附答案)》中的答案真的就只是答案吗?https://segmentfault.com/a/1190000013860482CSS基础面试题总结https://funteas.com/topic/5ada8eac230d1e5e25e45b89front-e...转载 2019-03-11 11:31:54 · 246 阅读 · 0 评论 -
CSS定位
如果元素先绝对定位,然后浮动,或者是先浮动再绝对定位,浮动是无效的,会按照绝对定位的位置。如果元素先相对定位,然后浮动,或者是先浮动再相对定位,最后的位置是相对浮动后的位置,相对定位。...原创 2018-12-28 10:38:26 · 204 阅读 · 0 评论 -
浮动及清除浮动的方法
浮动是指设置float:left或right的元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框时停留。清除浮动的方法:1.使用空标签清除浮动。在所有浮动变迁后面添加一个空标签,定义css.clear{clear:both}优点:通俗易懂,容易掌握缺点:会添加大量无意义的空标签,结构和表现未分离,不利于维护。2.父元素设置overflow:hidden;或overf...原创 2018-12-17 17:47:23 · 198 阅读 · 0 评论 -
css优先级
!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性原创 2018-12-02 19:10:16 · 68 阅读 · 0 评论 -
transition与animation的区别
用法://animationanimation:move 1s linear infinite alternate;animation:name duration timing-function delay iteration-count(规定动画应该播放的次数) direction(规定是否应该轮流反向播放动画)@keyframes move{}//transitiontransi...原创 2018-12-02 19:09:05 · 631 阅读 · 0 评论 -
display设置为none、visibility设置为hidden和opcitity设置为0的区别
display:none;是将元素隐藏起来,会改变页面的布局,可以理解为在页面中把元素删掉。visibility:hidden;和opcitity:0;只是将元素隐藏起来,并不会改变页面的布局。visibility:hidden;如果元素上有已经绑定的事件,隐藏后事件不会被触发。opcitity:0;如果该元素上已经绑定一些事件,如click事件,隐藏后,点击该区域,事件也能够被触发。...原创 2018-11-30 11:14:29 · 680 阅读 · 0 评论 -
css修改滚动条样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px;原创 2018-11-30 09:53:15 · 155 阅读 · 0 评论 -
css实现文本单行省略和多行省略
单行省略:white-space:nowrap;overflow:hiddlen;text-overflow:ellipsis;多行省略:display:-webkit-box;-webkit-box-orient:vertical;//表示盒子对象的子元素的排列方式-webkit-line-clamp:3;//限制文本的行数,表示文本第多少行省略overflow:hiddlen...原创 2018-11-26 20:31:40 · 1945 阅读 · 0 评论