FireFox mousedown干掉:active实例页面
https://codepen.io/AndyZhang/pen/aamKrz
block水平元素与清除浮动实例页面
https://codepen.io/AndyZhang/pen/XPjBbW
inline-table内联表格特性展示实例页面
https://codepen.io/AndyZhang/pen/aamjym
nowrap不换行超出容器
https://codepen.io/AndyZhang/pen/zJKLRB
block元素的流动性
https://codepen.io/AndyZhang/pen/eLdjKJ
凹凸效果实例页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #fff;
}
.ao:before,
.tu:before {
outline: 2px solid #cd0000;
font-family: Consolas, Monaco, monospace;
}
.ao:before {
content: "love你love";
color: #cd0000
}
.tu {
direction: rtl;
}
.tu:before {
content: "我love你";
color: #cd0000
}
</style>
<body>
<span class="ao"></span>
<span class="tu"></span>
</body>
</html>
<textarea>宽度100%自适应效果实例页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
.container {
width: 280px;
margin: 0 auto;
padding: 40px 0;
background-color: #f0f3f9;
}
.textarea {
padding: 9px 8px;
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
}
.textarea>textarea {
width: 100%;
line-height: 20px;
padding: 0;
border: 0 none;
outline: 0 none;
background: none;
resize: none;
}
</style>
<body>
<div class="container">
<div class="textarea">
<textarea rows="5" placeholder="色块是容器"></textarea>
</div>
</div>
</body>
</html>
max-height与任意高度元素滑动展开收起效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
.element {
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
input[type='checkbox'] {
display: none;
}
:checked~.element {
max-height: 666px;
}
</style>
<body>
<input id="check" type="checkbox">
<p>个人觉得，...</p>
<div class="element">
<p>本书两个特点，一是深入，二是体系。“深入”指本书内容全部都是大多数前端不知道的知识点，
这就决定了本书内容的稀缺性，其中有一半左右内容是博客中未提及的。“体系”指本书不是东
拼西凑扶烂泥上墙的那种作品。以自己对CSS的世界观认识非常系统介绍CSS相关知识，便于大
家从更宏观层面认识CSS这门语言。</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>
</body>
</html>
网友评论