Write the layout, 100px on the left and right, adaptive in the middle

1. position, margin layout
There are also three types here, absolute positioning, holy grail layout, self-floating
1) Absolute positioning: left, right: absolute; center natural flow + margin left and right width

#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:2px 210px ;background-color: #eee;height: 200px; }  
<div id = "left">I am left</div>  
<div id = "right">I am right</div>  
<div id = "center">I am the center</div>  

Disadvantages: the values ​​on both sides and the middle may not be aligned, pay attention to the top value, add initialization elements if necessary, and as the window shrinks, if it is less than 200px, compression will occur;

2). Use self-floating method: left and right float: left, right, center natural flow + margin left and right width

#left{float: left;}  
#right{float: right;}  
#center{margin: 0 210px;height: 200px; background-color: #a0b3d6}  

The center must be placed at the end, which is different from absolute positioning. The center occupies the position of the document flow. When the browser window is small, the element on the right will be knocked down to the next line.

3). The Holy
Grail Layout The principle of the Holy Grail layout is the negative margin method. To use the Holy Grail layout, you first need to include a div outside the center element. The div needs to set the float property to form a BFC (block-level formatting context), and set the width, and this width should match the negative margin value of the left block.

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}
<div id = "wrap">  
	<div id = "center"></div>  
</div>  
<div id = "left_margin"></div>  
<div id = "right_margin"></div>

The advantage is that the three columns are related to each other and have a certain resistance. For the left fast margin, the negative value must be equal to the width of the wrap.

2. New features of css Wrap a layer of div
around the periphery and set it to display: flex; set flex: 1 in the middle; but the box model is close by default, and margins can be used to control the margins.

#box{width:100%;display: flex; height: 100px;margin: 10px;}  
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}  
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}  
<div id = "box">  
	<div id = "left_box"></div>  
	<div id = "center_box"></div>  
	<div id = "right_box"></div>  
</div>  

Note that the center must be placed in the middle

Reference : https://blog.csdn.net/cinderella_hou/article/details/52156333