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

2019-05-04 分类:CSS, 前端开发 阅读(55) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者QQ:133411023、253097001
-笔者交流群:198571640
-笔者微信:z133411023


-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。
-擅长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

<!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>
*{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布局写一个页面

导航栏:

<!DOCTYPE html>
<html>

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

<body>
  <header class='clearfix'>
    <div class="logo">
      <img src="https://www.driverzeng.com/zenglaoshi/dibu.png" alt="">
    </div>
    <ul class='clearfix nav'>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
</body>
</html>
*{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;
}

内容页面:

<!DOCTYPE html>
<html>

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

<body>
  <header class='clearfix'>
    <div class="logo">
      <img src="https://www.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>
*{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

.container{
/*下面两种都可以,一般使用flex*/
  display: flex;
  display: inline-flex;
}

1.改变items流动方向(主轴)

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


2.改变折行

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


3.主轴的对齐方式

.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.次轴的对齐方式

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


5.多行内容(不重要)

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

flex item


1.item上面加order

控制自己位置

<!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>
.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

控制变瘦

<!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>
/*临界点,在空间不够的时候,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

缩写,空格隔开

<!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>
.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

重点记住代码

display: flex;

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

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

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

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

flex 青蛙游戏

青蛙游戏:传送门

让青蛙回家。

flex常用套路

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

<!DOCTYPE html>
<html>

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

<body>
  <header class="header">
    <div class="logo">
      <img src="https://www.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>
*{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

关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册