css面试题

文学少女圆
159 阅读2分钟

选择器优先级

选择器的权重： 内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级

如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！

1.左侧固定右侧自适应 :BFC规则


<!--怎么实现左侧固定右侧自适应 :方法三：BFC规则
左侧固定区域浮动+宽度，右侧自适应区域（非浮动元素）设置overflow：hidden。
-->
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .all_left{
    background-color:#0f0;
    width: 200px;
    height: 500px;
    float: left; /*  固定区域浮动*/
  }
  .all_right{
    background-color: #00f;
    height: 300px;
    overflow: hidden; /*  BFC规则*/
  }
  .bottom{
    background-color: palegoldenrod;
    clear: both;
  }
</style>
<body>
<div class="all">
  <div class="all_left">固定区域</div>
  <div class="all_right">自适应区域</div>
</div>
<div class="bottom">测试布局</div>
</body>

2 布局

流体布局

<style>
  *{margin: 0;padding: 0;}
  body{min-width: 700px;}
.left{
  float: left;
  height: 200px;
  width: 200px;
  background-color: antiquewhite;
}
  .right{
    float: right;
    width: 300px;
    height: 200px;
    background-color: palegreen;
  }
  .main{
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background-color: palevioletred;
  }
</style>
<body>
<div class="container">
  <div class="left"> </div>
  <div class="right"> </div>
  <div class="main"> </div>
</div>
</body>

BFC 三栏布局

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。 缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

<style>
  *{
    padding: 0;
    margin: 0;
  }
  body{ min-width: 700px}
  .left{
    float: left;
    height: 200px;
    width: 100px;
    min-width: 20px;
    background-color: palevioletred;
  }
  .right{
    float: right;
    height: 200px;
    width: 200px;
    /*margin-left: 20px;*/
    background-color: palegreen;
  }
  .main{
    height: 200px;
    background-color: antiquewhite;
    overflow: hidden;
  }
</style>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>
</body>

双飞翼布局

<style>
  *{padding: 0;margin: 0}
  body{min-width: 700px}
  .contain{
    float: left;
    width: 100%;
  }
  .main{
    height: 200px;
    margin-left: 110px;
    margin-right: 210px;
    background-color: palegreen;
  }
  .left{
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    /*使用负margin上移一个元素，所有跟随的元素都会被上移。*/
    background-color: antiquewhite;
  }
  .right{
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px
  ;
    background-color: palevioletred;
  }
</style>
<body>
  <div class="contain">
    <div class="main"></div>
  </div>
  <div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

圣杯布局

圣杯布局: 左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致


.body{
    min-width: 700px;
  }
  .header,.footer{
    border: 1px solid #333;
    background-color: #aaa;
    text-align: center;
  }
  .left, .middle, .right{
    position: relative;
    float: left;
    min-width: 130px;
  }
  .container{
    padding: 0 220px 0 200px;
    overflow: hidden; /* 父级div定义, 清除浮动*/
  }
  .left{
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background-color: palegreen;
  }
  .right{
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background-color: palevioletred;
  }
  .middle{
    width: 100%;
    background-color: antiquewhite;
    word-break: break-all;
  }
  .footer{
    clear: both;
  }

</style>

<body>
</div>
<div class="header">head</div>

<div class="container">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

<div class="footer">foot</div>
</body>

flex 布局

<style>
  .contain{
    display: flex;
  }
  .main{
    flex-grow: 1;
    height: 300px;
    background-color: palevioletred;
  }
  .left{
    order: -1;
    flex: 0 1 200px;
    margin-right: 20px;
    height: 300px;
    background-color: antiquewhite;
  }
  .right{
    flex: 0 1 100px;
    margin-left: 20px;
    height: 300px;
    background-color: palegreen;
  }
</style>
<body>
  <div class="contain">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

绝对定位布局


<style>
  .container {
    position: relative;
  }
  .main {
    height: 300px;
    margin: 0 120px;
    background-color: green;
  }
  .left {
    position: absolute;
    width: 100px;
    height: 300px;
    left: 0;
    top: 0;
    background-color: red;
  }
  .right {
    position: absolute;
    width: 100px;
    height: 300px;
    background-color: blue;
    right: 0;
    top: 0;
  }
</style>

<body>
<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>

3 flex 水平垂直居中

way 1

<style>
  #wrap{
    width: 100%;
    height: 500px;
    background-color: palegreen;
  /*  新版本*/
    display: flex;
    justify-content: center;
    align-items: center;

    /*  旧版本*/
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }

  .box{
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
  }
</style>

way 2

<style>
  
    #wrap{
      height: 200px;
      width: 200px;
      background-color: #bbffaa;
      position: relative;
    }
    #wrap .box{
      height: 100px;
      width: 100px;
      background-color: yellow;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
    }
   
  </style>

way 3

#wrap{
      height: 200px;
      width: 200px;
      background-color: #bbffaa;
      position: relative;
    }
    #wrap .box{
      height: 100px;
      width: 100px;
      background-color: yellow;
      position: absolute;
      top: 50%;
      left: 50%;
      /*margin-left: -50px;*/
      /*margin-top: -50px;*/
      transform: translate(-50%,-50%);
    }

<body>
<div id="wrap">
  <div class="box"></div>
</div>
</body>

4 三角形

<style>
.box{
  height: 0;
  width: 0;
  border: 100px solid  ;
  border-color: transparent transparent lightpink transparent;

}
</style>
<body>
  <div class="box"></div>
</body>

5 animation 水平循环移动


<style>
  *{
    margin: 0;
    padding: 0;}
  #wrap{
  height: 200px;
  width: 100%;
  background-color:papayawhip;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  }
   .box{
    width: 50px;
    height: 50px;
    border-radius:50%;
    background-color: yellowgreen;
     animation: test 2s 0s infinite linear alternate;
/*   animation: animation-name
  animation-duration
  animation-delay
  animation-timing-function
  animation-iteration-count 动画执行的次数 infinite 次数
  animation-direction :alternate 从 from 向 to运行 重复执行动画时反向执行 */
}
   #wrap:hover div{
     animation-play-state: paused;
   }
/*动画 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤*/
  @keyframes test {
    /* from表示动画的开始位置 也可以使用 0% */
    from{
      margin-left: 0%;
    }
    /* to动画的结束位置 也可以使用100%*/
    to{
      /*background-color: red;*/
      margin-left: 100%;
    }
  }
</style>
<body>
<div id="wrap">
  <div class="box"></div>
</div>
</body>
avatar
文章
阅读
粉丝