CSS布局技巧

最新推荐文章于 2023-05-14 18:46:09 发布

方小圆

最新推荐文章于 2023-05-14 18:46:09 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/fengfangyuan/article/details/89302161

版权

两栏布局

左边宽度固定，浮动。右边设置margin-left，宽度自适应。反之，亦可。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
		.aside{
		  float:left;
		  border:1px solid red;
		  background:red;
		  height:50px;
		  width:50px;
		}
		.main{
		  border:1px solid blue;
		  background:blue;
		  height:100px;
		  margin-left:60px;
		}
  </style>
</head>
<body>
  <div class="aside">
    左边
  </div>
  <div class="main">
    右边
  </div>
</body>
</html>

结果：
在这里插入图片描述

三栏布局

两侧浮动且宽度固定，左边left浮动，右边right浮动，中间设置margin-left和margin-right宽度自适应。注意，书写顺序是左右中。
例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .aside{
      float:left;
      border:1px solid red;
      background:red;
      height:50px;
      width:50px;
    }
    .main{
      border:1px solid blue;
      background:blue;
      height:100px;
      margin-left:60px;
      margin-right:60px;
    }
    .aside2{
      float:right;
      width:50px;
      height:50px;
      background:green;
    }
  </style>
</head>
<body>
  <div>
    <div class="aside"> 
      左边
    </div>
    <div class="aside2">
      右边
    </div>
    <div class="main">
      中间
    </div>
  </div>
</body>
</html>

结果：
在这里插入图片描述

水平居中

方法有很多，我只列出常见的几种方法。

行内元素：
父元素设置text-alignt:center;
padding:上下padding值一样；
块级元素：
- 宽度确定:
  方法一：margin-left:auto;margin-right:auto;
  方法二：绝对定位+margin-left，将元素右移50%，然后再左移元素自身宽度的一半就可以。
  方法三：flex布局，具体可以参考阮一峰的教程
- 宽度不确定:
  第一种方法：可以将该元素转为inline或者inline-block，然后外面包裹着块级元素，对外面的块级元素设置:text-alignt:center;注意若设置inline-block,同时建议对该元素设置vertical-align:top;
  第二种方法：绝对定位+css3 translate属性，将元素右移50%，然后再左移元素自身宽度的一半就可以。这个需要注意兼容性。
  方法三：flex布局，具体可以参考阮一峰的教程

垂直居中

方法有很多，我只列出常见的几种方法。

行内元素:
line-height
padding:左右padding值一样；
块级元素
- 高度确定:
  绝对定位+margin-top，将元素下移50%，然后再上移元素自身宽度的一半就可以。
  flex布局，具体可以参考阮一峰的教程
- 高度不确定
  absolute + CSS3 transform，将元素下移50%，然后再上移元素自身宽度的一半就可以。
  flex布局，具体可以参考阮一峰的教程
  lineheight