常用草图软件

balsamiq
figma
墨刀
Adobe XD

布局思路

st=>start: 用什么CSS布局
cond=>condition: 需要兼容IE9？
float=>operation: 使用float布局
cond2=>condition: 兼容最新浏览器吗？
grid=>operation: 使用grid布局
flex=>operation: 使用flex布局
margin=>operation: 必要时加上负margin

st->cond
cond(yes)->float->margin
cond(no)->cond2
cond2(yes)->grid
cond2(no)->flex
flex->margin

float布局

步骤

给所有子元素加上 float:left , width
给父元素加上 .clearfix 伪元素清除浮动，防止父元素高度塌陷

示例：

<div class="father clearfix">
  <div class="child1">第一个孩子</div>
  <div class="child2">第二个孩子</div>
</div>

.father{
  border:1px solid black;
}
.clearfix:after{/*伪元素清除浮动范式*/
  content:'';
  display:block;
  clear:both;
}
.child1{
  border:1px solid red;
  width:100px;
  float:left;
  height:70px
}
.child2{
  border:1px solid blue;
  width:200px;
  float:left;
  height:50px
}

经验

最后一个孩子不设置 width ，宽度根据内容自适应
float布局是为IE准备的，不需要做响应式，
手机页面不用float
float一般需要自己计算宽度
IE6/7存在双倍margin的bug，即在浮动元素加margin会变成双倍(基本不用兼容IE6/7了)

解决方法：
- 加上 _margin-left:[margin-left/2]
- 加上 display:inline-block
块级元素左右居中方法：
- 宽度固定
- margin-left:0 , margin-right:0
  
  比 margin:0 auto要好，不会干扰上下的margin

Flex布局

CSS tricks【 flexbox全解】

Container 属性

使父级元素变成flex容器

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

改变子元素流动方向

给父元素加 flex-direction

row 默认，横向
row-reverse 横逆向
column 纵向
column-reverse 纵逆向

改变折行

给父元素加 flex-wrap

nowrap 默认，不折行
wrap 折行
wrap-reverse 逆向折行

主轴对齐方式

主轴默认是横轴

给父元素加 justify-content

flex items within a flex container demonstrating the different spacing options

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

次轴对齐方式

次轴默认是纵轴

给父元素加 align-items

demonstration of differnet alignment options, like all boxes stuck to the top of a flex parent, the bottom, stretched out, or along a baseline

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

多行内容

给父元素加 align-content

examples of the align-content property where a group of items cluster at the top or bottom, or stretch out to fill the space, or have spacing.

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

items 属性

order

.item nth-child(3){/*将第三个item设置成第一个出现*/
	order:1
}

分配比例

给不同的item加上 flex-grow

two rows of items, the first has all equally-sized items with equal flex-grow numbers, the second with the center item at twice the width because its value is 2 instead of 1.

.item first-child{
	flex-grow:1
}
.item nth-child(2){
	flex-grow:2
}
.item nth-child(3){
	flex-grow:1
}

缩放时比例

给items 加上 flex-shrink

flex-shrink:0 不让缩小时变小默认是1

自定义

align-self 属性值和 align-items 一致

Grid布局

新时代的表格

一维布局用 flex

二维布局用 grid

Container 属性

成为Grid容器

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

行和列

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

fr

free space

grid-template-columns:1fr 1fr 1fr

表示等分成三列

格子间隙

grid-gap设置格子之间的间隙

grid-row-gap 行间隙
grid-colomn-gap列间隙

区域

grid-template-areas直接命名区域布局

<div class="container">
  <header>header</header>
  <aside>aside</aside>
  <main>main</main>
  <footer>footer</footer>
</div>

.container{
  min-height:100vh;
  display:grid;
  border:1px solid black;
  grid-template-areas:
    "header header header"
    "aside main main"
    ". footer footer"
}
.container>*{
  border:1px solid red;
}
.container>header{
  grid-area:header;
}
.container>aside{
  grid-area:aside;
}
.container>main{
  grid-area:main;
}
.container>footer{
  grid-area:footer;
}

grid-area属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。

grid-area:1/1/3/4

items 属性

item的位置

起始位置是按线的位置来算的

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: 1;
  grid-row-end: 3;
}

也可以简写成grid-column: 2 / 4;

就会设置网格项从第二列开始，到第四列结束。

或者 grid-column:2 / span 3

就会设置网各项从第二项开始，跨度三个列