【学习】CSS布局

CSS布局 笔记

CSS布局分类

• 两种分类
  • 固定宽度布局，一般宽度为960/1000/1024px
  • 不固定宽度布局，主要靠文档流的原理来布局
    文档流本来就是自适应的，不需要加额外的样式
• 响应式布局
  PC上固定宽度，手机上不固定宽度，是一种混合布局
• 布局的两种思路
  • 从大到小
    先定下大局，再完善每个部分的小布局
  • 从小到大
    先完成小布局，再组合成大布局
• CSS布局
  • 如果需要兼容IE 9，用float布局
  • 如果不需要兼容IE 9，只兼容最新浏览器，用grid布局
  • 如果不需要兼容IE 9，也不需要兼容最新浏览器，用flex布局

float布局

步骤

• 子元素上加float:left和width 比如

        .logo {
            border: 1px solid red;
            height: 50px;
            width: 100px;
            float: left;
        }
        nav {
            border: 1px solid green;
            height: 60px;
            width: 200px;
            float: right;
        }

• 在父元素上加 .clearfix 比如

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

.clearfix 部分的代码固定此写法

---

注意

• 留一些空间或者最后一个部分不设置width
• 不需要做响应式，因为手机上没有IE，而float部分是专门为IE准备的
• IE 6/7存在双倍margin bug，解决方法如下：
  • 将错就错，针对IE 6/7把margin减半
  • 加一个display:inline-block;
• 如果发现图片下的背景色多出一部分，在图片的设置里写上 vertical-align:top/middle;
• 写代码时，由于设置的是border-box，border调试法会干扰实际的宽度，此时可以将border改为outline，outline不占空间
• 如果一个元素是块级的，width是固定的，想要居中显示，写上 margin-left:auto; margin-right:auto;
• 如果用float布局做平均布局，可能会用到 负margin
• float布局需要自己计算宽度，不灵活

flex布局

• 容器 container
  

flex container样式

• 让一个元素变成flex容器

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

flex类似于block，另起一行
inline-flex类似于inline-block，往后排

• 改变items流动方向

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

• 改变折行

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap 不折行，items的宽度会弹性改变
wrap 折行，items的宽度不改变
wrap-reverse 从最后一行往上折行

• 主轴对齐方式

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

默认主轴是横轴，除非改变了flex-direction方向

• 次轴对齐

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

• 多行内容（很少用到）

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

flex item属性

• item上加order

为 item 设置 order ，在容器里会按照 order 的大小，从小到大排列

• item 上加 flex-grow
  控制自己如何长胖
  

.item {
  flex-grow: 1;
}

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

• item上加flex-shrink
  控制如何变瘦
  一般写flex-shrink:0; 防止变瘦，默认值为1
• flex-basisi 控制基准宽度
  默认是auto
• align-self定制align-items
  

.item {
  align-items:flex-start;
}
.item:nth-child(3) {
  align-self:flex-end;
}

重点

• 重点记住以下代码
  • display:flex;
  • flex-direction:row/column;
  • flex-wrap:wrap;
  • justify-content:center/space-between;
  • align-items:center;
• 注意
  • 不要把 width 和 height 写死，除非特殊说明，写死就是使用px，不写死就是使用%，vw等等，用 min-width / max-width / min-heigh / max-height
  • flex 可以基本满足所有的需求
  • flex 和 margin-xxx:auto; 配合有意外的效果

常用草图软件

• Balsamiq
• Figma
• 墨刀
• Adobe XD

grid布局

功能最强大的布局方案，尤其适合不规则布局
一维布局用flex，二维布局用grid

• 成为container

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

---

• 行和列

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

可以为每条线取名字

.container {
  grid-templeta-columns:[first] 40px [line2] 50px [line3] auto [col3-start] 50px [five] 40px [end];
  grid-templeta-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

可以用名字设置item范围，比如

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

• fr — free space 份
  主要用来做平均布局

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

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

---

• 分区 grid-template-areas

.container {
  display:grid;
  grid-template-columns:50px 50px 50px 50px;
  grid-template-rows:auto;
  grid-template-areas:
  	"header header header header"
  	"main main . sidebar"
  	"footer footer footer footer";
}
.item-a {
  grid-area:header;
}
.item-b {
  grid-area:main;
}
.item-c {
  grid-area:sidebar;
}
.item-c {
  grid-area:footer;
}

---

• gap 空隙

.container {
  grid-template-columns:100px 50px 100px;
  grid-template-rows:80px auto 80px;
  grid-column-gap:10px;
  grid-row-gap:15px;
}

文中图片来源 https://css-tricks.com/