FireFox mousedown干掉:active實例頁面
https://codepen.io/AndyZhang/pen/aamKrz
block水平元素與清除浮動實例頁面
https://codepen.io/AndyZhang/pen/XPjBbW
inline-table內聯(lián)表格特性展示實例頁面
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>本書兩個特點，一是深入柄冲，二是體系吻谋。“深入”指本書內容全部都是大多數(shù)前端不知道的知識點现横，
這就決定了本書內容的稀缺性漓拾，其中有一半左右內容是博客中未提及的阁最。“體系”指本書不是東
拼西湊扶爛泥上墻的那種作品骇两。以自己對CSS的世界觀認識非常系統(tǒng)介紹CSS相關知識速种，便于大
家從更宏觀層面認識CSS這門語言。</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>
</body>
</html>
