css
虞粥粥
记录学习笔记
展开
-
css图片按比例缩放
img{ width:auto; height:auto; max-width:100%; max-height:100%;}这样设置图片可以使图片在指定的空间内缩放原创 2019-12-07 14:57:30 · 115 阅读 · 0 评论 -
css3新属性:pointer-events:none解决鼠标进入闪烁问题
在实现一个侧边栏的小导航,鼠标经过导航出现对应内容块,可在鼠标停留在导航里面显示层就一直闪烁,应该是在鼠标进入后移动到子级触发的事件冒泡导致的,查了很多解决方法,都看不懂…,直到看到了pointer-events。pointer-events:none解决鼠标经过闪烁问题给目标元素添加上pointer-events:none属性pointer-events:none属性 的作用:添加上该属性...原创 2019-12-06 18:04:51 · 1116 阅读 · 0 评论 -
给div设置height:100%
div设置100%的高度前提需要其所有的父元素都有高度,才能生效。例如让一个div占满整个页面的高度,就需要将html和body都设置为height:100%原创 2019-11-18 18:03:51 · 1294 阅读 · 0 评论 -
font-awesome用法
font-awesome的引用(在官网下载)CSS — 字体的引入,图标基础样式,大小等fonts — CSS需要引用字体文件夹,本地用户需要安装内部的 fontawesome-webfont.ttf(CSS引入字体)基础样式用法<i class="fa fa-weixin"></i>微信设置大小<i class="fa fa-weixin fa...原创 2019-11-18 16:01:18 · 976 阅读 · 1 评论 -
清除input,select默认样式
清除默认边框border:none;清除select默认箭头样式:appearance: none;原创 2019-11-18 15:32:47 · 540 阅读 · 0 评论 -
如何让背景图按div自适应大小
background:url(’…/…png’) center center no-repeatbackground-size:cover原创 2019-11-10 15:26:39 · 4062 阅读 · 0 评论 -
box-sizing:border-box
box-sizing:border-box指由原盒模型转变为:width = padding + border + 原宽度原创 2019-11-08 20:40:06 · 104 阅读 · 0 评论 -
text-size-adjust用法
前提:使用前需要加上兼容写法用法:在移动端为防止字体变大,添加-text-size-adjust属性为100%可防止字体变大放在body会导致页面缩放失效可以使body继承html的样式...原创 2019-11-08 20:37:41 · 2085 阅读 · 0 评论 -
页面布局
一列布局设置margin:0 auto 实现居中(实际开发中width不需要固定宽度,由里面的子元素撑开,实现自适应)两列布局两列自适应布局:left.width+right.wigth = body.width(100%),各自左右浮动两列居中 body:margin:0 auto;width = leftw + rightw三列布局自适应三列布局:leftw + mainw + r...原创 2019-11-08 18:57:04 · 117 阅读 · 0 评论 -
will-change的使用
前提:为加快页面加载速度,增强页面渲染性能,有以下三种方法:position-fixed代替background-attachment将带图片的元素放在伪元素里面巧用will-changewill-change的用法前提:因CSS3的动画、渐变和变形不会自动触发CPU的加速,而使用浏览器自身进行渲染,不使用will-change 的一个小技巧:translateZ() (or tr...原创 2019-11-08 18:30:59 · 573 阅读 · 0 评论 -
keyframes 关键帧
keyframes 会逐渐地实现过渡动画过程中每一关键帧的动画效果语法: @keyframes animationname { //必须带上动画名 keyframes-selector{ //值是一个百分数,0%、25%...(from为0%,to为100%) css-style // 执行的动画内容,可为多值 }}ps:keyframes也需...原创 2019-11-07 18:00:40 · 170 阅读 · 0 评论 -
纯CSS3实现旋转太极图效果
学习作业:用刚学的animation动画和结合之前的伪类,实现一个纯CSS3的太极图的动态效果<style> div{border:1px solid red; border-bottom: 51px solid red; width: 100px; //102px height: 50px; //height = border+height(102px) 实现一...原创 2019-11-07 16:19:34 · 283 阅读 · 0 评论 -
CSS3之animation动画
CSS3之animation动画animation-name属性定义动画的名字ps:光有动画名称不能是动画动起来与@keyframes合用语法:animation-name {动画名称};@keyframes 动画名称{from {开始动画}to{结束动画}}animation-duration 过渡持续的时间属性语法:animation-duration:time注:动...原创 2019-11-07 15:21:07 · 372 阅读 · 0 评论 -
position
position之static 自然流将设置定位且偏移的元素回到自然流中,可能会跟相邻的元素产生重叠,如下图:想将元素置回原来的自然流中—position:static(忽略top、left、right等)在这种自然布局下的特点:两个相邻外边距margin最终值1:两值相等:重叠2:两值不相等,去最大值忽略top、left、right等有固定width和height的元...原创 2019-11-07 11:02:25 · 122 阅读 · 0 评论 -
CSS3之transition过渡
CSS3之transition过渡-property属性:参数:none、all和property(元素的属性名,如:transform)-duration 过渡(过程中的延迟)时间属性:参数:time时间语法:transition-duration:time(单位为ms毫秒/s秒)-time-function属性参数:linear 匀速运动ease 平滑过渡(默认),逐渐加快...原创 2019-11-07 11:00:26 · 173 阅读 · 0 评论 -
CSS3新增属性之transform
transform2d平面转换属性:rotate 旋转单位为deg(正数为顺时针旋转,反之逆时针)单位和数值都紧接着在中括号内,如:transform:rotate(10deg)skew 扭曲变形 有X轴和Y轴两个方向,单位与上面一致 单独X轴为:skewX 反之为skewY,还有skew(x,y)两个方向同时translate 按一定数值进行偏移 ,以元素的的左上角为起始点有tr...原创 2019-11-07 10:59:54 · 190 阅读 · 0 评论 -
清除浮动的三种常用方法
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2019-11-07 11:02:54 · 244 阅读 · 0 评论