CSS的布局有哪些_css布局-CSDN博客

1. table布局

● 特点：他的特性决定非常适合用来做布局，表格的内容可以自动居中，也可加入display:table;display:table.cell来支持
● 缺点：1.table比其他更多的html标记占更多的字节（会造成下载时间延迟，占用服务器更多的资源）
2. table会阻挡浏览器渲染引擎的渲染顺序（会延迟页面的生成速度，让用户等待更久的时间）
● 优点：本身具备的特点，让有的时候用起来非常的方便，可以很好的达到预期的效果

2. flex布局：

2.1 盒模型：

一个盒子的占用空间是：content+padding+border+margin

2.2 display/position

display的值有
● block（元素表现为块级元素，有固定的宽高，独占一行）
● inline（元素表现为行内元素，不能设置宽高）
● inline-block（对外表现为行内元素，对内表现为块级元素）
position的值有：
● static （默认情况，存在文档流中）
● relative：（根据元素本身原来所处的位置偏移，不会改变布局的计算）
● absolute：（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的relative或者absolute定位元素）
● fixed：（绝对定位，脱离文档流，相对于的是屏幕，这个是固定在一定的位置，但是absolute元素是离开相应的位置就看不见了）
position的层叠是按顺序层叠的，不过可以通过设置z-index来改变层叠的顺序，只有relative，absolute，fixed是可以设置z-index。

2.3 flexbox布局

flexbox布局即弹性盒子布局，他的特点是盒子本来是并列的，只需要指定宽度。下面是一个经典的三栏布局的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS布局</title>
</head>
<style>
.container{
  height:200px;
  width:200px;
  display:flex;
}
  .left{
    background-color:red;
    flex:1;
  }
  .middle{
    background-color:yellow;
    flex:1;
  }
  .right{
    background-color:green;
    flex:1;
  }
</style>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>
</html>

要是需要两边定宽，中间自适应的话，可以

.left{
  background-color:red;
  width:20px;
}
.middle{
  background-color:yellow;
  flex:1;
}
.right{
  background-color:green;
  width:20px;
}

缺点：就是flexbox布局方式浏览器的支持性不是很好，有些兼容性问题，但是是未来布局的趋势。

3. float布局：

float布局是各大网站用的最多的一种布局方式了，但是相对来说是比较复杂的。

什么是浮动呢? 浮动就是脱离文档流，但是不脱离文本流。
有什么特点呢？
（1）对自身的影响：
● float元素是可以形成块的，如span元素，可以让行内元素拥有宽和高，因为块级元素就是有宽高的。
● 浮动元素的位置尽量是靠上的
● 尽量是靠左（float:left）或者是靠右的（float:right），要是哪一行满足不了浮动元素的宽度要求，那么元素是往下掉的。
（2）对兄弟元素的影响：
● 不影响其他块级元素的位置
● 影响其他块级元素的文本
● 上面贴非float元素
● 旁边贴float元素或者边框
（3）对父级元素的影响：
● 从布局上“消失”
● 高度塌陷

3.1 高度塌陷

什么是高度塌陷呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS布局</title>
  </head>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .container{
      width:200px;
      background-color:red;
    }
    .left{
      background-color:yellow;
      float:left;
      height:50px;
      width:50px;
    }
    .right{
      background-color:yellow;
      float:right;
      height:50px;
      width:50px;
    }
  </style>
  <body>

    <div id="container">
    <span class="left">float</span>
    <span>我是字</span> 
      <span class="right">float</span>
    </div>
  </body>
</html>

从上面的图中，我们可以看到，float元素虽然包含在第一个container中，但是却超出了第一个container的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当子元素设置了浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，那么父元素的高度就会塌陷。
解决的方案：
● 父元素设置overflow:auto 或者overflow:hidden
给父元素设置了之后，效果如下

那么给父元素添加一个伪类效果如何呢

.container::after{
  content:'',
  clear:both;
  display:block;
  visibilityhidden;
  height:0;
}

3.2 两栏布局

现在要搞清楚的是，为什么要用float去实现布局呢？黄红黄这是一个标准的三栏布局，其实并不是

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS布局</title>
  </head>
  <style>
    *{
      margin:0;
      padding:0;
    }
    .container{
      width:400px;
      height:200px;
    }
    .left{
      background-color:yellow;
      float:left;
      height:100%;
      width:100px;
    }
    .right{
      background-color:red;
/*       float:right; */
      height:100%;
      margin-left:100px;
    }
    .container::after{
      content:'';
      display:block;
      visibility:hidden;
      clear:both;
    }
  </style>
  <body>

    <div id="container">
    <span class="left"></span>
      <span class="right"></span>
    </div>
  </body>
</html>

上面的代码中，最重要的是margin-left:100px;这一句将浮动元素的位置让出来了，所以右边栏里面的元素是不会影响到浮动的div 的
这就是浮动布局思想；

3.3 三栏布局

三栏布局主要是思路就是左边一个浮动元素，右边一个浮动元素，但是这里要注意，中间的元素是要写在最后面的，因为中间的元素假设有块级的话，会影响右边浮动元素的定位的。
因为浮动元素会把块级元素的位置腾出来，所以要把中间的元素放在最后

4. 响应式布局

4.1 meta标签

这个到底是什么
最简单的处理方式其实就是，加上一个meta标签

其中，width=device-width这一句话的意思就是让页面的宽度等于屏幕的宽度

4.2 使用rem

rem指的就是 html元素font-size，html元素的font-size 默认的是16px 所以1rem=16px，然后根据rem去算各个元素的宽高，然后去配合media query就可以实现自适应。

4.3 media query

css2允许用户根据特定的Media类型去定制样式，基本的语法是这样的，

@media screen and (max-width:360px){
  html{font-size:12px;}
}

意思就是：当屏幕的宽度小于360px的时候html的字体的大小为12px
要值得注意的就是，范围大的要放在上面。