前端面试题---CSS篇（一）

1、CSS3新特性

答： 1、圆角 border-radius

        2、盒子模型 box-sizing

        3、盒子阴影 box-shadow  文字阴影 text-shadow

        4、过渡 transition

        5、2D transform translate、scale、skew、rotate、transform-origin

        6、3D perspective transform-style

        7、颜色 linear-gradient radial-gradient

        8、弹性布局 flex

        9、媒体查询 @media screen and () {...}

        10、边框图片 border-image

        11、自定义动画 @keyframes animation

        12、背景  backfround-size background-origin background-clip

2、如何设置一个0.5px的线？

答： 1、border-width：0.5px

        2、移动端：采用 meta viewport方式

        3、transform：scale（）

        4、box-shadow

        5、background-image配合SVG

3、如何在浏览器可视化区域画一个最大的正方形？

答：用padding-bottom撑起来（padding-top同理）

4、CSS实现三角形

答：给一个宽高为0的盒子，它的border的任何值会直接相交，我们利用这个交点来创建三角形。也就是说，border属性是三角形组成的，给每一边都提供不同的边框颜色，会得到一个由四个三角形组成的矩形盒子，再给其他三个三角形颜色为transparent，此时就得到一个三角形

5、flex：1有什么含义？

答：flex：1表示子元素的伸缩比例为1，即子元素可以根据剩余空间进行分配，并且在分配时所有的子元素的扩展比例相同。这意味着所有子元素都会平均分配容器的剩余空间，从而实现弹性布局

6、flex布局的优点

答： 1、简单易用：相比较于其他传统布局方式，flex布局更为简单，易于理解和使用，可以通过少量的css代码实现较为复杂的布局效果

        2、适应性强：flex布局非常适合响应式设计，可以实现页面在不同尺寸屏幕上自适应，避免了在不同设备上出现布局混乱的问题

7、position有哪些值？作用分别是什么？

答： 1、static默认值，元素按照正常文档流方式进行排列

        2、relative 相对定位，元素相对于其正常位置进行定位，不会影响其他元素。可以通过left、right、top、bottom属性控制元素偏移量

        3、absolute 绝对定位，元素相对于最近的已定位祖先元素定位，如没有，则相对于页面进行定位，可以通过left、right、top、bottom属性控制元素偏移量

        4、fixed 固定定位，元素相对于视口定位，无论页面滚动与否，元素始终固定在同一位置。可以通过left、right、top、bottom属性控制元素偏移量

        5、sticky 粘性定位 根据元素的滚动位置来定位，当元素滚动到某个阈值时，元素变为fixed定位，例如position：sticky；top：0；会使元素在离开视口前固定在顶部

8、预处理器（less、scss）与CSS区别

答：预处理器是在css基础上进行扩展，提供了更强大更灵活的样式编写方式。以下是区别：

        1、变量：预处理器中可以使用变量来存储和复用样式值，提高了代码的复用性和可维护性

        2、嵌套：预处理器中支持嵌套选择器，更加清晰的了解样式之间的关系，减少了代码的层级

        3、编译：预处理器需要通过编译将预处理器的语法转换为css代码，才能在浏览器中使用

9、css选择器的优先级

答：！important > 行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承

10、伪类和伪元素的区别

答： 1、伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上不在文档中生成。它们只在外部可见，但并不会在文档的源代码中找到它们。

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