CSS知识点汇总(二）--选择器&外边距等

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

选择器有：

- id选择器（#myid）
- 类选择器（.myclassname）
- 标签选择器（div,h1,p）
- 后代选择器（h1 p）
 - 相邻后代选择器（子）选择器（ul>li）
 - 兄弟选择器（li~a）
- 相邻兄弟选择器（li+a）
 - 属性选择器（a[rel="external"]）
 - 伪类选择器（a:hover,li:nth-child）
 - 伪元素选择器（::before、::after）
 - 通配符选择器（*）

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border、 padding、 margin、 width、 height ;

优先级：

• 优先级就近原则，样式定义最近者为准;

• 载入样式以最后载入的定位为准;

优先级为:

！important>id>class>tag， impoertant比内联优先级高

CSS3新增伪类举例：

• p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。

• p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

• p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

• p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。

• p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

• :enabled、:disabled 控制表单控件的禁用状态。

• :checked，单选框或复选框被选中。

2. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

块级元素(block)特性：

> 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

**内联元素(inline)特性：**

> 和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。

浏览器的 inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行）有：`<input> 、<img> 、<button> 、<texterea> 、<label>`

3.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果取两者之间较大的。
• 两个相邻的外边距都是负数时，折叠结果取两者绝对值的较大的。
• 两个外边距一正一负时，折叠结果取两者相加之和。

4. rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色（设置 rgba 透明的元素的子元素不会继承透明效果）

5. display:none与visibility:hidden区别

• display:none 不显示对应的元素， 在文档布局中不再分配空间（回流+重绘）
• visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

6. position：absolute和float的异同？

相同：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高
不同：float仍会占据位置，position会覆盖文档流中的其他元素

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

css3 的 transform 属性，设置值为 scale(x, y) 定义 2D 缩放转换
-webkit-transform: scale(0. 50);

8. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有 hover 和 active , 解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link, visited, hover, active）