1.     CSS页面布局是web前端开发的最基本的技能，本文将介绍一些常见的布局方法，涉及到盒子布局，column布局，flex布局等内容。本文中，你可以看到一些水平垂直居中的方法，左侧固定宽度，右侧自适应的一些方法。如果你有更多关于布局方面的技巧，欢迎留言交流。
  2.  
  3. 一、神奇的居中
  4.     经常看到有一些面试题问如何实现水平垂直居中，还要求用多种方法。唉唉唉！下面介绍一下我所知道的实现居中的方法。
  5. （1）父元素relative;子元素absolute，top:50%;left:50%;margin-left:-自己宽度的一半;margin-right:-自己高度的一半。
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>水平垂直居中2</title>
  6.      <style type="text/css">
  7.          .container{
  8.              width: 100%;
  9.              height: 500px;
  10.              background: red;
  11.              position: relative;
  12.          }
  13.  
  14.          .child{
  15.              width: 300px;
  16.              height: 300px;
  17.              background: blue;
  18.              position: absolute;
  19.              left: 50%;
  20.              margin-left: -150px;
  21.              top: 50%;
  22.              margin-top: -150px;
  23.          }
  24.      </style>
  25.  </head>
  26.  <body>
  27.      <div class="container">
  28.          <div class="child"></div>
  29.      </div>
  30.  </body>
  31.  </html>

这种方法需要知道子元素的宽高。

  1. （2）父元素：relative;子元素：absolute;top：50%;left:50%;transform:translate(-50%,-50%);
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>水平垂直居中3</title>
  6.      <style type="text/css">
  7.          .container{
  8.              background: red;
  9.              width: 100%;
  10.              height: 500px;
  11.              position: relative;
  12.          }
  13.  
  14.          .child{
  15.              background: blue;
  16.              width: 300px;
  17.              height: 300px;
  18.              position: absolute;
  19.              top: 50%;
  20.              left: 50%;
  21.              transform: translate(-50%,-50%);
  22.          }
  23.      </style>
  24.  </head>
  25.  <body>
  26.      <div class="container">
  27.          <div class="child"></div>
  28.      </div>
  29.  </body>
  30.  </html>
  1. 此法跟上面的相似，但是用到了transform，好处是不需要知道子元素的宽高,兼容性方面我查了一下，看着办吧。



  3. （3）父元素：display: flex;justify-content: center;align-items: center;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>水平垂直居中1</title>
  6.     <style type="text/css">
  7.         .container{
  8.             width: 100%;
  9.             height: 400px;
  10.             background: red;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: center;
  14.         }
  15.  
  16.         .child{
  17.             width: 300px;
  18.             height: 300px;
  19.             background: blue;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="container">
  25.         <div class="child"></div>
  26.     </div>
  27. </body>
  28. </html>
  1.  

这种方法看起来有些高大上，根本不用理会子元素。

  1. （4）水平居中的方法，父元素：text-align：center
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>水平垂直居中4</title>
  6.      <style type="text/css">
  7.          .container{
  8.              background: red;
  9.              width: 100%;
  10.              height: 500px;
  11.              text-align: center;
  12.          }
  13.  
  14.          .child{
  15.              background: blue;
  16.              width: 300px;
  17.              height: 300px;
  18.              margin: auto;
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.      <div class="container">
  24.          <div class="child"></div>
  25.      </div>
  26.  </body>
  27.  </html>
  1. 如果子元素里的文字不要水平居中的话，那么用此法将遇到不少麻烦。
  2. （5）水平居中方法，子元素：margin：0 auto;这个好说，不上代码了
  3. 好了，关于居中问题就说这么多，如果你还有更好的方法，请告诉我。
    二、左侧固定宽度，右侧自适应
  4. 这是一个比较常见的需求，下面介绍几种实现方法。
  5. （1）左边定宽，左浮动，右边不指定宽。
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>做固定，右边自适应</title>
  6.      <style type="text/css">
  7.      body{
  8.          margin: 0;
  9.      }
  10.          .aside{
  11.              background: red;
  12.              width:200px;
  13.              height: 500px;
  14.              float: left;
  15.          }
  16.          .main {
  17.              background: blue;
  18.              height: 500px;
  19.  
  20.          }
  21.      </style>
  22.  </head>
  23.  <body>
  24.      <div class="aside">
  25.          我是左边的
  26.      </div>
  27.      <div class="main">
  28.          我是主体
  29.          我是主体
  30.          我是主体
  31.          我是主体
  32.          我是主体
  33.      </div>
  34.  </body>
  35.  </html>

做实验时无意发现了这种方法，意外之喜。

（2）用padding占位子的方法

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>左侧固定右侧自适应</title>
  6.      <style type="text/css">
  7.          .container {
  8.              padding-left: 200px;
  9.              width: 100%;
  10.              position: relative;
  11.          }
  12.          .left{
  13.              position: absolute;
  14.              left: 0;
  15.              right: 0;
  16.              background: red;
  17.              height: 500px;
  18.              width: 200px;
  19.          }
  20.          .right{
  21.              background: blue;
  22.              width: 100%;
  23.              height: 500px;
  24.          }
  25.      </style>
  26.  </head>
  27.  <body>
  28.      <div class="container">
  29.          <div class="left">zuobian</div>
  30.          <div class="right">
  31.              新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
  32.          </div>
  33.      </div>
  34.  </body>
  35.  </html>

注意了，absolute是脱离文档流的。.right的100%是相对于父容器的内容宽度的，不是整个宽度。

（3）父：display:flex;左定宽;右flex：1。ok

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>左边固定，右边自适应</title>
  6.      <style type="text/css">
  7.          .container{
  8.              display: flex;
  9.          }
  10.          .left{
  11.              width: 200px;
  12.              height: 500px;
  13.              background: red;
  14.          }
  15.          .right{
  16.              background: blue;
  17.              height: 500px;
  18.              flex: 1;
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.      <div class="container">
  24.          <div class="left">zuobian</div>
  25.          <div class="right">
  26.              新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。和俄罗斯联邦总统普京分别致贺信。
  27.          </div>
  28.      </div>
  29.  </body>
  30.  </html>
  1. 弹性盒子很强，有木有。但是有的是要加前缀的，哪些要加自己查去，有一次做实验，电脑样式正确，手机就是不对，搞了好半天。
  1. （4）父：display：table;左右：display：table-cell;左：定宽。
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>左边固定，右边自适应</title>
  6.      <style type="text/css">
  7.          .container{
  8.              display: table;
  9.          }
  10.          .left{
  11.              width: 200px;
  12.              height: 500px;
  13.              background: red;
  14.              display: table-cell;
  15.          }
  16.          .right{
  17.              background: blue;
  18.              height: 500px;
  19.              display: table-cell;
  20.          }
  21.      </style>
  22.  </head>
  23.  <body>
  24.      <div class="container">
  25.          <div class="left">zuobian</div>
  26.          <div class="right">
  27.              新华社俄罗斯喀山3月23日电（记者 魏良磊）中俄执政党对话机制第六次会议和第五届中俄政党论坛23日在俄罗斯喀山举行。罗斯联邦总统普京分别致贺信。
  28.          </div>
  29.      </div>
  30.  </body>
  31.  </html>
  1. 据说这是一种古老的方法，我咋不知道呢？可能我比较年轻吧！

三、总结

CSS这个东西看起来挺简单的，要掌握好还真实不简单。特别佩服张鑫旭，他对CSS的研究真的非常非常深入，虽然说不太喜欢他的风格。先到这，以后在再补充下相关的内容。

CSS基础布局--居中对齐，左侧定宽右侧自适应的更多相关文章

  1. 请给出一个左侧定宽右侧自适应的HTML结构及样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  2. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  3. table-cell完成左侧定宽，右侧定宽及左右定宽等布局

    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...

  4. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  5. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  6. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  7. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  8. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

随机推荐

  1. 浅谈sql优化

    问题的发现:      菜鸟D在工作的时候发现项目的sql语句很怪,例如 : select a.L_ZTBH, a.D_RQ, a.VC_BKDM, (select t.vc_name from tb ...

  2. BZOJ 1228: [SDOI2009]E&D(SG定理)

    这道嘛，很容易就看出是个nim和，然后问题就是怎么算子问题的sg函数了 先暴力个表看下规律，很容易就找出来了~~~（百度空间又渣了，图贴不出来= =） 32 0 1 0 2 0 1 0 3 0 1 0 ...

  3. MongoDB的安装及恢复

    在http://www.mongodb.org/display/DOCS/Downloads 下载对应版本 mongodb 安装数据库 解压文档,复制到c盘,改名为mongodb 新建文件夹c:/da ...

  4. TCP四个计数器

    持续计时器 TCP 为每一个连接设有一个持续计时器. 只要 TCP 连接的一方收到对方的零窗口通知,就启动持续计时器. 若持续计时器设置的时间到期,就发送一个零窗口探测报文段(仅携带 1 字节的数据) ...

  5. Python入门教程（1）

    人生苦短,我用Python! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于19 ...

  6. 【Java每日一题】20170308

    20170307问题解析请点击今日问题下方的"[Java每日一题]20170308"查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; ...

  7. Java进程通讯

    管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. 创建子进程Java有两种方式 //第一种 Runtime rt = Runtime.get ...

  8. html基础知识1（基本标签）2017-03-07

    摘要:php基础知识1 内容:大学中虽有接触,却是以学生的心态去应付考试的,学的都是理论知识:从今天开始我同样还是要以学生的心态去学习,但却要以要从事工作的心态去练习. 以下为第一天所学内容,因电脑原 ...

  9. Visual Studio 2017 通过SSH 调试Linux 上.NET Core

    Visual Studio 2017 通过SSH 调试Linux 上.NET Core 应用程序. 本文环境 开发环境:Win10 x64 Visual Studio 2017 部署环境:Ubuntu ...

  10. 解决Gerrit的git unpack error问题和error Missing unknown ec867cebfd2be97c3603c45fac03c75dcf68d0ca

    参考链接:http://www.cnblogs.com/yuxc/p/3508964.html 解决方法: 由于帖子里面用的是mysql数据库,而我用的是h2数据库,还特意自己去找了H2数据库的进入方 ...