一个切图仔的 CSS 笔记
1,flexbox~注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
在ios8上要加上前缀 display: -webkit-box; display: -webkit-flex;
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ flex兼容兼容写法
容器属性: .box{display: -webkit-flex; /* Safari */display: flex;flex-direction: row | row-reverse | column | column-reverse;(默认值):主轴为水平方向,起点在左/右/上/下端。flex-wrap: nowrap | wrap | wrap-reverse;(默认):不换行。/换行从上到下/换行从下到上justify-content: flex-start | flex-end | center | space-between | space-around;横向居左/右/中/对齐贴边/等分居中align-items: flex-start | flex-end | center | baseline | stretch;纵向居上/下/中/项目的第一行文字的基线对齐/(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度---------------------------------------------------------------align-content: flex-start | flex-end | center | space-between | space-around | stretch; 多行上下对齐方式。如果项目只有一根轴线,该属性不起作用。flex-flow: <flex-direction> || <flex-wrap>;flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 项目属性: .item {order: <整数>; 定义项目的排列顺序。数值越小,排列越靠前,默认为0。flex-grow: <number>; /* default 0 */项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果其他都是1,一个为2,那么2的空间比1大一倍flex-shrink: <number>; /*default1*/如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,为0缩小。flex-basis: <length> | auto; /* default auto */它的默认值为auto,即项目的本来大小。设置项目数值将占据固定主轴空间align-self: auto | flex-start | flex-end | center | baseline | stretch。属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。-------------------------------------------------------------------flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]放大, 缩小 和定宽的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 }1,.item 设置margin:auto;自动等分 2,当flex-grow之和小于1时,只能按比例分配部分剩余空间,而不是全部3,tip:左边固定右侧自适应布局:左侧flex:0 0 100px;
2,input设置 placeholder 颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#B3B3B3!important; } input:-moz-placeholder, textarea:-moz-placeholder { color:#B3B3B3!important; } input::-moz-placeholder, textarea::-moz-placeholder { color:#B3B3B3!important; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#B3B3B3!important; }
3,input 设置size可调节填充父级元素
4,兄弟节点ul > li+li{}表示ul下第一个li后面的所有li。多用于写上边距
5,outline 描边(参数同border)。outline-offset:20px偏移
6,图片在指定尺寸后,可以设置object-fit为contain或cover保持比例
7,button设置disable后,设置button:disable{background:#eee; cursor: not-allowed;}
8,设置宽度为fill-available,可以使inline-block像block那样填充整个空间 width: -webkit-fill-available;
9,设置宽度为fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果
10,可以设置宽度为min-content和max-content,前者让内容尽可能地收缩,后者让内容尽可能地展开
11, CSS强制性换行:
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
//不换行 white-space:nowrap; //自动换行 word-wrap: break-word; word-break: normal; //强制换行 word-break:break-all;
12,CSS动画
//动画耗时transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out; //元素的动画transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2);
使用CSS transforms 或者 animations时可能会有页面闪烁的bug
-webkit-backface-visibility: hidden;
13,阴影:box-shadow: 0px 0px 2px -5px #eee, 0px 0px 0px #eee, 0px 3px 10px #eee, 0px 2px 0px #eee;
<!-线性渐变->div {linear-gradient(red, yellow) } background: linear-gradient(direction, color-stop1, color-stop2, ...); background-image: linear-gradient(to right, transparent 50%, #655 0);//等分颜色
14,<input "IME-MODE: disabled;" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="5" type="text" name="" class="num" value="1" /> 禁止粘贴和输入非数字文本
15,背景图
background:url() no-repeat scroll center top(水平 垂直) background-attachment:设置背景图片是否随着文字移动而移动,还是固定在一个位置上。 scroll:背景图像是随对象内容滚动 fixed:背景图像固定
16,省略号
N行省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;单行省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
17,CSS3 filter Property 图片过滤
img {filter: grayscale(100%); //灰度filter: blur(5px); //模糊filter:brightness(200%); //高亮filter:saturate(8); //饱和filter:sepia(100%); //怀旧}
18,box-sizing 让元素的宽度、高度包含border和padding {box-sizing: border-box;}
19,手机video 都在页面中播放,而不是全屏播放了。 <video src="test.mp4" webkit-playsinline="true"></video>
20,页面操作
<img src=”logo.gif” width=88 height=31 οndragstart=”return false;” > οncοntextmenu=”return false;” //禁止鼠标右键 οndragstart=”return false;” //禁止鼠标拖动 onselectstart=”return false;”//文字禁止鼠标选中 οnselect=”document.selection.empty();”//禁止复制文本
21,常用网页字体设置
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; //常用 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312
22,
22-1,在设置背景图后,通过 image-set( url() 1x, url() 2x) 设置不同分辨率下的图片
background-image: url(../img/test-icon_1x.png);
background-image: -webkit-image-set(url(../img/test-icon_1x.png) 1x, url(../img/test-icon_2x.png) 2x);
22-2, @media only screen and (-webkit-min-device-pixel-ratio:3) { ... }
转载于:https://www.cnblogs.com/chuanq/p/11270580.html
一个切图仔的 CSS 笔记相关推荐
- 一个切图仔的工作日常
1.拿到公司设计师给的PSD图(PC端给的是1920px的设计稿,移动端给的750px的设计稿). 2.自己新建一个项目目录(默认有css,js,images文件夹以及一个index.html文件). ...
- css hat,论切图仔的自我修养
编者按:作者糯米是个工具控,让我们来看看他都私藏了哪些好用的工具吧. 不过,据说都挺贵. Adobe Photoshop CC 2015 Adobe Photoshop 是设计师的必备,所以也是前端切 ...
- 切图?切图!——切图仔htmlcss秃头指南
我又开始写博客了 本来平时是使用公司内部的语雀来进行日常工作的记录,但是想了想,一些不涉及内部知识的东西还是写在公共平台上比较好.随时可以查得到.被看到的可能性更大,错漏也会被指出.蛮好的. 这段时间 ...
- 「切图仔日常」浅谈加载动画两板斧
1.前言 此刻深圳大雨瓢泼,周围一片黑压压的.对于这样的日子,果断从冰箱里面拿出肥宅快乐水,打开电脑查看最近更新的番剧,舒服窝在沙发里真是美滋滋. 但是不知道大雨原因,网络加载一直时好时坏,看的贼忧伤 ...
- 你才切图仔,你全家都切图仔
很多人提起前端的时候,总是闪过一丝微妙的表情,就连不少大学科班生都会对前端的工作职责感到疑惑. 很多人眼里的前端感觉就是做一些酷炫的网页特效,JS 学个皮毛会用框架就好了. 但事实上,一个真正的前端工 ...
- 完成css的切图 图片任意,css切图是什么意思
css切图是指DIV CSS开发的意思,表示从一张网页美工图切片到HTML代码开发与CSS样式开发,完成HTML静态网页:css切图包含两部分,分别是:1.网页美工图素材切出:2.DIV+CSS代码开 ...
- web前端入门学习 css(5)(浮动)(ps切图)(css属性书写顺序)(学成在线网站案例)
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
- linux 切图软件下载,学会23个linux常用命令,不做前端切图仔~
来源 | https://segmentfault.com/a/1190000021439560 前言一个前端好好切图不好吗?为什么要学 linux 呢? 嗯,真香 ! 1. ls 命令 : 显示目录 ...
- 【切图仔日常】浅谈CSS3动画之凌波微步--steps()
背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...
最新文章
- python类中self是什么
- 【LaTeX】E喵的LaTeX新手入门教程(3)数学公式
- 腾讯产品经理的一天是啥样的?
- 使用dubbo需要导入的jar包
- Qt : 记录一个编译错误
- openLayer加载KML,画出省及省下的边界区域,并设置样式、各种标注及提示信息
- 如何配置mysql 5.7_win7 64位下如何安装配置mysql-5.7.7-rc-winx64
- php数据库搬家,php 用adodb实现数据库搬家
- Mac OS X 系统修改Terminal终端配色
- 如何卸载office201032位_office2010卸载不了应该如何通过清理注册表解决方法?
- Java连接HBase数据库,操作HBase数据库
- 【数据库】SQL语句大全
- 小程序跳转到其他小程序
- EVA改进(点锐度算法)图像清晰度评价方法C++实现
- github电脑壁纸_GitHub - jadepeng/bing-wallpaper: Bing每日壁纸,自动获取Bing的精美图片设置为壁纸,并且支持随机切换历史壁纸,查看壁纸故事...
- 光流传感器不是一个到手就能用的PIX外设
- CentOS7下安装FTP服务
- workflow工作流类型及其区别
- word里双横线怎么打_word文档横线怎么打
- Flink SQL和Table编程和案例
热门文章
- pycharm是不是python编程_使用PyCharm进行python开发的简介
- 无人值守安装之cdrom_无人值守安装
- Math、Date内置对象方法整理
- C# WPF 显示图片和视频显示 EmuguCv、AForge.Net测试
- 让 UV4 支持STC 单片机
- Mathematics 9.0 绘制不等式确定的区域
- oracle ojvm generic,Oracle OJVM安全补丁
- 我所知道的Ribbon库
- enum 定义3个属性_和平精英:合金龙骨有3个隐藏属性,比玛莎“水下无敌”还唬人...
- Python应用实战- 爬虫基础入门知识必会