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

2017-11-29 本文已影响0人饥人谷_邵征鹏

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

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

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

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

HTML编码规范

CSS编码规范

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

提示框Demo

猜你喜欢

热点阅读