CSS面试常见布局问题

最新推荐文章于 2024-05-14 17:10:50 发布

AzeShinja

最新推荐文章于 2024-05-14 17:10:50 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/AzeShinja/article/details/106021837

版权

前端知识点（一）

盒子水平垂直居中问题

1.使用定位（三种实现方法） 2.使用JavaScript 3.使用flex布局（最推荐）4.使用 display :table-cell

定位实现代码（固定宽高，需要知道具体值）

 .box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: aqua;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);  // 基于CSS3 要么就变成自己算 margin
      margin: auto;            //   margin-top:-100px ; margin-left:-100px ; 自己的宽高一半
  
  }
 body{
   position: relative;
 }

定位实现代码 (固定宽高，不用知具体值)：

 .box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: aqua;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
 body{
   position: relative;
 }

JS实现代码：

 let HTML = document.documentElement, 
        winW = HTML.clientWidth,
        winH = HTML.clientHeight,
        boxW = box.offsetWidth,
        boxH = box.offsetHeight;
        box.style.position = "absolute";
        box.style.left = (winW - boxW) / 2 + "px";
        box.style.top= (winH - boxH) / 2 + "px";

用flex布局的时候就没必要使用父相子绝了

在父级元素中

 html,
  body{
    height: 100%;
    overflow: hidden;
  }
body{
  display: flex;
  justify-content: center; // 水平居中
  align-items: center;     // 垂直居中
  }

如果使用table-cell(需要固定宽高，定制不能百分比) （了解即可）

.father{       // 使用父级元素
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    /*必须要有固定宽高*/
    width: 500px;
    height: 500px;
}
 .box{
    width: 200px;
    height: 200px;
    background-color: aqua;
    display: inline-block;
  }

经典的几大布局

圣杯布局

中间内容，两侧两个栏是可以随着等比缩放缩小紧贴中间的center

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YsjWBvYm-1589012129707)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200509143648895.png)]

下面贴实现代码，利用了relative的position 和 margin调位置，重点是，left的margin-left=-100%是直接到center的左上部分需要自己理解消化一下

Css:

 html,
  body {
    height: 100%;
 
  }

  .container {
    height: 100%;
    padding: 0 200px;
  }

  .left,
  .right {
    width: 200px;     // css中表达式尽量少些，影响速度,性能不好
    /*为了显示 看效果 */
    min-height: 200px;
    background-color: lightblue; 
      
      
    /* margin-left: -200px;  //要实在难理解 像左面这么写也可以
    position: relative;
    right: -200px; */
      
  }
  .center{
    width: 100%;
    word-wrap: break-word; // 文字大于div宽度会自动换行
    min-height: 400px;
    background-color: lightsalmon;

  }
  .left,.right,
  .center{
    float: left;
  }
  .left{
    margin-left: -100%;  
    // ①页面张不开，container在限制，所以我们用 margin-left 向左（到头会自动向上弹）移至上面的行
    position: relative;
    left: -200px;
    // ②然后使用left 向左调200px 完成在左边
  }
  .right{
    margin-right: -200px;
  }

html:

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

双飞翼布局

<style>
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .container {
    width: 100%;
  }
   
  .left,
  .right {
    width: 200px;
    /*为了显示 看效果 */
    min-height: 200px;
    background-color: lightblue;
  }
  .left,.right,
  .container{
    float: left;
  }
  .container .center{
    margin: 0 200px;
    min-height: 400px;
    background-color: lightsalmon;
  }
  .left{
    margin-left: -100%;
  }
  .right{
    margin-left: -200px;
  }
 
</style>

<body class="clearfix">
  <div class="container">
    <div class="center"></div>
  </div>
    <div class="left"></div>
    <div class="right"></div>
  
</body>

flex布局（高级，方便）

<style>
  html,
  body {
    height: 100%;
 
  }

  .container {
    display: flex;
    justify-content: space-between;
    height: 100%;
  }

  .left,
  .right {
    /* 前两个参数既不放大，也不缩小 */
    flex: 0 0 200px;  
    /*为了显示 看效果 */
    height: 200px;
    background-color: lightblue;    
  
      
  }
  .center{
    /* 因为旁边两个元素的flex都设置既不放大也不缩小，
    flex ：1 👇
    所以只要浏览器放大缩小剩下空间全由center 分配 */
    flex: 1;  
    height: 400px;
    background-color: lightsalmon;
    word-wrap: break-word;
  }
  
</style>

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

还有可以通过定位解决

定位就是中间的元素margin ： 0 200px 两边都是200px 中间自适应即可，然后两边用 left：0 和right：0 来放在两边，这种解决办法是仅次于flex的难度

移动端响应式布局开发的三大方案

media (media和rem比较常规)
rem
flex
vh/vw
…

课后作业

1.使用css，让一个div消失在视野中，发挥想象力

2.请说明z-index的工作原理，使用范围？

文档流
定位

3.谈谈你对HTML5的理解

4.如何使一个div里面的文字垂直居中，且改文字的大小根据屏幕大小自适应？

5.不考虑其他因素，下面哪种的渲染性能比较高
.bax a{ // 性能不好，因为要查询两次
}

a{
} //因为css中查询方式时，选择器从右向左查询，性能好

AzeShinja

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS面试常见布局问题

前端知识点（一）盒子水平垂直居中问题1.使用定位（三种实现方法） 2.使用JavaScript 3.使用flex布局（最推荐）4.使用 display :table-cell定位实现代码（固定宽高，需要知道具体值） .box{ position: absolute; width: 200px; height: 200px; background-color: aqua; left: 50%; top: 50%; transform: t
复制链接

扫一扫