什么是布局

把页面分成一块一块，按左中右，上中下等排列

常用草图软件

Balsmiq Figma 墨刀 Adobe XD

布局分类

一般两种：
固定宽度布局，一般宽度为960/1000/1024 px
不固定宽度布局，主要靠文档流的原理来布局
第三种：
响应式布局：PC上固定宽度，手机上不固定宽度，混合布局

用什么css布局

float布局

只适合PC布局
步骤：

子元素上加 float:left, 和width
父元素加上 .clearfix

.clearfix的写法：

.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

做个简单Float布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<header class="clearfix">
  <div class="logo">抬头</div>
  <nav>导航</nav>
</header>
</body>
</html>

*{
  margin: 0;padding:0boxsizing:   border-box;
}

.clearfix::after {                     **让header包裹住logo和nav**
  content:'';
  display:block;                       
  clear:both;
}

.logo{
  border: 1px solid red;
  height: 40px;
  width: 100px;
  float: left;                          **脱离文档流，使得block元素不另起一行**
  margin-top: 5px;
}

nav{
  border: 1px solid green;
  width: 200px;
  height: 50px;
  float: right;
}

header{
  border: 1px solid black;
}

效果如下：js.jirengu.com/ranodafulu/…

一些经验：

最后一个子元素不设置width，或者设置max-width
img 设置Max-width
如果图片下面有多余的空白，就在图片上写上 vertical-align: top或者middle
如果border干扰了布局，可以用outline: 1px solid red, outline不占用位置
固定元素的块级元素居中的方法：写上margin: 0 auto; 或者margin-left: auto; margin-right: auto;(比前者好，因为没有影响上下的Margin)
平均布局的关键点：负Margin

做个进阶Float布局

用float做两栏布局（如顶部条）
用float做三栏布局（如内容区）
用float做四栏布局（如导航）
用float做平均布局（如产品展示区）

效果如下：js.jirengu.com/xevixebabo/… GitHub:jiangwenxu.github.io/Float.css/F…

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <header class="clearfix">
    <div class="logo">
      <img src="https://xiedaimala.com/packs/_/assets/images/logos/red-logo-3f8db9041e6c15d4ae7ed7e4087c4b98.png" alt="">
    </div>
    <ul class="clearfix nav">
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  
  <div class="content clearfix">
    <aside>一行有六个字</aside>
    <main>主要内容</main>
    <div class="ad">广告</div>               **广告div.ad**
  </div>
  
  <div class="imagelist ">
    <div class="x clearfix">              **clearfix要放在上级父元素**
      <div class="image">平均布局</div>    **x用来再次margin-right，
      <div class="image">平均布局</div>    设置负margin**
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>    
      <div class="image">平均布局</div>    
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
    </div>
  </div>
</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none                         **去除点点**
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.logo {
  display: inline-block;                  **尽可能压窄自己**
  float: left;
  margin-top: 11px;                       **下调11像素，对齐**
  margin-left: 10px;
}
.logo>img {
  height: 20px;
  vertical-align: top;                   **去除图片多余背景色**
}
.nav {
  float: right;
  margin-left: 20px;                      **导航左侧空20像素**
}
ul > li {
  float: left;
  padding: 4px 0.5em;
  line-height: 32px;                     **字体高度**
}
ul {
  display: inline-block;
}
header {
  background: grey;
  color: white
}
.content{
  outline: 1px solid red;                **不占像素border**
  width: 700px;
  margin-left: auto;                     **块级元素剧中**
  margin-right: auto;
}
.content>aside{
  border: 1px solid blue;
  width: 200px;
  height: 300px;
  float: left;
}
.content>main{
  border: 1px solid green;
  height: 300px;
  width: 400px;
  float: left;
}
.content>.ad{
  border: 1px solid purple;
  height: 300px;
  width: 100px;
  float: left;
}
.imagelist{
  outline: 1px solid green;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.imagelist > .x > .image{
  width: 166px;
  height: 166px;
  border: 1px solid red;
  float: left;
  margin-bottom: 10px;                   **底部间隔10px**
  margin-right: 12px;
}
.imagelist > .x{
  margin-right: -12px;               **负margin用来减掉最后一个平均布局的12px**
}                                    **不然移动不上去**

效果如下：

【CSS全解】CSS布局 - Float布局

什么是布局

常用草图软件

布局分类

用什么css布局

float布局

做个简单Float布局

一些经验：

做个进阶Float布局