CSS 杂记

lavor 发布于2019-08-30 15:53 / 2392人阅读

摘要：样式优先级内联样式表标签内部嵌入样式表当前文件中外部样式表外部文件中。标签的权值为类选择符的权值为选择符的权值最高为权值为权值为权值为权值为权值为权值为但是因为有为最高权值可以用来设置最高权值优先级样式，权值高于用户自己设置的样式。

css 样式优先级

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

权值

浏览器会根据权值来判断使用哪种 css 样式的，权值高的就使用哪种 css 样式。

标签的权值为 1

类选择符的权值为 10

ID 选择符的权值最高为 100

p{color:red;}  /*权值为1*/
p span{color:green;}  /*权值为1+1=2*/
.warning{color:white;}  /*权值为10*/
p span.warning{color:purple;}  /*权值为1+1+10=12*/
#footer .note p{color:yellow;}  /*权值为100+10+1=111*/
p{color:red!important;}  /*权值为1但是因为有!important为最高权值*/

可以用 !important 来设置最高权值 !important 优先级样式，权值高于用户自己设置的样式。

层叠

层叠就是在 html 文件中对于同一个元素可以有多个 css 样式存在，当有相同权重的样式存在时，会根据这些 css 样式的前后顺序来决定，处于最后面的 css 样式会被应用。

px/em/pt 单位

px 像素 Pixel, 相对长度单位

em 相对长度单位, 相对于当前对象内文本的字体尺寸

pt 点（Point）, 绝对长度单位

如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。

盒模型代码简写

盒模型方向上、右、下、左。（顺时针）

专线服务私有云杂记 css引入css css _CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116552.html

2018.12月问题整理杂记

摘要：布局如下对于这块，我不是很理解，后发现，注销这个样式，用可以解决。后查阅一些资料，到了原因。 -12.24-：html布局如下： html css javascript vue css： tab{ width: 600px; margin: 0 auto; } .tab-tit{ width: 600px; font-si...

wudengzan 2019-08-30 15:55 评论0 收藏0
Webpack系列-第一篇基础杂记

摘要：系列文章系列第一篇基础杂记系列第二篇插件机制杂记系列第三篇流程杂记前言公司的前端项目基本都是用来做工程化的，而虽然只是一个工具，但内部涉及到非常多的知识，之前一直靠来解决问题，之知其然不知其所以然，希望这次能整理一下相关的知识点。系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记前言公司的前端项目基本都是用...

Batkid 2019-08-23 15:21 评论0 收藏0
Webpack 项目优化杂记

摘要：入口文件打包出口地址在中可以配置我们的地址这里你要有一个七牛云的账户。特别像是七牛云这样拥有图片处理引擎的服务商，我们还可以通过来处理上传至的图片。本项目源码均可在这里找到。之前公司的官网项目静态文件都是放在静态服务器中，这其中的弊端就不赘述了。简单说一下 CDN 的好处: CDN 可以解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就...

incredible 2019-08-23 13:53 评论0 收藏0
React-Router 杂记

摘要：三种的区别即对应中的值，如，服务器对任务都返回同一个，具体的路径由浏览器区分，因为浏览器不会发送后面的值给服务器。如果是即变成这样，，所以要对服务器配置不同的返回不同的资源。就是没有的情况，比如。三种Router的区别 1. HashRouter: 即对应url中的hash值，如xx.com/#/a、xx.com/#/a/b，服务器对任务url都返回同一个url，具体的路径由浏览器...

keelii 2019-08-23 15:10 评论0 收藏0
React-flux杂记

摘要：简介是一种搭建客户端的应用架构，更像是一种模式而不是一个框架。简介 Flux是一种搭建WEB客户端的应用架构，更像是一种模式而不是一个框架。特点单向数据流 showImg(https://segmentfault.com/img/remote/1460000018128072?w=1300&h=708); 与MVC的比较 1.传统的MVC如下所示（是一个双向数...

王岩威 2019-08-23 15:10 评论0 收藏0