1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的 2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件 3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样
1 opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的 2 visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件 3 display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样
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。 继续阅读
Copyright © 2021 AYABALA博客
Theme by Anders Noren — Up ↑