css 写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块

＊且听风吟

已于 2023-03-30 18:27:49 修改

阅读量4.4k

点赞数 12

分类专栏： # CSS 文章标签： css css3 html

于 2019-08-07 19:49:35 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/97100986

版权

（1）绝对定位法
（2）浮动
（3）浮动+定位
（4）flex 弹性布局

写一个左中右布局占满屏幕，左右两块固定宽度200，中间自适应宽，先加载中间块。

css样式默认加载顺序：样式表的元素选择器选择越精确，则其中的样式优先级越高；
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高。

所以，把类选择器 center 写在后面就可以先加载中间块。一共有以下几种方法可以实现：

（1）绝对定位法

将左右两边使用absolute定位，因为绝对定位使元素脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	html,body{
   
		margin: 0;
		width: 100%;
	}
	#leftDiv,#rightDiv{
   
		width: 200px;
		height: 200px;
		position: absolute;
		top: 0;
	}
	#leftDiv{
   
		background: #16A05D;
		left: 0;
	}
	#rightDiv{
   
		background: #DC5044;
		right: 0;
	}
	#centerDiv{
   
		background: #FFCD41;
		height: 200px;
	}
  </style>
 </head>
 <body>
	<div id="leftDiv">左边div</div>
	<div id="centerDiv">中间div<