CSS 层叠样式表（Cascading Style Sheets） - Web 开发技术 | 水平居中

CSS 层叠样式表（Cascading Style Sheets）

Web CSS

水平居中：
  
标题
justify-content: stretch可使h1固定而文字流动
  其他方式：
    align-content: center;
    display:table-cell;vertical-align:middle;

浮动环绕:
  float:left 指脱离当前文档流，直至遇到父容器的侧边，浮动前位置留给后跟元素，覆盖块儿元素，文字则进行环绕。
  clear:both 指让后跟元素不再继续环绕。

text-wrap:balance - 文本包裹多行字数保持均衡

fieldset标题居中：<legend style="text-align: center;">x</legend>

CSS空格保留和控制换行：
  div强制换行 - word-break: break-all

  code { overflow-wrap: break-word; }
  或换行 pre { white-space: break-spaces; overflow-wrap: break-word; }
  说明 - white-space暂理解成只用于否决换行，不写时则单用overflow-wrap或word-break均可；由于pre标签默认就被white-space否决了换行，故应显式break-spaces下，或用暴力的滚动条方式 pre { overflow: scroll; }
  多行溢出隐藏：
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

  保留连续空格：首选汉字全角空格 　  [or ]密    码,此方式linux下和windows下宽度不一致

CSS animation 动画：
document.getElementById("showArea").animate([
  // @keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // sync options
  duration: 1000,
  fill: "both", // 停在最后一帧，而不是回到第一帧。
  iterations: Infinity // 填1则只执行一次。
});

弹性布局：
  参考 - https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
  flex布局 - display: flex; 配合 flex-wrap: wrap; 可实现宽度自适应换行。
  grid布局 - display: grid; 配合 grid-template-columns: repeat(auto-fill, 100px); 可实现下一行左对齐。

其他

伪类设置文本内容：
                    <style>
                        .titleToContent::after{
                            content: "（" attr(title) "）";
                        }
                    </style>