前端（一）CSS篇

最新推荐文章于 2024-03-14 07:45:00 发布

barnett_y

最新推荐文章于 2024-03-14 07:45:00 发布

阅读量394

点赞数

分类专栏：【前端面试点滴知识】【HTML5+CSS3点滴知识】

【前端面试点滴知识】同时被 2 个专栏收录

299 篇文章 39 订阅

订阅专栏

【HTML5+CSS3点滴知识】

135 篇文章 10 订阅

订阅专栏

CSS篇

1、盒模型

由里向外content,padding,border,margin
标准模型的宽高只是内容（content）的宽高：box-sizing：content-box
IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高：box-sizing：border-box

2、BFC（块级格式化上下文）

BFC定义:

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
复制代码

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。
属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border
box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC的作用及原理

www.cnblogs.com/lhb25/p/ins…

3、Flex 弹性盒布局

CSS3弹性盒布局的理解：

web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局。当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

容器的属性

主轴的方向

flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

复制代码

换行属性

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

复制代码

主轴对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

复制代码

交叉轴对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

复制代码

项目的属性

排列顺序，数值越小，排列越靠前，默认为0。

order: <integer>;
复制代码

项目的放大比例,默认为0，即如果存在剩余空间，也不放大。

flex-grow: <number>; /* default 0 */
复制代码

项目的缩小比例,默认为1，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */
复制代码

项目占据的空间,默认值为auto，即项目的本来大小

flex-basis: <length> | auto; /* default auto */
复制代码

简写：flex-grow, flex-shrink 和 flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
复制代码

独立的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码

4、水平垂直居中

贴上一位腾讯大佬总结的文章

16种方法实现水平居中垂直居中

按照固定宽高和不固定宽高分类各说几个方法就可以了。

4.1、CSS居中布局有哪些，适用于什么场景，举例说明？

一、CSS居中：margin设为auto
复制代码

做法：把要居中的元素的margin-left和margin-right都设为auto
场景：只能进行水平的居中，且对浮动元素或绝对定位元素无效。

二、CSS居中：使用 text-align:center
复制代码

场景：只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。

三、CSS居中：使用line-height让单行的文字垂直居中
复制代码

做法：把文字的line-height设为文字父容器的高度
场景：适用于只有一行文字的情况。

四、CSS居中：使用表格
复制代码

做法：td/th元素设置align="center"、valign="middle"即可处理单元格里面内容的水平和垂直居中问题
场景：必须是table

五、CSS居中：使用display:table-cell来居中
复制代码

做法：通过display:table-cell 模拟表格单元格，这样就可以利用表格那很方便的居中特性了。
场景：IE6、IE7都无效。

六、CSS居中：使用绝对定位进行居中
复制代码

场景：只适用于宽度或高度已知的元素。
原理：通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

七、CSS居中：使用绝对定位进行居中
复制代码

场景：只适用于宽度或高度已知的元素。且只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
原理：这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移。

八、CSS居中：使用浮动配合相对定位来进行水平居中
复制代码

场景：不用知道要居中的元素的宽度，缺点是需要一个多余的元素来包裹要居中的元素。
原理：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

5、css布局

4.1、三栏布局，高度已知，左右两栏固定，中间自适应的三栏布局有几种实现方式，各自的优缺点是什么？

/* 浮动布局 */
  .layout.float .left{
    float:left;
    width:300px;
    background: red;
  }
  .layout.float .center{
    background: yellow;
  }
  .layout.float .right{
    float:right;
    width:300px;
    background: blue;
  }
 /* 绝对定位布局 */
 .layout.absolute .left-center-right>div{
  position: absolute;
 }
.layout.absolute .left{
  left:0;
  width: 300px;
  background: red;
}
.layout.absolute .center{
  left: 300px;
  right: 300px;
  background: yellow;
}
.layout.absolute .right{
  right:0;
  width: 300px;
  background: blue;
}
 /* flex布局 */
  .layout.flexbox{
      margin-top: 110px;
    }
    .layout.flexbox .left-center-right{
      display: flex;
    }
    .layout.flexbox .left{
      width: 300px;
      background: red;
    }
    .layout.flexbox .center{
      flex:1;
      background: yellow;
    }
    .layout.flexbox .right{
      width: 300px;
      background: blue;
    }

复制代码

5.2、高度已知，两栏布局，左边固定，右边自适应

基本思路和三栏布局一样

5.3、左右等高布局

table 布局就登场了

section {
    width:100%;
  display: table;
}
article  {
    display: table-cell;
}
.left {
    height: 100px;
    background: red;
}
.right {
    background: black;
}

复制代码

6、如何实现一个最大的正方形

用 padding-bottom 撑开边距就可以了。

 section {
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

复制代码

7、如何实现一个三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
复制代码

8、如何实现一个扇形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扇形</title>
  <style>
    .sector {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }
  </style>
</head>
<body>
  <div class="sector"></div>
</body>

</html>


复制代码

9、css解析顺序

css 选择器匹配元素是逆向解析
复制代码

因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个div，往下再去匹配选择器中的第一个div，回溯若干次才能确定匹配与否，效率很低。
逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。

10、css 如何开启 gpu 加速

请参考网易云社区的文章 CSS动画的性能分析和浏览器GPU加速

11、清除浮动

常用的一般为三种 .clearfix, clear:both, overflow:hidden;

比较好是 .clearfix,伪元素万金油版本...后两者有局限性..等会再扯

    .clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
    
    
<!--
为毛没有 zoom ,_height 这些...IE6,7这类需要 csshack 不再我们考虑之内了
.clearfix 还有另外一种写法...
-->

.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
	overflow:hidden;
}
.clearfix{
    zoom:1;
}

<!--
用display:table 是为了避免外边距margin重叠导致的margin塌陷,
内部元素默认会成为 table-cell 单元格的形式
-->
复制代码

clear:both:若是用在同一个容器内相邻元素上,那是贼好的...有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷

overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷

12、css动画

CSS 中transition和animate有何区别? animate 如何停留在最后一帧?

transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)
animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态; 过渡的开销比动效小,前者一般用于交互居多,后者用于活动页居多;
至于如何让animate停留在最后一帧也好办,就它自身参数的一个值就可以了

animation-fill-mode: forwards;  
<!--backwards则停留在首帧,both是轮流-->

复制代码

动画例子


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Box-sizing</title>
  <style>
    .test {
      box-sizing: border-box;
      border: 5px solid #f00;
      padding: 5px;
      width: 100px;
      height: 100px;
      position:absolute;
      /*
      简写的姿势排序
      @keyframes name : 动画名
      duration 持续时间
      timing-function 动画频率
      delay 延迟多久开始
      iteration-count 循环次数
      direction 动画方式,往返还是正向
      fill-mode  一般用来处理停留在某一帧
      play-state running 开始,paused 暂停 ....
       更多的参数去查文档吧..我就不一一列举了
      */
      animation: moveChangeColor  ease-in 2.5s 1  forwards running;
    }

    @keyframes moveChangeColor {
       from {
         top:0%;
         left:5%;
         background-color:#f00
       }
       to{
         top:0%;
         left:50%;
         background-color:#ced;
       }
    }

  </style>
</head>

<body>
  <div class="test"></div>
</body>

</html>

复制代码

13、css选择器

通用选择器：*
类别选择器：.class
id选择器：#id
标签选择器：p
后代选择器：div p
子选择器：div > p
群组选择器：div , p
相邻同胞选择器：div +p
伪类选择器：:link :visited :active :hover :focus :first-child
伪元素选择器：:first-letter :first-line:before :after :lang(language)
属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

14、CSS 有哪些样式可以给子元素继承

可继承的:font-size,font-weight,line-height,color,cursor等
不可继承的一般是会改变盒子模型的:display,margin、border、padding、height等

15、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内: input,span,a,img以及display:inline的元素
块级: p,div,header,footer,aside,article,ul以及display:block这些
void: br,hr

16、position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

17、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：

content-box（默认）

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right
复制代码

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom
复制代码

padding-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom
复制代码

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
复制代码

border-box

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)
复制代码

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
复制代码

18、css3的新特性transform,transition,animation

一、transform

css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性

transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。
复制代码

旋转：transform:rotate(-45deg);
缩放：transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)
移动：transform:translate(1px,2px).使用其他单位：em,%也是可以的。
倾斜：transform:skew(45deg,0);

当然，以上多个tranform的属性可以结合使用；

transform-origin:一般来说，当对一个元素使用transform时，web浏览器就会以元素的中心点作为变黄点。该属性可以指定变换点，可以提供关键字，以pixel为单位的绝对值，以及em,%等等。

二、transition

transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。
复制代码

为了使transition生效，需要做这么几件事：

【1】两个样式：一个是最初的样式，一个是最终的样式，transition可以实现这两种演示见的转换过程。

【2】transition属性:
复制代码

transition使用4个属性控制：

要以动画展示哪些属性（transition-property）:可以使用all关键字
动画过程有多久(transition--duration),
控制动画速度变化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等），
动画是否延迟执行（transition-delay）等

可以使用快捷方法来定义上述属性：

.navButton{
   color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}

.navButton:hover{
   color:red;
   background-color:#ccc;  
}

复制代码

一般来说，将transition属性应用到最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式，再返回最初样式的变化过程。

不过，在使用css下拉菜单的时候，有一个技巧，为了防止鼠标离开菜单的时候，菜单很快消失，可以利用transition-delay让元素很快显示，但是慢慢消失，做法是，在初始样式中添加如下代码：

transition-dealy:.5s
在：hover中不要添加延迟：

transition-delay:0
复制代码

【3】触发器：常用的触发器是几个伪类，:active,:target,:focus，也可以是前后两个类的改变。
复制代码

三、animation

transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。

transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。

创建动画有两个步骤：

1.定义动画：主要指定义关键帧
复制代码

@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}
复制代码

2.将动画应用到元素上
复制代码

可以使用一下css属性定义动画：


.nav-button{
    animation-name:fadeIn;
    animation-duration:1s;
    animation-timing-function:ease-out,
    animation-delay:.5s;
    animation-iteration-count:infinite;  
    animation-direction:alternate
}

复制代码

animation-name:和当初定义的动画名称相对应；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间长度；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字：infinate(无限运行)；
animation-direction:alternate; - alternate(奇数次超前运行，偶数次后退运行).如希望动画从黄色到蓝色，并且再重复一次，使用alternate关键字就能够防止从蓝色突变为黄色
animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。

19、HTML5增加哪些新特性？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

20、浏览器渲染过程是怎样的？

HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
在布局阶段，把DOM Tree和CSS Rule Tree经过整合生成Render Tree
元素按照算出来的规则，把元素放到它该出现的位置，通过显卡画到屏幕上

21、重排（Reflow）是什么？

定义：DOM中各个元素都有自己的盒子模型，需要浏览器根据样式进行计算，并根据计算结果将元素放到特定位置，这就是Reflow

触发Reflow的条件：
复制代码

增、删、改、移DOM
修改CSS样式
Resize窗口
页面滚动
修改网页的默认字体

22、重绘（Repaint）是什么？

定义：当各种盒子的位置、大小以及其他属性改变时，浏览器需要把这些元素都按照各自的特性绘制一遍，这个过程称为Repaint。

触发Repaint的条件：
复制代码

DOM改动
CSS改动

23、如何减少重绘、避免重排？

本质上，就是合并修改。具体的措施有：

DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的所有子孙节点，所以，将需要变动的DOM节点先汇总到DocumentFragment，然后一次性插入，可以减少DOM操作的次数。
CSS层面：操作多个样式时，可以先汇总到一个类中，然后一次性修改

作者：七羽say
链接：https://juejin.im/post/5cdd2afe518825019a36bff3
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端（一）CSS篇

CSS篇1、盒模型由里向外content,padding,border,margin 标准模型的宽高只是内容（content）的宽高：box-sizing：content-box IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高：box-sizing：border-box 2、BFC（块级格式化上下文）BFC定义...
复制链接

扫一扫