前端面试 —— CSS

最新推荐文章于 2024-09-11 11:28:25 发布

lalalalala～

最新推荐文章于 2024-09-11 11:28:25 发布

阅读量513

点赞数 4

分类专栏：面试文章标签：前端面试题 css

本文链接：https://blog.csdn.net/weixin_42186513/article/details/83784534

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

两种盒子模型

区别：
	标准盒子模型：width = content
	IE盒子模型：width = content + padding + border
设置：
	标准盒子模型：box-sizing: content-box;
	IE盒子模型：box-sizing: border-box;

CSS选择器有哪些？优先级如何计算？

CSS选择器：

id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
子选择器（ul > li）、
伪类选择器（a:hover, li:nth-child）

优先级（就近原则）：!important > 内联元素 > id > class > tag

position 有哪些值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

display: none 与visibility：hidden 和 opacity : 0的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘），可以理解成在页面中把该元素删除掉一样。
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘），但是不会触发该元素已经绑定的事件
opacity : 0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件

垂直居中的方法

方法 1：绝对定位 + margin: auto

.box span{
      height : 100px;  /* 这里必须定义内部元素的高度 */
      margin: auto; 
      position: absolute; 
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0; 
    }

方法 2：绝对定位 + 负边距

.box span {
      position : absolute;
      left : 50%;
      top: 50%;
      width: 100px;           
      height: 50px;
      margin-left: -50px; /*在不知道宽高的情况下可以用 translate 平移*/
      margin-top: -25px; 
      text-align : center;
    }

方法 3：flex 弹性布局（推荐）

.box {
      display : flex;
      justify-content : center; /* 主轴上的对齐方式 */
      item-aligns : center; /* 交叉轴上对齐方式 */
    }

方法 4：table-cell

.box {
      display : table-cell;
      vertical-algin : middle; /* 把元素放在父元素的中部 */
      text-align : center;
    }

方法 5：flex + margin:auto

.flex-container {
      display : flex;
      width: 400px;
      height: 200px;
    }
.flex-item {
	margin: auto;
}

对 BFC 的理解

BFC(块级格式化上下文)它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

CSS3 新特性

border-radius 圆角

	border-radius: 10px;

text-shadow 阴影

	text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5); /* 水平阴影的位置， 垂直阴影的位置， 模糊的距离， 阴影的颜色*/

-webkit-gradient 渐变

	  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#2A8BBE), to(#FE280E));

transition 过渡

transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间

	transition: color 5s ease-in 1s;

transforms 变形转换

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

animation 动画

animation-name 规定需要绑定到选择器的 keyframe

animation-duration 规定完成动画所花费的时间，以秒或毫秒计

animation-timing-function 规定动画的速度曲线

animation-delay 规定在动画开始之前的延迟

animation-iteration-count 规定动画应该播放的次数

animation-direction 规定是否应该轮流反向播放动画。

  div{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: isAnimate 5s infinite;
  }

  @keyframes isAnimate {
    from { left: 0px; }
    to { left: 200px; }
  }

清除浮动的几种方式

父级元素追加空子元素，并设定clear : both
父级元素定义 overflow : hidden
父级元素定义伪类 :after 和 zoom

transition和animation的区别

animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值。

他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

animation 制作动画必须用关键帧声明一个动画，而且在animation调用关键帧声明的动画。

什么是关键帧 ?

@keyframes就是关键帧，而且需要加webkit前缀，比如：

/* 当鼠标悬浮在button class为login的按钮时，触发changeColor动画� */
    
    button.login:hover {
        -webkit-animation: 1s changeColor;
        animation: 1s changeColor;  
    }

    @-webkit-keyframes changeColor {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
    }
    @keyframes changeColor {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
    }

    /* 上面代码中的0% 100%的百分号都不能省略，0%可以由from代替，100%可以由to代替。 */