CSS常见布局

程序员小晨
157 阅读5分钟

常见CSS布局

1.table布局（了解历史即可）

image.png

父级容器：table 子级容器：table-cell

.box {
  width: 600px;
  height: 100px;
  display: table;
}
.left,
.right {
  display: table-cell;
}
.left {
  background: green;
}
.right {
  background: blue;
}
<section class="box">
    <div class="left"></div>
    <div class="right"></div>
</section>

2.float布局

特点

  1. 元素浮动
  2. 脱离文档流
  3. 不脱离文本流
  4. 形成BFC

回顾一下什么是BFC

一块元素被赋予某些了某些样式特性，所形成的一个独立容器，并且容器内的子元素进行margin、padding等改变内部元素样式的操作不会影响到容器外的元素。

提到float时联想到的两个经典问题

高度塌陷 原因：子元素脱离文档流，父元素无法被撑起 解决方案：使直属父级元素产生BFC或设置父元素高度

margin重叠 原因：同一个BFC的两个相邻块级元素的margin垂直方向会发生重叠 解决方案：两个相邻块级元素不是所属同一个BFC即可，办法很多，常用是给其中一个加父元素设置overflow:hidden

言归正传，继续说float布局

1.两列布局（左固定右浮动） 浮动.gif

.left {
  width: 400px; /* 定宽 */
  height: 300px;
  background-color: red;
  float: left;
}
.right {
  height: 300px;
  background-color: skyblue;
  overflow: hidden;
}
<section>
    <div class="left"></div>
    <div class="right"></div>
</section>

2.三列布局，又名圣杯布局（左右固定中间浮动）

浮动三列布局.gif

.left {
  float: left;
  width: 200px; /* 定宽 */
  height: 300px;
  background-color: #c9394a;
}
.center {
  height: 300px;
  background-color: green;
  margin: 0 220px;
}
.right {
  float: right;
  width: 200px; /* 定宽 */
  height: 300px;
  background-color: #c9394a;
}
<section>
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</section>

3.inline-block布局

inline-block元素会占据一行而且可以控制宽高很适合将元素排列在一行，但是要注意它们之间会因为换行符空格等会有间隙 image.png

.box {
	width: 100px;
	height: 100px;
	display: inline-block;
        background-color: #5f9ea0;
	font-size: 14px;
}
.parent {
	font-size: 0;
}
<section class="parent">
	<div class="box">
            1
	</div>
	<div class="box">
            2
	</div>
	<div class="box">
            3
	</div>
</section>

4.flex

话不多说直接上代码

1.水平竖直居中 image.png

#parent {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;       
}
#child {
  width: 300px;
  height: 200px;
  background: #c9394a;
  /* margin: auto; */ 
}
<section id="parent">
  <div id="child"></div>
</section>

2.两列布局

flex两列布局.gif

.container {
  width: 100%;
  height: 200px;
  display: flex;
}
.left {
  background: red;
  width: 200px;
  height: 100%;
}
.right {
  flex: 1;
  background: blue;
  height: 100%;
  padding-left: 10px;
}
<section class="container">
  <div class="left">
    左
  </div>
  <div class="right">
    右
  </div>
</section>

5.grid

CSS网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

兼容性

image.png

对比于flex，grid从二维角度设置样式，会比flex还要强大，但是由于目前其兼容性差，所以无法在生产环境去使用，相信不久的将来，我们就可以为所欲为的使用grid啦

话不多说直接上代码

1.表格结构 image.png

.wrapper {
  display: grid;
  /* repeat第一个参数不是分几列，而是代表右侧的结构重复一次 */
  grid-template-columns: repeat(3, [c] 100px);
  grid-template-rows: repeat(3, [r] 100px);
  /* 间隙 */
  grid-gap: 10px;
  /* grid兼容一维的flex */
  /* justify-content: center; */ 
  /* justify-items: center; */ 
  /* align-content: center; */
}
.wrapper div {
  background-color: skyblue;
}
<section class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</section>

2.将1移动到中间并且进行延伸 image.png

.wrapper {
  display: grid;
  /* repeat第一个参数不是分几列，而是代表右侧的结构重复一次 */
  grid-template-columns: repeat(3, [c] 100px);
  grid-template-rows: repeat(3, [r] 100px);
  /* 间隙 */
  grid-gap: 10px;
  /* grid兼容一维的flex */
  /* justify-content: center; */ 
  /* justify-items: center; */ 
  /* align-content: center; */
}
.wrapper div {
  background-color: skyblue;
}
.wrapper div:first-child {
  background-color: #ff0000;
  /* 网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域，具体看下图 */  
  /* r|c 是上边使用 repeat API 所带入的名称，此时area占用区域为第一行到第三行，第二列到第三列*/
  grid-area: r 1 / c 2 / r 3  / c 3;
}
<section class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</section>

image.png

grid-area 分析图

3.整个俄罗斯方块凹槽

image.png

.wrapper > div {
  background-color: red;
}
.wrapper > div:nth-of-type(1) {
  grid-area: one;
}
.wrapper > div:nth-of-type(2) {
  grid-area: two;
}
.wrapper > div:nth-of-type(3) {
  grid-area: three;
}
.wrapper > div:nth-of-type(4) {
  grid-area: four;
}
.wrapper > div:nth-of-type(5) {
  grid-area: five;
}
.wrapper > div:nth-of-type(6) {
  grid-area: six;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
  /* 九宫格，每个单元格谁占据在这里指定就好，一定是已经声明的area才可以指定，"."代表空白 */
  grid-template-areas:
    'one  .  two'
    'three . four '
    'five  five  six';
}
<section class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</section>

image.png

6.响应式布局

早年设计Web时，⻚⾯是以适配特定的屏幕⼤⼩为考量创建的。如果⽤户正在使⽤⽐设计者考虑到的更⼩或者更 ⼤的屏幕，那么结果从多余的滚动条，到过⻓的⾏和没有被合理利⽤的空间，不⼀⽽⾜。随着⼈们使⽤的屏幕尺⼨的种类越来越多，出现了响应式⽹⻚设计的概念，允许Web⻚⾯适应不同屏幕宽度因素等，进⾏布局和外观的调整的⼀系列实践。

媒体查询

媒体查询.gif

.content > div {
	margin: 20px;
	float: left;
	height: 100px;
	line-height: 100px;
	text-align: center;
	color: #333;
	background: #cccccc;
}
@media screen and (max-width: 576px) {
	.content > div {
		width: 100%;
	}
	html {
		font-size: 14px;
	}
}
@media screen and (min-width: 576px) and (max-width: 768px) {
	.content > div {
		width: 50%;
		background-color: red !important;
	}
	html {
		font-size: 24px;
	}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
	.content > div {
		width: 33.33%;
		background-color: skyblue !important;
	}
	html {
		font-size: 34px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
	.content > div {
		width: 25%;
		background-color: yellow !important;
	}
	html {
		font-size: 44px;
	}
}
@media screen and (min-width: 1200px) {
	.content > div {
		width: 25%;
	}
	html {
		font-size: 54px;
	}
}
<section class="container">
	<div class="content">
		<div>
			1
		</div>
		<div>
			2
		</div>
		<div>
			3
		</div>
	</div>
</section>

Bootstrap实现，都给你封装的明明白白，教程很多

7.移动端适配

搞清逻辑像素和物理像素的关系，然后对照设计稿进行等比例缩放，当然网上有插件已经实现

avatar
文章
阅读
粉丝