关键词：
前言
css就像女人的化妆品一样，化妆前后
对于web 前端来说，书写好css是不容易的一件事情。下面就让我把工作中遇到问题分享给大家。
css优先级
先看下图
优先级
选择器的优先权解释说明
内联样式表的权值最高 1000。
ID 选择器的权值为 100。
Class 类选择器的权值为 10。
HTML 标签（类型）选择器的权值为 1。
!important权重最高 （注意）
例：
//css
#slides
color: #8A2BE2;/*权重值100*/
.slides
color: #000000;/*权重值10*/
div
color: #F2F2F2;/*权重值1*/
//HTML
<div class="slides" id="slides" style="color: red;/*权重值1000*/">
slides
</div>
//js
setTimeout(function()
var d=document.getElementById(‘slides‘);
d.style.color=‘blue‘;
,500);
//js改变的样式是属于 内联样式。多重样式
比如页面有【内部样式】、【外联样式】权重相同则【内部样式】优先；
例：
<link rel="stylesheet" href="css/dome.css" />
<style type="text/css">
#slides
color: #8A2BE2;/*权重值100*/
</style>
注：
- 如果两个【外联样式】同时含有相同权重class类名,则后者权重优先。
- 如果两个【内部样式】同时含有相同权重class类名,则后者权重优先。
猜猜渲染结果是什么？
例1：
//css
.bg
background-color: #8A2BE2;
.slides
background-color: #000000;
//html
<div class="slides bg">
slides
</div>
//渲染结果背景颜色是 bg 还是 slides？
//html
<div class=" bg slides">
slides
</div>
//问：渲染结果背景颜色是 bg 还是 slides？例2：
//css
.bg
background-image: url(img/1.png);
.slides
background-color: #000000;
//html
<div class="slides">
slides
</div>
//问：（HTML内没有使用 bg class类名）图片1.png会不会下载？
例3：
//css--内部样式
.slides
background-color: #000000;
//html
<div class="slides">
slides
</div>
//js
setTimeout(function()
var dom=document,
head = dom.getElementsByTagName(‘head‘)[0],
link = dom.createElement(‘link‘);
link.href = ‘css/dome.css‘;
link.rel = ‘stylesheet‘;
link.type = ‘text/css‘;
head.appendChild(link); /*添加到HTML中*/
,500)
//‘css/dome.css‘的内容为
.slides
background-color: red;
//问：slides的背景颜色是什么？
例4：
问：css加载会不会影响dom解析？
Da 案
例1：slides slides
渲染样式跟<div>标签引用的class 前后顺序不相干，跟css中class 名称的顺序有关
例2：图片1.png会下载
因为dom解析需要下载css，因此css中图片会下载
例3：red
因为‘css/dome.css‘是后来使用js加载进去的，渲染引擎会等待加载完毕进行再次渲染。
例4：css加载不会影响dom解析，但它会影响dom渲染。因为只有所有css资源都下载完毕才会进行渲染，不然浏览器会一直重绘。总结
深入学习css其实我们还需要更加努力，就像张鑫旭大佬一样，探索css世界把它读懂、学精。
springboot基础篇之@value中哪些你不知道的知识点(代码片段)
SpringBoot基础篇@Value中哪些你不知道的知识点看到这个标题，有点夸张了啊，@Value这个谁不知道啊，不就是绑定配置么，还能有什么特殊的玩法不成？(如果下面列出的这些问题，已经熟练掌握，那确实没啥往下面看的必要了)@Value... 查看详情
统计学的基本概念，你知道多少(代码片段)
统计学习的基本概念（复习篇）总体（population）：根据研究目的确定的同类对象的全体（集合） 样本（sample）：从总体中随机抽取的部分具有代表性的研究对象。参数（Parameter）：反映总体特征的统计指标，如总体均数、... 查看详情
css3自适应布局单位vw,vh，你知道多少？(代码片段)
视口单位(Viewportunits)什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：LayoutViewport（布局视口），VisualViewport（视觉视口），IdealViewport（理想视口）。视口单位中的“视... 查看详情
你知道多少this，new，bind，call，apply？那我告诉你(代码片段)
...bind，call，apply呢？这些你都用过吗？掌握这些内容都是基础中的基础了。如果你不了解，那还不赶快去复习复习，上网查阅资料啥的！通过call，apply，bind可以改变this的指向，this指向一般指向它的调用者，默认挂载在window对象... 查看详情
并发编程并发编程中你需要知道的基础概念(代码片段)
本博客系列是学习并发编程过程中的记录总结。由于文章比较多，写的时间也比较散，所以我整理了个目录贴（传送门），方便查阅。并发编程系列博客传送门多线程是Java编程中一块非常重要的内容，其中涉及到很多概念。这... 查看详情
css高级篇——媒体查询(mediaqueries)(代码片段)
...介，比如screen,print。本篇要介绍的特性在指定媒介的基础上更进一步，可以精确到屏幕尺寸。这也是响应式(responsive)布局的基础，一个页面可以同时适配手机和平板，页面布局随浏览器尺寸的变化而变化。首先... 查看详情
css高级篇——媒体查询(mediaqueries)(代码片段)
...介，比如screen,print。本篇要介绍的特性在指定媒介的基础上更进一步，可以精确到屏幕尺寸。这也是响应式(responsive)布局的基础，一个页面可以同时适配手机和平板，页面布局随浏览器尺寸的变化而变化。首先... 查看详情
js的console你知道多少(代码片段)
js的console你知道多少？列出所有的console属性console.dir(console)或者console.dirxml(console)记录代码执行时间console.time("test");varcount=0;for(vari=0;i<10000;i++)count++;console.timeEnd("test");输出消息格式化console.log("Hello 查看详情
前端基础二之css篇(代码片段)
文章目录题外话前言CSS1.嵌入HTML2.CSS基础语法3.CSS高级语法3.1组选择器3.2继承4.选择器4.1派生选择器4.2id选择器4.3类选择器4.4属性选择器5.css常见样式5.1背景5.2文本5.3字体5.4链接5.5列表5.6表格结语题外话📢博客主页：❤布小... 查看详情
前端基础二之css篇(代码片段)
文章目录题外话前言CSS1.嵌入HTML2.CSS基础语法3.CSS高级语法3.1组选择器3.2继承4.选择器4.1派生选择器4.2id选择器4.3类选择器4.4属性选择器5.css常见样式5.1背景5.2文本5.3字体5.4链接5.5列表5.6表格结语题外话📢博客主页：❤布小... 查看详情
io模型知多少|代码篇(代码片段)
...一篇咱们换一个角度，从代码角度来分析一下。socket编程基础开始之前，我们先来梳理一下，需要提前了解的几个概念：socket:直译为“插座”，在计算机通信领域，socket被翻译为“套接字”，它是计算机之间进行通信的一种约... 查看详情
promptlearning教学基础篇：prompt基本原则以及使用场景技巧助力你更好使用chatgpt，得到你想要的答案(代码片段)
Promptlearning教学基础篇：prompt基本原则以及使用场景技巧助力你更好使用chatgpt，得到你想要的答案Promptlearning教学[基础篇]：prompt基本原则以及使用场景技巧助力你更好使用chatgpt，得到你想要的答案如果你想系统学习如果你对AI... 查看详情
sass基础教程——安装(代码片段)
本篇主要如何安装Sass，并不需要CSS知识，不过对CSS不熟悉的同学可参考我之前写的系列教程：CSS入门篇CSS进阶篇CSS高级篇上一篇我们提到过：Sass是一种CSS的扩展语言，也是一种脚本语言，需要转换成CSS才... 查看详情
基础好？uitableview的基础你知道多少？
一、tableView的创建//利用大小和tableView样式创建tableViewUITableView*tableView=[[UITableViewalloc]initWithFrame:self.view.boundsstyle:UITableViewStyleGrouped];[self.viewaddSubview:tableView];//tableView有两种样式Gro 查看详情
html+css复习之html基础篇
一些说明写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识我把HTML标签分成两大类，重要... 查看详情
关于springboot自动装配你知道多少？(代码片段)
文章目录什么是springboot自动装配？SpringBoot自动装配的过程自动装配源码分析@ComponentScan@EnableAutoConfiguration小总结细节问题为什么不使用@Import直接引入自动配置类什么是springboot自动装配？自动装配是springboot的核... 查看详情
sass基础教程——基本介绍(代码片段)
本篇是Sass教程的入门篇，主要讲述Sass的诞生背景以及它如何提高我们的开发效率学习Sass需要有一定的CSS知识，对CSS不熟悉的同学可参考我之前写的系列教程：CSS入门篇CSS进阶篇CSS高级篇Sass是什么简单来说，Sass... 查看详情
每日一问：layoutparams你知道多少？(代码片段)
前面的文章中着重讲解了View的测量流程。其中我提到了一句非常重要的话：View的测量匡高是由父控件的MeasureSpec和View自身的`LayoutParams共同决定的。我们在前面的每日一问：谈谈对MeasureSpec的理解把MeasureSpec的重点进行了讲解，... 查看详情