1、盒模型
1.1 分类: IE盒模型和标准盒模型。
1.2 区别: 最大的区别就是width的包含范围。 标准盒模型的width = content部分的宽度, 怪异盒模型的width = contentWidth + padding + border
1.3 标准盒和怪异盒的宽度计算: 标准盒子宽度：左右border+左右padding+width
怪异盒子宽度：width
1.4 box-sizing属性有三个值哦 box-sizing:border-box（怪异）/padding-box（这个属性值的宽度包含了左右padding和width）/content-box（标准）
2、BFC
2.1 概念
块级格式化上下文，是一个独立的渲染区域，有一定的布局规则。用于清除浮动，防止margin重叠。
2.2 BFC的计算规则
- BFC就是一个块级元素，在垂直方向上一个接着一个的排列。
- 垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠。
- 计算BFC高度时，浮动元素参与计算。
2.3 触发BFC的条件
- 根元素
- float不为none的元素
- position为fixed和absolute的元素
- display为flex、inline-flex、inline-block、table-cell、table-caption的元素
- overflow不为visible的元素，比如hidden
2.4 实际应用场景
- 解决高度塌陷：让父级元素也触发BFC区域
- margin边距重叠：可以给其中一个元素包裹一个标签解决。要么一个元素设margin，另外一个元素设置padding
3、清除浮动
首先要明白为什么要清除浮动，一般是遇到了高度塌陷问题等
3.1 方法一：在最后一个浮动元素后添加空标签（不推荐）
在浮动元素最后加一个空元素，比如
<div class="clear"></div>，并添加选择器.clear{clear:both;}
3.2 方法二：给父元素添加overflow:hidden或者overflow:auto
3.3 方法三：使用:after伪元素（最常用）
与方法一类似，只是方法一使用的是真实的标签，
.clearfix:after{ /*父元素选择器*/
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
3.4 方法四：给父元素也添加浮动。但是会影响布局（不推荐）
3.5 方法五：使用before和after双伪元素清除浮动
.clearfic:after,.clearfix:before{
content:"";display:table;
}
.clearfix:after{
clear:both
}
4、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
flex弹性布局可以简便、完整、响应式的实现各种页面布局。flex容器中默认有两条轴，主轴和交叉轴，呈90度，通过flex-direction控制轴的方向。
4.1 常见容器属性和容器成员属性
容器属性：
- flex-direction（主轴方向）row | row-reverse | column | column-reverse;
- flex-wrap（一条轴线排不下，是否换行）nowrap | wrap | wrap-reverse;
- flex-flow（flex-direction和flex-wrap属性的简写，默认值row nowrap）
- justify-content（项目在主轴上对齐方式）flex-start | flex-end | center | space-between | space-around;
- align-items（项目在交叉轴上如何对齐）flex-start | flex-end | center | baseline | stretch（默认）;
- align-content（定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用）flex-start | flex-end | center | space-between | space-around | stretch;
容器成员属性：
- order:项目的排列顺序，数值越小，排列越靠前，默认为0
- flex-grow：当容器的
flex-wrap:nowrap的时候，有时宽度不够分，这是就由该属性决定，默认为0.如果所有项目的flex-grow:1;则它们将等分剩余空间。 - flex-shrink：定义了项目的缩小比例。如果所有项目
flex-shrink:1;当空间不足时，都等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小 - flex-basis:元素在主轴上的初始尺寸
- flex：
flex-grow;|flex:shrink|flex:basis的简写。默认值0 1 auto。 - align-self：允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性。默认auto。
5、两栏布局，左栏固定宽，右边自适应
结构：
<div class="box">
<div class="left">左边宽度固定</div>
<div class="right">右边宽度自适应</div>
</div>
基础样式：
.box{
border:1px solid red;
}
.left{
width:200px;
height:200px;
background-color:rgb(97,143,204)
}
.right{
height:200px;
background-color:rgb(165,103,207)
}
方法一：利用浮动 左侧div浮动脱离文档流，右侧盒子设置左外边距拉开距离
.box{
border:1px solid red;
}
.left{
width:200px;
height:200px;
background-color:rgb(97,143,204);
float:left;
}
.right{
height:200px;
background-color:rgb(165,103,207);
margin-left:200px;
}
方法二：利用绝对定位. 绝对定位也可以让元素脱离文档流，右侧盒子同样设置左外边距拉开
.box{
border:1px solid red;
}
.left{
width:200px;
height:200px;
background-color:rgb(97,143,204);
position:absolute;
}
.right{
height:200px;
background-color:rgb(165,103,207);
margin-left:200px;
}
方法三：利用浮动+BFC 左侧浮动元素脱离文档流，为了不影响右侧元素，应该让右侧元素也触发BFC
.box{
border:1px solid red;
}
.left{
width:200px;
height:200px;
background-color:rgb(97,143,204);
float:left;
}
.right{
height:200px;
background-color:rgb(165,103,207);
overflow:hidden;
}
方法四：利用flex。
首先，父容器设置为弹性容器，然后让右侧div自动放大，给右侧盒子设置flex:1 1 auto属性，也可简写为flex:auto。或者是给右侧盒子设置felx-grow:1;
.box{
border:1px solid red;
display:flex;
}
.left{
width:200px;
height:200px;
background-color:rgb(97,143,204);
}
.right{
height:200px;
background-color:rgb(165,103,207);
flex: 1 1 auto
}
方法五：使用calc方法。
.left{
width:330px;
}
.right{
width:calc(100% - 330px);
}
方法六：使用grid布局
.box {
display:grid;
grid-template-columns:200px auto;/*设置每一列的宽度，左200px，右自适应*/
}
6、红色区域的宽度是多少？
.test{
width: 100px;
height: 80px;
border: 20px solid red;
background: red;
padding: 20px;
margin: 20px;
box-sizing: border-box;（如果是content呢？）
}
当box-sizing:border-box;为怪异盒子，红色区域宽度就是100px.
当box-sizing:content-box;为标准盒子，红色区域宽度就是100px+40px+40px=180px
7、垂直居中布局的实现方式
基础结构：
<body>
<div class="box">
</div>
</body>
这里主要分为元素定宽高和不定宽高的情况：
7.1 定宽高
7.1.1 绝对定位+负margin值
.box {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
7.1.2 绝对定位+transform:translate()
.box {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-150px,-150px);
}
7.1.3 绝对定位+top/bottom/left/right为0+margin:auto
.box {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
7.1.4 flex布局
将要居中的元素的父元素设置为弹性盒
/*父元素*/
html,body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/*子元素*/
.box{
width: 100px;
height: 100px;
background-color: aqua;
}
7.1.5 flex布局或grid布局+子元素margin:auto
html,body {
height: 100%;
width: 100%;
display: flex;
/*display:grid;*/
}
/*子元素*/
.box{
width: 100px;
height: 100px;
background-color: aqua;
margin:auto
}
7.2 不定宽高
7.2.1 绝对定位+transform
.box {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
7.2.2 table-cell
<!-- 结构 -->
<div class="box">
<div class="box1">wvevebeb</div>
</div>
/* 样式 */
.box{
width: 200px;
height: 200px;
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid red;
}
.box1{
background: yellow;
display: inline-block;
}
7.2.3 flex布局，同7.1.4
7.2.4 flex变异布局，同7.1.5（要求父元素必须有宽高）
7.2.5 grid+flex
.box{
width: 200px;
height: 200px;
border: 1px solid red;
display: grid;
}
.children{
background: yellow;
align-self: center;
justify-self: center;
}
8、实现一个三角形
.box {
width: 0;
height: 0;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
同理可以实现一个扇形，只需要添加一行代码：
border-radius:50%;
同理可以实现一个梯形，将元素设置一个宽度值即可，此时宽度值代表的是梯形的较短边
9、CSS的position有哪些属性？分别相对于谁定位？
9.1 六种属性值
absolute\relative\fixed\static\sticky\inherit
9.1.1 static 默认值
该属性值代表没有定位，元素处于正常的文档流中
9.1.2 relative 相对定位
相对于自己原本的位置进行定位，不脱离文档流，元素原本的位置会被保留，其它的元素位置不受影响。
9.1.3 absolute 绝对定位
相对于设置了position属性为relative或absolute的父级元素进行定位，如果没有这样的父级元素，则相对于body进行定位。 脱离文档流，常常结合relative使用
9.1.4 fixed 固定定位
脱离文档流，相对于body定位
9.1.5 sticky 粘性定位
可以说是相对定位relative和fixed的结合体，一开始没有脱离文档流，但是当元素距离其父元素的距离达到粘性定位的要求时，此时的效果相当于fixed，固定到适当位置，脱离文档流。
9.1.6 inherit 继承父元素的position属性
10、CSS常用单位
常用单位：px\em\rem\vw\vh\in\cm\ch\mm\ex\pt\pc\vmin\vmax
10.1 绝对长度单位
px像素 in英寸 mm毫米 pt磅等
10.2 相对长度单位
em rem vw vh
11、如何实现一个loading动画
svg标签+animation实现方案:
animation:dash 2s linear 0s infinite;代表的意思分别是动画的名称、动画完整执行的时长、从开始到结束以同样的速度执行、延迟0s、动画无限次播放
svg标签中的viewbox="25 25 50 50"属性值代表的是，起点从（0，0）变为（25，25），元素大小长和宽为50
12、如何实现3D效果的正方体
一个大盒子包着六个小盒子，小盒子通过平移旋转拼凑成正方体
13、有没有使用过css variable(自定义变量)？
概念：
css自定义变量(css variable)又叫自定义属性。
变量的声明：
声明变量的时候，变量名前面要加两个中横线(--)，--主要是用来区分默认属性
body { --foo: #7F583F; --bar: #F7EFD2; }
变量的获取和使用:
/*var()函数用于读取*/
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
解决了什么问题：
- 减少了重复定义，比如同一个颜色多地方使用，只定义一次就可以了，方便维护，提高可读性
- 在媒体查询中使用，精简代码，减少冗余
- 方便在js中使用，减少js中对DOM的介入，制作性能更高的动画
兼容性处理： 主流浏览器都支持，但是对于不支持css自变量的浏览器可以采用以下写法：
/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}
14、谈谈你对styled-component的看法
styled-component是一个常用的css in js类库，通过js赋能解决了原生css所不具备的能力，比如变量、循环、函数等。 优点： 可维护性高，易读性好，可抽象，可扩展性好 缺点： runtime对性能有一定的影响，不能直接用postcss
15、display:inline的元素设置margin和padding会生效吗
行内元素的padding和margin左右都会生效，margin的上下不会生效。 只有padding的上下比较奇怪，比如span标签的上下padding会将span背景颜色撑开。但是当span内的元素开始换行的时候，会发现上下行之间的字并不会互相影响，并不会撑大父元素。
16、如何实现表格的单双行样式
利用css3中的伪类:nth-child来实现单双行样式的不同
tr:nth-child(2n){
background-color:red;
}
tr:nth-child(2n+1){
background-color:blue;
}
17、+和~选择器有什么不同？
+ 选择器匹配紧邻的兄弟元素。 ~ 选择器匹配随后的所有兄弟元素
div+p {
background-color: aqua;
}
div~p {
background-color: blueviolet;
}
18、为什么会发生样式抖动？
因为当前抖动的模块并没有指定宽度和高度。比如当加载页面的时候，数据还未加载出来的时候元素高度是100px，当数据加载完成时元素会瞬间被撑大，所以才出现了抖动。
19、position:sticky如何工作？适合怎样的场景？
粘性定位相当于绝对定位和固定定位的结合体，当没有到达sticky要求的值时，相当于relative定位，不会脱离文档流。但是当到达指定值的时候，就会和固定定位效果一样，黏在指定位置并且脱离文档流。
适用场景：固定导航栏、页脚固定、表格表头固定等。
20、你用css实现过什么不错的效果？
酷炫的文字渐变：
/* 文字渐变：先将元素背景设置为渐变色，最后两句代码是只让文字显示渐变色，背景渐变色去除 */
span {
font-size: 48px;
background: -webkit-linear-gradient(#eee,#fad,purple,#333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
20、伪类和伪元素有什么区别？
- 伪类是用单冒号，伪元素使用双冒号。比如
:hover是伪类，::before是伪元素。 - 伪元素会在文档流生成一个新的元素，并且可以使用content属性设置内容。
- 常见的伪类：
:hover :nth-child() :visited :first-child :last-child等，常见的伪元素：::after ::before ::selection ::placeholder :: marker
21、css隐藏页面中某个元素的几种方法
方法一：display:none，移出文档流
方法二：opacity:0，透明度为0，但仍在文档中，但作用于其上的事件（如点击）仍有效
方法三：visibility:hidden，仍在文档流中，但作用于其上的事件（如点击）无效
方法四：content-visibility:hidden;移除文档流，再次显示时消耗性能低
方法五：绝对定位于当前页面不可见位置
position:absolute;
top:-9000px;
left:-9000px;
方法六：字体大小设置为0
22、css如何实现响应式布局，大屏幕三等分，中屏幕二等分，小屏幕一等分
基本结构布局：
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
样式布局：
@media (min-width:768px) {
.container {
/* 网格布局划分为2列，每列的宽度一致 */
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (min-width: 1024px){
.container {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
.container {
display: grid;
}
.container {
gap: 1rem;
}
.container div {
height: 900px;
background-color: aqua;
}
23、网站设置字体时，如何设置优先使用系统默认字体
直接设置样式font-family:system-ui;
24、css如何设置方格背景？
采用background和background-size属性配合形成
background: linear-gradient(90deg,rgba(67, 15, 189, 0.15) 3%,transparent 0),linear-gradient(rgba(14, 226, 102, 0.15) 3%,transparent 0);
background-size: 20px 20px;
25、实现一个方框，文字可以正常换行，文字过多显示滚动条
主要使用word-wrap:break-word;和overflow:scroll;实现
.last {
width: 200px;
height: 200px;
word-wrap: break-word;
overflow: scroll;
}
26、css如何设置一行和多行超出显示省略号
单行文本溢出显示省略号：
.box{
width: 100px;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本溢出省略号：
div{
width: 200px;
/*将盒子作为弹性伸缩盒子模型显示*/
display: -webkit-box;
/*设置盒子的元素排列方式*/
-webkit-box-orient: vertical;
/*超出3行多余的用省略号*/
-webkit-line-clamp: 3;
word-break: break-all;
overflow: hidden;
}
27、flex布局中align-content和align-items有何区别？
align-content作用于纵轴多行元素，一行不起作用
align-items作用于纵轴单行元素
28、实现一个子元素垂直居中并且长和宽为父元素一半的正方形
使用一个最新的属性aspect-ratio:1/1;代表长宽比的意思。
<!-- html结构 -->
<div class="container">
<div class="item"></div>
</div>
/* 样式 */
.container {
display: grid;
place-items: center;
width: 200px;
height: 200px;
background-color: rebeccapurple
}
.item {
width: 50%;
aspect-ratio: 1/1;
border: 1px solid red;
}
29、rem\em\vw\vh的值各是什么意思？
rem：根据根元素（即html）的font-size
em：根据自身元素的font-size
vw：窗口的宽度
vh：视窗的高度
30、line-height的值分别取[2,2em,200%]有什么区别？
line-height是相对于自身的字体大小来取值，但同时会被继承。
31、某元素的fontSize：2rem;lineHeight:1.5em;此时lineHeight为多少像素？
默认情况下，fontSize为16px;2rem = 32px;em相对于自身元素的font-size，则line-height:1.5*32===48px;
32、如何实现三列均分布局
两种方法：使用flex和使用grid
/*使用calc(100% / 3)设置flex-basis*/
.container {
display:flex;
flex-wrap:wrap;
}
.item {
flex:0 0 calc(100%/3)
}
/*使用grid直接操作容器即可，对于子元素之间的间隙可以很好地控制*/
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:1rem;
}
33、z-index值大的元素一定在值小的上面吗？
z-index大的元素不一定在z-index值小的元素上面，因为z-index它不一定生效。 z-index是需要一个position值不为static才会生效。即便z-index生效之后，也不是单纯的比较大小，因为这个数在层叠上下文中才有意义。如果想要实现父元素覆盖子元素，给父元素设置非常大的z-index值是不管用的，因为按照层叠上下文的规律，子元素始终会显示在父元素上。正确的做法就是将子元素的z-index设置为负值，因为负值的z-index层级是小于父元素的。所以父元素就在上面。
34、css加载会阻塞DOM树的解析和渲染吗？
答:css加载会阻塞DOM树的解析和渲染，因为只有css加载完毕构建完CSSOM之后，渲染树（Render Tree）才会构建，然后渲染成位图。如果html中有加载script的话。会间接影响DOM树的解析，因为js的下载、解析和执行会阻塞DOM树的解析，而js中有可能访问CSSOM，比如Element.getBoundingClientRect，因此CSSOM构建完毕后才开始js的执行，间接阻塞DOM树的解析。
35、浏览器页面渲染的过程
- html代码解析成dom树。
- css代码解析成cssom树。
- 结合dom树和cssom树形成一个render树。
- 布局。将渲染树的所有dom节点进行平面合成。
- 绘制到屏幕上。
