前端面试知识点【CSS篇】

已于 2022-04-22 11:25:04 修改
阅读量947 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端 css 面试 javascript 学习
于 2022-04-10 11:38:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42491859/article/details/124075238
版权

CSS

1、垂直水平居中方式

知道元素的宽高：

absolute + 左上定位50% + margin：负的尺寸的一半

absolute+四周定位0+margin：auto

absolute+左上calc定位

元素宽高未知：

absolute+左上定位50% + transform：-50%

flex布局：

flex布局+justify-content+align-items

<div class="father">
    <div class="son">

    </div>
</div>
知道居中元素的宽高

1、父元素：relative，子元素：absolute，top：50%，left：50%，margin-left：-width/2px，margin-top：-height/2px

（absolute+左上定位50%+margin：负的尺寸的一半）

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

2、父元素：relative 子元素：absolute，top：0px，right：0px，bottom：0px，left：0px，margin：auto

（absolute+四周定位0+margin：auto）

.father{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: red;
  }
  .son{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background-color: yellow;
  }

3、父元素：relative 子元素：absoulte，top：calc（50% - 高度的一半），left：calc（50% - 宽度的一半）

（absolute+左上calc定位）

  .father{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: red;
  }
  .son{
    position: absolute;
    width: 200px;
    height: 200px;
    top:calc(50% - 100px);
    left:calc(50% - 100px);
    background-color: yellow;
  }
居中元素的宽高未知

1、父元素：relative 子元素：absolute，top：50%，left：50%，transform：translate（-50%，-50%）

（absolute+左上定位50%+transfrom（负的50%））

  .father{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: red;
  }
  .son{
    position: absolute;
    width: 200px;
    height: 200px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: yellow;
  }
flex布局

父元素：display：flex justify-content：center，align-items：center，不需要对子元素进行任何的设置

(flex布局、justify-content、align-items)

  .father{
    display: flex;
    width: 500px;
    height: 500px;
    align-items: center;
    justify-content: center;
    background-color: red;
  }
  .son{
    width: 200px;
    height: 200px;
    background-color: yellow;
  }
table-cell布局

父元素：display：table-cell，vertical-align：center，text-align：center 子元素：display：inline-block

.father{
    display: table-cell;
    width: 500px;
    height: 500px;
    vertical-align: middle;
    text-align: center;
    background-color: red;
  }
  .son{
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: yellow;
  }

2、伪元素选择器

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

CSS - ::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

CSS - ::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

CSS - ::selection 伪元素

::selection 伪元素使鼠标选中的元素展示对应的样式。

3：flex布局都有什么属性

flex布局主要有6个属性：

//决定主轴的方向（项目的排列方向）
flex-direction：  row | row-reverse | column | column-reverse;		//(默认值：row)主轴为水平方向，起点在左端，column：主轴为垂直方向

//定义如果一条轴线排不下，如何换行
flex-wrap：	nowrap | wrap | wrap-reverse;	//(默认值：nowrap)不换行，wrap：换行，第一行在上方

//flex-direction和flex-wrap的简写形式
flex-flow：row nowrap

//定义项目在主轴上的对齐方式
justify-content:flex-start | flex-end | center | space-between | space-around;	
//(默认值：flex-start)左对齐，右对齐，居中对齐，两端对齐，每个项目两侧的间隔相等。

//定义项目在交叉轴上如何对齐
align-items：flex-start | flex-end | center| basline | stretch
//起点对齐，终点对齐，中点对齐，基于第一行文字的基线对齐，(默认值：streth)若项目未设置高度或设为auto，则占满整个容器的高度。

//定义多根轴线的对齐方式，如果只有一根轴线，则该属性不起作用
align-content：flex-start | flex-end | center | space-between | space-around | stretch
//起点对齐，终点对齐，中点对齐，与交叉轴两端对齐，每根轴线两侧间隔相等，（默认值：stretch）轴线占满每个交叉轴

3、flex: 1是什么

flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。

flex-grow：元素的放大比例，默认为0，不放大

flex-shrink：元素的缩小比例，默认为0，不缩小

flex-basis：元素占据的主轴空间，默认为auto，是项目的实际尺寸。也可以根据需要自己设置宽高。

flex的默认值为flex:0 0 auto。

flex:1相当于设置了flex:1 1 auto。

flex-grow属性为1，该元素将会占据容器中所有的剩余空间，所以可以轻易地做到footer元素一直保持在底部的效果。

<html lang="en">
  <body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
  </body>
  <style>
    html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    body{
      display: flex;
      flex-direction: column;
    }
    header{
      flex: 0 0 auto;	//将header和footer的flex都设置为0，content的flex设置为1，则content会占用所有的剩余空间，以此实现footer一直在底部。
      height: 60px;
      background-color: skyblue;
    }
    .content{
      flex: 1 1 auto;
      border: 1px solid red;
    }
    footer{
      flex: 0 0 auto;
      height: 70px;
      background-color: orange;
    }
  </style>
</html>

在这里插入图片描述

4、实现两栏布局的方法

1、浮动方法

将左边元素的width设置为200px，并设置其向左浮动

将右边元素的margin-left设置为200px

2、利用 flex布局

设置右边元素的放大比例（flex-grow）为1

3、利用绝对定位

将父元素设置为相对定位（relative）

左边的元素设置为绝对定位（absolute）

右边元素的 margin-left 设置为 200px

5、盒模型用什么属性改变成IE盒模型？

标准盒模型，包括外边距（margin）、边界（border）、内边距（padding）、内容（content）
请添加图片描述

盒模型由内到外的顺序：content<padding<border<margin

盒模型使用box-sizing属性变成IE盒模型

box-sizing有两个属性，设置为border-box时是标准盒模型，设置为content-box是怪异盒模型。

6、position：absolute和transform的区别

依赖的基准不同

绝对定位（absolute）元素的基准点是其有定位元素的祖先元素，祖先都没有，就以body为基准

而transform做偏移是相对于自身的中心点而言的。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

7、position的属性，realitive与absolute都是以什么为中心的

position的属性：

​ static：静态定位，是position属性的默认值

​ fixed：绝对定位，相对于浏览器左上角进行定位

​ relative：相对定位，相对于自身定位

​ absolute：绝对定位，，相对于其有relative的父元素左上角，如果父元素没有设置relative，则一直追溯祖辈元素，一直到body。

8、BFC块级格式化上下文（重点）

定义：

BFC （Block Formatting Context） 块级格式化上下文，它产生一个独立的渲染区域。

BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。

BFC 特性(功能)
  1. 使 BFC 内部浮动元素不会到处乱跑；
  2. 和浮动元素产生边界。

如何触发BFC：

满足以下任一条件，才会触发BFC

**根元素：**body（最大的一个BFC）

**浮动：**float不为none（left、right）

**定位：**position不是relative或static（absolute、fixed）

**行内块：**display为inline-block

弹性盒模型：display为flex

设置overflow，不为visible（hidden、auto）

9、常用的选择器

类选择器

ID选择器

标签选择器

分组选择器

后代选择器

兄弟选择器

通用选择器

10、id和class的区别？

1、id在页面结构中是唯一的，class是重复可用的。

2、id的优先级要比class的优先级要高。

3、id可以作为锚点，搭配a标签做页面内目录的跳转

11、display与visibility区别

相同点：display和visibility都有元素隐藏的意思

不同点：display是元素隐藏，隐藏的元素不占文档流，而visibility隐藏的元素仍然占文档流

12、有哪些属性会脱离文档流

文档流：当前可显示元素在排列时所占的位置。

​ 一共有三个属性会使元素脱离文档流：

​ （1）浮动

​ （2）绝对定位

​ （3）固定定位

​ 元素脱离文档流会导致父元素高度塌陷，要修复高度塌陷问题，可以将子元素与父元素放在同一个BFC中

13、rem

rem表示与根元素的比例

  <body>
    <div class="test1">123</div>
    <div class="test2">456</div>
  </body>
  <style>
    html{
      font-size: 30px;
    }
    .test1{
      font-size: 2rem;	//2rem表示2倍的根元素尺寸
    }
    .test2{
      font-size: 30px;
    }
  </style>

在这里插入图片描述

14、行内元素和块元素有什么区别

块元素

常见的块元素：div、h1~h6、hr、p、ul、ol、li、header、footer

行内元素

常见的行内元素：a、i、em、strong、b、br

行内元素和块元素的区别

1、块级元素可以独占一行，行内元素不能独占一行，多个行内元素共享一行。

2、块级元素可以设置对应的宽高和内外边距，而行内元素不能设置宽高（由内容撑开）而且只能设置水平方向的内外边距。

3、块级元素可以嵌套块级元素和行内元素。行内元素不能嵌套块级元素。

行内元素和块元素转换

通过display进行转换：

display：block //块元素

display：inline //行内元素

display：inline-block //行内块元素，既可以获得行内元素的属性，又具有块元素的属性

15、盒子塌陷的解决方法

盒子塌陷：本该是盒子内部的元素跑到了盒子外部。

为什么会出现盒子塌陷？

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。

盒子塌陷的解决方法

1、简单粗暴一点：盒子大小写死，给每个盒子设置固定的宽高。但不能自适应。

2、给父元素也设置浮动，让父元素也脱离文档流。但不易维护。

3、使用BFC布局

4、给父元素添加border

5、给父元素设置padding-top

16、伪类和伪元素的区别

伪类是用来为选择器添加一些特殊的效果,它不存在于文档中。比如:hover :active :visited :link :focus

伪元素是用来创建不存在于文档中的元素。比如::before ::after

总结：

  1. 伪类和伪元素都是存在于文档之外的元素，不出现在DOM树中。
  2. 伪类用单冒号表示，伪元素用双冒号表示

17、实现三栏布局的方法

在这里插入图片描述

1、浮动布局（流体布局）

div注意先写左右，再写中间。否则布局会出错

  • 左栏，左浮动
  • 右栏，右浮动
  • 中间栏，margin-left：margin-right：间距超过两侧的宽度
.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
  }
  .right { 
    float: right;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
    margin: 0 220px;
  }
2、BFC布局

div布局：左右中

  • 左栏：左浮动
  • 右栏：右浮动
  • 中间栏：开启BFC（overflow：hidden或display：flex）
 .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
     
  }
  .right { 
    float: right;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    
  }
  .mid {
    background-color: cadetblue;
    height: 200px;
    overflow: hidden 
    /* display: flex */
  }
3、flex布局

div布局：左中右

  • 父容器设置flex布局

  • 左栏：flex：0 0 auto

  • 右栏：flex：0 0 auto

  • 中间栏：flex：1 1 auto

  .container{
    display: flex;
  }
 .left {
    flex:0 0 auto;
    width: 200px;
    background-color: aqua;
    margin-right: 20px;
  }
  .right {
    flex: 0 0 auto;
    width: 200px;
    background-color: aquamarine;
    margin-left: 20px;
  }
  .mid {
    flex: 1 1 auto;	/*该元素将会占据容器中所有的剩余空间*/
    background-color: cadetblue;
    height: 200px;
  }
4、定位

div布局：不限制

  • 父容器，定位relative
  • 左栏：定位absolute，top：0，left：0
  • 右栏：定位absolute，top：0，right：0
  • 中间栏：不设定位，设置margin-left，margin-right大于两侧宽度
  .container {
    position: relative;
  }
  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: aqua;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }

  .mid {
    background-color: cadetblue;
    height: 200px;
    margin: 0 220px;
  }
5、表格布局

div布局：不限制

  • 父容器：display：table，width：100%
  • 左栏：display：table-cell，设置宽、高
  • 右栏：display：table-cell，设置宽、高
  • 中间栏：display：table-cell，设置高度
  .container {
    display: table;
    width: 100%;
  }
  .left,.right,.mid{
    display: table-cell;
  }
  .left {
    width: 200px;
    height: 200px;
    background-color: aqua;
  }

  .right {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }

  .mid {
    height: 200px;
    background-color: cadetblue;
  }

18、什么是标准盒模型？什么是怪异盒模型？

首先，盒模型由外到内是由外边距、边界、内边距、内容组成的。其中标准盒模型与怪异盒模型的区别就是，在标准盒模型中，他的宽度表示的内容区域的宽度，然后怪异盒模型中，宽度表示的是内容区+border+padding的总共宽度。然后编写代码的过程中，只要在html文档首部添加了doctype声明，所使用的就是一个标准的盒模型。如果不添加声明的话，就由浏览器自己决定使用哪一种盒模型。（怪异盒模型：IE6以下、包括一些自适应布局的UI框架）

盒模型转换：在CSS3中新增了一个属性：box-sizing：content-box（默认：标准盒模型）、border-box（怪异盒模型）、inherit（从父元素继承）

19、css3实现动画的两种方式

css3中实现动画的两种方式分别是：1、分别利用transition属性和transform属性来设置过渡和形状；2、利用动画属性animation设置动画效果。

1、transition实现渐变动画

​ transition实现动画的属性：

  1. property：填写需要变换的css属性
  2. duration：完成过渡效果需要的时间单位
  3. timing-function：完成效果的速度曲线
  4. delay：动画效果的延迟触发时间（ms）

timing-function的取值：

值属性描述
linear匀速运动
ease从慢到快再到慢
ease-in慢慢变快
ease-out慢慢变慢
ease-in-out先变快再变慢，渐隐渐现效果
  <style>
    .move{
      width: 200px;
      height: 200px;
      border: 5px solid yellow;
      background-color: green;
      transition-property:width,height,background-color,border;	//	要进行变换的属性
      transition-duration: 3000ms;	//要变换的时间
      transition-timing-function: ease;		//变换的速度
    }
    .move:hover{
      width: 400px;
      height: 400px;
      background-color: yellow;
      border: 5px solid green;
    }
  </style>
2、transform转变动画

transform一般是对元素进行旋转、缩放、倾斜、移动这四类操作。一般配合transition一起使用。

transform的相关属性：

  1. none：定义不进行任何转换，一般用于注销掉该变换
  2. transform-functions：
    1. （旋转）rotate：主要分为2D和3D旋转。2D旋转：rotate(angle)；3D旋转：围绕原地到(x，y，z)的直线旋转，rotate(x,y,z,angle)
    2. （缩放）scale：定义倍数缩放，大于1放大，小于1缩小。scaleX()仅水平缩放，scaleY()仅垂直缩放。
    3. （倾斜）skew：主要对元素样式倾斜。skew(x-angle，y-angle)，沿着x轴和y轴的2D倾斜转换。
    4. （移动）translate：移动元素。translate(x,y)，在x轴和y轴上移动元素。
  <style>
    .move{
      width: 200px;
      height: 200px;
      border: 5px solid yellow;
      background-color: green;
      transform: none;
      transition-property: transform;
      transition-duration: 2000ms;
      transition-timing-function: ease;
    }
    .move:hover{
      transform: scale(0.8) rotate(45deg) translate(300px,20px) skew(30deg);
      width: 200px;
      height: 200px;
      background-color: yellow;
      border: 5px solid green;
    }
  </style>
3、animation实现自定义动画

为了实现更灵活的动画效果，css3实现了自定义动画功能。

animation的属性：

  1. name：要绑定到选择器上的keyframe名称
  2. duration：完成该动画要花费的时间，毫秒
  3. timing-function：完成动画效果的速度曲线。
  4. delay：设置动画在开始之前的延迟
  5. iteration-count：设置动画执行的次数，infinite为无限次。
  6. direction：是否轮询反向播放动画。默认为normal，正常播放；alternate，轮流反向播放。
<style>
    .move{
      width: 200px;
      height: 200px;
      border: 5px solid yellow;
      background-color: green;
      transform: none;
    }
    .move:hover{
      animation-name: bounce;
      animation-duration: 3000ms;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      background-color: yellow;
      border: 5px solid green;
    }
    @keyframes bounce{
      0%{
        top:0px;
        width: 200px;
        height:200px;
      }
      50%{
        top:200px;
        width:500px;
        height: 500px;
      }
      100%{
        top: 0px;
        width: 200px;
        height: 200px;
      }
    }
  </style>

20、响应式布局（@media媒体查询）

媒体查询语法：

@media screen and|not|only (触发条件){

}

例：当max-width小于800px时执行响应式

@media screen and (max-width:800px){
	
}

21、web中的像素单位

元素单位：px、vw、vh、%，rem

字体单位：px、em、rem

vw：view width（可视宽度）

vh：view height（可视高度）

当前页面宽高分别被分为100份，1份就是1vw/vh

eg：屏幕像素为1920*960，那么1vw就是19.2，1vh就是9.6

em是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸

若父元素设置字体大小为16px，那么子元素的2em就是32px

22、rem与em的区别

rem的用法与em相同，但rem是相对于根元素进行计算。em是相对于当前元素或父元素的字体大小

rem可以用作设置元素的宽高。以html中font-size为基础计算。

em是相对于自身或父元素进行换算，当层级越深，换算就越复杂。rem是相对于根元素进行换算，避免了这个问题。

23、渐进增强与优雅降级

渐进增强：

先针对低版本浏览器进行构建页面，先满足基本的功能。然后再针对高版本浏览器进行效果、交互的改进，以达到更好的用户体验。

优雅降级：

一开始就是构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

优雅降级是从复杂的情况开始，然后试图减少用户体验的设置。渐进增强是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

五彩斑斓的黑。
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题-CSS篇
weixin_42547971的博客
05-13 150
CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color，visibility 不可继承的样式：border, padding,
前端面试-CSS
wanglu458512的博客
09-19 2606
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
HTML中父元素、子元素、后代元素和兄弟元素
qq_46241430的博客
08-01 7551
HTML文档中的元素有着明确的关系。 包含另一个元素的元素是被包含元素的父元素；反过来说，被包含元素是包含元素的子元素。 一个元素可以有多个子元素，但只能有一个父元素。 包含在其他元素中的元素也可能包含有别的元素，这些别的元素是其他元素的后代元素。 但这些后代元素并不是其他元素的子元素，子元素是关系最近的后代元素。 具有同一个父元素的几个元素互为兄弟元素。 <!DOCTYPE HTML> <html> <head> <title>.
display: block 属性影响flex布局
m0_65491952的博客
08-01 1050
align-content也是用于flex布局的，但是 所谓的对于单行的弹性盒模型无效，指的是该弹性盒模型使用了flex-wrap:nowrap属性。align-content生效与否取决于flex-wrap:nowrap属性，而非页面上看到的单行。这句话的意思很简单：就是，的默认值是nowrap。
2024年最新【CSS】CSS入门笔记第二弹~_css 父元素(1)，【一篇文章搞懂】
最新发布
2401_84616027的博客
05-14 386
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;属性值：none left right。
CSS 盒模型 标准盒模型 IE盒模型
qq_42816270的博客
01-31 1265
CSS 盒模型 标准盒模型 IE盒模型。在IE盒模型中，设置的 width 和 height，包含了 border , padding, content-box 的宽度和高度的和。在标准盒模型，设置的width和height，实际上设置的是 content box 的宽度和高度。 加上 padding 和 border 的 width 和 height 构成一个盒子的宽高。
【基础类】—CSS盒模型的全面认识
m0_37616866的博客
08-04 743
全面理解盒模型以及BFC
【CSS】标准盒模型和IE盒模型（box-sizing:border-box）
y_coder的博客
05-22 2149
换句话说，边框和内边距的尺寸会从元素的内容区域中减去，使得内容区域的尺寸保持不变。例如，如果一个元素的宽度设置为200px，内边距设置为10px，边框设置为5px，那么元素的内容区域的宽度将为200px - 2 * 10px - 2 * 5px = 170px。content-box 是 CSS 盒子模型的默认值，因此在不指定盒子模型属性时，浏览器会默认使用 content-box 来计算盒子的宽度和高度。在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
「资深前端工程师总结」前端面试知识点大全 —CSS 篇
06-18
前端面试知识点大全 —CSS 篇 作为一名资深的前端工程师，了解 CSS 的基本概念和应用是非常重要的。在这篇文章中，我们将总结一些常见的 CSS 知识点，帮助大家更好地理解和应用 CSS。 display 属性 在 CSS 中，...
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
前端面试宝典（前端知识）
12-23
【前端面试宝典】是为准备前端面试的开发者量身打造的一份综合指南，涵盖了前端领域的核心知识。本文将深入探讨其中的一些关键知识点。 1. **HTML** - **HTML5特性**：包括离线存储（AppCache）、拖放功能、媒体...
前端面试知识点总结与归纳
07-18
CSS预编译如Less和Sass则帮助开发者编写更高级的样式语言。模块化开发（如CommonJS、ES6模块）和组件化（如React、Vue）使得代码组织更加清晰，易于维护和复用。 在前端开发中，使用本地服务器和Mock服务可以加速...
微信小程序：属性display详细解析
热门推荐
wuwuFQ的博客
09-27 1万+
display：block 小程序的3个视图容器（view，srcoll-view，swiper）默认值均为display:block block表示[块内]容器模式，总是使用新行开始显示 display：flex flex-direction属性，有下面4个可选值，默认为row row：水平排列 （默认） row-reverse：水平翻转排列 column：竖直排列 column-rev...
标准盒模型和IE盒模型
GJM_Memory的博客
07-21 194
可以通过box-sizing设置盒模型（默认值content-box标准盒模型）设置的盒子宽度=border+padding+内容宽度。设置的盒子宽度=内容宽度。
flex布局详细总结（父元素篇）
weixin_44148134的博客
07-19 1184
flex布局也就是弹性盒模型，最初我们使用css来对网页进行布局时，主要用到float和position两个属性，要经常考虑父元素坍塌，脱离文档流，BFC等问题。 当我接触到flex布局后，基本上就不用浮动来布局了，flex布局很简单且能很好的达到想要的效果。当然如果考虑到兼容问题，或者一些项目需要细致的布局要求还是浮动比较好解决问题。 一、 兼容性 首先我们来看一下，flex的兼容性。 这张图中我们可以看到，只要在ie10以上就能使用flex布局。 也推荐大家一个网站，可以查看各种属性的兼容性——can
【CSS】标准盒模型和IE盒模型
weixin_46368797的博客
03-18 154
标准盒模型、IE盒模型
选择器
深度
02-23 157
参考 黑马教程 目录 1. 元素选择器 2. 类选择器 3. ID选择器 4. 群组选择器 5. 通用选择器 6. 标签之间的关系 7. 后代选择器 8. 伪类和伪元素 9. 属性选择器 10. 子元素选择器 11. 兄弟选择器 12. 否定伪类 13. 继承 14. 选择器的权重 选择器：会告诉浏览器：网页上的哪些元素需要设置哪些样式 1. 元素选择器 ...
display: block和display: flex一块用出现的问题
随缘记录
02-18 1691
但是当我们使用的布局为flex布局，你就会发现设置display: block后，确实显示出来了，但是你的flex布局也失效了，原因就是display属性同时只会生效一个，解决方法：使用none隐藏元素后，使用display: flex让它显示，flex元素默认就是block元素。最常用的方法就是display: none;隐藏，然后再display: block显示。
前端面试精简篇前端面试精简篇
06-06
这篇内容是关于前端面试中常见的CSS相关知识点的精简版总结，主要涵盖了布局技巧和元素居中方法。 一、CSS相关布局方案： 1.1 左边定宽，右边自适应： - 方案1：使用`float`属性将左侧元素浮动，并通过`margin-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值