（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</div><div id="rightDiv">右边div</div></body></html>
页面效果：
（2）浮动
使用对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#leftDiv,#rightDiv{width: 200px;height: 200px;}#leftDiv{background: #16A05D;float: left;}#rightDiv{background: #DC5044;float: right;}#centerDiv{background: #FFCD41;height: 200px;margin: 0 200px;}</style></head><body><div id="leftDiv">左边div</div><div id="rightDiv">右边div</div><div id="centerDiv">中间div</div></body></html>
页面效果：
使用这种方式布局时，中间的div一定要放在最后，否则将不是想要的效果，如下图：
此时，布局方式为：
<div id="leftDiv">左边div</div><div id="centerDiv">中间div</div><div id="rightDiv">右边div</div>
（3）浮动+定位
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#leftDiv,#rightDiv{width: 200px;height: 200px;}#leftDiv{background: #16A05D;float: left;}#rightDiv{background: #DC5044;float: right;}#centerDiv{background: #FFCD41;height: 200px;left: 200px;right: 200px;position: absolute;}</style></head><body><div id="leftDiv">左边div</div><div id="centerDiv">中间div</div><div id="rightDiv">右边div</div></body></html>
（4）flex 弹性布局
在外围包裹一层div，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#contentDiv{width: 100%;display: flex;height: 200px;}#leftDiv,#rightDiv{width: 200px;height: 200px;}#leftDiv{background: #16A05D;}#rightDiv{background: #DC5044;}#centerDiv{background: #FFCD41;height: 200px;flex: 1;}</style></head><body><div id="contentDiv"><div id="leftDiv">左边div</div><div id="centerDiv">中间div</div><div id="rightDiv">右边div</div></div></body></html>
页面效果：
使用这种方法时，中间的div一定要放置在中间，否则，布局效果将不一样，如下图：
此时，布局方式为：
<div id="contentDiv"><div id="leftDiv">左边div</div><div id="rightDiv">右边div</div><div id="centerDiv">中间div</div></div>
![[css] 在固定宽度的div下 怎么让字体自适应大小 不超出宽度 也不要换行](https://900zi.500zi.com/uploadfile/img/14/889/b81045686fb0abe7b01ea1bbc05dcccb.jpg)
