前端面试准备学习记录 — CSS篇

2.1、CSS基础

  1. 选择器:id > 类 = 属性 = 伪类 > 标签

    优先级:内联样式 > id > 类、伪类、属性 > 标签

    !important优先级最高

  2. block:独占一行;inline:width、height属性无效,水平方向的margin和padding有效;inline—block:将对象设置为inline对象,对象内容作为block对象呈现,之后的内联对象会被排列在同一行内

  3. 隐藏元素的方法:

    display: none;  不占位置,不响应绑定事件
    position: absolute;  不占位置,不响应事件,移出可视区域
    visibility: hidden;  占据位置,不响应事件
    opacity: 0;  占据位置,响应事件(唯一可以响应事件的)
    transform: scale(0,0);  占位置,不响应绑定事件,将元素缩放为0
    clip-path: circle(10%);  占位置,,不响应事件,元素剪切
    

    display: none与visibility: hidden的区别:

    渲染树:浏览器获取HTML文件进行解析后形成DOM Tree,同时解析CSS形成Style Rules,两者合成为Render Tree。。。display: none 的元素会出现在 DOM树 中,但不会出现在 render 树中

    1. 前者在渲染树中消失,不占据任何空间;后者不会让其在渲染树中消失,占据相应空间
    2. 子孙节点随父节点消失;后者可以通过设置visibility: visible;使子孙节点显示
    3. 修改常规文档流中的display会造成文档重排;但是后者只会使本元素进行重绘
    4. 使用读屏器,前者不会被读取,后者会
  4. link与@import的区别

    • link:XHTML标签,除加载css还可以加载RSS其他业务;引入CSS时,页面载入同时加载;无兼容问题;使用JS控制DOM改变样式
    • @import:只能加载css;页面完全再入后再加载;
  5. transition和animation的区别

    • transition:过度属性,需要触发事件,设置一个开始关键帧,一个结束关键帧
    • animation:动画属性,不需要触发事件,可以循环,可以设置多个关键帧
  6. 伪类与伪元素

    前者:将特殊的效果加到特定的容器上,在已有的元素上添加类别,不会产生新的元素;后者在内容元素前后插入额外的元素或者样式,不在文档中,但在外部可见

    伪类通过在元素选择器上加入伪类改变元素的状态,伪元素通过对元素操作进行元素的改变

  7. 盒模型

    分为两种:标准盒模型、IE盒模型,前者的width和height属性的范围只包含了content,IE的width和height属性包含了border、padding和content;都是由四个部分组成:margin、border、padding、content

    通过设置box-sizing属性可以改变元素的盒模型
    box-sizing:content-box  表示标准盒模型(默认值)
    box-sizing:border-box  表示IE盒模型(怪异盒模型)
    
  8. Css3新特性:新增各种Css选择器(:not(.input))、圆角、多列布局、阴影反射、线性渐变、旋转等

  9. 常见图片格式以及使用场景

    1. BMP:无损的、支持索引色和点阵色的点阵图,通常体积较大
    2. DIF:无损的、采用索引色的点阵图,文件小
    3. JPEG:有损的、采用直接色的点阵图
    4. PNG-8:无损的、采用索引色的点阵图
    5. PNG-24:无损的、采用直接色的点阵图
    6. SVG:无损的矢量图
    7. WebP
  10. CSS Sprites(精灵图)

    优点:将一个页面中所用到的所有图片都整合到一张大图中去;可以减少网页HTTP请求、减少图片的字节

    缺点:开发麻烦、需要测量位置;维护麻烦

  11. 物理像素、逻辑像素、像素密度

    物理像素:即为屏幕上的实际像素点

    逻辑像素:根据不同的显示器尺寸而不同

    像素密度:密度越高越清晰;像素密度(dpi)= 分辨率宽度像素数 / 屏幕宽度英寸数

  12. margin与padding的使用场景:

    margin:需要在border外侧添加空白,且空白处不需要背景色

    padding:需要在border内侧添加空白,且空白处需要背景色

  13. css优化与提高性能的方法

    加载性能:压缩;单一样式;减少使用@import,建议使用link

    选择器性能:减少通配符*的使用;减少后代选择器的使用;避免对继承过来的属性重复指定规则

    渲染性能:谨慎使用浮动,定位;减少页面重拍,重绘;

    可维护性:样式与内容分离,将cssdiamante定义到外部css中

  14. Sass、Less

    Css的预处理器,实现多重继承,结构清晰,便于扩展

  15. 单行、多行文本溢出隐藏

    // 单行文本溢出
    overflow:hidden  //溢出隐藏
    text-overflow:ellipsis  //溢出用省略号表示
    white-space:nowarp  //规定段落中的文本不进行换行
    
    // 多行文本溢出
    overflow:hidden  //溢出隐藏
    text-overflow:ellipsis  //溢出用省略号表示
    dispaly:-webkit-box  //作为弹性伸缩盒子模型显示
    -webkit-box-orient:vertical  //设置伸缩盒子的子元素排列方式:重上到下垂直排列
    -webkit-line-clamp:3  // 显示的行数
    
  16. 媒体查询

    可以针对不同的屏幕尺寸大小,设计不同的样式,特别是需要设计响应式的页面

  17. CSS工程化

    解决了CSS代码的组织、拆分、处理、打包以及维护的问题,常见的有使用Sass、Less、PostCss、Webpack loader等,Webpack是一个只能处理JS代码的模块化打包工具,在loader的帮助下,可以处理CSS

2.2、页面基础

  1. 常见单位:px、%、em、rem、vw/vh

    vw:相对于视窗的宽度,总共为100vw;vh:相对于视窗的高度,总共为100vh;vmin/vmax:vw和vh中较小/大值

    em、rem的区别:em是相对于其父元素来设置字体大小;rem是相对于根元素,只需要在根元素确定一个参考值

  2. 两栏布局

    一般为左边一栏宽度固定,右边一栏宽度自适应

  3. 三栏布局

    一般为左右两栏宽度固定,中间自适应布局

  4. 水平垂直居中的实现

    1. 利用绝对定位,然后再用translate来调整元素

      <body>
          <div class="parent">
              <div class="child">
                  
              </div>
          </div>
      </body>
      
      <style>
          .parent{
              position: relative;
              width: 200px;
              height: 200px;
              background-color: bisque;
          }
          .child{
              width: 100px;
              height: 100px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%);
              background-color: aqua;
          }
      </style>
      
    2. 利用绝对定位,上下左右都设置为0,并且将margin设置为auto,盒子有宽高适用

      <body>
          <div class="parent">
              <div class="child">
      
              </div>
          </div>
      </body>
      
      <style>
          .parent {
              position: relative;
              width: 200px;
              height: 200px;
              background-color: bisque;
          }
      
          .child {
              width: 100px;
              height: 100px;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              background-color: aqua;
          }
      </style>
      
    3. flex布局

      .parent {
          display: flex;
          justify-content: center;
          align-items: center;
      }
      
  5. 根据设计稿进行移动端适配

    适配不同像素密度,使用css媒体查询,选择不同的图片,以保证图片不会失帧;适配不同的屏幕大小,使用rem,em,vw,vh等相对单位

  6. flex布局

    也叫弹性盒布局,使用后,子元素的float,clear和vertical-aligns属性将失效

    • 容器的六个属性:
      1. flex-direction:主轴方向
      2. flex-warp:是否换行
      3. flex-flow:flex-direction和flex-warp的简写形式
      4. justify-content:定义主轴对齐方式
      5. align-items:定义了交叉轴上如何对齐
      6. align-content:定义多跟轴线的对齐方式
    • 项目上的属性:
      1. order:定义项目排列顺序,数值越小排列越靠前,默认为0
      2. flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
      3. flex-shrink:定义项目缩小比例,默认为1,即如果空间不足,项目将缩小
      4. flex-basis:定义了分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间,默认值为auto,即项目本来的大小
      5. align-self:允许单个项目与其他项目有不一样的对齐方式,可以覆盖align-item属性
  7. 响应式设计概念及基本原理

    通过媒体查询(@media)查询检测不同的设备屏幕尺寸做处理

2.3、定位与浮动

  1. 浮动:容器不设高度,子元素浮动溢出容器外边影响布局,这种现象称为浮动;脱离文档流、不占据空间,浮动元素只影响内联元素布局,不影响块级元素

    引起的问题:若浮动的元素不是第一个元素,则该元素之前的元素也要浮动,否则会影响页面的显示结构

    清除浮动:父级div定义height;最后一个浮动元素后加空的div标签,并添加clear:both样式;包含浮动元素的父级标签添加overflow:hidden或overflow:auto;使用伪元素::after

    clear清除浮动原理:元素盒子的边不能和前面的浮动元素相邻,对元素设置clear属性是为了避免浮动元素对该元素的影响,而不是清除掉浮动

    一般使用伪元素的方式清除浮动:

    .clear::after{
    	content:'';
    	dispaly:block;
    	clear:both;
    }
    

    clear属性只有块级元素才有效,而::after等伪元素默认都是内联水平,这就是借助伪元素清除浮动影响时需要设置display属性值的原因

  2. BFC

    一个独立的布局环境,类似于一个容器,在该容器中的物品摆放不会影响其他环境中的物品

    创建条件:根元素(body);元素设置浮动(float除none以外的值);元素设置绝对定位(absolute、fixed);display值为:inline-block、table-cell、table-caption、flex等;overflow值为:hidden、auto、scroll

  3. margin重叠问题

    问题描述:两个块级元素的上外边距和下外边距可能会合并为一个外边距,其大小会取其中外边距值大的那个,这种行为就是外边距折叠,脱离文档流的元素不会折叠,重叠只会出现在垂直方向

    解决办法:

    • 兄弟之间折叠:底部元素变为行内盒子:dispaly:inline-block;底部设置浮动:float;底部元素的position:absolute/fixed
    • 父子之间重叠:父元素overflow:hidden;子元素变为:dispaly:inline-block;父元素添加透明边框:border:1px solid transparent;子元素加入浮动属性或定位
  4. position的属性

    1. absolute:相对于static定位以外的一个父元素进行定位。浏览器会查找设置absolute元素的父元素,如果找到了一个设置了relative、absolute、fixed的元素会以该元素为基准,没找到就会以浏览器边界为基准
    2. relative:相对于原来位置进行定位。元素的定位永远相对于元素自身位置,和其他元素无关,也不会影响其他元素
    3. fixed:相对于屏幕视口的位置指定元素的位置。元素定位相对于window(或者iframe),与其他元素无关,但具有破坏性,会导致其他元素位置的改变
    4. static:默认值,没有定位
    5. sticky:粘性定位,设定一个阈值,指top、left、bottom、right其中之一,粘性定位生效,否则与相对定位相同
    6. inherit:规定从父元素继承position属性的值

2.4、场景应用

1、三角形

主要用到border属性,总体原则就是通过上下左右边框来控制三角形的方向,用边框的宽度比来控制三角形的角度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>

<style>
    div{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orange blue red green;
    }
</style>

</html>

2、扇形

思路与三角形基本一致,只不过多了一个圆角样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>

<style>
    div{
        border: 100px solid transparent;
        width: 0;
        height: 0;
        border-radius: 100px;
        border-top-color: red;
    }
</style>

</html>

3、0.5px的线

利用transform:scale()的方式,用来定义元素的2D缩放转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>

<style>
    div{
        border: 1px solid #000000;
        transform: scale(.5,.5);
    }
</style>

</html>

4、解决1px问题

指的是在一些Retina屏幕的机型上,移动端页面的1px会变得很粗,呈现出不止1px的效果。CSS中的1px并不能和移动设备上的1px画等号。他们之间的比例关系有一个专门的属性来描述。

window.devicePixelRatio = 设备的物理像素 / CSS像素(接下来以2为例)

解决思路:

  1. 直接写0.5px
  2. 伪元素先放大后缩小
  3. viewport缩放来解决(对meta标签中几个关键属性下手)

你可能感兴趣的:(前端,学习,css)