1.伪元素和伪类的区别?
答案:
1、伪元素使用 2 个冒号,常见的有:::before,::after,::first-line,::first-letter,::selection、::placeholder 等;
伪类使用1个冒号,常见的有::hover,:link,:active,:target,:not(),:focus等。
2、伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了,不是在文档树中添加);
伪类是给页面中已经存在的元素添加一个类。
解析:
CSS 伪元素是添加到选择器的关键字,去选择元素的特定部分。它们可以用于装饰(:first-line
,:first-letter
)或将元素添加到标记中(与 content:...组合),而不必修改标记(:before
,:after
)。
:first-line
和:first-letter
可以用来修饰文字。
上面提到的.clearfix
方法中,使用clear: both
来添加不占空间的元素。
使用:before
和after
展示提示中的三角箭头。鼓励关注点分离,因为三角被视为样式的一部分,而不是真正的 DOM。如果不使用额外的 HTML 元素,只用 CSS 样式绘制三角形是不太可能的。
2.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有那些?
答案:
1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul < li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li: nth - child)
* 可继承: font-size font-family color, UL LI DL DD DT;
* 不可继承 :border padding margin width height ;
* 优先级就近原则,样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
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,单选框或复选框被选中。
3.行内元素和块级元素的具体区别是什么?行内元素的 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.什么是外边距重叠?重叠的结果是什么?
答案:
外边距重叠就是 margin-collapse。
在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
-
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
-
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
-
两个外边距一正一负时,折叠结果是两者的相加的和。
5.rgba()和 opacity 的透明效果有什么不同?
答案:
rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的所有内容的透明度,
而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)