CSS3处理

标签：动画   1.2   定义   visit   避免   现在   通配   也会   range   

1.CSS盒子模型？IE盒子模型？

2.box-sizing属性？

3.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

不可继承的样式：border, padding, margin, width, height

4.CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

一.!important声明的样式优先级最高，如果冲突再进行计算。

二.如果优先级相同，则选择最后出现的样式。

三.继承得到的样式的优先级最低。

5.伪类和伪元素？

w3c中对于它们是这么解释的

• 伪类：用于向某些选择器添加特殊的效果
• 伪元素：用于将特殊的效果添加到某些选择器

总结：

• 伪类与伪元素都是用于向选择器加特殊效果
• 伪类与伪元素的本质区别就是是否抽象创造了新元素
• 伪类只要不是互斥可以叠加使用
• 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
• 伪类与伪元素优先级分别与类、标签优先级相同

伪类：

伪元素：

6.CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

7.浮动元素的上下左右居中？

border: 1px solid red;

float: left;

position: absolute;

width: 200px;

height: 100px;

left: 50%;

top: 50%;

margin: -50px 0 0 -100px;

8.绝对定位的左右居中？

border: 1px solid black;

position: absolute;

width: 200px;

height: 100px;

margin: 0 auto;

left: 0;

right: 0;

9.display有哪些值？

10.css3新增那些特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

11.用纯CSS创建一个三角形？

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

12.常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

   {

   background-color:#f1ee18;/*所有识别*/

   .background-color:#00deff\9; /*IE6、7、8识别*/

   +background-color:#a200ff;/*IE6、7识别*/

   _background-color:#1e0bd1;/*IE6识别*/

   }

4. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

5. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

7. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

13.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。

2. firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

14.display:none与visibility：hidden的区别？

15.position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

16.浮动带来的问题？

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

17.清除浮动？

1. 最后一个浮动元素后加空div标签 并添加样式clear:both。

2. 包含浮动元素的父标签添加样式overflow为hidden或auto。

3. 父级div定义zoom

18. CSS 预处理器使用？

Less（@） sass（$）

19.CSS优化、提高性能的方法有哪些？

1. 避免后代选择符

2. 避免链式选择符

3. 使用紧凑的语法

4. 避免不必要的命名空间

5. 避免不必要的重复

6. 避免！important，可以选择其他选择器

7. 尽可能的精简规则，你可以合并不同类里的重复规则

20.怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

21.position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

22.手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

23.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

1. 可以将<li>代码全部写在一排

2. 浮动li中float：left

3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

24.display:inline-block 什么时候会显示间隙？

1. margin正值的时候 解决：margin使用负值

2. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

25.style标签写在body后与body前有什么区别？

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

26.HTML5 存储类型?

HTML5 提供了下面两种本地存储方案：

• localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
• sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

27.https://yq.aliyun.com/articles/630745?spm=a2c4e.11153940.blogcont609475.15.259b1b2ebFKtaq

CSS3处理

标签：动画   1.2   定义   visit   避免   现在   通配   也会   range   

原文地址：https://www.cnblogs.com/guoz/p/9567341.html