会coding的HAM

空白与换行：

        section:nth-child(1){
            /*word-break: break-all;*/
            /*英文单词默认不会在单词内换行 
            如果英文单词过长或在页面上显示URL则会将页面撑大
            该样式是英文单词暴力换行 换行后可能造成误解*/
            
            word-wrap: break-word;
            
            text-align: justify;
            /*两端对齐 会拉开单词间距 英文效果显著
              但最后一行不会两端对齐*/
        }
        section:nth-child(2){
            text-align: justify;
        }
        section:nth-child(3){
            /*white-space: pre;*/
            /*类似pre标签 保留空格 tab 回车换行等空白符*/
            
            white-space: pre-wrap;
            /*在pre的基础上增加了换行效果*/
            
            /*white-space: pre-line;*/
            /*在pre的基础上去掉了空白符*/
            
            /*white-space: nowrap;*/
            /*不换行也没有空白*/

            /*默认不加样式时是会换行的*/
        }

CSS过渡
css

        body{
            background-color: black;

        }
        section{
            width: 300px;
            height: 300px;
            background-color: lightgreen;
            /*border-radius: 50%;*/
            margin: 150px auto;
            /*transition: transform,background-color, 5s;*/
            /*过渡综合样式的简写*/
            position: absolute;
            top: 0;
            left: 100px;
            /*定义一个初始位置*/

            /*transition-property: transform,background-color,margin,width,top,left,height,box-shadow,border-radius;*/
            /*transition-duration: 1s;*/
            transition-timing-function: linear;
            /*贝塞尔曲线*/
            transition-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);
            transition-property: box-shadow;
            /*transition-duration: 5s;*/
            transition-delay: 3s;
            /*属性规定过渡效果何时开始*/
        }
        section:active{
            /*transform: rotate(360deg);*/
            /*background-color: yellow;*/
            /*margin: 0 auto;*/
            /*border-radius: 50%;*/
            /*width: 400px;*/
            /*height: 400px;*/
            /*top: 500px;
            left: 1000px;*/
            box-shadow: 0 10px 100px red;
        }

演示效果
空白与换行
CSS过渡