css面试题

古希腊掌管bug的神
153 阅读2分钟

面试题

css必会的面试题

px、em、rem、vw、vh的区别

  • 基本概念

    • px

      • pixel像素的缩写

    • em

      • 相对单位，1em等于当前元素的1font-size大小

    • rem

      • 1rem等于html的1fontsize大小

    • vw和vh

      • 1vw是视口宽度的1%，1vh是视口高度的1%

什么是视口

  • 视口不等于屏幕大小，视口是浏览器去掉头尾

vmax 和 vmin

  • vmax

    • vh和vw中较大的值

  • vmin

    • vh和vw中最小的值

css选择器优先级

  • 常用的css选择器

    • id
    • class
    • 通配符
    • 伪类
    • 通配

  • 选择器优先级计算方式

    • important!>行间样式>id>class>标签>通配 注意：继承的优先级永远没有直接给的优先级高

css哪些样式是可以继承的

  • 文字字体

    • font
    • font-family
    • font-size
    • font-style
    • font-weight

  • 文字修饰

    • color

    • text-indent

    • text-align

    • line-height

      • line-height：200px 直接继承
      • line-height: 1.5 根据自己的字体大小计算
      • line-height:200% 根据父级的字体大小计算

    • word-spacing//指定字段之间的间距大小

    • letter-spacing 字符间距

BFC的理解

  • 什么是BFC

    • BFC 是 Block Formatting Context （块级格式上下文）的缩写 BFC是一个独立的空间，里面子元素的渲染不影响外面的布局

  • BFC作用

    • 解决margin塌陷
    • 清除浮动

  • 如何触发BFC

	- overflow:hidden
	- display:inline-block/table-cell/flex
	- position:absolute/fixed

盒子模型

  • 什么是盒子模型

    • 盒子模型就是元素实际的大小

  • 盒子模型的计算方式

    • 盒子模型=width/hright + padding+border
      注意：没有margin

  • box-sizing

    • 当box-sizing的值为border-box时会改变盒子的计算方式
    • 盒子模型= 盒子的内容宽高

  • offsetWidth

    • js中获取盒子模型的方式是：obj.offsetWidth/offsetHight

margin设置负值会有什么影响

  • margin-left 负值，元素自身向左移动
  • margin-top 负值，元素向上移动
  • margin-right 负值，右边的元素向左移动
  • margin-bottom 负值，下边的元素向上移动

如何实现圣杯布局

<!DOCTYPE html>
<html>
 <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" />
  <title>@说人话的前端 - bilibili</title>
 </head>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .container {
   overflow: hidden;
   padding-left: 200px;
   padding-right: 150px;
   background-color: #ccc;
  }
  .item {
   float: left;
   color: #fff;
   font-size: 20px;
  }
  .content {
   width: 100%;
   height: 200px;
   background-color: green;
  }
  .left-item {
   width: 200px;
   margin-left: -100%;
   position: relative;
   right: 200px;
   background-color: red;
  }
  .right-item {
   width: 150px;
   margin-right: -150px;
   background-color: blue;
  }
 </style>
 <body>
  <div class="container">
   <div class="content item">@说人话的前端-bilibili</div>
   <div class="left-item item">left-item</div>
   <div class="right-item item">right-item</div>
  </div>
 </body>
</html>

  • 圣杯布局：两边固定中间自适应

  • 难点

    • margin-left:-100%; 100% 是父级宽度的100%
    • margin-right:150px 其他元素当他宽度少了150px

什么是双飞翼布局

<!DOCTYPE html>
<html>
 <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" />
  <title>@说人话的前端 - bilibili</title>
 </head>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .item {
   float: left;
   color: #fff;
   font-size: 20px;
  }
  .container {
   width: 100%;
   background-color: #ccc;
  }
  .content {
   margin-left: 200px;
   margin-right: 150px;
   height: 200px;
   background-color: green;
  }
  .left-item {
   width: 200px;
   margin-left: -100%;
   background-color: red;
  }
  .right-item {
   width: 150px;
   margin-left: -150px;
   background-color: blue;
  }
 </style>
 <body>
  <div class="container item">
   <div class="content">@说人话的前端-bilibili</div>
  </div>

  <div class="left-item item">left-item</div>
  <div class="right-item item">right-item</div>
 </body>
</html>
  • 左右宽度固定，中间自适应 中间内容优先加载

如何清浮动

  • 清浮动的方法

    • 父级加 overflow:hidden
    • 父级设置 clearfix
    • 父级也浮动

  • 手写clearfix

  .clearfix:after {
   content: "";
   display: block;
   clear: both;
  }

常见的水平居中

  1. position+margin负值的方法(固定宽高)
  2. position+margin:auto(固定宽高)
  3. display:table-cell + vertical-align:middle(固定宽高)
  4. positon + transform(不需要固定宽高)
  5. flex (不需要固定宽高)
<!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">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /*垂直居中
        1.position + margin 需要宽高 
        2.position + margin :auto 需要宽高
        3.display:table-cell +  vertical-align: middle + margin:auto ;需要有宽度
        4.position+transfrom 不需要固定宽高
        5.flex布局 不需要固定宽高
        */
        .content{
            width: 200px;
            height: 300px;
            background-color: #ccc;
           position: absolute;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">测试文字</div>
    </div>
</body>
</html>

XMind - Trial Version

avatar
文章
阅读
粉丝