JZTXT

css面试总结

发布时间 2023-04-14 10:26:26作者: srqsl

盒模型介绍

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。

IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。

box-sizing: border-box ：IE（替代）盒模型。

CSS选择器和优先级

id选择器、类选择器、后代选择器( > )

子选择器( 如：#head .nav ul li 从父集到子孙集的选择器 )

相邻兄弟选择器(如：h1+p,带加号+)

属性选择器(语法：[属性名]{}，[属性名=属性值]{}，[属性名^=属性值]{} ，[属性名$=属性值]，[属性值*=属性名]{}，例如：p标签里面写一个title属性，给title设置样式)

(^ $ *三种，分别对应开始、结尾、包含)

通配符选择器(*号，匹配页面中所有的元素)

伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

标签选择器（如：body,div,p,ul,li）

优先级：!important > 行内样式（即标签内的style）>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

css水平垂直居中多种实现方式

方法一：

.father { position: relative; }
.son { position: absolute;
　　    left: 50%;
　　    top: 50%;
　　    transform: translate(-50%, -50%);
}

方法二：

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

方法三：

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

方法四：

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}