CSS面经

最新推荐文章于 2024-06-13 18:31:56 发布

啥也不会的毛不会

最新推荐文章于 2024-06-13 18:31:56 发布

阅读量305

点赞数 1

文章标签： css css3 Powered by 金山文档

本文链接：https://blog.csdn.net/mhc20201554114/article/details/129641408

版权

CSS选择器和优先级

常用的css选择器有以下几种

（1）id选择器

（2）类选择器

（3）标签选择器

（4）通配符选择器

（5）相邻选择器

（6）子选择器

（7）后代选择器

（8）属性选择器

（9）伪类选择器

对于选择器的优先级：

标签选择器、伪类选择器：1；

类选择器、伪类选择器、属性选择器：10；

id选择器：100；

内联样式：1000；

注意事项：

！important声明的样式的优先级最高；

如果优先级相同，则最后出现的样式生效；

继承得到的样式的优先级最低；

通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为0；

样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 >浏览器用户自定义样式 >浏览器默认样式。

2.CSS中可继承与不可继承的属性有哪些？

一、无继承性的属性

display

文本属性：

盒子模型的属性

背景属性

定位属性

二、有继承性的属性

1.字体属性

2.文本属性

text-indent:文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：单词之间的间距

letter-spacing：中文或者字母之间的间距

text-transform：控制文本大小写

color：文本颜色

3.元素可见性

visibility：控制元素显示隐藏

4.列表布局属性

list-style：列表风格，包括list-style-type、list-style-image等

5.光标属性

cursor：光标显示为何种形态

3.css外边距margin重叠现象

在标准文档流中，两个紧挨着的盒子的margin并不会叠加，而是会重叠。两个盒子的间距取决于margin更大的盒子的margin。

4.display的block、inline和inline-block的区别

（1）block：会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline：元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

（1）行内元素特点

设置宽高无效；

可以设置水平方向的margin和padding属性，不能设置垂直方向的margin和padding；

不会自动换行；

（2）块级元素特点

可以设置宽高；

设置margin和padding都有效；

可以自动换行；

多个块状，默认排列从上到下。

5.隐藏元素的方法有哪些

display:none：渲染树不会包括该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visiblility:hidden：元素在页面中仍占据空间，但是不会影响绑定的监听事件。

opacity:0 ：将元素的透明度设置为0，以此来实现元素的隐藏。元素在页面中仍占据空间，并且能够响应元素绑定的监听事件。

6.link和@import的区别

两者都是外部引用css的方式，它们的区别如下：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

link引用CSS时，在页面载入的同时加载；@import需要页面网页完全载入以后加载。

link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

link支持使用JavaScript控制DOM去改变样式；而@import不支持。

7.display：none和visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。两者区别如下：

（1）在渲染树中

display：none会让元素完全从渲染树中消失，渲染时不会占据任何空间；

visibility：hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

（2）是否是继承属性

display：none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；

visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：hidden可以让子孙节点显示；

（3）修改常规文档流中元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

（4）如果使用读屏器，设置为display：none的内容不会被读取，设置为visibility：hidden的内容会被读取。

8.伪元素和伪类的区别和作用？

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before{content:"第一章：";}

p::after{content:"Hot!";}

p::first-line{background:red;}

p::before{font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover{color:#FF00FF}

p:first-child{color:red}

总结：伪类是通过在元素选择器上加入伪类改变元素状态的，而伪元素是通过对元素的操作进行对元素的改变。

9.为什么有时候用translate来改变位置？

translate是transform属性的一个值。改变transform或opacity不会触发浏览器重排重绘，只会触发复合。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建了一个GPU图层，但改变绝对定位会使用到CPU。因此translate（）更高效，可以缩短平滑动画的绘制时间。而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

10.li与li之间有看不见的空白间隔是什么原因引起的？如何解决？

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

（1）为<li>设置float：left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。

（2）将所有<li>写在同一行。不足：代码不美观。

（3）将<ul>内的字符尺寸直接设为0，即font-size：0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符的尺寸，且在Safari浏览器仍会出现空白间隔。

（4）消除<ul>的字符间隔leffet-spacing:-8px,不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal;、

11.CSS3中有哪些新特性

圆角

多列布局

阴影和反射

文字特效

文字渲染

线性渐变

旋转、缩放、定位、倾斜、动画、多背景

12.常见的图片格式及使用场景

(1) BMP,是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。(2) GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。(3) JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片件较GIF更大。

(4) PNG-8是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG -8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。(5) PNG-24是无损的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、 PNG-8大得多。(6) SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线,而不会出现像素点。SVG图片在放大时，不会失真，所以它适合用来绘制Logo、Icon等。

(7) WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢?就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟，提升访问体验。目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%;● 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~ 34% ;● WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

13.对CSS Sprites的理解

CSS Sprites，精灵图，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

利用CSS Sprites能很好的减少网页的http请求次数，从而大大提高了页面的性能，这是CSS Sprites最大的优点。

CSS Sprites能减少图片的字节，把三张图片合并成一张图片的字节总是小于这三张图片的总和的。

缺点：

在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；

CSS Sprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。

维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有稍许改动时，就要改动这张合并的图片，无需改动的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能往下加图片，这样图片的字节就增加了，还要改动CSS。

14.Position

static：默认值。没有定位，元素出现在正常的文档流中

relative：生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

fixed：生成固定定位的元素，相对于浏览器窗口进行定位。

inherit：规定应该从父元素继承 position 属性的值

sticky：粘性定位，它主要用在对 scroll 事件的监听上

15.画三角

1.引入字体图标

2.利用border实现

    .outer {
      height: 0;
      width: 0;
      border-top: 100px solid orange;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 100px solid transparent;
    }

3.canvas 画三角

4.svg画三角

16.一个盒子不给宽度和高度如何水平垂直居中？

父元素css样式控制

<div class='container'>
    <div class='main'>main</div>
</div>

.container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        border:5px solid #ccc;
}
.main{
        background: red;
}

定位加变换

<div class='container'>
    <div class='main'>main</div>
</div>

.container{
        position: relative;
        width: 300px;
        height: 300px;
        border:5px solid #ccc;
}
.main{
        position: absolute;
        left:50%;
        top:50%;
        background: red;
        transform: translate(-50%,-50%);
}

17.清除浮动的方法

触发BFC

如何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell...
position的值为:absoute、fixed

多创建一个盒子，添加样式：clear: both;

after方式

ul:after{
    content: '';
    display: block;
    clear: both;
}

18.双飞翼布局

定位实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .body {
        height: 400px;
        position: relative;
    }

    .main {
        width: 100%;
        height: 400px;
        background-color: red;
    }

    .left {
        width: 100px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: yellow;
    }

    .right {
        width: 100px;
        height: 300px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: green;
    }
</style>

<body>
    <div class="body">
        <div class="left">

        </div>
        <div class="main">

        </div>
        <div class="right">

        </div>
    </div>
</body>
<script>
    function fun(a) {
        var a = 10;
        function a() { }
        console.log(a);
    }
    fun(100);
</script>

</html>

BFC实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .body{
        height: 400px;
    }
    .main{
        height: 400px;
        background-color: red;
        overflow: hidden;
    }
    .left{
        width: 100px;
        height: 300px;
        float: left;
        background-color: yellow;
    }
    .right{
        width: 100px;
        height: 300px;
        float: right;
        background-color: green;
    }
</style>
<body>
    <div class="body">
        <div class="left">
            
        </div>
        <div class="right">
            
        </div>
        <div class="main">

        </div>
    </div>
</body>
</html>

flex布局实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .body{
        height: 400px;
        padding: 0 100px;
        display: flex;
    }
    .main{
        flex: 1;
        height: 400px;
        background-color: red;
    }
    .left{
        width: 100px;
        height: 300px;
        background-color: yellow;
    }
    .right{
        width: 100px;
        height: 300px;
        background-color: green;
    }
</style>
<body>
    <div class="body">
        <div class="left">
            
        </div>
        <div class="main">

        </div>
        <div class="right">
            
        </div>
    </div>
</body>
</html>

19.opacity 和 rgba区别

共同性：实现透明效果

1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明

2. rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别

opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。

啥也不会的毛不会

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS面经

CSS选择器和优先级常用的css选择器有以下几种（1）id选择器（2）类选择器（3）标签选择器（4）通配符选择器（5）相邻选择器（6）子选择器（7）后代选择器（8）属性选择器（9）伪类选择器对于选择器的优先级：标签选择器、伪类选择器：1；类选择器、伪类选择器、属性选择器：10；id选择器：100；内联样式：1000；注意事项：！important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；继承得到的样式的优先级最低；
复制链接

扫一扫