mpandroidchart设置禁止快速滚动 css 禁用滚动条

转载

mob64ca14010a69 2024-06-06 06:20:29

文章标签 css fixed 滚动条 CSS 选择器优先级 文章分类 Android 移动开发

mpandroidchart设置禁止快速滚动 css 禁用滚动条_选择器

盒子模型的理解 ?

标准模式和混杂模式(IE)。
在标准模式下浏览器按照规范呈现页面；
在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。
混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

mpandroidchart设置禁止快速滚动 css 禁用滚动条_CSS_02

mpandroidchart设置禁止快速滚动 css 禁用滚动条_选择器_03

CSS 盒子模型具有内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。

我们所说的 width，height 指的是内容 (content) 的宽高。

一个盒子模型的中：

宽度 = width+ pdding(宽) + border(宽)。
高度 = height + padding(高) + border(高)。

如何在页面上实现一个圆形的可点击区域？

1、map+area 或者 svg
2、border-radius
3、纯 js 实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

CSS 中哪些属性可以同父元素继承 ?

继承：(X)HTML 元素可以从其父元素那里继承部分 CSS 属性，即使当前元素并没有定义该属性，比如：color，font-size。

box-sizing 常用的属性有哪些？分别有什么作用？

常用的属性：content-box、 border-box 、inherit

作用

content-box(默认)：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

页面导入样式时，使用 link 和 @import 有什么区别？

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS(是一种描述和同步网站内容的格式，是使用最广泛的 XML 应用), 定义 rel 连接属性等作用；
而 @import 是 CSS 提供的，只能用于加载 CSS;
页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载;
import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题。
总之，link 要优于 @import。

常见兼容性问题？

浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin: 0; padding: 0;} 来统一。
IE下 event 对象有 event.x，event.y 属性，而 Firefox 下没有。Firefox 下有 event.pageX，event.PageY 属性，而 IE 下没有。解决办法：var mx = event.x ? event.x : event.pageX;
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了，解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法？

一个块级元素如果没有设置 height，那么其高度就是由里面的子元素撑开，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置 border 或者 background 都得不到正确的解析。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0(高度塌陷)。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

清除浮动的方式

父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
结尾处加空 div 标签 clear: both，原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。
父级 div 定义 overflow: hidden，原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器会自动检查浮动区域的高度
父级 div 也一起浮动。
父级 div 定义 display: table 。
父级 div 定义伪类 :after 和 zoom 。
结尾处加 br 标签 clear: both，原理：父级 div 定义 zoom: 1 来解决 IE 浮动问题，结尾处加 br 标签 clear: both。

总结：比较好的是倒数第 2 种方式，简洁方便。

position 、float 和 display 的取值和各自的意思和用法

position

position 属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。
postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让 top，right，bottom，left 的值失效。在切换的时候可以尝试这个方法。
除了 static 值，在其他三个值的设置下，z-index 才会起作用。确切地说 z-index 只在定位元素上有效。
position：relative 和 absolute 都可以用于定位，区别在于前者的 div 还属于正常的文档流，后者已经是脱离了正常文档流，不占据空间位置，不会将父类撑开。定位原点 relative 是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute 相对于第一个 position 属性值不为 static 的父类。所以设置了 position：absolute，其父类的该属性值要注意，而且 overflow：hidden 也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。
fixed 旧版本 IE 不支持，却是很有用，定位原点相对于浏览器窗口，而且不能变。常用于 header，footer 或者一些固定的悬浮 div，随滚动条滚动又稳定又流畅，比 JS 好多了。fixed 可以有很多创造性的布局和作用，兼容性是问题。
position：inherit。规定从父类继承 position 属性的值，所以这个属性也是有继承性的，但需要注意的是 IE8 以及往前的版本都不支持 inherit 属性。
sticky ：设置了sticky 的元素，在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是 top、left 等属性无效)，当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。

float

float：left (或 right)，向左(或右)浮动，直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流，会被正常文档流内的块框忽略。不占据空间，无法将父类元素撑开。
任何元素都可以浮动，浮动元素会生成一个块级框，不论它本身是何种元素。因此，没有必要为浮动元素设置 display：block。
如果浮动非替换元素，则要指定一个明确的 width，否则它们会尽可能的窄。什么叫替换元素？根据元素本身的特点定义的， (X)HTML中的 img、input、textarea、select、object 都是替换元素，这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

display

display 属性取值：none、inline、inline-block、block、table 相关属性值、inherit。
display 属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。
display：none 和 visiability：hidden 都可以隐藏 div，区别有点像 absolute 和 relative，前者不占据文档的空间，后者还是占据文档的位置。
display：inline 和 block，又叫行内元素和块级元素。表现出来的区别就是 block 独占一行，在浏览器中通常垂直布局，可以用 margin 来控制块级元素之间的间距(存在 margin 合并的问题，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。)；而 inline 以水平方式布局，垂直方向的 margin 和 padding 都是无效的，大小跟内容一样，且无法设置宽高。inline 就像塑料袋，内容怎么样，就长得怎么样；block 就像盒子，有固定的宽和高。
inline-block 就介于两者之间。
table 相关的属性值可以用来垂直居中，效果一般。
flex

定位机制

上面三个属性都属于 CSS 定位属性。CSS 三种基本的定位机制：普通流、浮动、绝对定位。

css3 动画效果属性有哪些 ?

animation-name：规定需要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。

canvas 与 svg 的区别？

Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas 不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。
Canvas 和 SVG 在修改方式上还存在着不同。绘制 Canvas 对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。

现在对两种技术做对比归纳如下：

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用

px 和 em 的区别？

px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是 16px。所有未经调整的浏览器都符合：1em = 16px。那么12px = 0.75em,10px = 0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 Font-size = 62.5%，这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。

会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别什么时候用。如何优化图像、图像格式的区别 ?

JPG 的特性

支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
有损压缩会使图像数据质量下降，并且在编辑和重新保存 JPG 格式图像时，这种下降损失会累积。
JPG 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

PNG 的特性

能在保证最不失真的情况下尽可能压缩图像文件的大小。
PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时，彩色图像的深度可多到 48 位，并且还可存储多到 16 位的 α 通道数据。
对于需要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上。
另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用 PNG 格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告 Banner、商品图片等对质量要求不是特别苛刻的，则可以用 JPG 去进行存储从而降低文件大小。

GIF格式特点

透明性: Gif 是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明(alpha 透明)。
动画：Gif 这种格式支持动画。
无损耗性：Gif 是一种无损耗的图像格式，这也意味着你可以对 gif 图片做任何操作也不会使得图像质量产生损耗。
水平扫描：Gif 是使用了一种叫作 LZW 的算法进行压缩的，当压缩 gif 的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的 gif 图片比竖向的 gif 图片更加小。例如 50010 的图片比 10500 的图片更加小。间隔渐进显示：Gif 支持可选择性的间隔渐进显示

由以上特点看出只有 256 种颜色的 gif 图片不适合作为照片，它适合做对颜色要求不高的图形。

我们知道可以以外链的方式引入 CSS 文件，请谈谈外链引入 CSS 有哪些方式，这些方式的性能有区别吗？

CSS 的引入方式最常用的有三种

第一：外链式

这种方法可以说是现在占统治地位的引入方法。

如同 IE 与浏览器。这也是最能体现 CSS 特点的方法；

最能体现 DIV + CSS 中的内容离的思想，也最易改版维护，代码看起来也是最美观的一种。

第二：内部样式表

这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。

与第一种方法比起来，优弊端也明显。

优点：速度快，所有的 CSS 控制都是针对本页面标签的，没有多余的 CSS 命令；再者不用外链 CSS 文件。直接在文档中读取样式。

缺点：就是改版麻烦些，单个页面显得臃肿，CSS 不能被其他 HTML 引用造成代码量相对较多，维护也麻烦些采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

第三：行内样式

认为 HTML 里不能出现 CSS 命令。其实有时候没有什么大不了。比如通用性差，效果特殊，使用 CSS 命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。

第四、@import 引入方式

CSS Sprite 是什么，谈谈这个技术的优缺点。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无计算机统一都按 byte 计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可越大。

利用 CSS Sprites 能很好地减少了网页的 http 请求，从而大大的提高了页面的性能，这也是 CSS Sprites 的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites 能减少图片的字节，曾经比较过多次 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起方便。

诚然 CSS Sprites 是如此的强大，但是也存在一些不可忽视的缺点，如下：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容背景断裂；
CSS Sprites 在开发的时候比较麻烦，你要通过 photoshop 或其他工具测量计算每一个背景单元的精确位是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用 RIA 开发了一个 CSS Sprites 样式生成工具，虽然些使用上的不灵活，但是已经比 photoshop 测量来的方便多了，而且样式直接生成，复制，拷贝就 OK！
CSS Sprites 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的好不要动，这样避免改动更多的 css，如果在原来的地方放不下，又只能(最好)往下加图片，这样图片的字加了，还要改动 css。

CSS Sprites 非常值得学习和应用，特别是页面有一堆 ico(图标)。总之很多时候大家要权衡一下再决定是不是应用 CSS Sprites。

优先级算法如何计算？内联和 important 哪个优先级高？

优先级就近原则，样式定义最近者为准
载入样式以最后载入的定位为准
优先级为 !important > [ id > class > tag ]
Important 比内联优先级高

css 的基本语句构成是？

回答：选择器、属性和属性值。

如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、JS 与图片？

回答：涉及到人手、分工、同步；

先期团队必须确定好全局样式(globe.css)，编码模式 (utf-8) 等
编写习惯必须一致(例如都是采用继承式的写法，单样式都写成一行)；
标注样式编写人，各模块都及时标注(标注关键样式调用的地方)；
页面进行标注(例如页面模块开始和结束)；
CSS 跟 HTML 分文件夹并行存放，命名都得统一(例如 style.css)
JS 分文件夹存放，命名以该 JS 功能为准
图片采用整合的 png8 格式文件使用，尽量整合在一起使用，方便将来的管理。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？新增伪类有那些？

CSS 选择符

id 选择器( #myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
相邻选择器(h1 + p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器( * )
属性选择器(a[rel = "external"])
伪类选择器(a: hover, li: nth - child)

可继承的样式

font-size，font-family，color，ul，li，dl，dd，dt；

不可继承的样式

border padding margin width height 事实上，宽度也不是继承的，而是如果你不指定宽度，那么它就是 100%。由于你子 DIV 并没有指定宽度，那它就是 100%，也就是与父 DIV 同宽，但这与继承无关，高度自然也没有继承一说。

优先级算法

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为: !important > id > class > tag , important 比内联优先级高

CSS3 新增伪类举例

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 选择器在被选元素的内容后面插入内容
:before 选择器在被选元素的内容前面插入内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n，从后向前数
:nth-child(odd) 奇数
:nth-child(even) 偶数
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第 n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第 n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

CSS3 有哪些新特性 ?

CSS3 实现圆角(border-radius:8px)
阴影(box-shadow:10px)
对文字加特效(text-shadow)
线性渐变(gradient)
旋转、缩放、定位、倾斜

transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

增加了更多的 CSS 选择器
多背景 rgba

collapse、overflow、float 这些特性相互叠加后会怎么样？

margin collapse 我觉得这里的意思应该是 Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。

其中所说的 margin 毗邻，可以归结为以下两点：

这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
这些 margin 都处于普通流中。

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。
浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠.
创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠

absolute 的 containing block(容器块) 计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin，border 外的区域) 的最小矩形；
否则，则由这个祖先元素的 padding box 构成。
如果都找不到，则为 initial containing block。

补充：