单列布局

水平居中

使用inline-block和text-align实现

使用margin:0 auto实现

使用table实现

使用绝对定位实现

使用flex布局实现

水平居中代码实现

垂直居中

使用vertical-align:middle

使用绝对定位

使用flex布局

垂直居中代码实现

水平垂直居中

使用vertical-align,text-align,inline-block实现

使用绝对定位

使用flex布局

水平垂直居中代码实现

多列布局

左列定宽，右列自适应

使用float+margin

使用float+overflow

使用table

使用flex

代码实现

右列定宽，左列自适应

使用float+margin实现

使用table实现

使用flex实现

代码实现

两列定宽，一列自适应

使用float+margin实现

使用float+overflow实现

使用table实现

使用flex实现

代码实现：

两侧定宽，中间自适应

利用float+margin实现

利用table实现

利用flex实现

代码实现

全屏布局

利用绝对定位实现

利用flex实现

代码实现

九宫格布局

使用table实现

使用flex实现

代码实现

前端布局全部源码

12.15复盘了一下，改了一些拼写错误。如果还有拼写错误我没找出来，请大家指正，共同进步！

单列布局

水平居中

实现子元素相对于父元素水平居中

使用inline-block和text-align实现

.parent{text-align:center;}

.child{display:inline-block;}

优点：兼容性好

缺点：需要同时设置父元素和子元素

使用margin:0 auto实现

.child{margin:0 auto;}

优点：兼容性好

缺点：需要指定宽高

使用table实现

.child{ display:table; margin:0 auto;}

优点：只需要对自身进行设置

缺点：在IE6,7浏览器中需要调整结构

使用绝对定位实现

.parent{position:relative;}

.child{position:absolute; left:50%; transform:translate(-50%);}

不足：兼容性差，只能在IE9以上可用

使用flex布局实现

way1:

.parent{ display:flex; justify-content:center;}

way2:

.parent{display:flex;}

.child{margin:0 auto;}

缺点：兼容性差，如果大面积使用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>前端布局</title><style>/* 父元素text-align:center; 子元素display:inline-block;.parent{height: 200px;width: 200px;background: pink;text-align: center;}.child{background: yellow;height: 100px;width: 100px;display: inline-block;} *//* margin:0 auto;.parent{height: 200px;width: 200px;background: pink;}.child{background: yellow;height: 100px;width: 100px;margin: 0 auto;} *//* 使用table实现.parent{height: 200px;width: 200px;background: pink;}.child{background: yellow;height: 100px;width: 100px;display: table;margin: 0 auto;} *//* 使用绝对定位.parent{height: 200px;width: 200px;background: pink;position: relative;}.child{background: yellow;height: 100px;width: 100px;position: absolute;left: 50%;transform: translate(-50%);} *//* 使用flex布局 方法一.parent{height: 200px;width: 200px;background: pink;display: flex;justify-content: center;}.child{background: yellow;height: 100px;width: 100px;} *//* 使用flex布局 方法二*/.parent{height: 200px;width: 200px;background: pink;display: flex;}.child{background: yellow;height: 100px;width: 100px;margin: 0 auto;}</style>
</head>
<body><!-- 水平居中 --><div class="parent"><div class="child"></div></div>
</body>
</html>

垂直居中

实现子元素相对父元素垂直居中

使用vertical-align:middle

.parent{display:table-cell; vertical-align:middles;}

使用绝对定位

.parent{position:relative;}

.child{position:absolute; top:50%; transform:translate(0,-50%);}

使用flex布局

.parent{display:flex; text-align:center;}

垂直居中代码实现

<!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>前端布局</title><style>/* 垂直居中 *//* vertical-align .parent{height: 200px;width: 200px;background: pink;display: table-cell;vertical-align: middle;}.child{background: yellow;height: 100px;width: 100px;}  *//* 使用绝对定位.parent{height: 200px;width: 200px;background: pink;position: relative;}.child{background: yellow;height: 100px;width: 100px;position: absolute;top: 50%;transform: translate(0,-50%);}  *//* 使用flex */.parent{height: 200px;width: 200px;background: pink;display: flex;align-items: center;}.child{background: yellow;height: 100px;width: 100px;} </style>
</head>
<body><div class="parent"><div class="child"></div> </div>
</body>
</html>

水平垂直居中

使用vertical-align,text-align,inline-block实现

.parent{display:table-cell; vertical-align:middle; text-align:center;}

.child{display:inline-block;}

使用绝对定位

.parent{ position:relative;}

.child{position:absolute; top:50%; transform:translate(50%,-50%);}

使用flex布局

.parent{display:flex; justify-content:center; align-items:center;}

水平垂直居中代码实现

<!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>前端布局</title><style>/* 垂直水平居中 *//* 使用vertical-align,text-align,inline-block实现.parent{height: 200px;width: 200px;background: pink;display: table-cell;vertical-align: middle;text-align: center;}.child{background: yellow;height: 100px;width: 100px;display: inline-block;}  *//* 使用绝对定位.parent{height: 200px;width: 200px;background: pink;position: relative;}.child{background: yellow;height: 100px;width: 100px;position: absolute;top: 50%;transform: translate(50%,-50%);}  *//* 使用flex实现 */.parent{height: 200px;width: 200px;background: pink;display: flex;justify-content: center;align-items: center;}.child{background: yellow;height: 100px;width: 100px;} </style>
</head>
<body><div class="parent"><div class="child"></div> </div>
</body>
</html>

多列布局

左列定宽，右列自适应

使用float+margin

.left{float:left; width:100px;}

.right{margin-left:100px;}

使用float+overflow

.left{float:left; width:100px; }

.right{overflow:hidden;}

使用table

.parent{display:table; table-layout:fixed; width:1000px;}

.left{width:100px; display:table-cell;}

.right{display:table-cell;}

使用flex

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

代码实现

<!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>前端布局</title><style>/* 左侧定宽右侧自适应.parent{height: 300px;width: 1000px;background-color: antiquewhite;}.left{background-color: pink;float: left;width: 100px;height: 300px;}.right{background-color: purple;margin-left: 100px;height: 300px;} *//* 使用float+overflow.parent{height: 300px;width: 1000px;background-color: antiquewhite;}.left{background-color: pink;float: left;width: 100px;height: 300px;}.right{background-color: purple;overflow: hidden;height: 300px;} *//* 使用table实现.parent{height: 300px;background-color: antiquewhite;display: table;table-layout: fixed;width: 1000px;}.left{background-color: pink;width: 100px;height: 300px;display: table-cell;}.right{background-color: purple;height: 300px;display:table-cell;} *//* 利用flex实现 */.parent{height: 300px;width: 1000px;background-color: antiquewhite;display: flex;}.left{background-color: pink;width: 100px;height: 300px;}.right{background-color: purple;height: 300px;flex: 1;}</style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div></div>
</body>
</html>

右列定宽，左列自适应

使用float+margin实现

.left{margin-right:-100px;width:100%; float:left;}

.right{float:right;width:100px;}

使用table实现

.parent{display:table; table-layout:table-cell;}

.left{display:table-cell;}

.right{width:100px; display:table-cell;}

使用flex实现

.parent{display:flex;}

.left{flex:1;}

.right{width:100px;}

代码实现

<!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>前端布局</title><style>/* 右侧定宽，左侧自适应 *//* 利用float+margin实现.parent{height: 300px;width: 1000px;background-color: antiquewhite;}.left{background-color: pink;margin-right: -100px;width: 100%;float: left;height: 300px;}.right{background-color: purple;height: 300px;float: right;width: 100px;} *//* 使用table实现.parent{height: 300px;width: 1000px;background-color: antiquewhite;display: table;table-layout: fixed;}.left{background-color: pink;height: 300px;display: table-cell;}.right{background-color: purple;height: 300px;width: 100px;display: table-cell;} *//* 使用flex实现 */.parent{height: 300px;width: 1000px;background-color: antiquewhite;display: flex;}.left{background-color: pink;height: 300px;flex: 1;}.right{background-color: purple;height: 300px;width: 100px;} </style>
</head>
<body><div class="parent"><div class="left"></div><div class="right"></div></div>
</body>
</html>

两列定宽，一列自适应

使用float+margin实现

.left{float:left; width:200px;}

.center{float:left; width:200px;}

.right{margin-left:400px;}

使用float+overflow实现

.left{float:left; width:200px;}

.center{float:left; width:200px;}

.right{overflow:hidden;}

使用table实现

.parent{display:table; table-layout:fixed;}

.left,.center,.right{display:table-cell;}

.left,.center{width:200px;}

使用flex实现

.parent{display:flex;}

.left,.center{width:200px;}

.right{flex:1;}

代码实现：

<!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>三列布局</title><style>/* right、center定宽，right自适应 *//* 使用float+margin.parent{background-color: rebeccapurple;height: 300px;width: 1000px;}.left{background-color: plum;height: 300px;float: left;width: 200px;}.center{background-color: salmon;height: 300px;float: left;width: 200px;}.right{background-color: skyblue;height: 300px;margin-left: 400px;} *//* 使用float+overflow实现.parent{background-color: rebeccapurple;height: 300px;width: 1000px;}.left{background-color: plum;height: 300px;float: left;width: 200px;}.center{background-color: salmon;height: 300px;float: left;width: 200px;}.right{background-color: skyblue;height: 300px;overflow: hidden;} *//* 使用table实现.parent{background-color: rebeccapurple;height: 300px;width: 1000px;display: table;table-layout: fixed;}.left{background-color: plum;height: 300px;display: table-cell;width: 200px;}.center{background-color: salmon;height: 300px;display: table-cell;width: 200px;}.right{background-color: skyblue;height: 300px;display: table-cell;} *//* 使用flex实现 */.parent{background-color: rebeccapurple;height: 300px;width: 1000px;display: flex;}.left{background-color: plum;height: 300px;width: 200px;}.center{background-color: salmon;height: 300px;width: 200px;}.right{background-color: skyblue;height: 300px;flex:1;}</style>
</head>
<body><div class="parent"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body>
</html>

两侧定宽，中间自适应

利用float+margin实现

.left{ width:200px; float:left;}

.right{width:200px;float:right;}

.center{margin:0 200px;}

利用table实现

.parent{width:100%;diasplay:table;table-layout:fixed;}

.left,.right,.center{display:table-cell;}

.left,.right{width:200px;}

利用flex实现

.parent{display:flex}

.left,.right{width:200px;}

.center{flex:1;}

代码实现

<!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>前端布局</title><style>/* 利用margin+float实现.left{width: 200px;height: 300px;background-color: plum;float: left;}.right{width: 200px;height: 300px;background-color: skyblue;float: right;}.center{margin: 0 200px;height: 300px;background-color: salmon;} *//* 利用table实现.parent{width:100%;display: table;table-layout: fixed;}.left{display: table-cell;width: 200px;height: 300px;background-color: plum;}.right{display: table-cell;width: 200px;height: 300px;background-color: skyblue;}.center{display: table-cell;height: 300px;background-color: salmon;} *//* 利用flex实现 */.parent{display: flex;}.left{width: 200px;height: 300px;background-color: plum;}.right{width: 200px;height: 300px;background-color: skyblue;}.center{flex: 1;height: 300px;background-color: salmon;}</style>
</head><body><!-- 利用float+margin实现<div class="left"></div><div class="right"></div><div class="center"></div> --><div class="parent"><div class="left"></div>  <div class="center"></div><div class="right"></div></div>
</body></html>

全屏布局

利用绝对定位实现

html,body,.parent{height:100%;overflow:hidden;}

.top{position:absolute; top:0;left:0;right:0;height:200px;}

.left{position:absolute;left:0;top:200px;bottom:100px;width:200px;}

.right{position:absolute;overflow:auto;left:200px;right:0;top:200px;bottom:100px;}

.bottom{position:absolute;left:0;right:0;height:100px;}

利用flex实现

.parent{display:flex;flex-direction:column;}

.top{height:100px;}

.bottom{height:50px;}

.middle{flex:1;display:flex;}

.left{width:200px;}

.right{flex:1;overflow:auto;}

代码实现

<!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>全屏布局</title><style>/* 利用绝对定位实现html,body {overflow: hidden;height: 100%;}.parent {height: 100%;overflow: hidden;background-color: antiquewhite;}.top {background-color: aqua;position: absolute;top: 0;left: 0;right: 0;height: 200px;}.left {background-color: burlywood;position: absolute;top: 200px;left: 0;bottom: 100px;width: 200px;}.right {background-color: coral;position: absolute;overflow: auto;left: 200px;right: 0;top: 200px;bottom: 100px;}.bottom {background-color: darkcyan;position: absolute;left: 0;right: 0;bottom: 0;height: 100px;} */.parent{background-color: pink;display: flex;flex-direction: column;}.top{background-color: darkkhaki;height: 100px;}.bottom{background-color: blueviolet;height: 50px;}.middle{height: 200px;background-color: cornflowerblue;flex:1;display: flex;}.left{height: 200px;background-color: cyan;width: 200px;}.right{height: 200px;background-color: darkorange;flex:1;overflow: auto;}</style>
</head><body><!-- 利用绝对定位实现 --><!-- <div class="parent"><div class="top"></div><div class="left"></div><div class="right"></div><div class="bottom"></div></div> --><!-- 利用flex实现 --><div class="parent"><div class="top"></div><div class="middle"><div class="left"></div><div class="right"></div></div><div class="bottom"></div></div>
</body></html>

九宫格布局

使用table实现

.parent{display:table; table-layout:fixed;width:300px;}

.row{display:table-row;}

.item{display:table-cell;width:33.3%;height:100px;}

使用flex实现

.parent{display:flex;flex-direction:column;}

.row{height:100px;display:flex;}

.item{width:100px;}

代码实现

<!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>九宫格布局</title><!-- 利用table实现<style>.parent{background-color: skyblue;display: table;table-layout: fixed;width: 300px;}.row{background-color: aqua;display: table-row;}.item{background-color: antiquewhite;display: table-cell;width: 33.3%;height: 100px;}</style> --><!-- 使用flex实现 --><style>.parent {display: flex;flex-direction: column;}.row {height: 100px;display: flex;}.item {width: 100px;background-color: aqua;}</style>
</head><body><div class="parent"><div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div></div></div>
</body></html>

前端布局全部源码

https://github.com/harbinailin/goodcss/tree/main/css/%E5%89%8D%E7%AB%AF%E5%B8%83%E5%B1%80

【前端面试题】前端布局问题相关推荐

最新前端面试题-前端必备技能-前端技术汇总
一.css部分 1.css盒模型 css盒模型分为标准盒模型和怪异盒模型/IE盒模型基础盒模型:content(内容) + border + padding + margin 怪异盒模型/IE盒模型 ...
前端面试题 | flex布局的可伸缩可拓展（Flexibility）
Flexibility Flex伸缩布局决定性的特征是让伸缩项目可伸缩,也就是让伸缩项目的宽度和高度自动填充剩余的空间.这可以以flex属性完成.一个伸缩容器会等比地按照各伸缩项目的扩展比率分配剩 ...
java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
array 前端面试题_web前端开发面试题汇总
前端面试题汇总第一部分HTML&CSS 1. 浏览器分类浏览器:IE,Chrome,FireFox,Safari,Opera. 内核:Trident,Gecko,Presto,Webkit ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
Web前端求职必备常见前端面试题汇总（二）
一般情况下web前端面试的时候并不会设计特别复杂的问题.但是依旧有很多同学在比较基础的问题上栽了跟头.所以小编结合多套面试题,为大家整理出8个虽然简单面试题,即将面试或者正在面试的小伙伴速度参考一下, ...
Web前端程序员必备前端面试题汇总（1）
任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次.人力面试一般也就是考察一下个人品质以及薪资问题,而技术岗位则是考察你是否有真才实学.本文和大家分享一个难到了很多前端工程师的面试题:Qui ...
2018最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)--转载
版权声明:本文为转载文章,感谢博主小胖梅的博客,如有侵权,请联系我删除,谢谢转载链接: https://blog.csdn.net/xm1037782843/article/details/8070 ...
2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
近期总结一一些面试题都是企业的面试题笔记题感觉薪资10k-15k的常见面试题个人录制的最新Vue项目学习视频:B站小胖梅-的个人空间_哔哩哔哩_Bilibili 红色为常见面试题 ====== ...
2022年最新互联网大厂前端面试题及答案-前端工程必备技能(持续整理更新中【关注收藏不迷路】）
对于做前端的朋友,或者做了前端几年了,基础不好的,或者想进大厂的想了解深入,下面的知识点很多前端朋友都没有深入了解.很重要,看完有种茅塞顿开感觉,**关注+收藏哦,总有一天用的得.** 涉及到知识点: ...

【前端面试题】前端布局问题

单列布局

水平居中

使用inline-block和text-align实现

使用margin:0 auto实现

使用table实现

使用绝对定位实现

使用flex布局实现

水平居中代码实现

垂直居中

使用vertical-align:middle

使用绝对定位

使用flex布局

垂直居中代码实现

水平垂直居中

使用vertical-align,text-align,inline-block实现

使用绝对定位

使用flex布局

水平垂直居中代码实现

多列布局

左列定宽，右列自适应

使用float+margin

使用float+overflow

使用table

使用flex

代码实现

右列定宽，左列自适应

使用float+margin实现

使用table实现

使用flex实现

代码实现

两列定宽，一列自适应

使用float+margin实现

使用float+overflow实现

使用table实现

使用flex实现

代码实现：

两侧定宽，中间自适应

利用float+margin实现

利用table实现

利用flex实现

代码实现

全屏布局

利用绝对定位实现

利用flex实现

代码实现

九宫格布局

使用table实现

使用flex实现

代码实现

前端布局全部源码

【前端面试题】前端布局问题相关推荐

最新文章

热门文章