35、CSS高频前端面试题之页面布局

2024-01-15 11:54:46

参考：https://juejin.cn/post/6905539198107942919

35、CSS高频前端面试题之页面布局

 

1. 常见的CSS布局单位

1.1 常用的布局单位

包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的基础，是固定的像素，一旦设置了就无法因为适应页面大小而改变。一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

  • CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
  • 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem 比px更具有灵活性，他们是相对的长度单位，其长度不是固定的，更适用于响应式布局。它们之间的区别：em相对于父元素，rem相对于根元素html。

（3.1）em： 

  • 相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)；
  • 这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。

（3.2）rem：

  • rem的大小是根据html根目录下的字体大小进行计算的；
  • 当我们改变根目录下的字体大小的时候，下面字体都改变，相当于html根元素的font-size的倍数；
  • 利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。
  • rem是CSS3新增的一个相对单位。

（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

  • vw：相对于视窗的宽度，视窗宽度是100vw；
  • vh：相对于视窗的高度，视窗高度是100vh；
  • vmin：vw和vh中的较小值；
  • vmax：vw和vh中的较大值；

vw/vh 和百分比很类似，两者的区别：

  • 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
  • vw/vm：相对于视窗的尺寸

1.2 em、rem的区别及使用场景

三者的区别：

  • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
  • em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

  • px：对于只需要适配少部分移动设备，且分辨率对页面影响不大的 。
  • rem：对于需要适配各种移动设备，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

rem和em的使用：

参考：https://blog.csdn.net/qq_35432904/article/details/51804227

1）rem

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>rem</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size:12px;
        }
        .outer{
            font-size:3rem;
            background:red;
            width:400px;
            height:400px;
            position: relative;
        }
        .middle{
            font-size:2rem;
            background: aqua;
            width:200px;
            height: 200px;
            position: absolute;
            left:100px;
            top:100px;

        }
        .inner{
            font-size:1rem;
            background: palegreen;
            width:100px;
            height:100px;
            position: absolute;
            left:50px;
            top:50px;
        }
    </style>
</head>
<body>
<div class="outer">
    外部
    <div class="middle">
        中间
        <div class="inner">内部</div>
    </div>
</div>
</body>
</html>

35、CSS高频前端面试题之页面布局

2）em

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>rem</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size:12px;
        }
        .outer{
            font-size:3em;
            background:red;
            width:800px;
            height:800px;
            position: relative;
        }
        .middle{
            font-size:2em;
            background: aqua;
            width:400px;
            height: 400px;
            position: absolute;
            left:200px;
            top:200px;

        }
        .inner{
            font-size:1em;
            background: palegreen;
            width:200px;
            height:200px;
            position: absolute;
            left:100px;
            top:100px;
        }
    </style>
</head>
<body>
<div class="outer">
    外部
    <div class="middle">
        中间
        <div class="inner">内部</div>
    </div>
</div>
</body>
</html>

35、CSS高频前端面试题之页面布局

2. 两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现

1）利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

（不需设置父div高度，需设置左右高度）

35、CSS高频前端面试题之页面布局

35、CSS高频前端面试题之页面布局

35、CSS高频前端面试题之页面布局

2）利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧不会发生重叠。

（不需设置父div高度，需设置左右高度）

35、CSS高频前端面试题之页面布局

35、CSS高频前端面试题之页面布局

3）利用flex布局，将左边元素固定宽度200px，将右边的元素设置为flex:1。

（需设置父div高度，不需设置左右高度）

35、CSS高频前端面试题之页面布局

35、CSS高频前端面试题之页面布局

4）利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。（不需设置父div高度，需设置左右高度）

35、CSS高频前端面试题之页面布局

35、CSS高频前端面试题之页面布局

5）利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。（不需设置父div高度，需设置左右高度）

35、CSS高频前端面试题之页面布局

35、CSS高频前端面试题之页面布局

3、三栏布局的实现：左右固定宽度，中间自适应

三栏布局请看：https://mp-new.csdn.net/mp_blog/creation/editor/116081383

4、双飞翼布局和圣杯布局

都是为了实现左右宽度固定，中间自适应（中间先加载渲染）。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

  • 双飞翼布局给中间内容添加了一个父div，用来通过margin给中间内容腾出空间。
  • 圣杯采用的是父级元素设置左右的 padding，而双飞翼通过中间列设置 margin 值，解决了圣杯布局的问题。
  • 双飞翼布局不用设置相对定位，以及对应的left和right值。
  • 但是圣杯布局有个问题，当中间部分比左右两侧div宽度小的时候，布局就会乱掉。因此有了双飞翼布局来克服这个问题，双飞翼布局在主面板上选择了添加一个标签，包裹中间内容。
    ​​​​​​​
     

（1）圣杯布局

利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

（使用float布局框架 ， 用margin为负值 ， position: relative定位）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
	</head>
	 <style type="text/css">
	 	body{
	 		min-width: 550px;
	 	}
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.header , .footer{
	 		background: gray;
	 		width: 100%;
	 	}
	 	.footer{
	 		clear: both;
	 	}
         .main{  /*通过父元素的 padding 来实现*/
         	height: 200px;
            padding-left: 200px;
            padding-right: 150px;
         	background: greenyellow;
         }
         .left , .center , .right{
         	float: left; 
         }
         .center{
         	width: 100%;
         	height: 200px;
         	background: red;
         }
         .left {
         	width: 200px;
         	height: 200px;
         	background: yellow;
         	margin-left: -100%; /*移动到了中间盒子内，其右边框与中间盒子左边框重合*/
         	position: relative; 
         	left: -200px; /*将左侧盒子从中间盒子移出*/
         }
         .right{
         	width: 150px;
         	height: 200px;
         	background: gainsboro;
         	margin-left: -150px; /*移动到了网页左侧*/
         	position: relative; /**/
         	left: 150px;
            }
	 </style>
	<body>
		
	<div class="header">
             头部
	</div>
	<div class="main">
		<div class="center">中间中间中间中间中间中间中间后</div>
		<div class="left">左边</div>
		<div class="right">右边</div>
	</div>
	<div class="footer">
		底部
	</div>
	</body>
</html>

35、CSS高频前端面试题之页面布局

（2）双飞翼布局

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
	</head>
	 <style type="text/css">
	 	body{
	 		min-width: 550px;
	 	}
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.header , .footer{
	 		background: gray;
	 		width: 100%;
	 	}
	 	.footer{
	 		clear: both;
	 	}
        .main,.left,.right,.middle{
            height: 100px;
        }
	 	.main>div{
	 	 float: left;
	 	}
	 	.left {
	 		width: 200px;
	 		background: red;
	 		margin-left: -100%;
	 	}
	 	.right{
	 		width: 200px;
	 		background: blue;
	 		margin-left: -200px;
	 	}
	 	.middle{
	 		width: 100%;
	 		background: yellow;
	 	
	 	}
	 	.content{ /*通过中间列的 margin 值来实现的*/
	 		margin-left: 200px;
	 		margin-right: 200px;
	 	}
	 </style>
	<body>
    <div class="header">
            头部
    </div>
	<div class="main">
		<div class="middle">
	 		<div class="content">
	 		中间
		 	</div>
		 </div>
		<div class="left">
			左边
		</div>
		<div class="right">
			右边
		</div>
	</div>
    <div class="footer">
        底部
    </div>
	</body>
</html>

35、CSS高频前端面试题之页面布局

补充：

1）margin-left: -100%：

  • 意思是向左移动整个屏幕的距离
  • 但是在三栏式写法（其中一种）里面的盒子却是可以移动到下图的黑色区域的，这个原因是：

黑色区域和蓝色区域都加了浮动，当再次使用margin-left的负百分比的时候盒子其实是相对上一个浮动的盒子

35、CSS高频前端面试题之页面布局

5、水平垂直居中的实现

https://mp-new.csdn.net/mp_blog/creation/editor/116538928

6、对Flex布局和grid布局的理解及其使用场景

6.1 flex布局（弹性布局）

是一个一维系统，用来为盒状模型提供最大的灵活性。

主要思想：是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目扩展来

填满可用空间，或缩小他们以防止溢出容器。

 

  阮一峰博客：

（1）Flex 布局教程：语法篇

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

（2）Flex 布局教程：实例篇

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

6.2 grid布局（网格布局） 

是一个二维系统，可以同时处理行和列。

主要思想：grid布局可以像表格一样将页面容器分割成一块一块的区域，定义子元素的排布和位置。其所有直接子元素（直接子元素的子元素不包含在内）自动成为容器成员，称为grid项目(grid item)，简称“项目”.

使用：对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几列，然后对子元素设置占据几行几列

 

（3）grid布局

https://blog.csdn.net/weixin_44202459/article/details/88653661?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162047761016780255255424%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162047761016780255255424&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-7-88653661.pc_search_result_hbase_insert&utm_term=grid%E5%B8%83%E5%B1%80&spm=1018.2226.3001.4187

7、响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。 关于兼容： 页面头部必须有mate声明的viewport。meta viewport是专为移动设备下显示所设计的。

<meta name="’viewport’" 
content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
  • name为viewport表示供移动设备使用，content定义了viewport的属性. 
  • width表示移动设设备下显示的宽度为设备宽度
  • initial-scale表示设备与视口的缩放比率 
  • maximum和minimum分别表示缩放的最大最小值
  • user-scalable表示用户缩放能力, no表示不允许. 

 

上一篇：圣杯布局和双飞翼三栏布局


下一篇：最长连续序列