css
泥猴桃
web前端开发
展开
-
display: none 和 visibility: hidden
相同点:他们都能让元素不可见区别:display: none : 会让元素完全从渲染树种消失,渲染的时候不占据任何空间;visibility: hidden; 不会让元素从渲染树种消失,渲染树元素继续占据空间,只是内容不可见display: none 是非继承属性,子孙节点消失由于元素从渲染树消失造成的,通过修改子节点属性无法显示; visibility: hidden 是继承属性,子孙节点消失由于继承了 hidden ,通过设置 visibility: visiblie 可以让子孙节点显示。原创 2020-11-28 19:16:47 · 188 阅读 · 0 评论 -
前端项目解决webpack打包后-webkit-box-orient: vertical ;消失问题
前端写样式的时候经常会用到文字溢出隐藏变省略号的样式。 使用-webkit-box-orient: vertical;样式,但是打包上线后,发现样式丢失方法1: 加上注释命令,让autoprefixer编译的时候关闭对这行代码的转换。 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; ...原创 2019-12-06 17:23:16 · 621 阅读 · 0 评论 -
css3实现高度从固定到高度自适应的过渡动画
去年做过一个这样的动画效果,然后今年又做了一次,今年做的时候突然发现想不起来了,抠鼻尴尬百度了下找到了方法,在此记录下!效果图如下代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten...原创 2019-06-13 00:09:49 · 17372 阅读 · 1 评论 -
em、rem、px、的区别
px像素,相对长度单位。像素px 是相对于显示器屏幕分辨率而言的。特点:1.IE 无法调整使用px作为单位的字体大小;2.国外大部分网站能够调整的原因在于其使用了em 或者rem 作为字体单位;3.Firefox 能够调整px 和 em, rem ,但是96%以上的中国网民使用的是IE 浏览器(或者内核)。pt是一个物理长度单位,指的是72分之一英寸。9pt = 12px 可以一次换...转载 2019-02-16 23:36:20 · 177 阅读 · 0 评论 -
Sublime text 3如何编辑less并转(编译)成css文件 (ctrl + s 保存立即编译)
1、在sublime里安装好less(less语法高亮功能插件)和Less2Css(编译功能插件)这两个插件,具体步骤为: Ctrl+Shift+p打开命令面板,输入install package并在下拉里选中install package(这里必须已经安装好了管理插件的package control插件),弹出新搜索框之后再输入要安装的插件,然后下拉出现对应插件,点击安装。2、安装好插...原创 2018-08-06 20:51:15 · 703 阅读 · 0 评论 -
ios 禁止将页面中的一连串数字识别为电话号码
前端在写移动端页面的时候,如果页面中有一长串的数字,在ios 上测试的话,文字就会变成蓝色,而且用css 样式无法控制,是因为苹果自动把一长串的数字识别成了 电话号码、并设置为手机可以拨打的一个连接。想要禁止这种效果的话其实很简单,在页面head 标签内加入下边代码就可以解决<meta name="format-detection" content="telephone=no" />具体作用:禁止将原创 2017-11-02 20:37:29 · 1023 阅读 · 0 评论 -
ios下button input checkbox radio 默认样式去除
开发移动端的时候ios 下 button input checkbox radio 会有默认样式,很丑的那种背景色不能去除,通过给元素添加如下样式可以去除-webkit-appearance: none;原创 2017-10-09 22:40:39 · 2974 阅读 · 0 评论 -
input type=number禁止输入小数
最近做一个项目需求是输入框只能输入数字,并且禁止输入小数 intpu type=number 就可以控制只允许输入数字,但是不能控制输入小数 在网上查阅相关资料后整理了下 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input type=number 禁止输入小数点</tit原创 2017-10-09 22:37:55 · 24254 阅读 · 0 评论 -
使用CSS将图片转换成黑白(灰色、置灰)
可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。图片效果如下代码如下,兼容IE浏览器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2017-08-21 22:01:17 · 1056 阅读 · 0 评论 -
css代码编写空心箭头
突然发现现在这种空心箭头特别流行 ,也许很早以前就流行了,最近才注意到,汗啊,研究了一下结合网上的资料稍微整理了下! 效果如图: 代码如下:<!-- css --><style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px;原创 2016-12-06 17:29:04 · 695 阅读 · 0 评论 -
css 控制文字间距
css letter-spacing 属性可以控制文字之间的间距,或紧凑或稀疏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 {letter-spacing: -5px}原创 2016-11-07 22:21:58 · 757 阅读 · 0 评论