任务13作业

1、说一说你平时写代码遵守的编码规范

• 语义化
  • 语义化标签优先
  • 基于功能命名，基于内容命名，基于表现命名
  • 简略，明了，无后患
• 所有的命名都使用英文小写
• 命名用引号包裹
• 用中横线连接
• 命名体现功能，不涉及表现样式(颜色、字体、边框、背景)
• 书写规范
  • tab 用两个空格表示
  • css的: 后加个空格，{ 前加个空格
  • 每条声明后都加上分号
  • 换行，而不是放到一行
  • 颜色用小写，用缩写，#fff
  • 小数不用写前缀， 0.5s -> .5s; 0 不用加单位
  • 尽量缩写， margin: 5px 10px 5px 10px -> margin : 5px 10px;

2、垂直居中有几种实现方式，给出代码范例

第一种 上下padding相等

<div class="ct">
    <p>这里是内容是内容</p>
    <p>这里是内容是内容</p>
    <p>这里是内容是内容</p>
    <p>这里是内容是内容</p>
    <p>这里是内容是内容</p>
  </div>
-------------------
.ct {
  padding: 40px 0;
  background: #ddd;
  text-align: center;
}

第二种绝对定位

<div class="content">
  </div>
----------
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
  width: 300px;
  height: 200px;
  background: #ddd;
}

第三种 vertical-align 实现居中，作用在行内元素或表格

<div class="box middle">
    ![](https://img.haomeiwen.com/i7634882/8c1ff08cc4b1f1dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>
--------------------
.box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
.middle:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.middle {
   text-align: center;
}
.box img {
    vertical-align: middle;
}

第四种table-cell 实现居中

<div class="box">
    ![](https://img.haomeiwen.com/i7634882/8c1ff08cc4b1f1dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  </div>
----------------------
.box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

第五种flex 居中

<div class="flex">
  <p>content content</p>
</div>
-----------
.flex{
  display:flex;
  width:600px;
  height:600px;
  background-color:#333;
}

.flex p{
  margin:auto;
}

第六种flex 居中

<div class="flex">
  <p>content content</p>
</div>
-----------------------------
.flex{
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  background-color:#333;
}

3、实现如下效果，每种效果都只使用一个html 标签来实现。

效果
源代码