风君子博客这篇文章给大家聊聊关于html优秀网站引导载入页源码分享，以及h5引导页实现对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
CSS基础2
1.CSS选择器的优先级
选择器
格式
权重
!important
覆盖页面内任何位置定义的元素样式
内联样式
style=&34;
1000
id选择器
34;第一章：&34;Hot!&FF00FF}\np:first-child{color:red}
伪类是通过在元素选择器上加?伪类改变元素状态，?伪元素通过对元素的操作进?对元素的改变。
7.CSS3中有哪些常用新特性
新增各种CSS选择器（:not(.a)：所有class不是“a”的节点）
圆角（border-radius:8px）
多列布局（multi-columnlayout）
阴影（Shadow）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
8.对line-height的理解及其赋值方式
概念：
line-height指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
如果一个标签没有定义height属性，那么其最终表现的高度由line-height决定；
一个容器没有设置高度，那么撑开容器高度的是line-height，而不是容器内的文本内容；把line-height值设置为height一样大小的值可以实现单行文字的垂直居中；
line-height和height都能撑开一个高度；
赋值方式：
带单位：px是固定值，而em会参考父元素font-size值计算自身的行高
纯数字：此数字会与当前的字体大小(font-size)相乘来设置行间,相当于倍数
百分比：与元素自身的字体大小(font-size)有关，计算值是给定的百分比值乘以元素计算出的字体大小
注意：
body{\nline-height:200%;\nfont-size:30px;\n}\np{\nfont-size:16px;\n}
这时候p标签的line-height为60px，因为body的line-height=200%*30px=60px。再p标签直接继承body的line-height，而不是16*200%的32px
9.CSS优化和提高性能的方法有哪些
加载性能：
（1）css压缩：将写好的css进行打包压缩，可以减小文件体积
（2）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，用class作为选择器。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.**，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。
10.CSS预处理器/后处理器是什么？为什么要使用它们
预处理器，如：less，sass，用来预编译sass或者less，增加了css代码的复用性。层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。
后处理器，如：postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。
其它css预处理器语言：Sass（Scss）,Less,Stylus,Turbine,Swithchcss,CSSCacheer,DTCss。
使用原因：
结构清晰，便于扩展可以很方便的屏蔽浏览器私有语法的差异可以轻松实现多重继承完美的兼容了CSS代码，可以应用到老项目中
11.::before和:after的双冒号和单冒号有什么区别
冒号(:)用于CSS3伪类
双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
注意：:before和:after这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after
12.单行、多行文本溢出隐藏
单行文本溢出
overflow:hidden;//溢出隐藏\ntext-overflow:ellipsis;//溢出用省略号显示\nwhite-space:nowrap;//规定段落中的文本不进行换行
多行文本溢出
overflow:hidden;//溢出隐藏\ntext-overflow:ellipsis;//溢出用省略号显示\ndisplay:-webkit-box;//作为弹性伸缩盒子模型显示。\n-webkit-box-orient:vertical;//设置伸缩盒子的子元素排列方式：从上到下垂直排列\n-webkit-line-clamp:3;//显示的行数
注意：由于上面的三个属性都是CSS3的属性，没有浏览器可以兼容，所以要在前面加一个-webkit-来兼容一部分浏览器
12.对CSS工程化的理解
CSS工程化是为了解决以下问题：
宏观设计：CSS代码如何组织、如何拆分、模块结构怎样设计？编码优化：怎样写出更好的CSS？构建：如何处理我的CSS，才能让它的打包结果最优？可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？
以下三个方向都是时下比较流行的、普适性非常好的CSS工程化实践：
预处理器：Less、Sass等；重要的工程化插件：PostCss；Webpackloader等。
基于这三个方向，可以衍生出一些具有典型意义的子问题，这里我们逐个来看：
（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？
预处理器，其实就是CSS世界的“轮子”。预处理器支持我们写一种类似CSS、但实际并不是CSS的语言，然后把它编译成CSS代码：
那为什么写CSS代码写得好好的，偏偏要转去写“类CSS”呢？这就和本来用JS也可以实现所有功能，但最后却写React的jsx或者Vue的模板语法一样——为了爽！要想知道有了预处理器有多爽，首先要知道的是传统CSS有多不爽。随着前端业务复杂度的提高，前端工程中对CSS提出了以下的诉求：
宏观设计上：我们希望能优化CSS文件的目录结构，对现有的CSS文件实现复用；编码优化上：我们希望能写出结构清晰、简明易懂的CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。
这三点是传统CSS所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性：
嵌套代码的能力，通过嵌套来反映不同css属性之间的层级关系；支持定义css变量；提供计算函数；允许对代码片段进行extend和mixin；支持循环语句的使用；支持将CSS文件模块化，实现复用
（2）Webpack能处理CSS吗？如何实现？Webpack能处理CSS吗：
Webpack在裸奔的状态下，是不能处理CSS的，Webpack本身是一个面向JavaScript且只能处理JavaScript代码的模块化打包工具；Webpack在loader的辅助下，是可以处理CSS的。
如何用Webpack实现对CSS的处理：
Webpack中操作CSS需要使用的两个关键的loader：css-loader和style-loadercss-loader：导入CSS模块，对CSS代码进行编译处理；style-loader：创建style标签，把CSS内容写入标签。
在实际使用中，css-loader的执行顺序一定要安排在style-loader的前面。因为只有完成了编译过程，才可以对css代码进行插入；若提前插入了未编译的代码，那么webpack是无法理解这坨东西的，它会无情报错。
13.如何判断元素是否到达可视区域
window.innerHeight是浏览器可视区的高度；
document.body.scrollTop||document.documentElement.scrollTop是浏览器滚动的过的距离；
imgs.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离）；
内容达到显示区域的：img.offsetTop<window.innerHeight+document.body.scrollTop;
14.z-index属性在什么情况下会失效
通常z-index的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。
z-index属性在下列情况下会失效：
父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
15.px、em、rem的区别及使用场景
三者的区别：
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。
使用场景：
对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
16.对Flex布局的理解及其使用场景
Flex是FlexibleBox的缩写，意为&34;，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flexcontainer），简称&34;。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称&34;。容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis），项目默认沿水平主轴排列。
以下6个属性设置在容器上：
flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
以下6个属性设置在项目上：
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为01auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
简单来说：flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例
17.各种图形的绘制
（1）三角1
div{\nwidth:0;\nheight:0;\nborder-bottom:50pxsolidred;\nborder-right:50pxsolidtransparent;\nborder-left:50pxsolidtransparent;\n}
（2）三角2
div{\nwidth:0;\nheight:0;\nborder-left:50pxsolidred;\nborder-top:50pxsolidtransparent;\nborder-bottom:50pxsolidtransparent;\n}
（3）扇形
div{\nborder:100pxsolidtransparent;\nwidth:0;\nheigt:0;\nborder-radius:100px;\nborder-top-color:red;\n}
18.设置小于12px的字体
在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。
解决办法：
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。
使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！