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;