css实用属性

时间:2021-01-09 03:55:04

background-size: 100% 100%;            背景通过拉伸实现填充 自适应

overflow: hidden;                                  清除浮动

box-sizing: border-box;                        为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

border-radius: 3px;                              边框圆角

vertical-align: middle;                          实现多个内联块垂直中部对齐

cursor:pointer;                                     鼠标指针样式

:nth-child(nn)                                       伪类选择器可以给指定行(n)设置样式odd表示奇数行,even表示偶数行

使用绝对定位来居中:

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);      (未设置宽度)

position: absolute;

left: 0;

right: 0;

margin-left: auto;

margin-right: auto;                               (设置宽度 只能设置左右居中不能设置上下居中)

gulp中使用rem:

<script src="dist/js/lib/viewport/viewport.js"></script>

设置缩放标准

docEl.style.fontSize = 40 * (clientWidth / 1440) + 'px';

css实用属性的更多相关文章

  1. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  2. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  3. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  4. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  5. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  6. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  7. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  8. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  9. CSS实用的代码段

    摘抄的一些代码还有自己总结的常用的代码~ 1>浏览器样式统一 *{ margin:0px; padding:0px; } 浏览器样式统一 2>清除浮动的方法 3>跨浏览器设置透明度 ...

随机推荐

  1. asp&period;net 无法加载程序集&ast;&ast;&ast;

    1.vs2008,asp.net出现无法加载程序集...错误信息.可以通过删除项目的dll文件,重新编译运行解决问题. 2.我在global文件中的applicaiton_start开启了一个线程,不 ...

  2. kali基本设置

    一.更换比较快的软件源 修改sources.list文件(su): leafpad /etc/apt/sources.list #debain源 deb http://mirrors.163.com/ ...

  3. Jquery 选择器 详解

    在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools.net/ 一.基本选择器 $( ...

  4. 基于SVG的web页面图形绘制API介绍

    转自:http://blog.csdn.net/jia20003/article/details/9185449 一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标 ...

  5. Java使用URL类下载的图片不完整

    问题 今天在使用URL类来下载网站中的图片的时候,出现了一个问题:下载的图片不完整,并且每次下载的图片大小也不是都相同,反正就是不完整. 问题代码如下: package cn.ganlixin.tes ...

  6. Nginx的虚拟主机配置

    虚拟主机技术能够让同一台服务器.同一组Nginx进程上运行多个网站,降低了资金和服务器资源的损耗.Nginx可以配置三种类型的虚拟主机,本文就是主要介绍这三种虚拟主机配置方式. 配置基于IP的虚拟主机 ...

  7. CDH5&period;12安装检查Inspector failed on the following hosts&period;&period;&period;

    1 安装检查报错 2 原因是因为自己的文件没有全部同步过去 hadoop003文件下面缺少了cm文件夹的内容 3 cp过去 scp -r cm root@hadoop003:/var/www/html ...

  8. Maven包查询库

    第一个: http://search.maven.org/ 第二个: http://mvnrepository.com/artifact/aspectj/aspectjweaver

  9. TypeError&colon; &&num;39&semi;ExcelData&&num;39&semi; object is not iterable

    今天写了个测试的代码,结果在执行test_register.py文件在调用readexcle.py的时候一直报错TypeError: 'ExcelData' object is not iterabl ...

  10. python 全局搜索路径

    在~/.bachrc中添加 export PYTHONPATH=$PATHONPATH:[需要添加的路径]