10·灵魂前端工程师养成-CSS布局(上)

2022-10-31 17:59:30 浏览数 (1)
  • 布局介绍

  • float布局
  • flex布局
    • 容器container
    • flex item
  • 重点记住代码
  • flex 青蛙游戏
  • flex常用套路
  • 常用草图软件

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

布局介绍

什么是布局

布局分类：

1.固定宽度布局，一般宽度为 960/1000/1024px 类似于淘宝

2.不固定宽度布局，主要靠文档流的原理来布局 一般用来手机页面的布局。

第三种布局： 响应式布局，意思就是在PC上固定宽度，手机上不固定宽度，也就是一种混合布局

布局思路

从大到小： 先定下大局，一切以大橘为重... 然后完善每个部分的小布局

从小到大： 先完成小布局 然后组合成大布局

两种均可： 新人推荐第二种，因为小的简单 老手一般用第一种，因为熟练有大局观

一般布局需要用到哪些属性



三种布局： 1.float布局 2.grid布局 3.flex布局

float布局

float布局步骤

在子元素上加float: left和width 在父元素上.clearfix

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <header class='clearfix'>
    <div class="logo">ZLS</div>
    <nav>导航</nav>
  </header>
</body>
</html>
代码语言：javascript复制
*{margin: 0; padding: 0; box-sizing: border-box;}

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

.logo{
  border: 1px solid red;
  height: 40px;
  width: 100px;
  float: left;
  margin-top: 5px;
}

nav{
  border: 1px solid green;
  width: 200px;
  height: 50px;
  float: right;
}

header{
  border: 1px solid black;
}



float布局写一个页面

导航栏：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <header class='clearfix'>
    <div class="logo">
      <img src="https://blog.driverzeng.com/zenglaoshi/dibu.png" alt="">
    </div>
    <ul class='clearfix nav'>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
</body>
</html>
代码语言：javascript复制
*{margin:0;padding:0;box-sizing: border-box;}

ul,ol{
  list-style: none;
}

img{
  max-width: 100%;
}

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

.logo{
  background: grey;
  display: inline-block;
  float: left;
  margin-top: 2px;
  margin-left: 10px;
}

.logo>img{
  height: 26px;
  /*如果图片底部有多余部分，就可以使用它去除*/
  vertical-align: top;
}

.nav{
  float: right;
  margin-left: 20px;
}

ul>li{
  float: left;
  padding: 4px 0.5em;
}

ul{
  display: inline-block;
}

header{
  background: grey;
  color: white;
}



内容页面：

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <header class='clearfix'>
    <div class="logo">
      <img src="https://blog.driverzeng.com/zenglaoshi/dibu.png" alt="">
    </div>
    <ul class='clearfix nav'>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>

  <div class='content clearfix'>
    <aside>一行有六个字</aside>
    <main></main>
    <div class="ad"></div>
  </div>
  <div class="imageList">
    <div class='x clearfix'>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>
</body>
</html>
代码语言：javascript复制
*{margin:0;padding:0;box-sizing: border-box;}

ul,ol{
  list-style: none;
}

img{
  max-width: 100%;
}

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

.logo{
  background: grey;
  display: inline-block;
  float: left;
  margin-top: 2px;
  margin-left: 10px;
}

.logo>img{
  height: 26px;
  /*如果图片底部有多余部分，就可以使用它去除*/
  vertical-align: top;
}

.nav{
  float: right;
  margin-left: 20px;
}

ul>li{
  float: left;
  padding: 4px 0.5em;
}

ul{
  display: inline-block;
}

header{
  background: grey;
  color: white;
}


.content{
  outline: 1px solid red;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.content>aside{
  width: 200px;
  height: 300px;
  float: left;
  background: #999;
}

.content>main{
  height: 300px;
  width: 500px;
  float: left;
  background: #ccc;
}

.content>.ad{
  border: 1px solid black;
  width: 100px;
  height: 300px;
  float: left;
  background: #000;
}

.imageList{
  outline: 1px solid green;
  width: 800px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.imageList>.x>.image{
  border: 1px solid red;
  width: 191px;
  height: 191px;
  background: #000;
  float: left;
  margin-bottom: 10px;
  margin-right: 12px;
}

.imageList>.x{
  margin-right: -12px;
}



flex布局

flex分为两个部分： 1.外部元素，容器，container 2.内部元素，项目，item

容器container



代码语言：javascript复制
.container{
/*下面两种都可以，一般使用flex*/
  display: flex;
  display: inline-flex;
}

1.改变items流动方向（主轴）



代码语言：javascript复制
.container{
   flex-direction: row | row-reverse | column | column-reverse;
}









2.改变折行



代码语言：javascript复制
.container{
   flex-wrap: nowrap | wrap | wrap-reverse;
}









3.主轴的对齐方式













代码语言：javascript复制
.container{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  
flex-start:放置开头
flex-end:放置结尾
center:居中
space-between:将空间放在元素中间
space-around:将空间环绕元素
space-evenly:将空间，平均的环绕元素
}













4.次轴的对齐方式











代码语言：javascript复制
.container{
  align-items: flex-start | flex-end | center | stretch | baseline;
}









5.多行内容（不重要）













代码语言：javascript复制
.container{
  align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}















flex item

1.item上面加order

控制自己位置



代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>

</html>
代码语言：javascript复制
.container{
  display: flex;
  border: 1px solid red;
  flex-direction: row;
  flex-wrap: wrap;
}

/*默认的order都是0*/
/*order也可以为负数*/

.item{
  width: 50px;
  height:  50px;
  border: 1px solid green;
}

.item:first-child{
  order: 100;
}

.item:nth-child(2){
  order: 1;
}

.item:nth-child(3){
  order: 3;
}

.item:nth-child(4){
  order: 4;
}
.item:last-child{
  order: 5;
}



2.item上面加flex-grow

控制自己长胖









3.item上面加flex-shrink

控制变瘦

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

</html>
代码语言：javascript复制
/*临界点，在空间不够的时候，flex-shrink的2号多贡献一点*/
/*0 防止变瘦，默认是1*/

.container{
  display: flex;
  border: 1px solid red;
  flex-direction: row;
  flex-wrap: nowrap;
}

.item{
  height:  50px;
  border: 1px solid green;
  width: 150px;
}
.item:first-child{
  flex-grow: 1;
}

.item:nth-child(2){
  flex-grow: 1;
  flex-shrink: 10;
}
.item:nth-child(3){
  flex-grow: 1;
}



4.item上面加flex-basis

控制基准宽度，默认是auto

很少用...

过，知道有这么个东西就行。当没有配width的时候可以使用。

5.flex缩写

flex:flex-grow flex-shrink flex-basis

缩写，空格隔开

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

</html>
代码语言：javascript复制
.container{
  display: flex;
  border: 1px solid red;
  flex-direction: row;
  flex-wrap: nowrap;
}

.item{
  height:  50px;
  border: 1px solid green;
}
.item:first-child{
  flex: 1 1 100px;
}

.item:nth-child(2){
  flex: 1 0 100px;
}
.item:nth-child(3){
  flex: 1 1 100px;
}

6.align-self定制align-items







重点记住代码

代码语言：javascript复制
display: flex;

/*流动方向*/
flex-direction: row/colum;

/*是否换行*/
flex-wrap: wrap;

/*主轴对齐*/
just-content: center/space-between;

/*纵轴对齐*/
align-items: center;

flex 青蛙游戏

青蛙游戏：传送门

让青蛙回家。











flex常用套路

使用flex，重写之前的float页面

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <header class="header">
    <div class="logo">
      <img src="https://blog.driverzeng.com/zenglaoshi/dibu.png" alt="">
    </div>
    <ul class='clearfix nav'>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  <div class="content">
    <aside>一行有六个字</aside>
    <main></main>
    <div class="ad"></div>
  </div>
  <div class="imageList">
    <div class="x">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>
</body>

</html>
代码语言：javascript复制
*{margin:0;padding:0;box-sizing: border-box;}

ul,ol{
  list-style: none;
}

img{
  max-width: 100%;
}

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: grey;
  padding: 4px 0;
}

.logo{
  display: flex;
  align-items:  center;
}

.logo>img{
  height: 26px;
  /*如果图片底部有多余部分，就可以使用它去除*/
  vertical-align: middle;
}

ul{
  /*margin-left: auto;*/
  display: flex;

}

ul>li{
  padding: 4px;
}

.content{
  display: flex;
  min-width: 800px;
}

.content>aside{
  background: #000;
  width: 200px;
}

.content>main{
  background: #666;
  height: 400px;
  flex-grow: 1;
}

.content>.ad{
  background: #999;
  width: 100px;
}

.imageList{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

.image{
  width: 191px;
  height: 191px;
  background: grey;
  border: 1px solid red;
  margin-right: 12px;
  margin-bottom: 10px;
}

.imageList>.x{
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;

}



常用草图软件

1.Balsamiq

2.Figma

3.墨刀

4.Adobe XD

运维 自动化 容器 游戏

0 人点赞