margin不会对定好的width产生影响，在border外产生白色区域。而padding会把box width撑大，在border内增加白色领域。
div.box
{
box-sizing:content-box;
-moz-box-sizing:border-box; /* Firefox */
50%;
border:1em solid red;
}
定位posiotion:absolute right:-30px 是基于该元素的父级非static定位而言的，如果非static的父级原始width不够而且靠padding-right撑开的像素不够，right:-30px 会失效
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：
img{
height:auto;
max-100%;
}
padding和margin的相互抵消 padding-top:120% 百分比的基数是基于父元素 要靠margin-top: -40%（起点就在botton后接after元素处，所以大约40%足够）;抵消。
padding-top:120% 多出来的20%使得botton后面的元素包括padding-top的20px;在下方露出的长度与botton整个长度一致.否则高度不足以遮挡整个长方形
<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top:120%;
padding-left: 100%;
margin-top: -40%;
margin-left: -20px!important;
opacity: 1;
transition: all 0.8s
}
.button:active:after {
transform:translateY(100px);
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
</head>
<body>
<h2>按钮动画 - 波纹效果</h2>
<button class="button">Click Me</button>
</body>
</html>
p 块级元素，可定宽高
块级元素 p h1 div 块级元素才有宽高，才有边框Border属性
tranform 变形：translate（120px） 平移
transition过渡:width 2s,height 2s,transform 2s
transition: 0.5s;包括一切变化，比如：hover
background: linear-gradient(180deg, red, blue);朝着180度方向。
方向（时钟型）： 0上 90右 180下 -90左
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
background-position 图像在其父元素中的位置 20%父元素宽的20% 40%父元素高的40%
background-origin背景图像的位置区域
background-image:url() ,url() 定义多个背景图像
background-size:80px 60px 你指定的大小是相对于父元素的宽度和高度的百分比的大小。
图像拼合技术 左负右正 上正下负
#prev{left:63px;43px;}
#prev{background:url('img_navsprites.gif') -47px 10px;}
往左移动47px 往上移动10px
form中的属性enctype="multipart/form-data" 以multipart/form-data编码格式发送表单数据(只对form表单中 method="post" 表单)
collapse折叠
wrap文本环绕就是换行
允许长文本换行：
word-wrap:break-word;
- float:left - 使用浮动块元素的幻灯片彼此相邻
- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
- 60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
list-style-position:outside/inside outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
text-align:justify 无视浏览器窗口大小总是左右两端对齐外边框
text-align 文字水平方向对齐 h1,p在包含它的元素中的位置；表格中的文本对齐。
文字垂直方向对齐 line-height:100%
vertical-align属性设置一个元素的垂直对齐。垂直对齐图像；表格中的垂直对齐属性
想要元素居中对齐
1. 2.css3 弹性盒子flex
<!DOCTYPE html>
<html>
<head>
<style>
#div1{
300px;
height:400px;
background-color:#ddd;
position:relative;
}
#div2{
position:absolute;
top:50%;
left:50%;
margin-left:-125px;
margin-top:-150px;
250px;
height:300px;
background-color:yellow;
}
p{
vertical-align:bottom;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<h3>1111</h3><p>nnnnnnn</p>
</div>
</div>
</body>
</html>
.marked p（全部p元素后代） 和.marked > p（仅仅选择儿子）
css中li横向排列并且清除空白间隙（这是因为我们写代码时候的换行符所致demo1，如果li代码前后没有空白，则不会产生空格间隙demo2）
解决方法：1 父元素如ul样式font-size:0px;子元素li 样式font-size：18px；
2.父元素ul 样式word-spacing:-5px;
ul
{
list-style-type:none;
margin:0;
padding:0;
font-size:0px;
}
li
{
font-size:18px;
background:red;
display:inline;
}
demo1:
ul{
font-size:0px;
}
li{display:inline-block;
background-color:yellow;
font-size:14px;
}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
demo2:
<!DOCTYPE html>
<html>
<head>
<style>
ul{
}
li{display:inline-block;
background-color:yellow;
font-size:14px;
}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li><li><a href="/css/" target="_blank">CSS</a></li><li><a href="/js/" target="_blank">JavaScript</a></li><li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>
</html>
position:relative 未脱离文档流即使相对其正常位置已经移动，空间仍然存在。
相对定位元素经常被用来作为绝对定位元素的容器块。
对定位的元素的位置相对于最近的已定位父元素（非static的元素），如果元素没有已定位的父元素，那么它的位置相对于<html>:
Absolutely定位使元素的位置与文档流无关，因此不占据空间。Absolutely定位的元素和其他元素重叠。