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、伪类:将特殊的效果添加到特定的选择器上。它是已有元素上添加的,不会产生新的元素