2024年Web前端最全三、css知识点3，前端面试你必须要知道的那些知识

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

border:border-width || border-style || border-color

border-width:边框的宽度 （px）

border-style:边框的样式(1.none：默认值没有边框；2.solid:边框为单实线；3.dashed: 边框为虚线；4.dotted:边框为点线);

border-color:边框的颜色

2.1 表格的细线边框

通过表格的cellspacing="0";将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而是边框变粗

table{border-collaspe:collapse;}

把相邻边框合并在一起

3.内边距padding

边框与内容之间的距离

属性：

padding-left:左内边距；padding-right:右内边距；padding-top:上内边距；padding-bottom:下内边距；

**注意：**添加内边距之后内容与边框有了距离，盒子变大了

**内边距简写：**从top开始 顺时针

一个值：padding:上下左右内边距；

两个值：padding:上下内边距 左右内边距；

三个值：padding:上内边距 左右内边距 下内边距；

四个值：padding:上内边距 右内边距 下内边距 左内边距；

3.1 内边距带来的问题

1.会撑大盒子

解决方法：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

2.padding不影响盒子大小的情况

如果没有给一个盒子指定宽度，那么如果给这个盒子指定padding，则不会撑开盒子

4.外边距margin

4.1 外边距

指的是盒子与盒子之间的距离

属性：

margin-top:上外边距；margin-right:右外边距；margin-bottom:下外边距；margin-left:左外边距；

使用方法和padding类似 简写时都是从top顺时针方向开始

4.2 块级盒子水平居中

一个块级盒子水平居中时的要求：盒子必须有宽度；盒子左右外边距设置auto；

margin：0 auto;或者margin-left:auto;margin-right:auto;或者margin:auto;

4.3 插入图片和背景图片的区别

1.插入图片 移动位置只能依靠盒模型 padding margin

2.背景图片一般用于小图标背景或者超大背景图片 只能通过background-position

4.4 文字居中和盒子居中的区别

1.盒子内的文字水平居中是 text-align:center;并且还可以把行内元素和行内块元素居中对齐

2.块级盒子水平居中 左右margin 改为auto

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

8166371)**

[外链图片转存中…(img-KTTAXWOy-1714838878763)]

[外链图片转存中…(img-q6tMv9kB-1714838878764)]

[外链图片转存中…(img-vtG7v3jP-1714838878765)]

[外链图片转存中…(img-3FDM25BX-1714838878765)]