CSS布局

谷恒条野
446 阅读4分钟

CSS布局

布局是什么

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

布局分类

两种

  • 固定宽度布局，一般宽度为960/1000/1024 px
  • 不固定宽度布局，主要靠文档流的原理来布局

还记得吗

  • 文档流本来就是自适应的（响应式的），不需要加额外的样式

第三种布局

  • 响应式布局（旧内容新名字）
  • 意思就是PC上固定宽度，手机上不固定宽度
  • 也就是一种混合布局

布局的两种思路

从大到小

  • 先定下大局
  • 然后完善每个部分的小布局

从小到大

  • 先完成小布局
  • 然后组合成大布局

两种均可

  • 新人推荐用第二种，因为小的简单
  • 老手一般用第一种，因为有大局观

布局需要用到什么属性？

  • DIV+CSS布局（过时说法）
  • CSS布局 √｛main，header，fotter等等｝
  • 一图流

float 布局 快要过时了

步骤

  • 子元素上加上float:left和width
  • 在父元素上加.clearfix(忘了加被老师看到我就完了)

经验

  • 有经验者会留一些空间或者最后一个不设width
  • 不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的
  • IE 6/7 存在双别 margin bug，解决办法有两个
  • 一是将错就错，针对 IE 6/7把margin减半，减半操作：_margin-left:xxxpx;
  • 二是神来一笔，加一个display:inline-block
  • 为什么可以这样？没有为什么

实践

  • 看我单独写的笔记《float布局实践》

不同布局

  • 用float做两栏布局（如顶部条）

  • 用float做三栏布局（如内容区）

  • 用float做四栏布局（如导航）

  • 用float做平均布局（如产品展示区）

  • 曾经淘宝的前端发明了双飞翼布局，不要学，已过时

  • border干扰的话用outline

经验

  • 加上头尾，即可满足所有PC页面需求
  • 手机页面啥子采用float
  • float要程序员自己计算宽度，不灵活
  • float用来应付IE足矣

flex 布局

容器 container

flex container 有哪些样式

  • 让一个元素变成flex容器
.container{
        display:flex;/*or inline-flex*/
    }
  • 改变items流动方向（主轴）

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}
  • 改变折行

.container{
    flex-wrap: nowrap | wrap | wrap-reverse;
}
  • 主轴对齐方式

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

.container{
    justify-content: flex-start | flex-end|
}
  • 次轴对齐 默认次轴是纵轴

.container{
    align-items: stretch | felx-start |
}
  • 多行内容

如何分布 

.container{
    align-content: flex-start | flex-end|
} /*很少用到*/

flex item 有哪些样式

  • item 上面加roder

.item{
order: 数字
    
}
  • item上面加flex-grow

控制自己如何长胖 

.item{
    
}
  • flex-shrink控制如何变瘦

一般写flex-shrink:0防止变瘦，默认是1

  • flex-basis控制基准宽度

默认是auto

  • flex:flex-grow flex-shrink flew-basis

缩写，空格隔开

  • align-self 定制 align-items

重点

  • 记住这些代码

    • display: flex

    • flex-direction: row | column

    • flex-wrap: wrap

    • just-content: center | space-between

    • align-items: center

    • 工作中基本只用到这些

实践

不同布局

  • 用flex做两栏布局
  • 用flex 做三栏布局
  • 用flex 做四栏布局
  • 用flex 做平均布局
  • 用flex组合使用，做更复杂的布局
  • 代码

经验

  • 永远不要把width和height写死，除非特殊说明
  • 用min-width / max-width / min-height / max-height
  • flew可以基本满足所有需求
  • flex和margin-XXX:auto 配合有意外的效果

什么叫写死

写死

  • width:100px

不写死

  • width:50%
  • max-width:100px
  • width:30vw vw是屏幕宽度百分之一
  • min-width:80%
  • 特点:不适用px，或者加 min max前缀

老板要我同时兼容IE和手机怎么办

  • 前端戒律： 必须先给设计稿
  • 没有设计稿就自己画（用笔纸），老板同意再写代码

设计师只给一稿，让你做两套怎么办

  • 没设计稿，我做个P，怼回去 或者 甩锅。

  • 两套界面必须要两套设计稿，底线不能退让

公司里没有设计师怎么办

  • 自己当设计师
  • 设计稿不被老板肯定，就不要写代码，否则996就离你不远了

常用草图软件

跨平台

  • Balsamiq
  • Figma
  • 墨刀
  • Adobe XD

特点

  • 直接干，不用学

Grid 布局

功能最强大的布局方案

  • 二维布局用 Grid，一维布局用Flex
  • Grid也分 container和items

待续，记得就补上，咕咕咕

avatar
文章
阅读
粉丝