如何用CSS+DIV做布局

待我称王封你为后i 2021-11-29 23:54 461阅读 0赞

## 1、左右布局 ##

首先创建两个`<div>`，分别叫div1和div2,代码和效果如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70][]

可以见到，即使div1和div2在同一行，因为div标签是块级元素，div1的宽会占满整个body，使得div2只能另起一行，达不到所想要左右布局的效果。这时候就需要用CSS来调节div1和div2的宽度，使其宽度刚好能占满整个body即可，代码如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 1][]div标签的默认display（展示）属性为block（区块），  
把其修改成inline-block（线性区块），  
并将width（宽度）改成50%，  
修改完成后，div1和div2就处在一行并各占一半空间，  
这时只需要在两个div中添加内容，  
一个简单的左右布局就做成了。

## 2、左中右布局 ##

大概做法同上，在div的margin（外边距）属性修改成-5px，width属性修改成33.3%，代码如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 2]

## 3、水平居中 ##

可用position属性来实现在浏览器窗口的水平居中,代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 3]  
首先设置position为fixed，然后将top设置为50%，设置margin-top属性为被设置标签高度一半的负值作为补偿，此做法虽可保证标签水平居中，但其一，脱离文档流会导致排版混乱；二，该元素由于设置了fixed属性，会一直处于浏览器窗口的居中位置，不便于设计后之元素的内容格式。  
所以在此介绍第二种水平居中方式，这种方式更为灵活，且不脱离文档流，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 4]可以用另外一个div包括住要居中的内容，并通过外层div标签的padding属性来居中要居中的内容。

## 4、垂直居中 ##

直接在要居中的元素上加上margin：auto；  
就能使元素居中于其父元素，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70]: /images/20211129/d9b7595dfd0d4b35bf1038d1d41726c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 1]: /images/20211129/b9dd249ad78f49e4ae3a07d0a66566ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 2]: /images/20211129/611809e091be481e8a939905d76c5a1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 3]: /images/20211129/10b27448e9344a9fb53dab2d31bd4c8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 4]: /images/20211129/05e36a83db9c41dcabb3c42b188cbec5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70 5]: /images/20211129/da08c9dfc57f4963be85a9995a6710f3.png