编码规范,垂直居中的实现方式,提示框Demo

平时写代码遵守的编码规范。

  • HTML编码规范

    用两个空格表示缩进。
    嵌套元素应当缩进一次(即两个空格)。
    对于属性的定义,确保全部使用双引号,绝不要使用单引号。
    不要省略结束标签。
    引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性, 因为 text/css 和 text/javascript 分别是它们的默认值。
    编写 HTML 代码时,尽量避免多余的父元素。
    HTML 属性应当先写class和id。
    布尔型属性可以在声明时不赋值。
    通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。

  • CSS编码规范

    每个声明块的左花括号前添加一个空格。
    声明块的右花括号应当单独成行。
    每条声明语句的 : 后应该插入一个空格。
    每条声明都应该独占一行。
    所有声明语句都应当以分号结尾。
    对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格。
    对于属性值或颜色参数,省略小于 1 的小数前面的 0。
    十六进制值应该全部小写,例如,#fff。
    尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
    为选择器中的属性添加双引号,例如,input[type="text"]。
    避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
    相关的属性声明应当归为一组,并按照下面的顺序排列:1.定位相关 2.盒模型相关 3.文字属性相关 4.外观相关 5.不要使用 @import:与 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。将媒体查询放在尽可能相关规则的附近。当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。

    class 名称中只能出现小写字符和破折号.
    class命名避免过度任意的简写。 .btn 代表 button,但是 .s 不能表达任何意思。
    class名称应当尽可能短,并且意义明确。
    class命名要使用有意义的名称。如:表示功能,表示内容;不要使用表示外观的名称。

Bootcss代码编写规范参考链接
Google HTML CSS编码规范参考链接

垂直居中的实现方式,代码范例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本内容垂直居中的实现方式</title>
    <style>
      .content {
        margin: 0 auto;
        width: 960px;
        border: 1px solid #f00;
        text-align: center;
        line-height: 6em; /*通过设置line-height,使文本内容绝对居中。*/
      }
    </style>
</head>
<body>
  <div class="content">
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </div>
</body>
</html>
line-height垂直居中.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本内容垂直居中的实现方式</title>
    <style>
      .content {
        margin: 0 auto;
        width: 960px;
        border: 1px solid #f00;
        text-align: center;
      }
      .content>p {
        margin-top: 3em; /*通过设置margin,使文本内容绝对居中。*/
        margin-bottom: 3em;
      }
    </style>
</head>
<body>
  <div class="content">
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </div>
</body>
</html>
margin居中.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本内容垂直居中的实现方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
    }
      .content {
        margin: 0 auto;
        width: 960px;
        border: 1px solid #f00;
        text-align: center;
      }
      .content>p {
        padding-top: 3em; /*通过设置padding,使文本内容垂直居中。*/
        padding-bottom: 3em;
      }
    </style>
</head>
<body>
  <div class="content">
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </div>
</body>
</html>
padding居中.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位实现居中</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        position: relative;
        height: 600px;
      }
      .content {
        width: 800px;
        border: 1px solid #f00;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -400px;
        margin-top: -118px;
      }
      .content>p {
        padding-top: 3em; /*通过设置padding,使文本内容垂直居中。*/
        padding-bottom: 3em;
      }
    </style>
</head>
<body>
  <div class="content">
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </div>
</body>
</html>
绝对定位垂直居中.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block vertical align: middle实现垂直绝对居中</title>
    <style>
      .content {
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        text-align: center;
      }
      .content>p {
        display: inline-block;
      }
      .content::before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
      .content::after {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }

    </style>
</head>
<body>
  <div class="content">
    <p>This is a paragraph</p>
  </div>    
</body>
</html>
inline-block vertical align middle实现绝对居中.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:table-cell 实现绝对居中</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
    </style>
</head>
<body>
  <div class="box">
    <div class="small-box">content</div>
  </div>
</body>
</html>
display table-cell实现绝对居中.png

提示框Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示框Demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .tip {
        margin: 16px;
        width: 200px;
        height: 100px;
        border: 1px solid #ccc;
        position: relative;
      }
      .tip1::before {
        content: " ";
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #ccc;
        border-left: 10px solid transparent;
        position: absolute;
        top: -20px;
        left: 10px;
      }
      .tip2::before {
        content: " ";
        border-top: 10px solid #f00;
        border-left: 10px solid transparent;
        border-right: 10px solid #f00;
        border-bottom: 10px solid transparent;
        float: right;
      }
      .tip3::before {
        content: " ";
        height: 10px;
        width: 10px;
        background-color: white;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        position: absolute;
        top: -6px;
        left: 10px;
      }
    </style>
</head>
<body>
  <div class="tip tip1"></div>
  <div class="tip tip2"></div>
  <div class="tip tip3"></div>
</body>
</html>
提示框Demo.png

推荐阅读更多精彩内容