1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的 2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
Category: HTML&CSS (page 1 of 2)
line-height:300{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5} 先计算后继承
line-height:3 先继承后计算，行高随字体大小改变
它们的区别就在于：
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
JPG：不支持透明半透明，所有空白区域填充白色
GIF：支持透明，不支持半透明
png8：支持透明，不支持半透明
png24：支持透明，也支持半透明
JPG：网页中的大图，高清图（体积大）；
GIF：网页中的小图标（动画图片）；
PNG8：网页中的小图标；
PNG24：图像中存在半透明效果的图片；
maxlength=”5″,则input输入框中只能够输入5个字符
size=”5″，表示input输入框只显示5个字符，但是可以输入更多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体</title>
<style>
*{margin: 0;padding: 0;}
.per{width:400px;height:400px;position: absolute;top:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};left:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};margin:-200px;perspective:1000px;}
.box{width:100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};height:100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};transform-style:preserve-3d;cursor:default;-webkit-animation:box 5s linear 14s infinite both;}
.box>div{width: 100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};height: 100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};position: absolute;box-sizing:border-box;border:2px solid rgba(0,0,0,0.8);background:rgba(0,0,0,0);text-align:center;line-height:400px;font-size:50px;background-origin:border-box}
.box .top{-webkit-animation:top 2s linear 2s both;}
.box .bottom{-webkit-animation:bottom 2s linear 4s both;}
.box .left{-webkit-animation:left 2s linear 6s both;}
.box .right{-webkit-animation:right 2s linear 8s both;}
.box .back{-webkit-animation:back 2s linear 10s both;}
.box .front{-webkit-animation:front 2s linear 12s both;}
.box:hover>div{background: rgba(0,0,0,0);border-color:rgba(0,0,0,0);}
.box:hover .top{background: rgba(255,255,0,0.8);}
.box:hover .bottom{background: rgba(0,255,0,0.8);}
.box:hover .left{background: rgba(0,255,255,0.8);}
.box:hover .right{background: rgba(0,0,255,0.8);}
.box:hover .front{background: rgba(255,0,255,0.8);}
.box:hover .back{background: rgba(255,0,0,0.8);}
@-webkit-keyframes top{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateX(90deg) translateZ(200px);}
}
@-webkit-keyframes bottom{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateX(-90deg) translateZ(200px);}
}
@-webkit-keyframes left{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(-90deg) translateZ(200px);}
}
@-webkit-keyframes right{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(90deg) translateZ(200px);}
}
@-webkit-keyframes front{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:translateZ(200px);}
}
@-webkit-keyframes box{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotate3d(1,1,1,360deg);}
}
@-webkit-keyframes back{
100{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5}{-webkit-transform:rotateY(180deg) translateZ(200px);}
}
</style>
</head>
<body>
<div class="per">
<div class="box">
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="back">back</div>
<div class="front">front</div>
</div>
</div>
</body>
</html>注意一点：perspective属性不能设置在.box里，必须设置在其父元素中，否则会导致正方体失真。
在线demo：正方体演示
请按以下效果图和要求完成一个弹窗的HTML和CSS：
总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。
标题栏：左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单行文字且超出隐藏并显示“…”，背景色为#eeeeee。
内容区：由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，字体均为12px的宋体。
段落：行高1.5倍。
按钮：水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。
关闭：宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png” 继续阅读
<div class=”parent”>
<div class=”side”>侧栏</div>
<div class=”main”>主栏</div>
</body>
要求如效果图中标注，两栏间距为10px，请写出这个两列布局的CSS。 继续阅读