css3考试,前端面试题-css3

哪些 Css 属性可以继承？

答案:

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

不可继承 ：border padding margin width height ;

移动端 1px 问题的解决办法

答案:

推荐解决方法：媒体查询 + transfrom

/* 2倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {

.border-bottom::after {

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

}

/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {

.border-bottom::after {

-webkit-transform: scaleY(0.33);

transform: scaleY(0.33);

}

}

Display:none 与 Visibility:hidden 的区别是什么？

答案:

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素(对象)仅仅是在视觉上看不见(完全透明)，而它所占据的空间位置仍然存在。

Sass、LESS 是什么？大家为什么要使用他们？

答案:

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编

CSS 清除浮动的几种方法(至少两种)

答案:

清除浮动： 核心：clear:both;

1.使用额外标签法(不推荐使用)

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

a 内部标签：会将父盒子的高度重新撑开

b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子

2.使用 overflow 清除浮动(不推荐使用)

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

伪元素：在页面上不存在的元素，但是可以通过 css 添加上去

种类：

:after(在。。。之后)

:before(在。。。之前)

注意：每个元素都有自己的伪元素

.clearfix:after {

content:"";

height:0;

line-height:0;

display:block;

clear:both;

visibility:hidden; /_将元素隐藏起来_/

在页面的 clearfix 元素后面添加了一个空的块级元素

(这个元素的高为 0 行高也为 0 并且这个元素清除了浮动)

}

.clearfix {

zoom:1;/_为了兼容 IE6_/

}

如何垂直居中一个元素？

答案:方法一：绝对定位居中(原始版之已知元素的高宽)

.content {

width: 200px;

height: 200px;

background-color: #6699ff;

position: absolute; /*父元素需要相对定位*/

top: 50%;

left: 50%;

margin-top: -100px; /*设为高度的1/2*/

margin-left: -100px; /*设为宽度的1/2*/

}

方法二：绝对定位居中(改进版之一未知元素的高宽)

.content {

width: 200px;

height: 200px;

background-color: #6699ff;

position: absolute; /*父元素需要相对定位*/

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/

}

方法三：绝对定位居中(改进版之二未知元素的高宽)

.content {

width: 200px;

height: 200px;

background-color: #6699ff;

margin: auto; /*很关键的一步*/

position: absolute; /*父元素需要相对定位*/

left: 0;

top: 0;

right: 0;

bottom: 0; /*让四个定位属性都为0*/

}

方法四：flex 布局居中

body {

display: flex; /*设置外层盒子display为flex*/

align-items: center; /*设置内层盒子的垂直居中*/

justify-content: center; /*设置内层盒子的水平居中*/

.content {

width: 200px;

height: 200px;

background-color: #6699ff;

}

}

那么问题来了，如何垂直居中一个 img(用更简便的方法。)

.content {

//img的容器设置如下

display: table-cell;

text-align: center;

vertical-align: middle;

}

元素和伪类的区别？

答案:伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了，不是在文档树中添加)；

伪类是给页面中已经存在的元素添加一个类。

解释:CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰(:first-line，:first-letter)或将元素添加到标记中(与 content:…组合)，而不必修改标记(:before，:after)。

– :first-line和:first-letter可以用来修饰文字。- 上面提到的.clearfix方法中，使用clear:both来添加不占空间的元素。- 使用:before和after展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 OM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。

行内元素和块级元素的具体区别是什么

答案:块级元素(block)特性：

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

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

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

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

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

那么问题来了，浏览器还有默认的天生 inline-block 元素(拥有内在尺寸，可设置高宽，但不会自动换行)，有哪些？

、 、 、 、

CSS 隐藏元素的几种方法(至少说出三种)

答案:Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;Position:不会影响布局，能让元素保持可以操作;Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

Rgba()和 Opacity 的透明效果有什么不同？

答案:

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，

而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果！)