HTML网页布局

2024-01-11 17:15:10

一、水平居中的方法

元素为行内元素，设置父元素text-align: center；

<div class="main" style="text-align: center;">
  <span>行内元素</span>
</div>

如果元素宽度固定，可以设置左右margin: auto;

<div class="box" style="width: 100px; margin: 0 auto;">固定宽度</div>

如果元素为绝对定位，设置父元素position: relative; 设置元素left: 0; right: 0; margin: auto;

<div class="main" style="position: relative;">
    <div class="box" style="position: absolute; width: 100px; height: 100px; left: 0; right: 0; margin: auto;">绝对定位</div>
</div>

使用flex-box布局，设置justify-content: center;
```
<div class="box" style="display: flex; justify-content: center;">flex-box布局</div>
```
flex-direction: row|row-reserve|column|column-reserve 分别是从左到右、右到左、从上到下、从下到上
flex-wrap: nowrap|wrap|wrap-reverse 分别是不换行、换行（第一行在上方）、换行（第一行在下方）
justify-content: flex-start|flex-end|center|space-between|space-around 分别是左对齐、右对齐、居中、两端对齐（项目之间间隔都相等）、间隔相等（项目之间间隔比边框间隔大一倍）
diplay: table-cell

二、垂直居中的方法

diplay: table-cell，同时设置vertial-align: middle;
使用flex布局，设置align-item: center;
绝对定位，设置bottom: 0; top: 0; margin: auto;
绝对定位：固定高度设置50%，margin-top: -值为高度一半
文本垂直居中设置line-height: height的值

三、水平垂直居中

第一种方法：

.wrap{ position: relative;width: 100%; height: 200px; background-color: royalblue;}
.wrap .box{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px;border: 1px solid red;}

<div class="wrap">
  <div class="box">这是第一种水平垂直方法</div>
</div>

第二种方法：

.main{ position: relative;width: 100%; height: 200px;background-color: orange;}
.main .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);border: 1px solid red;}

<div class="main">
  <div class="box">这是第二种水平垂直方法</div>
</div>

第三种方法：

.header{ display: flex; justify-content: center; align-items: center; width: 100%; height: 200px;background-color: pink;}
.header .box{ border: 1px solid red; width: 100px; height: 100px;}

<div class="header">
  <div class="box">这是第三种水平垂直方法</div>
</div>

第四种方法：

.footer{ display: table; width: 100%; height: 200px;background-color: gray;}
.footer .box{ display: table-cell; vertical-align: middle; border: 1px solid red; }

<div class="footer">
  <div class="box">这是第四种水平垂直方法</div>
  <div class="box">这是第四种水平垂直方法</div>
  <div class="box">这是第四种水平垂直方法</div>
</div>

四、左侧宽度固定，右侧宽度自适应布局

<div class="container">
  <div class="left">这是左侧</div>
  <div class="right">这是右侧</div>
</div>

第一种方法：BFC（块级格式化上下文）

.container{ width: 1000px; height: 400px; border: 1px solid red;}
.left{ width: 200px; height: 100%; background-color: gray; float: left;}
.right{ overflow: hidden;background: green;}

第二种方法：flex布局

.container{ display: flex; width: 1000px; height: 400px; border: 1px solid red;}
.left{ flex: none; width: 200px; height: 100%; background: gray;}
.right{ height: 100%; background: green; flex: 1;}

第三种方法：table布局

.container{ display: table; width: 1000px; height: 400px; border: 1px solid red;}
.left{ display: table-cell; width: 200px; height: 100%; background: gray;}
.right{ display: table-cell; height: 100%; background: green; flex: 1;}

第四种方法：css计算宽度calc

.container{ width: 1000px; height: 400px; border: 1px solid red;}
.left{ width: 200px; height: 100%; background-color: gray; float: left;}
.right{ float: left; height: 100%; background: green; width: calc(100% - 200px);}

第五种方法：margin-left方式

.container{ width: 1000px; height: 400px; border: 1px solid red;}
.left{ width: 200px; height: 100%; background-color: gray; float: left;}
.right{ width: auto; height: 100%; background: green; margin-left: 200px;}

五、两栏固定中间自适应

圣杯布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣杯布局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      min-width: 500px;
    }
    #header, #footer{
      width: 100%;
      height: 50px;
      background-color: hotpink;
    }
    #container{
      padding-left: 200px;
      padding-right: 150px;
      background-color: indigo;
      overflow: hidden;
    }
    #container .column{
      position: relative;
      float: left;
    }
    #center{
      width: 100%;
      background-color: gray;
    }
    #left{
      width: 200px;
      margin-left: -100%;
      position: relative;
      right: 200px;
      background-color: red;
    }
    #right{
      width: 150px;
      margin-right: -150px;
      background-color: blue;
    }
    #footer{
      clear: both;
    }
  </style>
</head>
<body>
  <div id="header">header</div>
  <div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #header{
      background-color: gray;
    }
    #container{
      width: 100%;
    }
    .column{
      float: left;
    }
    #center{
      margin-left: 200px;
      margin-right: 150px;
      background-color: pink;
    }
    #left{
      width: 200px;
      margin-left: -100%;
      background-color: yellow;
    }
    #right{
      width: 150px;
      margin-left: -150px;
      background-color: indigo;
    }
    #footer{
      background-color: gray;
      clear: both;
    }
  </style>
</head>
<body>
  <div id="header">header</div>
  <div id="container" class="column">
    <div id="center">center</div>
  </div>
  <div id="left" class="column">left</div>
  <div id="right" class="column">right</div>
  <div id="footer">footer</div>
</body>
</html>

码农公寓

一、水平居中的方法

二、垂直居中的方法

三、水平垂直居中

四、左侧宽度固定，右侧宽度自适应布局

五、两栏固定中间自适应

相关文章