2023前端面试题及答案整理（CSS布局）

最新推荐文章于 2024-05-10 03:30:56 发布
最新推荐文章于 2024-05-10 03:30:56 发布
阅读量712 收藏 5
点赞数
分类专栏： 面试 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suli77/article/details/128920093
版权

如何居中div？

行内元素水平居中

#container {
    text-align: center;
}

单个 div（块级元素）水平居中

#center {
  width: 200px;
  margin: 0 auto;
}

多个 div 水平居中

/* 传统方案 */
#container {
    text-align: center;
}
#center {
    display: inline-block;
}

/* flex 布局方案 */
#container {
    justify-content: center;
    display: flex;
}

绝对定位的 div 居中（已知宽高）

子绝父相 + margin
#center {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto; /* 0 auto 水平居中；auto 水平垂直居中 */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
}
子绝父相 + 负边距
#center {
  position: absolute;
  width:500px;
  height:300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;  /* 外边距为自身宽高的一半 */
  background-color: pink;     /* 方便看效果 */
}
当被居中的元素是 inline or inline-block 元素
#container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

任意元素（未知宽高）

子绝父相 + translate
#container {
    position: relative;
}

/* 利用transform */
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
flex（需考虑兼容性）
#container {
  display: flex;
  display: -webkit-flex; /* Safari仍旧需要使用特定的浏览器前缀 */
  align-items: center;    /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}
#center {
  width: 100px;
  height: 100px;
  background-color: pink;   /* 方便看效果 */
}

请解释一下CSS3的 Flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

在传统的布局方式中:

  • block 布局是把块在垂直方向从上到下依次排列的；
  • inline 布局则是在水平方向来排列。
  • flex 弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

适用场景：弹性布局适合于移动前端开发，在 Android 和 iOS 上也完美支持。

参考：http://www.w3cplus.com/css3/flexbox-basics.html

flex 是什么属性的缩写

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写

如何使用 flex 实现三列等宽布局

父元素 display: flex，子元素 flex: 1

解释

子元素的设置等同于：flex: 1 1 auto

flex的默认值是：0 1 auto

意思是项目默认有剩余空间也不放大（0），但空间不足会缩小（1）

现在改为了值 1 ，就可以放大了，所以三栏可以平分宽度

阅读：flex设置成1和auto有什么区别

如何使用 flex 实现下列布局

flex

HTML

<div id="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>
<p>margin-right: auto</p>

CSS

#container {
  display: flex;
  justify-content: flex-end;
  background-color: lightyellow;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 75px;
  background-color: springgreen;
  border: 1px solid #333;
}
.box1 {
  margin-right: auto;
}
p {
  width: 100%;
  text-align: center;
}

摘自：css flex布局中妙用 margin: auto

用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

css多列等高如何实现？

原理

利用 padding-bottom|margin-bottom 正负值相抵；

设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度， 当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度， 其他比这列矮的列则会用它们的 padding-bottom 来补偿这部分高度差。

因为背景是可以用在 padding 占用的空间里的，而且边框也是跟随 padding 变化的，所以就成功的完成了一个障眼法。

实现

HTML

<ul class="Article">
  <li class="js-equalheight">
    <p>
      一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商
    </p>
  </li>
  <li class="js-equalheight">
    <p>一家将客户利益置于首位的经纪商，为客户提供专业的交易工具</p>
  </li>
  <li class="js-equalheight">
    <p>一家将客户利益置于首位的经纪商</p>
  </li>
</ul>

CSS

.Article {
  overflow: hidden;
}

.Article > li {
  float: left;
  margin: 0 10px -9999px 0;
  padding-bottom: 9999px;
  background: #4577dc;
  width: 200px;
  color: #fff;
}

.Article > li > p {
  padding: 10px;
}

css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .outer {
        width: 400px;
        height: 100%;
        background: blue;
        margin: 0 auto;

        display: flex;
        align-items: center;
      }

      .inner {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        background: red;
      }

      .box {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="box">hello</div>
      </div>
    </div>
  </body>
</html>
See the Pen 高度是宽度一半 by JingW ( @JingW) on CodePen.

来源：https://github.com/cttin/cttin.github.io/issues/2

有一个高度自适应的 div ，里面有两个 div ，一个高度 100px ，希望另一个填满剩下的高度。

HTML

<body>
    <div class="outer">
        <div class="A"></div>
        <div class="B"></div>
    </div>
</body>

CSS

方案1

.A {
    height: 100px;
    background-color: pink;
}

.B {
    background-color: blue;
    height: calc(100vh - 100px);
}

方案2

/* 
  利用border-box将padding包含在高度内； 
*/
.outer {
    height: 100%;
    padding: 100px 0 0;
    box-sizing: border-box;
    background-color: pink;
}
/* 
  用负margin值将A子容器顶到页面顶部
*/
.A {
    height: 100px;
    margin: -100px 0 0;
    background: #BBE8F2;
}
/* 
  剩下的高度100%-100px就是B容器所谓的100%高了
*/
.B {
    height: 100%;
    background: #D9C666;
}

方案3

.outer {
    height: 100%;
    padding: 100px 0 0;
    box-sizing: border-box;
    position: relative;
}
/*
  绝对定
*/
.A {
    height: 100px;
    background: #BBE8F2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.B {
    height: 100%;
    background: #D9C666;
}

方案4

.outer {
    height: 100%;
    position: relative;
}

.A {
    height: 100px;
    background: #BBE8F2;
}

.B {
    background: #D9C666;
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
}

方案5

.outer {
    height: 100%;
    background: red;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: row;
}

.A {
    width: 100%;
    height: 100px;
    background: green;
}

.B {
    background: blue;
    flex: 1;
}

rem布局知道吗？原理是什么？

rem是个相对单位，相对的是html根元素的font-size大小。这样一来我们就可以通过html上的字体大小来控制页面上所有以rem为单位的元素尺寸。

示例代码

例如在vue项目的index.html页中动态计算根元素字体大小

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    ...
  </head>
  <body>
    <noscript>
      ...
    </noscript>
    <div id="app"></div>
    <script>
    ;(function(doc, win) {
      const docEl = doc.documentElement
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      const recalc = () => {
        const clientWidth = docEl.clientWidth
        // 把屏幕宽度划分成10份，那么每一份的宽度就等于1rem
        docEl.style.fontSize = clientWidth / 10 + 'px'
      }
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
      recalc()
    })(document, window)
    </script>
  </body>
</html>

然后利用css预处理器定义一个mixin函数（下方用的stylus），用来将设计稿上的px转为对应的rem值

计算公式为：

页面元素的rem值 = 设计稿元素值（px）/（屏幕宽度 / 划分的份数）

mixin.stylus

/* 把px转为rem */
px2rem(designpx)
  $rem = 750 / 10;
  return (designpx / $rem)rem

最后在css中使用

某vue组件的style标签中

/* 375设计稿上100%宽以及50高的导航条（iPhone6的dpr为2，所以px值得都乘以2） */
header
  width px2rem(750)
  height px2rem(100)

rem布局的优缺点

优点：

能维持能整体的布局效果，移动端兼容性好，不用写多个css代码，而且还可以利用@media进行优化。

缺点：

开头要引入一段 js 代码，单位都要改成 rem（ font-size 可以用 px ），计算 rem 比较麻烦(可以引用预处理器，但是增加了编译过程，相对麻烦了点)。PC 和 Mobile 要分开。

参考：

慎用 em 的原因

**em会叠加计算。**在这个机制下太容易犯错了，因为你不知道这段css指定的字号具体是多少。

HTML

<span>
    abc
    <span>def</span>
    abc
</span>

CSS

span { font-size: 1.5em; }

实际效果：

abc.png

先要搞清楚 em 的计算原理，它是根据当前元素的字号按比例计算的。

外层 span 的字号是 16px（浏览器默认值），所以 1.5em 之后是 24px 。由于字号是继承的，导致内层 span 的字号继承过来是 24px ，再经过 1.5em 之后就成了 36px 。

所以，就算要用 em 的话，尽量不要用在继承属性（font-size）上，除非你真的清楚你在做什么！

两列布局（左列定宽，右列自适应）

HTML

<body>
  <div id="left">左列定宽</div>
  <div id="right">右列自适应</div>
</body>

1. 利用 float + margin

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}

#right {
    background-color: #0f0;
    height: 500px;
    margin-left: 100px; /*设置间隔，大于等于#left的宽度*/
}

原理：#left左浮动，脱离文档流，#right为了不被#left挡住，
设置margin-left大于等于#left的宽度达到视觉上的两栏布局

2. 使用 float + overflow（触发bfc）

#left {
    background-color: #f00;
    float: left;
    width: 100px;
    height: 500px;
}

#right {
    background-color: #0f0;
    height: 500px;
    overflow: hidden; /*触发bfc达到自适应*/
}

原理：#left左浮动，#right触发bfc达到自适应

3. 使用 table 实现

#parent {
    width: 100%;
    display: table;
    height: 500px;
}

#left {
    width: 100px;
    background-color: #f00;
}

#right {
    background-color: #0f0;
}
/*利用单元格自动分配宽度*/
#left, #right {
    display: table-cell;
}

4. 使用 position 实现

#parent{
    position: relative;
}  /*父相*/

#left {
    position: absolute;  /*子绝*/
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}

#right {
    position: absolute;  /*子绝*/
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

5. 使用 flex 实现

#parent {
    width: 100%;
    height: 500px;
    display: flex;
}

#left {
    width: 100px;
    background-color: #f00;
}

#right {
    flex: 1; /*均分了父元素剩余空间*/
    background-color: #0f0;
}

两列布局（一列不定宽，一列自适应）

1. float + overflow

#left {
    margin-right: 10px;
    float: left;  /*只设置浮动,不设宽度*/
    height: 500px;
    background-color: #f00;
}

#right {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;
}

原理：#left不设宽度左浮动，#right触发 bfc 达到自适应

2. flex 布局

#parent{
    display: flex;
}

#left { /*不设宽度*/
    margin-right: 10px;
    height: 500px;
    background-color: #f00;
}

#right {
    height: 500px;
    background-color: #0f0;
    flex: 1;  /*均分#parent剩余的部分*/
}

三列布局（左中定宽，右侧自适应）

HTML

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>

1. float + margin

#parent{
    min-width: 310px;
} /*100+10+200,防止宽度不够,子元素换行*/

#left {
    margin-right: 10px;  /*#left和#center间隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}

#center{
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}

#right {
    margin-left: 320px;  /*等于#left和#center的宽度之和加上间隔,多出来的就是#right和#center的间隔*/
    height: 500px;
    background-color: #0f0;
}

2. float + overflow

#parent{
    min-width: 320px;
} /*100+10+200+20,防止宽度不够,子元素换行*/

#left {
    margin-right: 10px; /*间隔*/
    float: left;
    width: 100px;
    height: 500px;
    background-color: #f00;
}

#center{
    margin-right: 10px; /*在此定义和#right的间隔*/
    float: left;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}

#right {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #0f0;
}

3. 利用 position

#parent {
    position: relative;
} /*父相*/

#left {
    position: absolute; /*子绝*/
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}

#center {
    position: absolute; /*子绝*/
    left: 100px;        /*对应#left的width值*/
    top: 0;
    width: 200px;
    height: 500px;
    background-color: #eeff2b;
}

#right {
    position: absolute; /*子绝*/
    left: 300px;        /*对应#left和#center的width值之和*/
    top: 0;
    right: 0;
    height: 500px;
    background-color: #0f0;
}

4. 利用 table

#parent {
    width: 100%;
    height: 520px; /*抵消上下间距10*2的高度影响*/
    margin: -10px 0;  /*抵消上下边间距10的位置影响*/
    display: table;
    /*左右两边间距无法消除,子元素改用padding设置盒子间距就没有这个问题*/
    border-spacing: 10px;  /*关键!!!设置间距*/
}

#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}

#center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
}

#right {
    display: table-cell;
    background-color: #0f0;
}

5. 利用 flex

#parent {
    height: 500px;
    display: flex;
}

#left {
    margin-right: 10px;  /*间距*/
    width: 100px;
    background-color: #f00;
}

#center {
    margin-right: 10px;  /*间距*/
    width: 200px;
    background-color: #eeff2b;
}

#right {
    flex: 1;  /*均分#parent剩余的部分达到自适应*/
    background-color: #0f0;
}

三列布局（两侧定宽，中间自适应）

圣杯布局 详解

HTML

<div class="container">
    <div class="center">中间</div>  <!-- 让中间第一，这样浮动的时候它会先占据100%宽 -->
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

CSS

.container {
  height: 500px;
  min-width: 400px;  /* 左边w*2+右边w */
  padding: 0 100px 0 150px; /* 1. 父容器左右留出固定padding */
  background-color: gray;
}

.left {
  margin-left: -100%; /* 4.1 让被挤到center下方的left左移整个容器的宽度，此时左上角与center重叠 */
  position: relative; /* 4.2 为了让left移到最左边,设置相对定位 */
  left: -150px; /* 4.3 然后相对自己左移自已宽度的单位，使自己移动到最左边 */
  height: 100%;
  float: left;  /* 2.1 左浮动 */
  width: 150px;
  background-color: rgba(233, 233, 0, .2);
}

.center {
  height: 100%;
  width: 100%;  /* 3. 让center占据剩下父容器的100%宽 */
  float: left;  /* 2.1 左浮动 */
  background-color: rgba(165, 12, 23, .4);
}

.right {
  margin-right: -100px; /* 5. 给在第二行的right设置一个负自己宽度的margin-right。让其最右边 */
  height: 100%;
  width: 100px;
  float: left;  /* 2.1 左浮动 */
  background-color: green;
}

双飞翼布局方法 详情

HTML

<div class="container">
    <div class="center">
        <div>中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

CSS

.container {
    width: 100%;  /* 1. 整个容器宽100%自适应 */
    height: 500px;
    background-color: gray;
}

.left {
    width: 100px; /* 3.1 设置定宽 */
    margin-left: -100%; /* 5. 左移容器宽度100%个单位，就把自己排在了center前面 */
    background-color: rgba(233, 233, 0, .2);
}

.center {
    width: 100%;  /* 4. 中间容器100%，此时会把左右挤到第二行 */
    background-color: rgba(165, 12, 23, .4);
}

.center div {
    margin: 0 150px 0 100px;  
    /* 7. 此时center的左右分别有100和150宽与left，right重叠。所以让center子容器左右margin抵消 */
}

.right {
    width: 150px; /* 3.2 设置定宽 */
    margin-left: -150px;  /* 6. 同样左移自身宽度的单位，让right也回到第一行 */
    background-color: green;
}

.left, .center, .right {
    height: 100%;
    float: left; /*2. 子容器全部左浮动 */
}

布局的几种方式

  1. 伸缩布局 flex
  2. 流式布局 百分比
  3. 响应式布局 媒体查询（超小屏设备时：流式布局）
    <!- 以上布局共同点：元素只能做到宽度的适配（排除图片）->
  4. rem布局 宽度和高度都能做到适配（等比适配）

Flex

flex布局和传统布局的优势？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

在传统的布局方式中:

  • block 布局是把块在垂直方向从上到下依次排列的
  • inline 布局则是在水平方向来排列
  • flex 弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作
我有一段文字，但不知道多长，如何实现单行文本居中，多行文本居左显示？

flex，单行的时候文本不足会居中，多行会自动折行居左:

display: flex;
justify-content: center;

如何解决移动端 Retina 屏 1px 像素问题

原理：媒体查询 + 变换缩放

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <style type="text/css">
      * { margin: 0; padding: 0; }
      #test {
        width: 100%;
        height: 1px;
        margin-top: 50px;
        background: black;
      }
      @media only screen and (-webkit-device-pixel-ratio:2 ) {
        #test {
          transform: scaleY(.5);
        }
      }
      @media only screen and (-webkit-device-pixel-ratio:3 ) {
        #test {
          transform: scaleY(.333333333333333333);
        }
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

stylus 实现方案

stylus

/* 给 dpr 1.5 的设备设置 0.7 的缩放 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
  .border1px
    &::after
      -webkit-transform: scaleY(.7)
      transform: scaleY(.7)
/* 给 dpr 2.0 的设备设置 0.5 的缩放 */
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border1px
    &::after
      -webkit-transform: scaleY(.5)
      transform: scaleY(.5)

/* 给需要1px下边框的元素添加一个伪元素，
使其宽100%；高为用户自定义 */
border1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

html

<!-- 1. 给需要添加1像素边框的元素设置一个类作为标识，让媒体查询能够识别 -->
<header class="border1px"></header>

<style lang="stylus" scoped>
header
  ...
  border1px(black) /* 2. 通过border1px设置边框 */
</style>

其它

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

 <div style="height:1px;overflow:hidden;background:red"></div>

已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改

<img src="1.jpg" style="width:480px!important;">

答案：

<!-- 方法一：max-width覆盖 -->
<img src="1.jpg" style="width:480px!important; max-width: 300px">
<!-- 方法二：scale按比例缩放 -->
<img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" >
<!-- 方法三：相同属性直接覆盖 -->
<img src="1.jpg" style="width:480px!important; width:300px!important;">
<!-- 方法四：css动画样式优先级高于important特性 -->
<style>
img {
    animation: test 0s forwards;
}
@keyframes test {
    from {
        width: 300px
    }
    to {
        width: 300px;
    }
}
</style>

了解box-sizing吗？

box-sizing 属性可以被用来调整这些表现:

  • content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

更多面试问答

https://download.csdn.net/download/suli77/87425350

suli77
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、作用域、资源处理等内容实现。 适合人群：最近在准备面试，具备一定编程基础，工作1-3年的研发人员， 题目举例：1、 rem em vw vw 百分比区别 2、 移动端如何适配 3、场景题（两个盒子，左边固定宽，右边自适 应，你能想到几种方法） 4、css 选择器有哪些，权重是什么样的 5、CSS3动画知道吗，实现过哪些css3动画 6、html页面渲染方式和流程 阅读建议：此资源覆盖了前端技术栈中Html+css全部知识点，知识点较多，所以在背题的过程要结合这些内容一起来实践，并调试对应的代码
学习笔记（第四周）
m0_74267243的博客
11-18 522
推荐
2024css超全面试题css经典面试题css理论知识前端面试题css最全的题包括面试题多年的积累。
2401_84152991的博客
05-10 653
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
2024高频前端面试题（含答案）
热门推荐
weixin_44672169的博客
04-22 21万+
一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局（左右固定宽度，中间自适应） （1）CSS浮动 第一个float:left，第二个float:right，第三个设置margin-left和margin-right （2）绝对定位法 第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right （3）flex布局 .left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px;
HTML之【表格】
weixin_48485216的博客
04-18 2291
表格 <table></table> 表格中属性 设置表格的边框宽度 border="1px" 边框为1像素宽度 设置表格的整体宽度 整体宽度为300像素：width=“300px” 整体宽度占60%：width=“60%” 设置单元格高度 高度为150px像素：height=“150px” 行 <tr></tr> 注：表示表格中的一行 单元格 普通单元格 <td></td> 注：
表格练习案例
girllan的博客
07-06 161
简单表格案例 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta charset="UTF-8"> <title>注册页面&
前端面试题及答案.zip
04-18
"前端面试题及答案.zip"这个压缩包很可能包含了丰富的前端面试题目以及相应的解答，旨在帮助求职者或希望提升技能的前端工程师更好地准备面试。让我们来深入探讨一些可能涵盖的知识点。 1. HTML/CSS基础： - HTML...
前端面试题及答案整理(二)
01-19
Part1 CSS相关 1 内联元素（inline-element）和块元素（block element）分别有哪些 常见内联元素（行内元素）有a、b、span、i 、em、input、select 、img等 常见的块元素有div、ul、li、h1~h6、talbe、ol、 ul、td、...
2022前端面试题及答案
06-19
前端面试题及答案 前端开发是当前最为热门的开发领域之一，前端开发工程师是每个公司都需要的人才。因此，掌握前端面试题和答案对应届毕业生和前端开发工程师非常重要。本文总结了2022年前端面试题及答案，涵盖了...
前端面试题之Css相关题集.zip
最新发布
06-21
随着技术的不断发展，CSS面试题也在不断更新，旨在测试开发者对于CSS的深入理解和实际应用能力。本题集主要涵盖了以下几个核心知识点： 1. **选择器**：包括基本选择器（如元素选择器、类选择器、ID选择器）、伪类...
2023前端最新面试题之CSS-127页
10-12
CSS面试题知识点总结 CSS（Cascading Style Sheets）是前端开发中不可或缺的一部分，掌握好CSS知识点对于front-end开发者的编程能力非常重要。下面是从给定的文件中提取的相关知识点： 1. 盒模型（Box Model）：在...
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 5685
文章目录前言1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？2、box-sizing属性？3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？4.垂直居中几种方式有哪些？总结 前言 随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界
div的定位（3）
chenshizero的专栏
10-10 972
（7）给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
2023最全最新前端面试题（附加解析）
我们好像在哪见过
07-13 1万+
2023最全最新前端面试题（附加解析）
H5+CSS3面试题整理自用（纯手打）
taohouzi的博客
05-20 617
算是面试题整理吧，因为最近也在找工作，就当在再巩固一下知识点。
CSS3的面试题
qq_42431718的博客
12-29 1221
CSS3中的变形（transform）属性可以实现哪些效果？请列举几个常见的变形效果并给出相应的代码示例。请简要介绍CSS3中的Flexbox布局，并提供一个简单的Flexbox布局示例。请解释一下CSS3中的渐变（gradient）是如何工作的，以及它的应用场景。解释一下CSS3中的伪类和伪元素的区别，并举例说明它们的使用场景。请列出至少五个CSS3中常用的动画属性，并简要说明它们的作用。解释一下CSS3中的选择器级别以及它们的优先级顺序。CSS3中的盒模型与CSS2中的盒模型有何区别？
2024年前端面试题汇总
sun_qqq的博客
02-08 8万+
最近面试被打击的体无完肤，于是把面试题记录下来分享一下。vue真是必问框架，八股文该背的还是得背！
2023最全最新前端面试题（附加解答）
My dream
06-23 11万+
这是我整理所有看过的文章的面试题+各种百度每一道题的答案，希望可以有效的帮助别人 本章博客，梳理所有基础的js，jquery，vue，css, html等题，包含面试题，可供参考学习，也督促自我学习
2024前端面试题！（附答案及解析）（2024.8月最新版）
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 12万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.8月最新版）感谢支持，你们的鼓励是我的动力！
前端 50 道面试题及答案：CSS盒子模型和选择器详解
总的来说，CSS的盒子模型是用来描述元素在网页布局中所占据的空间和位置的模型，通过盒子模型可以方便地控制元素的大小、间距和布局。在实际开发中，对于不同的布局需求和浏览器兼容性问题，可以选择合适的盒子模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suli77

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

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

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

打赏作者

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

抵扣说明：

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

余额充值