以下这些CSS使用技巧大都是从张鑫旭老师的《CSS世界》中学到的，还有很多没有写出来，会持续更新
虽然有些技巧实用性不大，但是也提供了一种思路。看完这本书，一直觉得张鑫旭老师的脑洞真大，鬼才也
为了学习张鑫旭老师的《CSS世界》，专门创了个仓库，日常更新从中学到的知识。如果下面的还不看不太懂，可以点击这里去我的仓库看看笔记
觉得不错的可以点个赞，谢谢谢！！
超出部分使用省略号代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超出部分用省略号代替</title>
<style type="text/css">
div{
border: 1px solid;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>撒打快点哈卡斯电话卡的是卡卡大厦看</div>
</body>
</html>效果图： 
清除浮动，兼容各个版本
//清除浮动（不兼容ie低版本）
.clearfix:after { content:" "; display:block; clear:both; }
//兼容：Firefox 3.5 +，Safari 4 +，Chrome，Opera 9 +，IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
利用border实现三道杠效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 20px;
width: 120px;
border-bottom: 20px solid red;
border-top: 60px double red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图： 
利用border 不写颜色时，默认与字体颜色相同来实现hover时容器整体变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.add{
position:relative;
width:50px;
height:50px;
border:1px solid;
transition: color .5s;
color:#666;
}
.add:hover{
cursor:pointer;
color:#ff0;
}
.add:before,
.add:after
{
position:absolute;
content:'';
left:50%;
top:50%;
/* border-top:4px solid; */
border-radius:2px;
}
.add:before{
width:30px;
border-top:4px solid;
transform:translate(-50%,-2px);
}
.add:after{
height:30px;
border-left:4px solid;
transform:translate(-2px,-50%);
}
</style>
</head>
<body>
<div class="add"></div>
</body>
</html>
效果图：
===》
利用border来实现背景图片定位，不会随着背景大小改变而改变位置（类似于绝对定位）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
display: inline-block;
border: 1px solid red;
}
textarea{
background: url(../../css/57d8cd406585ac38a4705f2cebae79f4.gif) no-repeat center;
background-size: 200px 200px;
border-right: 50px solid transparent;
background-position: 100% 50%;
outline: 0 none;
}
</style>
</head>
<body>
<div>
<textarea rows="10" cols="10">
</textarea>
</div>
</body>
</html>
效果图：
利用border来实现三角形和梯形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/*实现三角形，只需要改变其他三条边的颜色为transparent即可*/
margin: 20px auto;
width: 50px;
height: 50px;
border: 1px solid;
border-color: #00BFFF #00FFFF #1A66B3 #0000FF;
}
</style>
</head>
<body>
<div></div>
<label for="dw">容器宽度
<input type="range" id="dw" value="50" onchange="ChangeWidth(this.value)"/>
</label>
<label for="dh">容器高度
<input type="range" id="dh" value="50" onchange="ChangeHeight(this.value)" />
</label>
<label for="bw">边框宽度
<input type="range" id="bw" value="1" min="0" max="20" onchange="ChangeBorder(this.value)"/>
</label>
<script type="text/javascript">
const div=document.querySelector("div");
function ChangeWidth(val){
div.style.width=val+"px";
}
function ChangeHeight(val){
div.style.height=val+"px";
}
function ChangeBorder(val){
div.style.borderWidth=val+"px";
}
</script>
</body>
</html>
效果图：
利用border-width来实现等高布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
border-left: 300px solid #666;
position: relative;
}
.left{
width: 300px;
margin-left: -300px;
float: left;
}
.module{
width: 500px;
height: 50px;
background-color: #00BFFF;
}
</style>
</head>
<body>
<div class="box">
<nav class="left">
<h3>导航栏1</h3>
</nav>
<section>
<div class="module">模块1</div>
</section>
</div>
<button type="button" onclick="createDiv()">再来一个</button>
<script type="text/javascript">
function createDiv(){
const dv=document.querySelector("div").cloneNode(true);
document.body.appendChild(dv);
}
</script>
</body>
</html>
效果图：
利用padding实现管道符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
padding: 11px 6px 1px;
margin-left: 12px;
border-left: 1.5px solid ;
font-size: 0;
}
</style>
</head>
<body>
<div>
注册<span></span>登录
</div>
</body>
</html>
效果图：
实现模块中内容较少时居中显示，而内容较多时居左显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one{
text-align: center;
width: 200px;
height: 100px;
border: 1px solid;
}
.two{
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="one">
<div class="two">sdsd圣诞节极大缩短了煎熬了多久啊速度解决了</div>
</div>
</body>
</html>
效果图：
绘制凹凸模型（不兼容火狐）
利用最小宽度值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.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";
}
.tu {
direction: rtl;
}
.tu:before {
content: "我love你";
}
</style>
</head>
<body>
<div class="ao"></div>
<div class="tu"></div>
</body>
</html>
效果图：
任意高度元素的展开收起技巧，利用max-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.b{
max-height: 60px;
width: 400px;
overflow: hidden;
transition: max-height .5s;
}
</style>
</head>
<body>
<div class="b">
第一句：
做人，一定要知恩图报！别忘了曾经帮助过你的恩人，别伤害经常指引你的贵人，否则，你的朋友会越来越少，你的人生会越过越难。
第二句：
别人怎么看你，怎么说你，都是他们的事，和你毫无关系，你要怎么活，怎么过，也和他们毫无关系，做好你自己，无需去在意。
第三句：
当你到了一定的年龄，你就会明白，聪明是一种天赋，而善良是一种选择，善良永远比聪明难做！
第四句：
不联系，不代表忘记，但是不闻不问一定是疏远了，变淡了，彼此沉默太久，最后连问候都需要斟酌，连主动都需要勇气！
第五句：
语言，是最具有影响力的的东西，也是最具有杀伤力的武器，所以永远不要嘲讽和用比较绝的话去伤害那些爱你的人。
第六句：
有时候，等待会等来遗憾，所谓的来日方长，其实就是挥手告别。机会错过了，没有下一次，真情错过了，就是一辈子！
第七句：
不纠缠，不抱怨，不强求，不计算，用顺其自然的心态，过轻松自在的生活，用心甘情愿的态度，过随遇而安的人生。
第八句：
有些人和事，不是别人错了，而是自己看错了，自己眼瞎别怪别人，其实都是自己的问题。
第九句：
有时候，我们原谅了别人，却依然不快乐，我们放下了仇恨，却依然不开心，那是因为，我们忘了原谅自己，放过自己。
第十句：
最好的幸福，就是活着！以自己喜欢的方式活着，不要管别人如何对待你、评价你，健康快乐才是重点，才大于一切！
</div>
<button type="button">下拉</button>
<button type="button">回收</button>
<script type="text/javascript">
document.querySelectorAll("button")[0].onclick=function(){
document.querySelector(".b").style.maxHeight="1000px";
}
document.querySelectorAll("button")[1].onclick=function(){
document.querySelector(".b").style.maxHeight="60px";
}
</script>
</body>
</html>
利用object-fit：none来实现图片居中显示 宽高要比图片略大即可，且要保持等比例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
object-fit: none;
width: 400px;
height: 400px;
border: 1px solid;
}
</style>
</head>
<body>
<!-- 图片居然是垂直居中状态 -->
<img src="../../css/57d8cd406585ac38a4705f2cebae79f4.gif" >
</body>
</html>
效果图：
利用伪元素+content实现自动两端对齐，均匀分布的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 256px;
height: 256px;
border-bottom: 1px dashed #ccc;
text-align: justify;
}
.box:before {
content: "";
display: inline-block;
height: 100%;
}
.box:after {
content: "";
display: inline-block;
width: 100%;
}
.bar {
display: inline-block;
width: 20px; height: 0;
}
</style>
</head>
<body>
<div id="box" class="box"><i class="bar"></i>
<i class="bar"></i>
<i class="bar"></i>
<i class="bar"></i>
</div>
<p><button id="button">再增加一条数据</button></p>
<script type="text/javascript">
if (document.querySelector) {
var eleBox = document.getElementById('box');
// 目前柱子元素和个数
var eleBars = document.querySelectorAll('#box > i');
var lenBar = eleBars.length;
if (eleBox && lenBar) {
for (var indexBar = 0; indexBar < lenBar; indexBar += 1) {
// 柱形图的柱子高度和背景色随机
eleBars[indexBar].style.height = Math.ceil(256 * Math.random()) + 'px';
eleBars[indexBar].style.backgroundColor = '#' + (Math.random() + '').slice(-6);
}
}
// 增加数据
var eleBtn = document.getElementById('button');
if (eleBtn && lenBar) {
eleBtn.onclick = function() {
// 随机高度和背景色
var height = Math.ceil(256 * Math.random()) + 'px';
var backgroundColor = '#' + (Math.random() + '').slice(-6);
// 创建柱子元素
var eleClone = eleBars[0].cloneNode();
eleClone.style.height = height;
eleClone.style.backgroundColor = backgroundColor;
// 此处的字符替换为了兼容IE8下的演示效果
eleBox.innerHTML = eleBox.innerHTML.replace(/I><I/ig, 'I> <I') + ' ' + eleClone.outerHTML;
lenBar+=1;
// 最多10条数据
if (lenBar == 10) {
this.setAttribute('disabled', 'disabled');
}
};
}
}
</script>
</body>
</html>
效果图：
利用content实现“正在加载中...”效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
</style>
</head>
<body>
正在加载中<dot>...</dot>
</body>
</html>效果图：
利用content实现自动排项目序号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.reset {
padding-left: 20px;
counter-reset: wangxiaoer;
}
.counter:before {
content: counters(wangxiaoer, '-') '. ';
counter-increment: wangxiaoer;
}
</style>
</head>
<body>
<div class="reset">
<div class="counter">我是王小二
<div class="reset">
<div class="counter">我是王小二的大儿子</div>
<div class="counter">我是王小二的二儿子
<div class="reset">
<div class="counter">我是王小二的二儿子的大孙子</div>
<div class="counter">我是王小二的二儿子的二孙子</div>
<div class="counter">我是王小二的二儿子的小孙子</div>
</div>
</div>
<div class="counter">我是王小二的三儿子</div>
</div>
</div>
<div class="counter">我是王小三</div>
<div class="counter">我是王小四
<div class="reset">
<div class="counter">我是王小四的大儿子</div>
</div>
</div>
</div>
</body>
</html>效果图：
利用margin:auto来实现水平垂直居中效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
在仅仅给b设置
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0; 时，此时b的尺寸表现为“格式化宽度和格式化高度”，也就是
尺寸会自动的填充父级元素的尺寸。
然后，再给b设置宽高
height: 100px;
width: 100px; 时，宽高被限制，原本应该填充的空间就闲置出来了
这时候就可以用margin来支配这个闲置的空间，直接使用
margin: auto; 就可以使元素在水平和垂直方向都居中
*/
.a{
height: 200px;
width: 200px;
border: 1px solid;
position: relative;
}
.b{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
height: 100px;
width: 100px;
margin: auto;
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>效果图：
利用margin负值来实现左中右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
为什么要给ul添加一个父级元素?
当给ul添加margin-right: -10px;时,是给这个ul向右添加了10pxmargin值,以此来
满足最后一个li标签的margin-right,但是此时问题来了,要实现左中右布局,最后一个li右边多了10px,就要
去除掉去.可以给ul添加一个父元素,虽然此时ul拓宽了10px,但是实际上他的父元素还是保持原本的宽度,所以
这时候给这个父元素添加overflow: hidden;就可以去除ul拓宽的宽度
利用了子元素可以通过Margin负值来拓宽宽度,但是父元素宽度不变的想法来实现这个布局
*/
div{
display: inline-block;
overflow: hidden;
}
ul{
margin-right: -10px;
padding: 0;
height: 20px;
background-color: #00FFFF;
}
li{
list-style: none;
float: left;
width: 90px;
background-color: #CCCCCC;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<ul>
<li>我是左边</li>
<li>我是中间</li>
<li>我是右边</li>
</ul>
</div>
</body>
</html>效果图：
利用margin+border实现等高布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
不会出现锚点定位的问题
但不支持百分比，所以至少一栏是定宽的布局
*/
.a{
width: 500px;
border-left: 200px solid #999;
background-color: #666;
}
.a:after{
content: '';
display: block;
clear: both;
}
h3{
float: left;
margin-left: -200px;
width: 200px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="a">
<h3>我是左边</h3>
<div class="b">我是右边</div>
</div>
</body>
</html>效果图：
利用vertical-align: middle;来实现垂直居中效果(两种)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
第一个：
如果只设置了宽高是没有用的，vertical-align: middle是不会起作用的。原因是img前面的“幽灵空白节点”高度太小，
几乎看不出变化。这时如果给这个节点一个足够大的值，则可以看出变化，即line-height的值足够大
第二个：
如果vertical-align: middle;是设置在子元素上的则不会起作用，必须要设置在父元素上
*/
.a{
width: 400px;
line-height: 400px;
text-align: center;
border: 1px solid;
margin-bottom: 20px;
font-size: 0;
}
.a img{
vertical-align: middle;
}
.b{
height: 400px;
width: 400px;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid;
font-size: 0;
}
</style>
</head>
<body>
<div class="a">
<img src="../img/1.jpg" width="200">
</div>
<div class="b">
<img src="../img/1.jpg" width="200">
</div>
</body>
</html>
效果图：
利用vertical-align: middle;来实现弹框永远垂直居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
无论浏览器尺寸多大或者弹框尺寸多大都可以实现弹框垂直居中显示
*/
.a{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
font-size: 0;
overflow: hidden;
}
.a:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.b{
height: 100px;
width: 100px;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
font-size: 14px;
background-color: #fff;
text-align: center;
white-space: normal;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
我是帅哥
</div>
</div>
</body>
</html>
效果图：
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
