• 整体页面
  • 将页脚固定在页面下方
  • 元素固定浮动在页面中间
• 父子元素
  • 子元素水平垂直居中
  • 子元素浮在父元素上固定位置，父元素含滚动条
• 菜单栏
  • 可开启和关闭的菜单栏或标题栏
• 弹出层
  • 图片弹出层
• 元素
  • disabled 表单域的值提交
  • div 包裹内容，内容到达一定长度换行
  • 固定单元格高度

整体页面

将页脚固定在页面下方

使用 flex 布局，详细了解请访问 Flex 布局教程：语法篇;

html {height: 100%;}
body {display: flex;flex-direction: column;height: 100%;}
header {flex: 0 0 auto;}
.container {flex: 1 0 auto;} /* 撑满页面 */
footer {flex: 0 0 auto;}

样式演示：

特点：页面高度不足以撑满一页时，页脚依旧固定在底部

元素固定浮动在页面中间

#floating-component {
    position:fixed;                 /* 固定位置 */
    top: 50%;                       /* 距顶部 50% */
    transform: translate(-50%,0);   /* 往相反方向位移自身 50% */
}

样式演示：

父子元素

子元素水平垂直居中

使用 flex 布局，详细了解请访问 Flex 布局教程：语法篇

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

样式演示：

子元素浮在父元素上固定位置，父元素含滚动条

子元素设置 position:absolute 后会相对于外层第一个设置 relative 的元素定位来保持位置，因此，我们可以在含滚动条的父元素外包裹一层 div，与父元素宽高相等，令子元素相对于包装层悬浮即可。

.parent-package {
    position: relative;
}

.parent {
    width: 360px;
    height: 80%;
    overflow: auto;
    border: 2px solid darkslategrey;
}

.child {
    position: absolute;
    bottom: 2px;
    left: 2px;
}

样式演示：

菜单栏

可开启和关闭的菜单栏或标题栏

默认使用负外边距使菜单栏隐藏在浏览器的一边，在为元素添加一个 class 使外边距为 0 使其正常显示，点击触发按钮移除和添加该 class，即可实现点击开关操作

.sidebar {
    float: left;
    width: 100px;
    height: 100%;
    margin-left: -100px;        /* 默认隐藏自身 */
    transition: 0.8s all;       /* 动画速度 */
    background-color: #2c3e50;
}

.sidebar-appear {margin-left: 0;}

$('.btn').on('click', function () {
    $('.sidebar').toggleClass('sidebar-appear');
});

样式演示：

弹出层

图片弹出层

点击图标、文字、图片弹出具体弹出层

.popups {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;                     /* 遮罩覆盖整个父页面 */
    z-index: 2000;                    /* 将弹出层置于最前 */
    background: rgba(0, 0, 0, 0.7);
    display: none;                    /* 默认不显示 */
}
.popups img {                         /* 图片样式，自行设定 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 430px;
    border: 5px solid rgb(255, 255, 255);
}

绑定点击事件即可

<div onclick="$('.qrcode-shade').fadeIn('fast')">
    ...
</div>
<div class="popups" onclick="$('.qrcode-shade').fadeOut('fast');">
    <img src="..." alt="...">
</div>

样式演示：

元素

disabled 表单域的值提交

• 方案 1：不用 disabled 而是使用 readonly

• 方案 2：在提交之前，把要提交的表单复制一份，然后把复制后的表单中的所有表单域的 disabled 属性都置为 false，然后提交这个复制后的表单。

  相关链接：如何提交表单中disabled表单域的值示例代码

div 包裹内容，内容到达一定长度换行

max-width: 128px;
width: max-content;
word-break: break-all;

固定单元格高度

在单元格 <td></td> 或 <th></th> 中添加一个 <span></span>，再设置 span 的 display 属性为 block 即可。

tbody span {
    display: block;
    height: 48px;
    width: max-content;
    max-height: 48px;
    max-width: 128px;
}