布局分为两种

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

float布局

在子元素上加float：left和width
在父元素上加 .clearfix 注意：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

clearfix要写三句话，如下：

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

经验

有经验者会留一些空间或者最后一个不设width
不需要做响应式，手机上没有IE，此布局是为IE准备的
IE6/7存在双倍 margin bug，解决方法如下:
将错就错，针对IE6/7把margin减半
神来一笔，在加上一个display：inline-block

代码示例

flex布局

container 容器(一般用来做父元素)
items 项目（一般用来做子元素）

container属性

让一个元素变成flex容器

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

改变items流动方向（主轴）

.container{
  flex-direction: row | row-reverse | colun | colun-reverse;
}

改变折行

.container{
  flex-wrap：nowwrap | wrap | wrap-reverse;
}

主轴对齐方式（默认主轴是横轴，除非你改变了flex-direction方向）

.container{
  justify-content: flex-start | flex-end | center | space-between;
}

次轴对齐方式（默认主轴是纵轴）

.container{
  align-items: flex-start | flex-end | center | stretch;
}

多行内容（内容分布，很少用到）

.container{
  align-content: flex-start | flex-end | center | stretch;
}

items属性

items上加order

.items{
  order: 0;
}

items上加flex-grow（控制变胖）

.items{
  flex-grow: 0;
}

items上加flex-shrink（控制变瘦，一般写flex-shrink：0防止变瘦，默认是1）

.items{
  flex-shrink: 0;
}

items上加flex-basis（控制基本宽度，默认auto） flex：flex-grow flex-gshrink flex-basis(缩写)

.items{
  flex: 1 1 100px;
}

align-self定制align-items（某一个items可以特立独行，不常用）

.items{
  align-self: flex-start | flex-end;
}

重点属性

display: flex让一个元素变成flex容器
flex-direction: row/column表示流动方向横着还是竖着
flex-wrap: wrap是否换行
justify-content: conter/space-between主轴（横轴）方向怎么对齐
align-items: center次轴（纵轴）方向怎么对齐

代码示例

经验

永远不要把width和height写死，除非特殊说明
用 min-width / max-width / min-height / max-height

Grid布局

二维布局用Grid，一维布局用flex

css-tricks.com/snippets/cs…

属性

让一个元素变成flex容器

.container{
  display: grid | inline-grid; 
}

行和列

.container {
  grid-template-columns:  40px 50px auto 50px 40px;
  grid-template-rows:  25% 100px auto;
}

item设置范围

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

fr-free space 巧记：份

.container {
grid-template-columns: 1fr 1fr 1fr;
}

空隙 gap

分区 grid-template-areas

【CSS】CSS布局