|
|
工具版本兼容问题
元素的display显示方式有多种，隐藏、块级、内联、内联-块级
| 关键字 |
简介 |
示例代码 |
|
display:none
|
隐藏
|
示例代码
|
|
display:block
|
块级
|
示例代码
|
|
display:inline
|
内联
|
示例代码
|
|
display:inline-block
|
内联-块级
|
示例代码
|
|
其他
|
示例代码
|
步骤
1
:
隐藏
步骤
2
:
块级
步骤
3
:
内联
步骤
4
:
内联-块级
步骤
5
:
其他
在 隐藏章节已经使用过通过display的方式隐藏一个元素 display:none; 使得被选择的元素隐藏，并且不占用原来的位置
");
window.frames["iframe_show2906"].document.write(decodeHtml($("textarea#stepcodeTextarea2906").val()));
window.frames["iframe_show2906"].document.close();
$(window.frames["iframe_show2906"]).load(function(){
$("#iframe_show2906").height($("#iframe_show2906").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2906").height($("#iframe_show2906").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div.d{
display:none;
}
</style>
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
<style>
div.d{
display:none;
}
</style>
<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>
");
window.frames["iframe2906"].document.write(decodeHtml(code2906));
window.frames["iframe2906"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2906"]).load(function(){
$("#iframe2906").height($("#iframe2906").contents().find("body").height()+showittryitheight);
});
$("#iframe2906").height($("#iframe2906").contents().find("body").height()+showittryitheight);
alreadyWriteCode2906 = code2906;
$("#rendering2906").hide();
$("#rendered2906").show();
}
var tRereshRetry2DemoPanel2906 = setInterval(rereshRetry2DemoPanel2906,1000);
var binded2906 = false;
$("textarea#stepcodeTextarea2906").keyup(function(){
if(!binded2906){
$(window).bind('beforeunload',function(){
binded2906 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2906 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2906!=newCode){
// window.frames["iframe2906"].document.write("
");
// window.frames["iframe2906"].document.write(decodeHtml($("textarea#stepcodeTextarea2906").val()));
// window.frames["iframe2906"].document.close();
// $(window.frames["iframe2906"]).load(function(){
// $("#iframe2906").height($("#iframe2906").contents().find("body").height()+showittryitheight);
// });
// code2906 = newCode;
// }
});
$(".tryButton2906").click(function(){
$("#tryDiv2906").show();
$("#stepcodeTextarea2906").focus();
$("#stepcodeTextarea2906").height(200);
$("#iframe2906").height(0);
window.frames["iframe2906"].document.write("
");
window.frames["iframe2906"].document.write(decodeHtml($("textarea#stepcodeTextarea2906").val()));
window.frames["iframe2906"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2906"]).load(function(){
$("#iframe2906").height($("#iframe2906").contents().find("body").height()+showittryitheight);
});
$("#iframe2906").height($("#iframe2906").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2906.focus();
editor2906.setSize(null, "250");
$("#rendering2906").hide();
$("#rendered2906").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2906 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2906"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2906.on("change",function(doc){
if(!binded2906){
$(window).bind('beforeunload',function(){
binded2906 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2906 = newCode;
$("textarea#stepcodeTextarea2906").val(newCode);
if(alreadyWriteCode2906!=code2906){
lastModifedTime2906 = new Date().getTime();
$("#rendering2906").show();
$("#rendered2906").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2906 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2906.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2906").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
");
window.frames["iframe_show2907"].document.write(decodeHtml($("textarea#stepcodeTextarea2907").val()));
window.frames["iframe_show2907"].document.close();
$(window.frames["iframe_show2907"]).load(function(){
$("#iframe_show2907").height($("#iframe_show2907").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2907").height($("#iframe_show2907").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.d{
display:block;
}
</style>
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.d{
display:block;
}
</style>
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>
");
window.frames["iframe2907"].document.write(decodeHtml(code2907));
window.frames["iframe2907"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2907"]).load(function(){
$("#iframe2907").height($("#iframe2907").contents().find("body").height()+showittryitheight);
});
$("#iframe2907").height($("#iframe2907").contents().find("body").height()+showittryitheight);
alreadyWriteCode2907 = code2907;
$("#rendering2907").hide();
$("#rendered2907").show();
}
var tRereshRetry2DemoPanel2907 = setInterval(rereshRetry2DemoPanel2907,1000);
var binded2907 = false;
$("textarea#stepcodeTextarea2907").keyup(function(){
if(!binded2907){
$(window).bind('beforeunload',function(){
binded2907 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2907 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2907!=newCode){
// window.frames["iframe2907"].document.write("
");
// window.frames["iframe2907"].document.write(decodeHtml($("textarea#stepcodeTextarea2907").val()));
// window.frames["iframe2907"].document.close();
// $(window.frames["iframe2907"]).load(function(){
// $("#iframe2907").height($("#iframe2907").contents().find("body").height()+showittryitheight);
// });
// code2907 = newCode;
// }
});
$(".tryButton2907").click(function(){
$("#tryDiv2907").show();
$("#stepcodeTextarea2907").focus();
$("#stepcodeTextarea2907").height(200);
$("#iframe2907").height(0);
window.frames["iframe2907"].document.write("
");
window.frames["iframe2907"].document.write(decodeHtml($("textarea#stepcodeTextarea2907").val()));
window.frames["iframe2907"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2907"]).load(function(){
$("#iframe2907").height($("#iframe2907").contents().find("body").height()+showittryitheight);
});
$("#iframe2907").height($("#iframe2907").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2907.focus();
editor2907.setSize(null, "250");
$("#rendering2907").hide();
$("#rendered2907").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2907 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2907"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2907.on("change",function(doc){
if(!binded2907){
$(window).bind('beforeunload',function(){
binded2907 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2907 = newCode;
$("textarea#stepcodeTextarea2907").val(newCode);
if(alreadyWriteCode2907!=code2907){
lastModifedTime2907 = new Date().getTime();
$("#rendering2907").show();
$("#rendered2907").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2907 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2907.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2907").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
div默认是块级元素
span默认是内联元素
");
window.frames["iframe_show2908"].document.write(decodeHtml($("textarea#stepcodeTextarea2908").val()));
window.frames["iframe_show2908"].document.close();
$(window.frames["iframe_show2908"]).load(function(){
$("#iframe_show2908").height($("#iframe_show2908").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2908").height($("#iframe_show2908").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.s{
display:inline;
}
</style>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<div class="s">这是div，被改造成了内联元素</div>
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.s{
display:inline;
}
</style>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<div class="s">这是div，被改造成了内联元素</div>
");
window.frames["iframe2908"].document.write(decodeHtml(code2908));
window.frames["iframe2908"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2908"]).load(function(){
$("#iframe2908").height($("#iframe2908").contents().find("body").height()+showittryitheight);
});
$("#iframe2908").height($("#iframe2908").contents().find("body").height()+showittryitheight);
alreadyWriteCode2908 = code2908;
$("#rendering2908").hide();
$("#rendered2908").show();
}
var tRereshRetry2DemoPanel2908 = setInterval(rereshRetry2DemoPanel2908,1000);
var binded2908 = false;
$("textarea#stepcodeTextarea2908").keyup(function(){
if(!binded2908){
$(window).bind('beforeunload',function(){
binded2908 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2908 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2908!=newCode){
// window.frames["iframe2908"].document.write("
");
// window.frames["iframe2908"].document.write(decodeHtml($("textarea#stepcodeTextarea2908").val()));
// window.frames["iframe2908"].document.close();
// $(window.frames["iframe2908"]).load(function(){
// $("#iframe2908").height($("#iframe2908").contents().find("body").height()+showittryitheight);
// });
// code2908 = newCode;
// }
});
$(".tryButton2908").click(function(){
$("#tryDiv2908").show();
$("#stepcodeTextarea2908").focus();
$("#stepcodeTextarea2908").height(200);
$("#iframe2908").height(0);
window.frames["iframe2908"].document.write("
");
window.frames["iframe2908"].document.write(decodeHtml($("textarea#stepcodeTextarea2908").val()));
window.frames["iframe2908"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2908"]).load(function(){
$("#iframe2908").height($("#iframe2908").contents().find("body").height()+showittryitheight);
});
$("#iframe2908").height($("#iframe2908").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2908.focus();
editor2908.setSize(null, "250");
$("#rendering2908").hide();
$("#rendered2908").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2908 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2908"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2908.on("change",function(doc){
if(!binded2908){
$(window).bind('beforeunload',function(){
binded2908 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2908 = newCode;
$("textarea#stepcodeTextarea2908").val(newCode);
if(alreadyWriteCode2908!=code2908){
lastModifedTime2908 = new Date().getTime();
$("#rendering2908").show();
$("#rendered2908").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2908 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2908.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2908").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block
");
window.frames["iframe_show2909"].document.write(decodeHtml($("textarea#stepcodeTextarea2909").val()));
window.frames["iframe_show2909"].document.close();
$(window.frames["iframe_show2909"]).load(function(){
$("#iframe_show2909").height($("#iframe_show2909").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2909").height($("#iframe_show2909").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
span{
display:inline-block;
border: 1px solid lightgray;
margin:10px;
width:100px;
}
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>
<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>
<style>
span{
display:inline-block;
border: 1px solid lightgray;
margin:10px;
width:100px;
}
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>
<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>
");
window.frames["iframe2909"].document.write(decodeHtml(code2909));
window.frames["iframe2909"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2909"]).load(function(){
$("#iframe2909").height($("#iframe2909").contents().find("body").height()+showittryitheight);
});
$("#iframe2909").height($("#iframe2909").contents().find("body").height()+showittryitheight);
alreadyWriteCode2909 = code2909;
$("#rendering2909").hide();
$("#rendered2909").show();
}
var tRereshRetry2DemoPanel2909 = setInterval(rereshRetry2DemoPanel2909,1000);
var binded2909 = false;
$("textarea#stepcodeTextarea2909").keyup(function(){
if(!binded2909){
$(window).bind('beforeunload',function(){
binded2909 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2909 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2909!=newCode){
// window.frames["iframe2909"].document.write("
");
// window.frames["iframe2909"].document.write(decodeHtml($("textarea#stepcodeTextarea2909").val()));
// window.frames["iframe2909"].document.close();
// $(window.frames["iframe2909"]).load(function(){
// $("#iframe2909").height($("#iframe2909").contents().find("body").height()+showittryitheight);
// });
// code2909 = newCode;
// }
});
$(".tryButton2909").click(function(){
$("#tryDiv2909").show();
$("#stepcodeTextarea2909").focus();
$("#stepcodeTextarea2909").height(200);
$("#iframe2909").height(0);
window.frames["iframe2909"].document.write("
");
window.frames["iframe2909"].document.write(decodeHtml($("textarea#stepcodeTextarea2909").val()));
window.frames["iframe2909"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2909"]).load(function(){
$("#iframe2909").height($("#iframe2909").contents().find("body").height()+showittryitheight);
});
$("#iframe2909").height($("#iframe2909").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2909.focus();
editor2909.setSize(null, "250");
$("#rendering2909").hide();
$("#rendered2909").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2909 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2909"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2909.on("change",function(doc){
if(!binded2909){
$(window).bind('beforeunload',function(){
binded2909 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2909 = newCode;
$("textarea#stepcodeTextarea2909").val(newCode);
if(alreadyWriteCode2909!=code2909){
lastModifedTime2909 = new Date().getTime();
$("#rendering2909").show();
$("#rendered2909").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2909 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2909.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2909").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
这些就不太常见了
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
