CSS
年轻即出发
努力努力在努力!
展开
-
Vue中宽度固定,font-size根据内容进行缩放处理设置
Vue中宽度固定,font-size根据内容进行缩放处理设置。原创 2022-08-08 19:54:14 · 26903 阅读 · 1 评论 -
将文字作为背景图
一、把文字做成图片,然后将图片作为背景。二、把文字层作为底层,上层放内容。举个例子:.page{ width:100px; height:100px; position:relative;}.textbg{ position:absolute; left:0px; top:0px; width:100px; hei...转载 2020-04-06 22:35:26 · 689 阅读 · 0 评论 -
label 和 input 底部对齐问题
问题:如图所示,label的底部外边和和input的底部不对齐; 但是可以发现label的底部外边和input里的文本底部对齐。解决方案:1、原因分析元素垂直方向上的对齐属性vertical-align默认是以元素的baseline属性为基准的 .input是一个行内替换元素,行内元素其默认的对其方式为baseline;input元素的baseline为其中文字的ba...转载 2020-04-06 20:50:49 · 2095 阅读 · 0 评论 -
CSS3 ------- object-fit属性
做项目经常会遇到图片列表展示,图片一般是用户从后台上传的,上传的图片尺寸千差万别。如果前端不控制图片大小,整个排版就会很乱,如果给定长宽,图片又会变形,用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久,最近终于找到解决办法了。css有一个object-fit属性,用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框1.首先是一个html结构,然后给定图片高宽然后使用objec...原创 2020-02-29 19:30:44 · 159 阅读 · 0 评论 -
pointer-events
pointer-events属性auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。 none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。 其它属性值为SVG专用,这里...转载 2020-02-06 10:12:47 · 430 阅读 · 0 评论 -
CSS抗锯齿 font-smoothing 属性介绍
CSS抗锯齿 font-smoothing 属性介绍CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。 淘宝也在用哦!它有三个属性:none ------ 对低像素的文本比较好s...原创 2020-02-06 10:08:38 · 921 阅读 · 0 评论 -
table固定列的宽度,超出部分用…代替(针对普通table和antd)
一、 实现思路我们都知道让溢出内容变成...,只需要以下:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;表格里的内容直接引用这段代码可不行。因为table的宽度我们并不能控制,我们加的内容会自动撑大表格列表宽度.关键的一步是给table加上一个样式:table-layout:fixed;这条属性...转载 2019-12-28 23:05:24 · 1753 阅读 · 0 评论 -
position和transform使元素居中的方法 (转载)
1. position & transform: translate(-50%, -50%) 实现块元素百分比居中css3:.parent { positioin: relative;}.child { positioin: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}...原创 2019-12-20 09:35:52 · 239 阅读 · 0 评论 -
图片ping
前面的话 在CORS出现以前,要实现跨域Ajax通信颇费一些周折。开发人员想出了一些办法,利用DOM中能够执行跨域清求的功能,在不依赖XHR对象的情况下也能发送某种请求。虽然CORS技术已经无处不在,但开发人员自己发明的这些技术仍然被广泛使用,毕竞这样不需要修改服务器端代码。本文将详细介绍图像Ping基础 图像Ping跨域请求技术是使用<img>标签。一个网页可以从任何...转载 2019-10-28 15:16:12 · 348 阅读 · 0 评论 -
图片较多时要提高网页加载速度
1、图片懒加载将图片src先赋值为一张默认图片,当用户滚动滚动条到可视区域图片的时候,再去加载后续真正的图片如果用户只对第一张图片感兴趣,那剩余的图片请求就可以节省了。懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验。图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。倘若一次ajax请求10张图片的地址,一次性把10张图片都加载...原创 2019-10-28 13:50:51 · 2770 阅读 · 0 评论 -
CSS不常用的知识点
1、*当input选中的时候会出现一个边框 outline/*一般设置成 none*/textarea:focus, input:focus{ outline: none;}2、* 元素内容是否可编辑contenteditable<div id="example-one" contenteditable="true">#example-one...原创 2019-10-17 11:17:48 · 888 阅读 · 0 评论 -
css透明度之rgba和opacity的区别及兼容(转发)
css透明度之rgba和opacity的区别及兼容(转发)对于设置透明度,我们有两个可以选的css3属性:rgba和opacityopacity用法:#box{ background-color:rgb(125,25,0); opacity: 0.5}IE9, Firefox, Chrome, Opera 和 Safari 使用属性opacity来设...原创 2019-08-09 11:05:01 · 662 阅读 · 0 评论 -
2019年6月20日工作总结---CSS篇
1、:webkit-scrollbar 自定义滚动条的样式(缺陷对Firefox和IE不支持)实例:属性:::-webkit-scrollbar 解决了把bar本身的背景。它通常由其他元素覆盖 ::-webkit-scrollbar-button 解决滚动条上的方向按钮 ::-webkit-scrollbar-track ...原创 2019-06-23 20:30:00 · 1101 阅读 · 0 评论 -
去除select边框和三角-----appearance:non
今天发现一个比较有意思的属性,appearance:none可能有朋友不认识,但是有一个标签你肯定认识:select。这个标签的样式是这样的:一般情况下,我们所使用的border:0; 去除边框这种方式在某些浏览器是对它是不起作用的,比如:Opera 浏览器下就没有作用。再拿google浏览器举例,虽然有作用,边框可以去除掉,但是右边的倒三角却保留了下来。比如这样:如果想要...转载 2018-11-08 16:34:32 · 326 阅读 · 0 评论 -
block,inline和inline-block概念和区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。 大体来说HTML元素各有其自身的布局级别(block元素还是inlin...转载 2018-11-08 19:26:29 · 83 阅读 · 0 评论 -
CSS疑难杂症(1)---绝对定位
绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏1、绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐...转载 2019-02-22 12:35:51 · 194 阅读 · 0 评论 -
前端面试题汇总---CSS篇(1)
1、display: none; 与 visibility: hidden; 的区别- 联系:它们都能让元素不可见- 区别:- `display:none`;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;`visibility: hidden`;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见- `display: none`;是非继承属性,子孙节点消失由于...原创 2019-03-05 17:18:03 · 1598 阅读 · 0 评论 -
前端面试题汇总---CSS篇(2)
**PNG,GIF,JPG的区别及如何选**- GIF:- 8位像素,256色- 无损压缩- 支持简单动画- 支持boolean透明- 适合简单动画- JPEG:- 颜色限于256- 有损压缩- 可控制压缩质量- 不支持透明- 适合照片- PNG:- 有PNG8和truecolor PNG- PNG8类似GIF颜色上限为25...原创 2019-03-05 18:53:36 · 112 阅读 · 0 评论 -
今日遇到的问题出炉
1、Uncaught TypeError: Cannot set property ‘display’ of undefined首先,css写得没错,问题出在Javascript当中的 getElementsByClassName(“xxx”),这个方法得到的是一个由class="xxx"的所有元素组成的集合,而不是单个元素;集合是没有display属性的,集合中的元素才有displ...转载 2019-03-24 18:21:09 · 391 阅读 · 0 评论 -
datetimepicker用法总结
datetimepicker用法总结2016年4月21日更新目录datetimepicker用法总结目录简述官方文档选项属性1 format 格式2 weekStart 一周从哪一天开始3 startDate 开始时间4 endDate 结束时间5 daysOfWeekDisabled 一周的周几不能选6 autoclose 选完时间后是否自动关闭7 startVie...转载 2019-05-28 19:37:01 · 461 阅读 · 0 评论 -
前端小知识--为什么你写的height:100%不起作用?
为什么你写的height:100%不起作用?这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制?1.百分比宽高的设定按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的:http://www.w3school.com.cn/cs...http://www...转载 2019-06-03 10:35:16 · 277 阅读 · 0 评论 -
position & transform: translate(-50%, -50%) 实现块元素百分比下居中
position & transform: translate(-50%, -50%) 实现块元素百分比下居中知识点:CSS3: transform: translate(-50%, -50%);代码示例:HTML<body> <div class="wraper center"> <div class="...转载 2019-06-23 17:51:33 · 214 阅读 · 0 评论 -
CSS3 pointer-events:none应用举例及扩展
CSS3 pointer-events:none应用举例及扩展这篇文章发布于 2011年12月7日,星期三,22:38,归类于Web综合。 阅读 173260 次, 今日 17 次33 条评论byzhangxinxufromhttp://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2091一、p...转载 2019-06-23 18:14:51 · 912 阅读 · 0 评论 -
rem与em的使用和区别详解
rem与em的使用和区别详解2017-06-1763098View2编者:在自适应制作稿中,我们经常会看到rem和em这两个单位的冒泡,rem是基于html元素的字体大小来决定,而em则根据使用它的元素的大小决定(很多人错误以为是根据父类元素,实际上是使用它的元素继承了父类的属性才会产生的错觉)原文:综合指南: 何时使用 Em 与 Rem你可能已经很熟练使用这两个灵活的单位,但你...转载 2019-06-23 20:19:12 · 512 阅读 · 0 评论