css面试题
来源：互联网 发布：2017网络流行词汇大全 编辑：程序博客网 时间：2024/06/16 01:31
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><base target="_blank" /></head><body><img src="bigptr.jpg" usemap="#Map" /><map name="Map"> <area shape="circle" coords="378,132,56" href="http://www.baidu.com"> <area shape="rect" coords="462,157,566,217" href="http://www.qq.com"> <area shape="poly" coords="227,251,186,220,168,221,159,234,147,258,141,283,146,300,153,315,161,329,171,336,182,343,201,343,219,339,235,324,238,319,236,313,231,301,227,290,224,280,224,272,224,268,226,261" href="http://www.sina.com.cn"></map><!--map 热区area 点击区域shape="circle" 圆型 coords="圆心点X,圆心点Y,圆的半径"shape="rect" 矩形 coords="矩形左上角x,矩形左上角Y,矩形右下角X,矩形右下角Y" shape="poly" 多边形 coords="第一个点X，第一个点Y，第二个点X，第二个点Y,..."--></body></html>
data uri
优点：减少HTTP请求数；
缺点：无法被重复利用；会使文件变大
iframe样式设置
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><iframe src="http://www.baidu.com" width="1200" height="600" frameborder="0" scrolling="no"></iframe></body></html>
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>object{ border:10px solid #000;}</style></head><body><object><embed src="1.swf" width="400" height="400"></embed></object></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>body{ background:#000;}.box{width:300px;height:300px;background:pink; position:absolute;left:0;top:0;}</style></head><body><object><param name="wmode" value="transparent"> <embed src="1.swf" width="400" height="400" wmode="transparent"></embed></object><div class="box"></div></body></html>引入视频
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><embed src="http://player.youku.com/player.php/sid/XNjQ0MDk4MDI0/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed><!-- 优酷底下的html代码 --></body></html>
word-break:break-all和 word-wrap:break-word;
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>p{width:200px;border:1px solid #000; font:14px/24px Arial; word-break:break-all;}/*break-all：如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。*/</style></head><body><p>adsadasdsad asdasdasdasdsadasd asdasdas asdasdasd 11111111111111111111111111111111111111 sadasdasd asdsadsad asdasdsad</p></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>p{width:200px;border:1px solid #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}/*nowrap规定段落中的文本不进行换行*/</style></head><body><p>要闻习近平给志愿者回信:青年有担当国家就有前途 李克强会见拜登 美称对中国新领导集体充满期待 卡梅伦成都吃火锅花877元 遭遇"奇葩"提问 教育部：高考改革将减少科目 探索不分文理科</p></body></html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:200px;height:200px;border:10px solid #000;background:Red;padding:50px; box-sizing:border-box;}.div{height:50px;background:yellow;}/*可视宽: 元素的内容宽+padding+border元素的内容宽：元素里可以放内容的宽度怪异模式： 可视宽是设置的宽度 内容宽为设置宽度-padding-bordersss在IE6,7,8下不设置文档声明<!DOCTYPE HTML>的时候页面的盒模型解析 就会进入怪异模式box-sizing 盒模型解析模式 Content-box 标准盒模型 width/height=border+padding+content Border-box 怪异盒模型 width/height=content*/</style></head><body><div class="box"><div class="div"></div></div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div{ width:100px;height:100px;background:Red;border:5px solid #000;}.box1{ display:none;}.box2{ visibility:hidden;}/*hidden还是会占有位置*/</style></head><body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>html{height:100%;overflow:hidden;}body{margin:0; height:100%;overflow:auto;}.box{height:2000px;}.div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}/*绝对定位相对于document发生偏移*/</style></head><body><div class="box"><div class="div"></div></div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{height:2000px;}.div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));/*css模拟固定定位expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));*/}</style></head><body><div class="box"><div class="div"></div></div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}span{ display:inline-block; height:100%; vertical-align:middle;}img{ vertical-align:middle;}</style></head><body><div class="box"><img src="bigptr.jpg" /><span></span></div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.box{ width:800px;height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}</style></head><body><div class="box"><span><img src="bigptr.jpg" /></span></div></body></html><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.list{width:302px; margin:0;padding:0; list-style:none;}li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}p{margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}/*li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉*/</style></head><body><ul class="list"><li> <p> <a href="#">文字文字文字文字文字字文字文字文字文字文字文字字文字文字文字文字文字文字字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">字文字文字字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">文文字字文字文字文字文字文字文字字文字</a> <span>文字</span> </p> </li> <li> <p> <a href="#">字文字文字文字字文字</a> <span>文字</span> </p> </li></ul></body></html> 0 0
- CSS 面试题
- CSS+JavaScript面试题
- CSS+JavaScript面试题
- CSS面试题
- CSS面试题1
- CSS面试题2
- CSS面试题3
- CSS面试题
- css面试题
- html+css面试题
- html+css面试题
- html+css面试题
- HTML+CSS面试题
- css前端面试题
- css面试题
- HTML+CSS+JS面试题
- Javascript、CSS、HTML面试题
- css前端笔试面试题
- Raft 实现日志复制同步
- 阶乘 BigInteger
- mac版MySQL初始密码修改
- HDU 2098 分拆素数和
- 『 Jack_a_Lent_Notes』---基于时间触发的合作式调度器[ATmega128]
- css面试题
- 关押罪犯 洛谷1525 并查集
- 【闯王的宝藏】 水题 链表
- 学着做点事
- HDU1094 A+B for Input-Output Practice (VI)
- 什么是机器学习
- 知乎日报详情页的实现(集成webView)
- ANR完全解析
- ZJOI 2010 贪吃的老鼠 网络流
