笔记 - CSS布局

布局分类

固定宽度布局
960px, 1000px, 1024px，电脑页面
不固定宽度布局。
主要靠文档流，原本就是自适应，不需要额外样式。
多半是手机页面布局。
响应式布局

怎样选择布局

截屏2021-02-09 16.36.15.png

Float布局 - 为IE准备

子元素加float: left和width
父元素加.clearfix
e.g.

<style>
/* css reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 使脱离文档流的子元素高度可被父元素包裹 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 
   加入float属性使div.logo和nav脱离文档流
   不再作为block元素存在
   此时父元素header的高度为0
   需要给header加入.clearfix
*/
.logo {
  border: 1px solid red;
  height: 40px;
  width: 100px;
  float: left;
  margin-top: 5px;
  /* 使logo和nav居中对齐 */
}
nav {
  border: 1px solid green;
  height: 50px;
  width: 200px;
  float: right ;
}
header {
  border: 1px solid black;
}
</style>  
<header class="clearfix">
  <div class="logo">LOGO</div>
  <nav>Navigation</nav>
</header>

一般来说float布局里，一行的最后一个元素不写width，由其自身决定。
float布局不需要做响应式（由于float基本适配IE，而手机上没有IE，自然不需要为了手机屏幕做的响应式）
IE6-7存在双倍margin bug
1. 可以减半margin
  e.g. 假设原margin-left: 10px
  则在该行下增加
  _margin-left: 5px;
  IE可识别并计算出需要的margin
2. 可以加display: inline-block对抗bug

** tips: 怎样去除图片下方多余的背景色条**
给需要去掉的img加一行：
vertical-align: top;或者vertical-aligin: middle
原理: line-height

一个简单的nav示例


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
/* css reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%; 
}
/* 卸除列表默认样式 */
ul, ol{
  list-style: none;
}
/* clearfix */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.logo {
  background: black;
  display: inline-block;
  float: left;
}
.logo > img {
  /* 当宽度不好固定时可直接设置高度 */
  height: 26px;
  /* 裁去图片下方多余的背景色块 */
  vertical-align: middle;
}
ul > li {
  float: left;
  border: 1px solid red;
  /* 上下4px，左右0.5倍 */
  padding: 4px 0.5em;
}
ul {
  border: 1px solid green;
  display: inline-block;
}

nav {
  float: left;
}
  </style>
</head>
<body>
  <div class="logo">
    <img src="" alt="logo">
  </div>
<nav>
  <ul class="clearfix">
    <li>首页</li>
    <li>商品</li>
    <li>优惠</li>
    <li>关于</li>
  </ul>
</nav>
</body>
</html>

tips: 用outline替代border进行调试
使用border进行调试时其宽度可能会干扰显示，此时使用outline属性替代border
outline: 1px solid red;

tips: 如何让元素自动居中
margin: 0 auto;
指定auto为第二个参数基本上会告诉浏览器自动确定左右边距本身，方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。
其效果等同于

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

最好使用margin-left:auto; margin-right:auto;，以防覆盖margin-top, margin-bottom.

负margin（平均布局）

做float平均布局时，一个元素里包裹数个子元素，每个子元素都有自己的margi-right，则最后一个元素会因为其右侧margin溢出而转到下一行
此时可在所有子元素外再套一层父元素，并使其margin-right为负数

截屏2021-02-10 17.15.06.png

Flex布局(flex flow) 弹性盒模型

.container {
  display: flex; /* 或者 display: inline-flex */
}

flex-direction 弹性盒模型方向

flex-direction: row;  /* default, left->right */
flex-direction: row-reverse; /* right->left */
flex-direction: column; /* top->down */
flex-direction: colunm-reverse; /* down->top */