经典面试题：CSS定位知识及小盒子套大盒子的方法

2023-12-27 17:56:09

一、页面布局

1.1页面布局分类

css网页布局的本质：就是在网页中排列盒子（标签）

css网页布局分为3种机制：普通流、浮动、定位

普通流：就是从上到下，从左到右的排布

浮动：本质是让块元素横向排列

定位：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、静态定位（static）

普通流相当于大地，浮动相当于海平面，定位相对于天空

1.2定位语法

定位=定位模式+边偏移（top、bottom、left、right）

1.3相对定位

相对定位的参照点是它自身在网页中的原来的位置计算的，元素本身的位置还占据

语法：position：relative；

1.4绝对定位

绝对定位的参照点是它的定位父级元素的位置来移动的，设置绝对定位后，元素会脱离标准文档流，不占据元素本身位置

语法：position：ablution；

1.5固定定位

固定定位的参照点是网页来移动位置的。不占据本身位置。

语法：position：fixed；

1.6层级属性（层级最高，压在别的元素之上）

z-index：99；注意z-indox属性只能添加到有定位的元素上。

1.7overflow属性

用来处理超出区域的内容如何显示

overflow: hidden; - 隐藏超出的内容 overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位) overflow: auto; - 有超出内容才以滚动方式显示

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>overflow属性</title>
     <style>
         .box {
             width: 200px;
             height: 300px;
             background-color: pink;
         }
         /*
         1）默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)
         2）overflow: hidden; - 隐藏超出的内容
         3）overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)
         4）overflow: auto; - 有超出内容才以滚动方式显示
         */
         .box {
             overflow: auto;
         }
     </style>
 </head>
 <body>
     <div class="box">
         哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂
     </div>
 </body>
 </html>

二、经典面试题（小盒子套大盒子的方式）

页面中有一个大盒子套小盒子，小盒子在页面水平垂直居中，有几种方式？（小盒子宽高不一定固定）

2.1第一种方式

规则：小盒子绝对定位，设置top：50%，left：50%；margin-left和margin-top分别设置小盒子宽高的一半，大盒子相对定位

 <style>
 * {
 margin: 0; 
 padding: 0; 
 }
 #big { 
 width: 200px; 
 height: 200px; 
 background-color: red; 
 /* 水平居中 */ 
 margin: 0 auto; 
 position: relative; 
 }
 /* 子绝父相 */ 
 #small { 
 width: 150px; 
 height: 100px; 
 background-color: yellow; 
 position: absolute; 
 top: 50%; 
 /* margin设置为小盒子高度的一半 */ 
 margin-top: -50px; 
 left: 50%; 
 /* margin设置为小盒子自身宽度的一半 */ 
 margin-left: -75px; 
 } 
 </style> </head> 
 <body> 
 
 <div id="big"> 
 <div id="small"></div> 
 </div> 
 
 </body>

2.2第二种方法

CSS3新属性：位移

<style>
         #big{
             width: 200px;
             height: 200px;
             background-color: red;
             /* 相对定位 */
             position: relative;
         }
         #small{
             width: 50px;
             height: 50px;
             background-color: yellow;
             /* 绝对定位 */
             position: absolute;
             top:0;
             left: 0;
             transform:translate(-50%,-50%);
         }
     </style>
 
    </head>
 <body> 
 
 <div id="big"> 
 <div id="small"></div> 
 </div> 
 
 </body>
 </html>

2.3第三种方法

规则：固定写法(四个方向为0，再加一个margin：auto；)

<style>
         #big{
             width: 200px;
             height: 200px;
             background-color: red;
             /* 相对定位 */
             position: relative;
         }
         #small{
             width: 50px;
             height: 50px;
             background-color: yellow;
             /* 绝对定位 */
             position: absolute;
             top:0;
             bottom:0;
             left: 0;
             rigt:0;
             margin:auto;
         }
     </style>
 
    </head>
 <body> 
 
 <div id="big"> 
 <div id="small"></div> 
 </div> 
 
 </body>
 </html>

码农公寓