一.让盒子在网页中居中的方法
让已知宽度和高度的盒子居中的两种方法，通过绝对定位实现，会跟着浏览器窗口的缩放不断调整位置，一直居中
方法一：通过绝对定位，定位时上边距与左边距都给50%，在利用margin减去当前盒子的一半宽度与高度
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #box{ 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 width: 100px; 10 height: 100px; 11 margin: -50px 0 0 -50px; 12 background: #f00; 13 }
方法二：通过绝对定位，left:50%,top:50%，css3 transform:translate(-50%,-50%)，但有弊端，显示文字等可能造成模糊，
解决：这是因为transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。
解决方案是使用flex完成垂直居中，设置排列方向为column，并设置justify-content: center，最后用text-align: center完成水平居中。方能保证文字显示清晰。
1 position:absolute; 2 left:50%; 3 transform:translate(-50%,0); 4 balabala; 5 height:balabala; 6 //左右居中
方法三：通过绝对定位给4个方向都为0；用margin自动，实现居中
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 6 #box { 7 position: absolute; 8 top: 0; 9 right: 0; 10 bottom: 0; 11 left: 0; 12 width: 100px; 13 height: 100px; 14 margin: auto; 15 background: #f00; 16 }
二.百分比大小取决于谁
类型一：元素的margin-top、bottom及padding-top、bottom使用百分比作为单位时，其是相对父元素的宽度width来计算，而不是我们想象的高度height；
类型二：元素的height使用百分比作为单位时，其是相对父元素高度height来计算，min-height及max-height也适用这条规律。
类型三：含有定位属性的元素top、bottom使用百分比作为单位时，其是相对父元素高度height来计算，left、right相对父元素宽度width。
类型四：当子元素设置100%分两种情况：
1.子元素绝对定位，100% // width=父元素（padding×2+content:width）
2.子元素非绝对定位，100% // width=父元素（contene:width）
类型五：1.只父元素设置line-height:150%，子元素继承，与子元素字体大小无关；
2.只父元素设置line-height:1.5，子元素line-height=子元素（font-size）×父元素（line-height）；//推荐
三.动画等
类型一：animation
1 div{ 2 animation:d 3s; 3 } 4 @keyframes d{ 5 0%{transform:scale(0)} 6 50%{transform:scale(0.5)} 7 100%{transform:scale(0.9)} 8 } 9 或 10 p{ 11 animation:g 3s; 12 } 13 @keyframes g{ 14 from{background:red} 15 to{background:blue} 16 }
类型二：transform应用于2D或3D转换
类型三：transition
四.高度塌陷
解法一：下个元素clear:both
1 <style type="text/css"> 2 *{margin:0px;padding:0px;} 3 .div1{ 4 width:300px; 5 background:red; 6 border:2px solid red; 7 margin:100px auto; 8 } 9 .left{ 10 float:left; 11 width:100px; 12 height:100px; 13 background:yellow; 14 } 15 .right{ 16 float:right; 17 width:100px; 18 height:100px; 19 background:yellow; 20 } 21 .clearfloat{clear:both} 22 </style> 23 <div class="div1"> 24 <div class="left">Left</div> 25 <div class="right">Right</div> 26 <div class="clearfloat"></div> 27 </div>
解法二：给父级定义伪类:after
1 <style type="text/css"> 2 .div1{ 3 width:300px; 4 background:red; 5 border:2px solid red; 6 margin:100px auto; 7 } 8 .left{ 9 float:left; 10 width:100px; 11 height:100px; 12 background:yellow; 13 } 14 .right{ 15 float:right; 16 width:100px; 17 height:100px; 18 background:yellow; 19 } 20 .clearfloat:after{ 21 display:block; 22 clear:both; 23 content:""; 24 } 25 </style> 26 <div class="div1 clearfloat"> 27 <div class="left">Left</div> 28 <div class="right">Right</div> 29 </div>
解法三：给父级定义overflow:hidden或auto
1 <style type="text/css"> 2 .div1{ 3 background:red; 4 border:2px solid red; 5 width:300px; 6 margin:100px auto; 7 /*解决代码*/ 8 overflow:hidden 9 } 10 .left{ 11 float:left; 12 width:100px; 13 height:100px; 14 background:yellow; 15 } 16 .right{ 17 float:right; 18 width:100px; 19 height:100px; 20 background:yellow; 21 } 22 </style> 23 <div class="div1"> 24 <div class="left">Left</div> 25 <div class="right">Right</div> 26 </div>
五.css
字体模糊
color: transparent;
text-shadow: #111 0 0 5px;
多重边框
/*CSS Border with Box-Shadow Example*/ div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px }