css布局方案汇总(28个实例图文并茂)

介

布局在我们前端日常开发来说是非常重要的，一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(flex)布局、网格(grid)布局。关于布局方法本文不做详细讲解，笔者推荐看阮一峰老师 flex布局教程和阮一峰老师 grid布局教程。

本文主要讲解水平垂直居中、单栏布局、双栏布局、三栏布局一些项目中常用的布局方案。

本文代码全部使用codepen在线代码工具进行演示。

居中

居中在我们日常工作中还是会经常碰到。

水平居中

对于水平居中一般可以使用如下四种方式

对于行内元素我们可以在父元素上设置text-align:center;来实现。
对于定长块级元素我们可以使用margin: 0 auto;来实现。
我们可以在父元素上使用flex布局来实现。
我们可以在父元素上使用grid布局来实现。

<div class="div1">
  <span>行内元素水平居中</span>
</div>

<div class="div2">
  <span>行内元素水平居中</span>
  <div>块级元素水平居中</div>
</div>

<div class="div3">
  <span>行内元素水平居中</span>
  <div>块级元素水平居中</div>
</div>

<div class="div4">块级元素水平居中</div>

.div1 {
  text-align: center;
}

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

.div3 {
  display: grid;
  justify-content: center;
}

.div4 {
  width: 130px;
  margin: 0 auto;
}

效果如下

点击查看代码运行实例

垂直居中

对于垂直居中一般可以使用如下三种方式

我们可以在父元素上设置line-height等于height来实现。
我们可以在父元素上使用flex布局来实现。
我们可以在父元素上使用grid布局来实现。
我们可以在父元素上使用table布局来实现。

<div class="div1">
  <span>行内元素垂直居中</span>
<!-- <div>块级元素垂直居中</div> -->
</div>

<div class="div2">
  <span>行内元素垂直居中</span>
  <div>块级元素垂直居中</div>
</div>

<div class="div3">
  <span>行内元素垂直居中</span>
  <div>块级元素垂直居中</div>
</div>

<div class="div4">
  <span>行内元素垂直居中</span>
  <div>块级元素垂直居中</div>
</div>

.div1 {
  height: 100px;
  background: lightgreen;
  line-height: 100px;
}

.div2 {
  height: 100px;
  background: lightblue;
  display: flex;
  align-items: center;
}

.div3 {
  height: 100px;
  background: lightgreen;
  display: grid;
  align-content: center;
}

.div4 {
  height: 100px;
  background: lightblue;
  display: table-cell;
  vertical-align: middle;
}

效果如下

点击查看代码运行实例

水平垂直同时居中

比如我们想实现如下水平垂直同时居中的效果

实现水平垂直同时居中我们可以使用绝对定位、table布局、flex布局 或 grid布局来实现。

首先我们创建一个需要居中的盒子。

<div class="box"></div>

纯绝对定位

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

点击查看代码运行实例

绝对定位加负外边距

这种方式需要知道居中元素的具体宽高，不然负的margin没法设置。

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
}

点击查看代码运行实例

绝对定位加平移

这种平移的方式就不需要考虑居中盒子的具体宽高了。

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

点击查看代码运行实例

使用flex实现

html,body {
  height: 100%; 
}

body {
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 200px;
  height: 100px;
  background: red;
}

点击查看代码运行实例

使用grid实现

html,body {
  height: 100%; 
}

body {
  background: gray;
  display: grid;
/*   align-content: center;
  justify-content: center; */
  
  /* align-content和justify-content的简写 */
  place-content: center;
}

.box {
  width: 200px;
  height: 100px;
  background: red;
}

点击查看代码运行实例

使用table加外边距实现

使用table布局需要注意如下

display: table时padding会失效
display: table-row时margin、padding同时失效
display: table-cell时margin会失效

<div class="box">
  <div class="child"></div>
</div>

.box {
  background: red;
  height: 300px;
  width: 600px;
  display: table-cell;
  vertical-align: middle;
}

.child {
  width: 200px;
  height: 200px;
  background: lightgreen;
  margin: 0 auto;
}

点击查看代码运行实例

单栏布局

单栏布局我们常用在网页框架上，一般我们把网页分为 header、content、footer三部分。

在不同的项目我们可能对这三部分的样式需求有所差别，比如需要顶部固定、需要底部固定等等。

顶底部都不固定

比如想实现如下效果，footer在内容不足的时候吸附在窗口底部，当内容多的时候又可以被抵到窗口下面。

使用padding加负margin实现

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
</div>
<div class="footer">footer</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  min-height: 100%;
  padding-bottom: 50px;
  overflow: auto;
  box-sizing: border-box;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  /* 这里的高度只是为了模拟内容多少 */
  height: 100px; 
  /*  height: 1000px; */
}

.footer {
  height: 50px;
  background: lightgreen;
  margin-top: -50px;
}

点击查看代码运行实例

使用flex实现

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  /* 这里的高度只是为了模拟内容多少 */
  height: 100px;
  /* height: 1000px; */
  flex-grow: 1;
}

.footer {
  height: 50px;
  background: lightgreen;
}

点击查看代码运行实例

顶部固定

使用padding加负margin加fixed实现顶部固定布局

<div class="header">header</div>
<div class="wrap">
 <div class="content">content</div>
</div>
<div class="footer">footer</div>

html, body {
  height: 100%;
  margin: 0;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.wrap {
  min-height: 100%;
  padding-bottom: 50px;
  overflow: auto;
  box-sizing: border-box;
}

.content {
  margin-top: 50px;
  background: lightpink;
  /* 这里的高度只是为了模拟内容多少 */
  height: 100px; 
  /* height: 1000px; */
}

.footer {
  height: 50px;
  background: lightgreen;
  margin-top: -50px;
}

点击查看代码运行实例

使用flex加fixed定位实现

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction:column;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.content {
  background: lightpink;
  /* 这里的高度只是为了模拟内容多少 */
  /* height: 100px; */
  height: 1000px;
  margin-top: 50px;
  flex-grow: 1;
}

.footer {
  height: 50px;
  background: lightgreen;
}

点击查看代码运行实例

底部固定

使用padding加负margin实现底部固定布局

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
</div>
<div class="footer">footer</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  height: 100%;
  padding-bottom: 50px;
  overflow: auto;
  box-sizing: border-box;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  height: 100px;
  height: 1000px;
}

.footer {
  height: 50px;
  background: lightgreen;
  margin-top: -50px;
}

点击查看代码运行实例

使用flex加fixed定位实现

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction:column;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  /* 这里的高度只是为了模拟内容多少 */
  /* height: 100px; */
  height: 1000px;
  flex-grow: 1;
  margin-bottom: 50px;
}

.footer {
  height: 50px;
  background: lightgreen;
  position: fixed;
  width: 100%;
  bottom: 0;
}

点击查看代码运行实例

顶底部都固定

使用fixed实现顶底部固定布局

<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
复制代码

html, body {
  height: 100%;
  margin: 0;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.content {
  background: lightpink;
  padding-top: 50px;
  padding-bottom: 50px;
  /* height: 100px; */
  height: 1000px;
}

.footer {
  height: 50px;
  background: lightgreen;
  position: fixed;
  bottom: 0;
  width: 100%;
}

点击查看代码运行实例

使用flex加fixed定位实现

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction:column;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.content {
  background: lightpink;
  /* 这里的高度只是为了模拟内容多少 */
  /* height: 100px; */
  height: 1000px;
  flex-grow: 1;
  margin-bottom: 50px;
  margin-top: 50px;
}

.footer {
  height: 50px;
  background: lightgreen;
  position: fixed;
  width: 100%;
  bottom: 0;
}

点击查看代码运行实例

两栏布局

两栏布局就是一边固定，另外一边自适应，效果如下

实现两栏布局的方法也有很多，笔者接下来介绍用的比较多的几种方式。

左 float，然后右 margin-left（右边自适应）

<div class="aside"></div>
<div class="main"></div>

div {
  height: 500px;
}

.aside {
  width: 300px;
  float: left;
  background: yellow;
}

.main {
  background: aqua;
  margin-left: 300px;
}

点击查看代码运行实例

右 float，然后右 margin-right（左边自适应）

<div class="aside"></div>
<div class="main"></div>

div {
  height: 500px;
}

.aside {
  width: 300px;
  float: right;
  background: yellow;
}

.main {
  background: aqua;
  margin-right: 300px;
}

点击查看代码运行实例

absolute定位加margin-left（右边自适应）

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>

div {
  height: 500px;
}

.wrap {
  position: relative;
}

.aside {
  width: 300px;
  background: yellow;
  position: absolute;
}

.main {
  background: aqua;
  margin-left: 300px;
}

点击查看代码运行实例

absolute定位加margin-right（左边自适应）

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>

div {
  height: 500px;
}

.wrap {
  position: relative;
}

.aside {
  width: 300px;
  background: yellow;
  position: absolute;
  right: 0;
}

.main {
  background: aqua;
  margin-right: 300px;
}

点击查看代码运行实例

使用flex实现

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>

div {
  height: 500px;
}

.wrap {
  display: flex;
}

.aside {
  flex: 0 0 300px;
  background: yellow;
  
}

.main {
  background: aqua;
  flex: 1 1;
}

点击查看代码运行实例

使用grid实现

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>

  height: 500px;
}

.wrap {
  display: grid;
  grid-template-columns: 300px auto;
}

.aside {
  background: yellow;
  
}

.main {
  background: aqua;
}

点击查看代码运行实例

三栏布局

三栏布局就是两边固定，中间自适应布局，效果如下

实现三栏布局的方法也有很多，笔者接下来介绍用的比较多的几种方式。

position + margin-left + margin-right实现三栏布局

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

html,
body {
  margin: 0;
}

div {
  height: 500px;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  background: green;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  background: red;
}

.middle {
  margin-left: 200px;
  margin-right: 200px;
  background: lightpink;
}

点击查看代码运行实例

float + margin-left + margin-right实现三栏布局

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

html,
body {
  margin: 0;
}

div {
  height: 500px;
}

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

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

.middle {
  margin-left: 200px;
  margin-right: 200px;
  background: lightpink;
}

点击查看代码运行实例

flex实现三栏布局

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

html,
body {
  margin: 0;
}

div {
  height: 500px;
}

.wrap {
  display: flex;
}

.left {
  flex: 0 0 200px;
  background: green;
}

.right {
  flex: 0 0 200px;
  background: yellow;
}

.middle {
  background: lightpink;
  flex: 1 1;
}

点击查看代码运行实例

grid实现三栏布局

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

html,
body {
  margin: 0;
}

div {
  height: 500px;
}

.wrap {
  display: grid;
  grid-template-columns: 200px auto 200px;
}

.left {
  background: green;
}

.right {
  background: yellow;
}

.middle {
  background: lightpink;
}

点击查看代码运行实例

圣杯布局

圣杯布局在项目中基本上不会再使用了，在面试中我们会经常碰到，所以需要了解。

主要用到了浮动和和相对定位。

<div class="container">
  <div class="content">中间内容</div>
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

div {
  height: 500px;
}

.container {
  padding: 0 200px 0 200px;
  border: 1px solid black;
}

.content {
  float: left;
  width: 100%;
  background: #f00;
}

.left {
  width: 200px;
  background: #0f0;
  float: left;
  margin-left: -100%;
  position: relative;
  left: -200px;
}

.right {
  width: 200px;
  background: #00f;
  float: left;
  margin-left: -200px;
  position: relative;
  right: -200px;
}

点击查看代码运行实例

双飞翼布局

双飞翼布局在项目中基本上不会再使用了，在面试中我们会经常碰到，所以需要了解。

主要用到了浮动。

<div class="main">
  <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

div {
  height: 500px;
}

.main {
  float: left;
  width: 100%;
  background: #f00;
}

.main .content {
  /* margin、padding这两种方式都可以 */
  
  /*   margin-left: 200px;
  margin-right: 300px; */
  padding-left: 200px;
  padding-right: 300px;
}

.left {
  width: 200px;
  background: #0f0;
  float: left;
  margin-left: -100%;
}

.right {
  width: 200px;
  background: #00f;
  float: left;
  margin-left: -200px;
}

点击查看代码运行实例

总结

因为flex和grid布局方法已经很强大了，日常工作中99%的布局都可以使用这两种方式来实现。所以笔者建议能使用flex或者grid布局方法实现的就尽量使用这两种布局方式实现。因为不仅简单而且负面作用也很少。

浮动布局和绝对定位布局会导致元素脱离文档流，会带来一些负面作用，有时会导致一些意想不到的结果。

关于flex布局的兼容性和grid布局的兼容性，目前已经支持的很好了，大家可以放心使用。

flex布局的兼容性

grid布局的兼容性

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会有其他相关知识点。

CSS实用技巧第二讲：布局处理

rem自适应布局

移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下：

/* 基于UI width=750px DPR=2的页面 */
html {
 font-size: calc(100vw / 7.5);
}

rem 页面布局, 不兼容低版本移动端，使用需谨慎。

overflow-x排版横向列表

通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看。注意场景：横向滚动列表、元素过多但位置有限的导航栏。

CSS实用技巧第二讲：布局处理

<div class="horizontal-list flex">
 <ul>
 <li>web秀</li>
 <li>阿里巴巴</li>
 <li>字节跳动</li>
 <li>腾讯</li>
 <li>百度</li>
 <li>美团</li>
 </ul>
</div>
<div class="horizontal-list inline">
 <ul>
 <li>web秀</li>
 <li>阿里巴巴</li>
 <li>字节跳动</li>
 <li>腾讯</li>
 <li>百度</li>
 <li>美团</li>
 </ul>
</div>

scss样式

.horizontal-list {
	width: 300px;
	height: 100px;
	ul {
		overflow-x: scroll;
		cursor: pointer;
 margin: 0;
 padding: 0;
		&::-webkit-scrollbar {
			height: 6px;
		}
		&::-webkit-scrollbar-track {
			background-color: #f0f0f0;
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			background: linear-gradient(to right, #32bbff, #008cf4);
		}
	}
	li {
		overflow: hidden;
		margin-left: 10px;
		height: 90px;
		background-color: #00b7a3;
		line-height: 90px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		&:first-child {
			margin-left: 0;
		}
	}
}
.flex {
	ul {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	li {
		flex-shrink: 0;
		flex-basis: 90px;
	}
}
.inline {
	margin-top: 10px;
	height: 102px;
	ul {
		overflow-y: hidden;
		white-space: nowrap;
	}
	li {
		display: inline-block;
		width: 90px;
	}
}

知识点解析：

1、display: flex布局：又名“弹性布局”，任何一个容器都可以指定为Flex布局。详细内容请点击

《CSS3中Flex弹性布局该如何灵活运用？》

2、滚动条样式美化。

如何自定义滚动条样式了？掌握这3个选择器即可。

（1）、::-webkit-scrollbar 定义了滚动条整体的样式；

（2）、::-webkit-scrollbar-thumb 滑块部分；

（3）、::-webkit-scrollbar-track 轨道部分；

所以上面scss代码中，我们书写了这3个选择器的样式，改变了滚动条的样式。

3、linear-gradient线性渐变。语法如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction用角度值指定渐变的方向（或角度）, color-stop1, color-stop2,...用于指定渐变的起止颜色。

to right的意思就是从左到右，从一个颜色过渡到另外一个颜色。

请看示例：

CSS实用技巧第二讲：布局处理

更多详细内容请点击：

《CSS3线性渐变、阴影、缩放实现动画下雨效果》

《CSS3线性径向渐变、旋转、缩放动画实现王者荣耀匹配人员加载页面》

《CSS3径向渐变实现优惠券波浪造型》

移动端1px边框解决方案

在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。

我们可以通过伪类加transform的方式解决。

CSS实用技巧第二讲：布局处理

transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”。

详细transform了解，请点击：

《CSS3最容易混淆属性transition transform animation translate》

左重右轻导航栏布局

非常简单的方式，flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐。

请看示例：

<ul class="nav-list">
 <li>HTML5</li>
 <li>CSS3</li>
 <li>JAVASCRIPT</li>
 <li>TYPESCRIPT</li>
 <li>THREE.JS</li>
 <li>NODE</li>
</ul>

css样式

.nav-list {
 display: flex;
 align-items: center;
 padding: 0 10px;
 width: 700px;
 height: 60px;
 background-color: #00b7a3;
}
.nav-list li {
 padding: 0 10px;
 height: 40px;
 line-height: 40px;
 font-size: 16px;
 color: #fff;
 list-style: none;
}
.nav-list li + li {
 margin-left: 10px;
}
.nav-list li:last-child {
 margin-left: auto;
}

CSS实用技巧第二讲：布局处理

纯CSS折叠面板

<div class="accordion">
 <input type="checkbox" id="collapse1">
 <input type="checkbox" id="collapse2">
 <input type="checkbox" id="collapse3">
 <article>
 <label for="collapse1">web秀</label>
 <p>html<br>javascript<br>css<br>uni app</p>
 </article>
 <article>
 <label for="collapse2"></label>
 <p>新闻<br>图片<br>视频<br>养生</p>
 </article>
 <article>
 <label for="collapse3">阿里巴巴</label>
 <p>淘宝<br>阿里云<br>闲鱼<br>天猫</p>
 </article>
</div>

scss样式

.accordion {
	width: 300px;
	article {
		margin-top: 5px;
		cursor: pointer;
		&:first-child {
			margin-top: 0;
		}
	}
	input {
		display: none;
 padding: 0;
 margin: 0;
		&:nth-child(1):checked ~ article:nth-of-type(1) p,
		&:nth-child(2):checked ~ article:nth-of-type(2) p,
		&:nth-child(3):checked ~ article:nth-of-type(3) p {
			border-bottom-width: 1px;
			max-height: 600px;
		}
	}
	label {
		display: block;
		padding: 0 20px;
		height: 40px;
		background-color: #00b7a3;
		cursor: pointer;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
	}
	p {
		overflow: hidden;
		padding: 0 20px;
 margin: 0;
		border: 1px solid #00b7a3;
		border-top: none;
		border-bottom-width: 0;
		max-height: 0;
		line-height: 30px;
		transition: all 500ms;
	}
}

CSS实用技巧第二讲：布局处理

纯CSS Tabbar切换效果

<div class="tab-navbar">
 <input type="radio" name="tab" id="tab1" checked>
 <input type="radio" name="tab" id="tab2">
 <input type="radio" name="tab" id="tab3">
 <input type="radio" name="tab" id="tab4">
 <nav>
 <label for="tab1">首页</label>
 <label for="tab2">列表</label>
 <label for="tab3">其他</label>
 <label for="tab4">我的</label>
 </nav>
 <main>
 <ul>
 <li>首页</li>
 <li>列表</li>
 <li>其他</li>
 <li>我的</li>
 </ul>
 </main>
</div>

scss样式

*{
 padding: 0;
 margin: 0;
}
.active {
	background-color: #00b7a3;
	color: #fff;
}
.tab-navbar {
	display: flex;
	overflow: hidden;
	flex-direction: column-reverse;
	border-radius: 10px;
	width: 300px;
	height: 400px;
 margin: 100px auto;
	input {
		display: none;
		&:nth-child(1):checked {
			& ~ nav label:nth-child(1) {
				@extend .active;
			}
			& ~ main ul {
				background-color: #f13f84;
				transform: translate3d(0, 0, 0);
			}
		}
		&:nth-child(2):checked {
			& ~ nav label:nth-child(2) {
				@extend .active;
			}
			& ~ main ul {
				background-color: #44bb44;
				transform: translate3d(-25%, 0, 0);
			}
		}
		&:nth-child(3):checked {
			& ~ nav label:nth-child(3) {
				@extend .active;
			}
			& ~ main ul {
				background-color: #ff7632;
				transform: translate3d(-50%, 0, 0);
			}
		}
		&:nth-child(4):checked {
			& ~ nav label:nth-child(4) {
				@extend .active;
			}
			& ~ main ul {
				background-color: #00bbdd;
				transform: translate3d(-75%, 0, 0);
			}
		}
	}
	nav {
		display: flex;
		height: 40px;
		background-color: #f0f0f0;
		line-height: 40px;
		text-align: center;
		label {
			flex: 1;
			cursor: pointer;
			transition: all 300ms;
		}
	}
	main {
		flex: 1;
		ul {
			display: flex;
			flex-wrap: nowrap;
			width: 400%;
			height: 100%;
			transition: all 300ms;
		}
		li {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			font-weight: bold;
			font-size: 20px;
			color: #fff;
		}
	}
}

CSS实用技巧第二讲：布局处理

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！同时，要源码的小伙伴可以点击下方“了解更多”。

最后推荐一个专栏文章，感谢小伙伴们多多支持，谢谢大家！

、摘要

（OF作品展示）

OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。

主要内容：网页前端布局

适用人群：Python初学者，前端初学者

准备软件：pycharm

二、pycharm操作说明

1. 创建项目

1) 下载完成pycharm, 点击file-New Project...

2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统

2. 创建HTML文件

1）在创建的项目空白处鼠标右键-New-HTML File

2）输入英文的网页名字，尽量不要输入中文/特殊字符

3. HTML格式说明

当双击打开我们创建后的HTML文件，大家会看到下面的界面

三、网页设计

1. 草图绘制

在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。

2. css名字定义

我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下

四、网页开发

1. body部分

根据上述的css名字定义，先填充<body>内的代码，那么我们就完成一半的工作了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

2. 网页测试

1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行

2）目前看到的网页内容从上到下显示

3. head部分

首先我们简要了解下flex布局，大家可以看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在<div id="main">中，运行结果是3个颜色的内容横向展示了，而不是上下

1）那么我们先从“人物介绍”的布局开始，“人物介绍”居中展现（用flex中justify-content:center），而且下面有一条黑线，OF准备用border样式来实现，所以在<div id=intro>里另加了个<div class=peo>，代码如下：

(注：style中的#main对应body中的id=main, .main对应class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

运行结果：

2）图片部分是3个<div class=bord>横向展示，所以要在框住它们的<div id=pic1>样式中设置flex布局，在<style>里加入以下代码：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

运行结果：

3）图片之间靠太近，图片大小不一致，文字没居中，我们在<style>里加入以下代码：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

运行结果：

五、总结

今天我们学会了flex布局，今后所有的网页排版都可以实现了，祝愿大家都有所收获，完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

今天的知识比较基础但非常实用，每天学会一个小技能，积少成多，以后就能成为大神。如果大家对网页上的实现有什么不懂的，尽请留言，OF一定会一一解答的。

在线咨询

上一篇：案例复盘：QQ红包的趣味新玩法是怎么设计的？
下一篇：我是如何初识HTML，入前端的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css布局方案汇总(28个实例图文并茂)

介

居中

水平居中

垂直居中

水平垂直同时居中

纯绝对定位

绝对定位加负外边距

绝对定位加平移

使用flex实现

使用grid实现

使用table加外边距实现

单栏布局

顶底部都不固定

使用padding加负margin实现

使用flex实现

顶部固定

使用padding加负margin加fixed实现顶部固定布局

使用flex加fixed定位实现

底部固定

使用padding加负margin实现底部固定布局

使用flex加fixed定位实现

顶底部都固定

使用fixed实现顶底部固定布局

使用flex加fixed定位实现

两栏布局

左 float，然后右 margin-left（右边自适应）

右 float，然后右 margin-right（左边自适应）

absolute定位加margin-left（右边自适应）

absolute定位加margin-right（左边自适应）

使用flex实现

使用grid实现

三栏布局

position + margin-left + margin-right实现三栏布局

float + margin-left + margin-right实现三栏布局

flex实现三栏布局

grid实现三栏布局

圣杯布局

双飞翼布局

总结

后记

前言

rem自适应布局

overflow-x排版横向列表

移动端1px边框解决方案

左重右轻导航栏布局

纯CSS折叠面板

纯CSS Tabbar切换效果

、摘 要

二、pycharm操作说明

1. 创建项目

2. 创建HTML文件

3. HTML格式说明

三、网页设计

1. 草图绘制

2. css名字定义

四、网页开发

1. body部分

2. 网页测试

3. head部分

五、总 结

您的项目需求

、摘要

五、总结