【小白学系列】面试css

C2X
148 阅读4分钟

六月初裸辞，想着大城市的工作机会多一些，但是，没料到疫情整的市场这么不堪。这一个月的面试加背面试题搞的是焦头烂额，加上自身底子不是特别好，越来越焦虑。SO，想着慢慢整理整理知识点，想着在掘金里写，也是想着对自己的监督。

以后有啥不对的地方，各些掘友大方指出。

CSS知识点总结

1.盒模型

页面是由一个个盒模型组成的，每个HTML元素都可以叫盒模型，盒模型由内而外包括：边距(margin)，边框(border),填充(padding),内容(content)。它在页面占据的实际宽度是margin + border + padding + content的宽度相加。

盒模型分为标准盒模型和IE盒模型

  • 标准盒模型：盒模型的大小是content的大小(box-sizing:content-box|border-box|inherit)
  • 盒模型的大小是content+border+padding的大小

2.选择器？权重

选择器：ID选择器、类选择器、元素选择器、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、属性选择器和伪类选择器

优先级(就近原则)：!important > id > class > el !important比内联优先级高

3.伪类和伪元素

伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

  • 伪类用于当已有元素处于某个状态时，为其添加应有的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以称其为伪类。
  • 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一个文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树种。

4.元素水平垂直居中

  1. display:table-cell

    组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中。

  2. transform:translate(-50%,-50%)

    利用CSS3新特性，在不知道自身宽高的情况下，可以利用它水平垂直居中，当使用top:50%,left:50% 是以左上角为原点，故不处于中心位置。translate(-50%,-50%)作用：往上、往左移动自身长度的50%，以使其居于中心位置。

  3. 利用弹性布局

    display:flex;justify-content:center;align-items:center;

5.CSS3新特性

  1. 新增选择器(:last-child/:first-child)
  2. 背景和边框(background-size/background-origin/border-radius)
  3. 文本效果(text-shadow/word-break)
  4. 2D/3D转换
  5. 过渡效果transition，动画animation
  6. 变形transform：旋转(rotate)、移动(translate)、缩放(scale)、扭曲(skew)等
  7. 媒体查询

6.块级格式化上下文

定义：Block Formatting Contexts(块级格式化上下文)，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。通俗来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发BFC特性：body根元素；浮动元素(float除none以外的值)；绝对定位元素；display为inline-block、table-cell、flex；overflow除了visible以外的hidden、auto、scroll。

7.清除浮动

原因：父元素在没有设置高度的情况下，其子元素浮动后，脱离文档流，则父元素处于塌陷状态；因为子元素浮动后是不占据父元素的位置空间的。

如何清除
  1. clear清除浮动(添加空div方法)，在浮动元素下方添加空div，并给该元素写css样式(clear:both;height:0;overflow:hidden;)
  2. 给浮动元素父元素添加高度
  3. 父级元素同时浮动
  4. 父级设置inline-block，其margin:0 auto失效
  5. 利用br标签的clear属性
  6. 给父元素添加overflow:hidden清除浮动
  7. after伪元素清除浮动

8.CSS3实现0.5px

使用伪元素 + CSS3新特性

.div li:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #bbb;
    -webkit-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
avatar
文章
阅读
粉丝