前端面试 - css+html常考知识点总结

最新推荐文章于 2022-05-04 18:32:59 发布
最新推荐文章于 2022-05-04 18:32:59 发布
阅读量1k 收藏 12
点赞数 4
分类专栏： 面试 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sabrina_cc/article/details/105601959
版权

目录

1. 盒子模型

2. flex布局

3. 实现水平居中

4. inline和block

5. 垂直居中

6. 水平垂直居中

7. CSS3新增

8. CSS3伪类

9. JS动画和CSS动画

10. 清除浮动

11. 让元素消失

12. rgba() 和 opacity 的透明效果区别

13. position和display

14. 相对定位与绝对定位

15. CSS样式继承

16. css引入方式 link import

17. css选择器及优先级

18. 行内元素 块级元素

19. BFC

20. 文档流

21. 伪类和伪元素

22. 重绘和重排

23. H5新特性

24. HTML、XML、XHTML 的区别

25. 标签上title属性与alt属性的区别是什么

26. 实现三角形

27. CSS单位有哪些？

28. HTML5的应用缓存

29. 网页制作会用到哪些图片格式

30. 访问超链接后，:hover样式不再出现

31. 什么是FOUC？如何避免

32. 触发硬件加速的CSS属性

33. 服务端渲染 和 客户端渲染

1. 盒子模型

页面上所有的元素对象，其实际的呈现形式都是一个盒子形状的抽象

盒模型有两种， IE怪异盒子模型、W3C标准盒子模型；

盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。

标准盒子模型的宽高是指的content的宽高；

怪异盒子模型的宽高是指的content+padding+border的宽高。  

2. flex布局

  1. flex布局即弹性布局，用来为盒模型提供最大的灵活性
  2. 属性
    • flex-direction：主轴的方向
    • flex-wrap：子元素在一条轴线上放不下时，如何换行
    • flex-flow：前2个属性的简写
    • justify-content：子元素在主轴上的对齐方式
    • align-items：子元素在交叉轴上的对齐方式

3. 实现水平居中

  (1) 内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效

  (2) 内联块级元素水平居中

通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

  (3) 多级块状元素水平居中

    使用inline-block: 如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型（display）为inline-block和父容器的text-align属性为center.从而使多块级元素水平居中。

    利用display:flex: 利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。

4. inline和block

block： 块级元素

inline： 内联元素（text-align属性有效）

问题：当设置成inline后，width和height属性是无效的（只会为文字添加背景）

inline-block: 行内块级元素（块级+内联）

5. 垂直居中

  (1) 单行内联元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

  (2) 多行元素垂直居中

    利用表（table）布局： 设置父元素显示类型（display）为table。子元素显示类型（display）为table-sell。利用表布局的vertical-align: middle可以实现子元素的垂直居中

    利用flex布局： 利用flex布局实现垂直居中，设置显示类型（display）为flex.其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。

    利用‘精灵元素ghost element’：即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

  (3) 块级元素垂直居中

    固定高度的块级元素：父元素position设置为relative，子元素position设置为absolute。通过绝对定位元素距离顶部（top）50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

   未知高度的块级元素：当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

6. 水平垂直居中

    固定宽高元素水平垂直居中： 通过margin平移元素整体宽度（包括padding等）的一半，使元素水平垂直居中。

    未知宽高元素水平垂直居中：利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。transform: translate(-50%, -50%);

    利用flex布局（display:flex）：其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式（center）；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式（center）。

    利用grid布局（display:grid）：兼容性较差，不推荐

    在屏幕上水平垂直居中：常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

7. CSS3新增

  • word-wrap 文字换行
  • text-overflow 超过指定容器的边界时如何显示
  • text-decoration 文字渲染
  • text-shadow文字阴影
  • gradient渐变效果
  • transition过渡效果  transition-duration：过渡的持续时间
  • transform拉伸，压缩，旋转，偏移等变换
  • animation动画

    Transition过渡  指定从一个状态到另一个状态时如何过渡; Transform: 过渡属性只有当鼠标经过时候才会作用, 过渡属性没有中间的过程，动画是一步到位,过渡属性一次鼠标经过只可以发生一次，不能重复发生动画

     Animation复杂动画  可以实现更复杂的样式变化效果；使用方法：定义关键帧样式；应用动画到元素上; Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，动画是一帧一帧的绘制,可绘制复杂动画,需要配合@keyframes来使用,通过keyframe显式控制当前帧的属性值

8. CSS3伪类

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

9. JS动画和CSS动画

    渲染线程分为main thread和compositor thread，如果css动画只改变transform和opacity，这时整个CSS动画得以在compositor trhead完成（而js动画则会在main thread执行，然后出发compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout或者paint的。

    区别：

  • 功能涵盖面，js比css大
  • 实现/重构难度不一，CSS3比js更加简单，性能跳优方向固定
  • 对帧速表现不好的低版本浏览器，css3可以做到自然降级
  • css动画有天然事件支持
  • css3有兼容性问题

10. 清除浮动

  • 方法一：在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。
  • 方法二：父级div定义 overflow: hidden；这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。
  • 方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。

.clear{zoom:1;}

.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

11. 让元素消失

  • opacity：0,  该元素隐藏起来，但不会改变页面布局。不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，但是可以选中。继承属性：由于继承了opactiy造成子孙节点消失，但无法通过给子孙节点设置opacity: 1;使子孙节点显示。如果该元素已经绑定了一些事件，如click事件也能触发。 修改元素会造成重绘，性能消耗较少。 
  • visibility:hidden, 该元素隐藏起来了，但不会改变页面布局，不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能选中，不会触发该元素已经绑定的事件。继承属性，由于继承了hidden造成子孙节点消失，通过给子孙节点设置visibility: visible;可以让子孙节点显示。修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取visibility: hidden元素内容
  • display:none, 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能选中。并且会改变页面布局，可以理解成在页面中把该元素删掉。修改元素会造成文档回流。读屏器不会读取display: none元素内容，性能消耗较大非继承属性，由于元素从渲染树消失造成子孙节点消失，通过修改子孙节点属性无法显示。
  • z-index=-1置于其他元素下面

12. rgba() 和 opacity 的透明效果区别

  1. opacity作用于元素，并影响元素内所有内容（包括子元素）的透明度
  2. rgba()只作用于元素的颜色或其背景色，子元素不会继承透明效果

13. position和display

position

  • relative：相对定位，相对于自己原来的位置进行移动，移动后，原来的位置继续占有
  • absolute：绝对定位，相对于最近一级有定位的父元素进行移动，原来的位置不继续占有
  • fixed：固定定位，相对于浏览器的可视窗口进行移动，原来的位置不继续占有
  • sticky：粘性定位，相对于浏览器的可视窗口进行移动，原来的位置继续占有

display

  • block：转换为块级元素，独占一行、可控制宽高边距
  • inline：转换为行内元素，同一行、不可控制宽高边距
  • inline-block：转换为行内块元素，同一行且之间有空隙、可控制宽高边距
  • none：元素不会显示
  • table：作为块级表格显示
  • inherit：继承父元素的值
  • flex：弹性布局

14. 相对定位与绝对定位

  • absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
  • fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

共同点：改变行内元素的呈现方式，都脱离了文档流；不同点：absolute的”根元素“是可以设置的，fixed的“根元素”固定为浏览器窗口

15. CSS样式继承

  • 可以继承 font-size、font-family、color、text-align
  • 不可继承 border、padding、margin、width、height

16. css引入方式 link import

3种引入方式

  • 内联样式表：将样式写在元素的style属性内
  • 内部样式表：将样式写在style标签内
  • 外部样式表：通过link标签，引入外部样式文件

link和@import的区别

  • link在页面载入时同时加载CSS文件，即同步加载；@import需要等到网页完全载入后再加载CSS文件，即异步加载
  • 浏览器对link的支持早于@import，@import不支持低版本的浏览器
  • link属于HTML标签，而@import是css提供的；
  • link方式的样式的权重高于@import的权重。

17. css选择器及优先级

  • !important
  • 内联样式style=""
  • ID选择器#id
  • 类选择器 /属性选择器（div[height=100px]）/伪类选择器.class.active[href=""]
  • 元素选择器 /关系选择器 /伪元素选择器html+div>span::after
  • 通配符选择器*

18. 行内元素 块级元素

  • 行内元素： a, b, span, img, input, select, strong;
  • 块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
  • 空元素： <br>, <hr>, <img>, <link>, <meta>;

19. BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 

（1）BFC的特性

  • 属于同一个BFC的两个相邻的盒子的margin会发生重叠（比如两个div都在html元素中，上下外边距会重叠）
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
  • 计算BFC的高度，浮动元素也参与计算，即BFC可以包含浮动的元素（比如父元素不设置高度但设置BFC，浮动的子元素的高度会撑起父盒子）
  • 内部的Box会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由margin决定
  • bfc的区域不会与float的元素区域重叠。

（2）BFC应用

  • 避免外边距折叠：父元素设置overflow:hidden；兄弟元素分别放在overflow:hidden的两个盒子里
  • 清除内部浮动 （撑开高度）：父元素设置overflow：hidden/auto/scroll
  • 自适应两（多）栏布局
  • 防止字体环绕

（3）触发BFC条件

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute、fixed

20. 文档流

  1. 什么是文档流
    • 文档流也叫标准流，是相对于盒子模型而言的说法
    • 文档流就是：浏览器按照各种元素标签，进行排版的布局中，默认的状态
    • 浏览器在渲染代码的时候是从左往右、从上到下开始渲染，元素也是从左往右、从上往下的流式排列
  2. 什么是脱离文档流
    • 脱离文档流，就是将元素从普通的布局排版中拿走
    • 比如，float布局，元素浮动之后，它后面的元素会无视它所占据的区域，直接在它下面布局，则浮动元素就脱离了文档流
    • 绝对定位（float）、固定定位（fixed）也会脱离文档流，因为它们不按照浏览器默认的排版布局

21. 伪类和伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分。

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。

  • 获取不存在与DOM树中的信息。比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
  • 获取不能被常规CSS选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

22. 重绘和重排

减少重绘重排的方法有：

· 不在布局信息改变时做DOM查询，

· 使用csstext,className一次性改变属性

· 使用fragment

· 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

23. H5新特性

（1）语义化标签：header、footer、section、nav、aside、article

（2）增强型表单：input 的多个 type 

         新增表单元素：datalist数据列表、output输出内容、progress进度条

         新增表单属性：placehoder占位提示、required不为空、min 和 max

（3）音频视频：audio、video

（4）Canvas 基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。绘制 矩形 文本 路径 /  SVG绘图

Canvas与SVG的不同：

Canvas是位图；SVG是矢量图

Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)

Canvas内容不能使用CSS；SVG内容可以使用CSS；

Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

（5）地理定位

（6）拖拽 H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。H5之后专门提供了七个鼠标拖动相关事件句柄：

（7）本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

（8）新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

（9）WebSocket：单个 TCP 连接上进行全双工通讯的协议

24. HTML、XML、XHTML 的区别

  • HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
  • XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
  • XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

XHTML是HTML规范版本；HTML5是HTML、XHTML以及HTML DOM的新标准。

25. 标签上title属性与alt属性的区别是什么

  • alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
  • title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

26. 实现三角形

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。实现圆圈梯形半圆 参考https://juejin.im/post/5df1e312f265da33d039d06d

27. CSS单位有哪些？

  1. px：一个绝对的像素单位
  2. %： 父元素相同属性的值的比例
  3. em：相对单位。 不同的属性有不同的参照值。
    1. 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
    2. border, width, height, padding, margin, line-height 在这些属性中，使用em单位的计算方式是参照该元素的字体大小，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小
  4. rem：是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。
  5. vh：相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。100vh就是整个视窗高度的大小

28. HTML5的应用缓存

  • 应用缓存
    1. HTML5应用缓存的最终目的，是帮助用户离线浏览页面，它可以帮助用户指定哪些文件需要缓存，哪些不需要
    2. 应用缓存的优势：离线浏览、速度（让已缓存资源加载得更快）、减少服务器负载（只需下载服务器更新过的资源）
    3. 原理：在用户没有连接网络时，可以正常访问站点或应用，在用户连接网络时，更新用户机器上的缓存文件
  • 和常规的HTML浏览器缓存相比，它不强制要求用户访问网站

29. 网页制作会用到哪些图片格式

  1. JPG：压缩率高，文件小
  2. PNG：支持无损压缩，保真度高，文件较大
  3. GIF：支持动画显示
  4. SVG：

30. 访问超链接后，:hover样式不再出现

  1. 因为访问过的超链接伪类样式:visited覆盖了原有的:hover和:active样式
  2. 解决方案：将超链接伪类选择器的顺序改为 :link -> :visited -> :hover -> :active

31. 什么是FOUC？如何避免

  1. FOUC是无样式内容闪烁，因为IE浏览器通过@import方式导入CSS文件引起的
  2. IE会先加载整个HTML文档的DOM，然后再导入外部的CSS文件，在DOM加载完到CSS加载完之间的时间里，页面上的内容是没有样式的
  3. 解决方法：在之间使用标签引入外部CSS文件，因为link方式的引入是与DOM的加载同步进行的

32. 触发硬件加速的CSS属性

CSS的 animation、tranform、transition并不会自动开启GPU加速，而是通过浏览器的缓慢的软件渲染引擎来实现执行

使用 translate3d() rotate3d() scale3d()　这几个方法，我们就可以使用ＧＰＵ加速了。

如下几个css属性可以触发硬件加速：transform、opacity、filter、will-change：哪一个属性即将发生变化，进而进行优化

33. 服务端渲染 和 客户端渲染

（1）服务器端渲染

     每当有客户端请求页面了，服务器先在后端调用art-template，把指定的页面预先在后端渲染后，然后通过res.end把这个渲染完毕的完整页面，返回给客户端直接展示。

  •  优点：对SEO友好，因为我们经过服务器端渲染的页面，在网络中传输的时候，传输的是一个真实的页面。因此，爬虫客户端，当爬到我们的页面后，会分系我们给他提供的这个页面，此时，我们页面中的关键数据就会被爬虫给收录了。
  • 缺点： 服务器端渲染，对服务器压力比较打，可以使用服务器端的页面缓存技术，减轻服务器的渲染压力；不适合前后端分离开发。

（2）客户端渲染

     每当用户要请求某个页面了， 第一步，用户需要先把这个页面请求到客户端，此时用户拿到的页面只是一个模板页面。 第二步，浏览器在解析模板页面的时候，会发起art-template的二次资源请求，同时要发送Ajax请求，去服务器获取数据 第三步，在客户端调用art-template 渲染HTML结构，并把渲染厚的htmlStr append 到页面指定的容器中;

  • 缺点： 对SEO相当不友好
  • 优点： 减轻了服务器端的渲染压力;同时，最大的好处就是：能够实现前后端分离开发;

参考链接：https://juejin.im/post/5ed1c2cae51d45784635a50d

https://juejin.im/post/5df1e312f265da33d039d06d

https://gitee.com/wyz-1997/WebKnowledge/blob/master/CSS/CSS%E5%9F%BA%E7%A1%80.md

小白Rachel
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML常考知识点和面试题
风丶不会停息
04-07 772
&lt;meta charset="utf-8"&gt;//保证页面不会出现编码问题（乱码）&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user=saclable=no"&gt;//宽度等于设备宽度，初始化比例等于1，最大初始化比例等于1， user-scalabl...
前端面试题之HTML和css-很实用的知识点
qq_43623970的博客
04-20 1554
display: none; 与 visibility: hidden; 的区别 相同： 它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点...
HTML基础知识点大全
m0_69674158的博客
05-04 6830
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
html、css常考的知识点
任性的wo的博客
11-01 992
1.CSS中绝对定位和相对定位的文档流是怎样的 以及他们是如何使用的？     CSS的相对定位和绝对定位。通常情况下，我们的元素的position属性的值默认为static就是没有定位，元素出现在正常的文档流中，这个时候你给这个元素设置的left、right、bottom、top这些偏移属性都是没有效果的，不会生效（但是padding、margin是生效的）。还有z-index属性在这时不
HTML常见知识点
damon的博客
11-26 237
htmlHTML发展史HTML XHTML HTML5的关系Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?meta常用标签行内元素有哪些？块级元素有哪些？ 行内块级元素有哪些？自闭合元素有哪些？HTML和DOM关系对语义化如何理解HTML5有哪些变化，如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？什么是浏览器的内核，常见的浏览器的内核有哪些pr...
前端大厂最新面试题-CSS 面试知识点总结.docx
06-06
以下是一些主要的CSS面试知识点的详细解释： 1. **CSS 盒子模型**：标准的CSS盒子模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，总宽度 = content宽度 + padding左右 + border左右 + ...
html+css+js面试总结
11-08
本文将深入探讨这些技术在面试中的常见知识点，帮助你充分准备前端面试。 **HTML（HyperText Markup Language）** HTML是网页的基础，用于定义页面的结构和内容。在面试中，你需要熟悉以下概念： 1. **HTML标签**...
「资深前端工程师总结」前端面试知识点大全 —CSS 篇
06-18
前端面试知识点大全 —CSS 篇 作为一名资深的前端工程师，了解 CSS 的基本概念和应用是非常重要的。在这篇文章中，我们将总结一些常见的 CSS 知识点，帮助大家更好地理解和应用 CSS。 display 属性 在 CSS 中，...
vue面试题+web前端笔试题面试题汇总+前端优化总结+《Vue-框架开发》真题
最新发布
06-20
- 常见的前端面试问题可能涉及HTML5新特性、CSS布局、JavaScript基础、ES6语法、Promise和async/await等。 - Vue面试题可能涵盖Vue的组件通信、生命周期、状态管理、性能优化等。 5. **《Vue-框架开发》期末考试...
最全的经典前端面试知识点.txt
04-28
最全的经典前端面试知识点，面试多家公司总结，适合初入职场的前端小白，
CSS中常用的几种定位方式
赵路IT软件技术交流博客
07-03 279
第一类float定位（即浮动定位）：这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器；如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离文档流。第二类po...
html的必背知识
寂寞风中一匹狼的博客
04-06 2425
html标签不区分大小写。一般用小写。双标签：例如&lt;html&gt;&lt;/html&gt;单标签：例如 &lt;br/&gt;css、javascript可以定义在html的头部。&lt;head&gt;标签：属性：&lt;base&gt;  例如： &lt;base target=_blank&gt;表示网页中所有的超链接的目标地址都在新建窗口中打开src、href、url的区别src...
关于前端布局的小技巧-多栏布局（column-count），盒布局，flex布局--这可是我做的最长的文章了！
weixin_49527298的博客
12-01 1437
HTML的布局方式多的不能再多了，而博主我最近也是学了几种简单的，这不，就来分享一些了！ 多栏式布局 盒布局 弹性布局 排列方式，空间的分配 justify-content属性 align-self align-content 多栏式布局 1.为什么需要？ 在我们日常布局中，会经常使用浮动和定位进行布局，就会出现两个元素不能底部对齐的情况。 2.案例介绍。 <!DOCTYPE html> <html lang="en"> <head> <meta chars
HTML常考知识点
思诚^_^
09-07 391
本章先介绍一些HTML最基础的考点，很多大长面试官喜欢由浅入深地考察知识。而对于一些基础问题的回答，很多同学反而因组织不好语言而给面试官留下不好的印象。本章节我们就带大家一一整理和回顾。 1.1 DOCTYPE的作用 面试官：我们现在写HTML代码第一行通常是 !<DOCTYPE HTML>，请介绍一下DOCTYPE的作用（基础题） DOCTYPE标签是一种标准通用标记语言的文档类型声明，且必须声明在文档的第一行，来告知浏览器用何种文档标准来解析这个网页，不同的渲染模式会影响浏览器对CSS和
html定位的几种方式_五种方式实现三栏布局
weixin_39867893的博客
12-01 873
在网页布局中，三栏布局是一种常见的布局方式，尤其在 PC 端。如下图所示。三栏布局从上到下由页头、内容和页脚组成，内容由左、中、右三列组成，其中左右两列的宽度固定，中间一列自适应。假设左右宽度是 100px，header 和 footer 的高度是 60px。下面介绍五种方式，分别是：浮动、绝对定位、flex-box 和 grid-box 和表格布局。HTML 骨架如下：<main...
前端面试点复习整合——前端基础篇（2）CSS篇
yu_Cacakn的博客
06-30 280
*内容参考整理自牛客网 目录一、 说一下css盒模型二、link标签和import标签的区别三、transition和animation的区别四、Flex弹性布局五、BFC六、垂直居中的办法七、关于js动画和css3动画的差异性八、说一下块元素和行元素九、怎么样让一个元素消失，讲讲十、双边距重叠问题（外边距折叠）十一、position属性十二、浮动清除十三、css3新特性十四、 CSS选择器有哪些，优先级呢十五、css动画如何实现十六、CSS3中对溢出的处理十七、三栏布局的实现方式，尽可能多写，浮动布局时，
html基础必备知识点
qq_38148024的博客
09-26 1982
HTML基础必备知识点 初识 超文本标记语言，主要是通过HTML标签对网页中的文本，图片，声音等内容的描述。 骨架格式 <html> 根标签 <head> 头标签 <title>这里写的是标题</title> 标题标签 </head> &lt...
CSS复习总结
qq_44786519的博客
10-08 209
CSS盒模型 就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing（有3个值）：border-box，padding-box，content-box。 从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的 宽度时存在着差异： 标准盒子模型的盒子宽度：bor
HTML+CSS常见面试题
qq_63778549的博客
12-25 1917
★ 父元素和子元素宽高不固定，如何实现水平垂直居中 - 弹性盒模型 -父元素设置：display:flex; justify-content:center; align-items:center -额外的骚操作：父元素设置弹性盒display:flex; 子元素可以设置margin: auto; 实现垂直水平居中 - 定位属性（position）配合位移属性（transform） - 父元素设置：position:relative， - 子元素设置：position:absolute;.
前端html、javascript面试宝典
03-15
"前端面试相关的HTML、JavaScript及CSS知识点总结" 在前端开发中，HTML、CSS和JavaScript是构建网页的基础，对于求职者来说，掌握这些技术的深入理解至关重要。以下是一些面试中可能会遇到的关键问题及其解答： 1....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白Rachel

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值