css知识积累

html文本溢出出现...效果

.test {
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
}

两行文本后溢出出现...效果

.test {
    text-overflow:ellipsis; 
    overflow:hidden; 
    display: -webkit-box; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   
}

label的作用

//通过for将label区域和input产生关联，点击label即选中input
<label for='test1'>选项一</label>
<input type='radio' name='memory' id='test1'>

//input置于label标签中，即可实现关联效果
<label>
    <span>选项一</span>
    <input type='radio' name='color'>    
</label>

注意：“行内元素”不能包含“块级元素”

　　　a标签不能嵌套a标签

对input标签的优化

　　思想是使用label的包裹功能，里面的input标签display:none，后面跟要显示的内容，设置初始内容，然后通过input:checked+span加入选中后样式

　　下面是手机端switch按钮的是实现，同一逻辑可实现京东条件选择框(input[type='radio'])

<!DOCTYPE html>
<html>
<head>
    <title>Switch</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <h2>Switch开关实现</h2>
        <div class="content">
            <label class="option no">
                <input type="checkbox" name="switch">
                <span></span>
            </label>
            <label class="option no">
                <input type="checkbox" name="switch">
                <span></span>
            </label>
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}
.no {
　　//在手机端，点击链接，会触发父标签”闪一下“的问题，通过这一样式设置进行修复
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.header {
    height: 100px;
    background-color: pink;
}
.footer {
    height: 100px;
    background-color: #005BAC;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
.main {
    width: 100%;
    max-width: 1200px;
    > h2 {
        text-align: center;
        margin: 20px 0;
    }
    > .content {
        width: 50%;
        margin: 0 auto;
        > .option {
            margin-left: 100px;
            height: 0;
            > input {
                // opacity: 0;
                display: none;
                &:checked + span {
                    background-color: green;
                    &::before {
                        transform: translateX(50px);
                    }
                }
            }
            > span {
                border: 1px solid gray;
                display: inline-block;
                width: 100px;
                height: 50px;
                border-radius: 25px;
                position: relative;
                transition: background-color 0.2s ease-in-out;
                &::before {
                    content: "";
                    display: inline-block;
                    height: 48px;
                    width: 48px;
                    border-radius: 24px;
                    border: 1px solid gray;
                    background-color: #FFF;
                    position: absolute;
                    transition: transform 0.2s ease-in-out;
                }
            }
        }

    }
}

注意：

　　手机端页面需要加入meta viewport，不然会出现手机端浏览器label中span不能显示等问题，

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

　　:before和:after是将content加入内容的前或后，“父子元素”的display属性原来是什么就是什么

　　position设置为absolute后，元素的display属性会变为block，飞在页面上层，自己的一层，多个absolute多个层

　　因为absolute的元素是脱离文档流，所以clearfix不能使父元素包裹absolute的子元素，但是一般不需要包裹，就是用absolute进行合适定位。

vue.js中，使用setInterval时，要通过window.setInterval来使用，否则不起作用；同时需要注意的是this引用的变化，如果使用vue中data的变量，需要用let self = this进行引用。

methods: {
    setTime(){
        let self = this;
        let interval = window.setInterval(function(){
            if((--self.countDown)<=0){
                window.clearInterval(interval);
            }
        },1000);    
    }
}

text-align可用在块元素、内联元素，作用于其中的内联元素

用overflow保证盒子的尺寸，不越界

height: 300px;
overflow: hidden;

对于小盒子上下左右的小零碎，用before，after来做。例如词语间的竖线间隔，用压住的方式隐藏起来，和overflow: hidden很像

&:before {
  一个竖杠  
}
margin-left: -1px;