CSS about alexuse

[geqianqian-shihan]

垂直居中

原文地址：前端早读课

• 1、line-height
  适用情景：单行文字垂直居中

<div class="content">Lorem ipsam.</div>
<style>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}
</style>

• 2、Line-height + inline-block
  适用情景：多对象的垂直居中技巧
  多行元素看做一行，设置为 inline-block ；外层元素设置 inline-height 来代替设置内层行高；

<div class="box box2">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}
</style>

• 3、:before + inline-block
  适用情景：多对象的CSS垂直居中技巧
  子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block；子元素设置为inline-block，及vertical-aline：middle； 缺点：inline-block 元素箭4，5像素间距需要处理；

<h2>3.:before + inline-block</h2>
        <div class="box box3">
            <div class="content">
                立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
                CSS3精美相册效果    </a>
                效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  
            </div>
        </div>
        <div class="box box3">
                <div class="content">
                    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
                    CSS3精美相册效果    </a>
                    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  
                </div>
            </div>
            <div class="box box3">
                    <div class="content">
                        立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
                        CSS3精美相册效果    </a>
                        效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  
                    </div>
                </div>
    <style>
    h2{
    text-align: center;
    }
    .box{
    width: 500px;
    height: 250px;
    border: 1px solid #f00;
    margin: auto;
    text-align: center;
    }
    .box::before{
    content:'';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
    }
    .box .content{
    width: 400px;
    background: #ccc;
    display: inline-block;
    vertical-align: middle;
    }
    </style> 

• 4、absolute + margin 负值
  适用情景：多行文字的垂直居中技巧

<div class="box box4">
        <div class="content">
            立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
            CSS3精美相册效果    </a>
            效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
    </div>
    <style>
        box{
            width: 500px;
            height: 250px;
            border: 1px solid #f00;
            margin: auto;
            position: relative;
        }
        .box4 .content{
            width: 400px;
            background: #ccc;
            height: 70px;

            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -35px;
        }
    </style>

• 5、absolute + margin auto
  适用情景：多行文字的垂直居中技巧
  当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时margin:auto就生效了;

<div class="box box5">
        <div class="content">
            立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
            CSS3精美相册效果    </a>
            效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  
        </div>
    </div>
    <style>
        .box{
        width: 500px;
        height: 250px;
        border: 1px solid #f00;
        margin: auto;
        position: relative;
        }
        .content{
        width: 400px;
        background: #ccc;
        height: 70px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        }
    </style>

• 6、absolute + translate
  适用情景：多行文字的垂直居中技巧
  使用 css3 视觉上居中，类似于第 4 条

    <style>
        .box5 .content{
            width: 400px;
            background: #ccc;
            position: absolute;
            top:50%;
            left: 50%;
             transform: translate(-50%, -50%);
        }
    </style>

• 7、Flex + align-items
  适用情景：多行文字的垂直居中技巧
  只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了;优点是此层不需要设定高度即可自动居中，且原始代码干净无比
• 8、Flex + :before + flex-grow
  适用情景：多行文字的垂直居中技巧
  Flex有多种方式可以让你把数据居中，适用Flex-grow的延展特性来达成，flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空

<div class="box box8">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: '';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ccc;
}
</style>

• 9、Flex + margin
  适用情景：多行文字的垂直居中技巧
  由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中

<div class="box box9">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}
</style>

• 10、Flex + align-self
  适用情景：多行文字的垂直居中技巧
  基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。

<div class="box box10">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center
}
</style>

• 11、Flex + align-content
  适用情景：多行文字的垂直居中技巧
  在正常的状况下，align-content 仅能对次轴多行flex item做居中，既然是多行子元素才能用，那我们就为单个子组件多加两个兄弟吧，使用:before以及:after 来让子元素增加到多个，这样就能使用flex的align-content属性来居中

<div class="box box11">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box11:before,
.box11:after{
  content: '';
  display: block;
  width:100%;
}
</style>

• 12、Grid + template
  适用情景：多行文字的垂直居中技巧
  CSS Grid最令人惊讶的就是这个template的功能了，简直就是把块元素当画布在使用，我们仅需要把模板设置成三列，就能搞定垂直居中了

<div class="box box12">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    '. . .'
    '. amos .'
    '. . .';
}
.content{
  width: 400px;
  background: #ccc;
  grid-area: amos;
}
</style>

• 13、Grid + align-items
  适用情景：多行文字的垂直居中技巧
  在Flex中align-items是针对次轴cross axis作对齐，而在CSS Grid中则是针对Y轴做对齐，你可以把它想象成是表格中储存单元格的vertical-align属性看待，就可以很好理解了

<div class="box box13">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
</style>

• 14、Grid + align-content
  适用情景：多行文字的垂直居中技巧
  CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差，所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题

<div class="box box14">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-content: center; 
}
.content{
  width: 400px;
  background: #ccc;
}
</style>

• 15、Grid + align-self
  适用情景：多行文字的垂直居中技巧

<div class="box box15">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center;
}
</style>

• 16、Grid + place-items
  适用情景：多行文字的垂直居中技巧
  place-items这属性不知道有多少人用过，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设定center就能居中

<div class="box box16">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-items: center;
}
.content{
  width: 400px;
  background: #ccc;
}
</style>

• 17、Grid + place-content
  适用情景：多行文字的垂直居中技巧
  类似于 16 条 ：place-items

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-content: center;
}

18、Grid + margin
适用情景：多行文字的垂直居中技巧

[geqianqian-shihan]

兼容 IE8 的三角

1. 使用 border 实现

<style>
    .messageBox{
           position: relative;
           width: 240px;
           height: 60px;
           line-height: 60px;
           background: #e9fbe4;
           border: 1px solid #c9e9c0;
           border-radius: 4px;
           text-align: center;
           color: #0c7823;
       }
        .triangleBorder{
            position: absolute;
            left: 30px;
            overflow: hidden;
            width: 0;
            height: 0;border-width: 10px;border-style: solid dashed dashed dashed;
        }
        .tbBorder{
            bottom: -20px;
            border-color: #c9e9c0 transparent transparent transparent;
        }
        .tbBackground{
            bottom: -19px;border-color: #e9fbe4 transparent transparent transparent;
        }
    </style>

    <div class="messageBox">
        <span>我是利用border属性实现的</span>
        <div class="triangleBorder tbBorder"></div>
        <div class="triangleBorder tbBackground"></div>
    </div>

第2种：利用“♦”字符实现（谷歌浏览器显示不正常）

<style>
    .messageBox{
           position: relative;
           width: 240px;
           height: 60px;
           line-height: 60px;
           background: #e9fbe4;
           box-shadow: 1px 2px 3px #e9f4e4;
           border: 1px solid #c9e9c0;
           border-radius: 4px;
           text-align: center;
           color: #0c7823;
       }
        .triangleBorder{
            position: absolute;
            left: 30px;
            overflow: hidden;
            width: 26px;
            height: 26px;
            font: normal 26px "SimSun";
        }
        .tbBorder{
            bottom: -12px;
            color: #c9e9c0;
        }
        .tbBackground{
            bottom: -11px;color: #e9fbe4;
        }
</style>
<div class="messageBox">
    <span>我是利用♦字符实现的</span>
    <div class="triangleBorder tbBorder">♦</div>
    <div class="triangleBorder tbBackground">♦</div>
</div>

第3种

<style>
    .triangle {
            position: relative;
            width: 100px;
            height: 50px;
            border: 2px solid #4ed621;
            border-radius: 5px;
        }

        .triangle:before {
            position: absolute;
            content: "";
            top: -10px;
            left: 25px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #4ed621;
        }
        /* 白色覆盖*/
        .triangle:after {
            position: absolute;
            content: "";
            /*减少两像素*/
            top: -8px;
            left: 25px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
        }
</style>
<div class="triangle"></div>

第4种

<style>
        .box{
            position: relative;
            padding-top: 8px;
        }
        .con{
            width: 200px;
            height: 100px;
            border: 1px skyblue solid;
            border-radius: 3px;
            background-color: skyblue;
        }
        .con-ret {
            border: 7px solid transparent;
            border-bottom-color: skyblue;
            position: absolute;
            left: 10px;
            top: -6px;

        }
<style>
<div class="box">
    <div class="con-ret"></div>
    <div class="con"></div>
</div>

第5种

<style>
        .main{
            width: 120px;
            padding: 10px;
            font-size: 14px;
            color: #333;
            line-height: 28px;
            background: #F0981C;
            border: 2px solid #FF0000;
            position: relative;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius: 5px;
            display: inline-block;
        }
        
        .main:before,.main:after{
            content: ' ';
            border-top: 12px solid #FF0000;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            position: absolute;
            bottom: -12px;
            left: 20px;
        }
        .main:after{
            border-top: 12px solid #F0981C;
            bottom: -9px;
        }
</style>
<div class="main">
    <p>这是内容这是内容这是内容</p>
</div>

[geqianqian-shihan]

CSS 计数器 css counter

<div>
        <h3>你好</h3>
        <h3>hello</h3>
        <h3>world css 计数器</h3>
    </div>
    <style>
        div {
            /*counter-reset: title;           /* 重置计数器成0 */
            counter-reset: title 5;           /*起始值订为 5 */
        }
        h3:before {
            /*  counter-increment: title;      /* 增加计数器值 */
            counter-increment: title 3;      /* 增加计数器值    递增值为3 */
            content: "Title "counter(title) ": "; /* 显示计数器 */
        }


        /* 更换格式 */
        div {
            counter-reset: title;           /* 重置计数器成0 */
            
        }
        h3:before {
            counter-increment: title;      /* 增加计数器值 */
            content: "Title "counter(title, lower-latin) ": "; /* 显示计数器 */
        }
    </style>


    <ol>
        <li>item1</li>
        <li>item2
            <ol>
                <li>item1</li>
                <li>item2
                    <ol>
                        <li>item1</li>
                        <li>item2
                            <ol>
                                <li>item1</li>
                                <li>item2</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
    <style>
        /* OL { counter-reset: item }
        LI { display: block }
        LI:before {
            content: counter(item) ". ";
            counter-increment: item
        } */


        OL { counter-reset: item }
        LI { display: block }
        LI:before {
            content: counters(item, '.') " ";
            counter-increment: item;
        }
    </style>


    <dl>
        <dt>example</dt>
        <dd>example</dd>
        <dd>example</dd>
        <dd>example</dd>
        <dt>example2</dt>
        <dd>example2</dd>
        <dd>example2</dd>
        <dd>example2</dd>
        <dd>example2</dd>
    </dl>
    <style>
        dl { counter-reset:test1 0;}
        dt { counter-increment: test1; counter-reset: test2 0;}
        dt:before{ content:counter(test1)"、";}
        dd{ counter-increment:test2;}
        dd:before{
            content:counter(test1)"-"counter(test2)"、";
        }
    </style>

结果展示：

使用场景

• 场景 1：嵌套列表 eg： 文章大纲
• 场景 2：已经勾选的复选框数量 eg：通过 checked 伪类，我们可以检查复选框是否被选中，选中的话，我们计数器的数值就会增加。
• 场景 3：自动追踪文档条目 eg：需要处理一些重复元素的时候，并且你同样想统计他们的数量

[geqianqian-shihan]

less

循环

//less语法，from start to end ,end值不包括在里面
@for $i from 1 to 5 {
  .width#{$i} {
    width: $i * 1%;
  }
}

//转成css后的样式
.width1{
    width:1%;
}
.width2{
    width:2%;
}
.width3{
    width:3%;
}
.width4{
    width:4%;
}

//less语法，from start through end ,end值包括在里面
@for $i from 1 through 5 {
  .width#{$i} {
    width: $i * 1%;
  }
}

//转成css后的样式
.width1{
    width:1%;
}
.width2{
    width:2%;
}
.width3{
    width:3%;
}
.width4{
    width:4%;
}
.width5{
    width:5%;
}

$list: 1 2 3 4 5; //$list 就是一个列表
@mixin images {
  @each $item in $list {
    .img#{$item} {
      background-image: url("/assets/img/icon_#{$item}.png");
    }
  }
}
.store {
  @include images;
}
css编译后的样式
.store  .img1{background-image: url("/assets/img/icon_1.png");}
.store  .img2{background-image: url("/assets/img/icon_2.png");}
.store  .img3{background-image: url("/assets/img/icon_3.png");}
.store  .img4{background-image: url("/assets/img/icon_4.png");}
.store  .img5{background-image: url("/assets/img/icon_5.png");}

// 定义函数
.backgroundcard(@className,@pngName){
          .@{className}{
                background: url("./resource/@{pngName}.png") top/100% no-repeat;
          }
}
@bgcardList:a,b,c,d,e,f,g;

.loop(@i) when (@i < length(@bgcardList)+1){
    .backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));
    .loop(@i+1);
}
.loop(1);

+ 列表函数
    - 获取列表的长度  length(@bgcardList)  //7
    - 获取列表元素  extract(@bgcardList, 3)  //c
+ 循环函数
    - loop定义循环次数，when条件判断，符合进入函数，不符合不进入函数。之后次数+1，形成循环。
    - loop函数调用，直接传值1。