火狐中margin-top
HTML5网页设计与制作习题练习与答案
练习1一、填空题1、网站由网页构成，并且根据功能的不同，网页又有静态网页和动态网页之分。
2、Web标准是一系列标准的集合，主要包括结构、表现和行为。
3、HTML中文译为超文本标记语言，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
4、HTML语言主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
5、在网站建设中，HTML用于搭建页面结构，CSS用于设置页面样式，JavaSCript用于为页面添加动态效果。
二、判断题1、因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。
（X ）2、网页主要由文字、图像和超链接等元素构成，但是也可以包含音频、视频以及Flash等。
（√）3、“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
（√）4、URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。
URL其实就是Web地址，俗称“网址”。
（√）5、DNS（英文Domain Name System的缩写）是域名解析系统。
但是，在Internet上域名与IP地址之间并不是对应的。
（X）6、Firebug是IE浏览器中常用的一个插件，属于IE强力推荐的插件之一。
（X）7、在网站建设中，JavaScript用于搭建页面结构。
（X ）8、实际网页制作过程中，最常用的网页制作工具是Dreamweaver。
（√）9、在Dreamweaver中制作网页，在菜单栏中选择【文件】→【保存】选项，或使用快捷键Ctrl+S，即可完成文件的保存。
（√）10、所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。
（X）三、选择题1、在Dreamweaver中，使用主浏览器预览网页的快捷键是（B）A、Ctrl+SB、F12C、F5D、Ctrl+F122、使用内嵌式添加CSS样式，CSS样式需要写在（D）A、<title></title>标记之间B、<head></head>标记之间C、<body></body>标记之间D、<style></style>标记之间3、下面选项中，对JavaScript语言描述正确的是（ABD ）A、JavaScript是Web页面中的一种脚本语言文字。
史上最全IE6.IE7.IE9.IE10.谷哥.火狐各浏览器网页兼容性介绍总结
兼，是什么！你会想到是什么，作为一个跟HMTL+CSS打交道的人来说，我只能说，我想到的只有兼容性了，兼容性自始至终困惑着许多人，例如坑爹的IE，是纵多主流浏览器中比较戳的那一个，因BUG手下纵多而闻名，家族几代问题层出不穷。
最坑爹的那个就是IE6，被纵多开发人员包括前端人员所憎恶。
却受许多企业的爱戴。
顺便说一下为什么IE6还在中国活得好好的，IE6是Windows XP中自带的一种浏览器，而Windows XP目前来说是微软开发得比较好也是比较成功的系统，使用人数多。
IE6的稳定性也比较好，目前，大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因，IE6之所以盛行当然不只这一些原因，至少IE6什么时候会死那只是时间的问题罢了，在没死之前，我们得保证我们能活着。
好了，接下来来看一下一些兼容性的问题吧，这里只列出数项，日后继续完善。
1.注释引起的血案（1）在注释的时候，如果注释不当，部分浏览器会将会解析错误。
（demo1）如：<!-- 这里是注释内容-->正常显示；<!-- 这里是注释内容- ->时则在IE浏览器下正常显示，在Chrome、Firefox、Safari下不可显示。
或者->也是如此。
解决方法：在进行注释时切记不要着急，看好是否注释有问题，最好能够用VS中自带的注释，以保万无一失。
详见demo1。
（2）注释引发的血案（demo11）文字溢出：问题见demo11,test1：去掉<div style=”float:left;”></div> 中的“float:left”，就会发现多出来的字不见了，页面正常显示；同样去除<div style=”width:350px;float:right;”>中的“float:right”，多余的字也同样消失，页面正常显示。
分析：文字溢出与区块的浮动有关。
test2：把注释放到<div style=”float:left”></div>前面，多余的字消失，页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面，多余的字也同样消失，页面正常显示。
火狐实用插件大全
相信大家在工作或者学习的过程中，会经常需要一些工具来帮助我们更好的辅助我们完成工作、保存一些资料、分析一些数据等，也经常会碰到一些用起来非常爽的插件，闲暇之余不妨记录一下，有空了与大家共同分享吧！今天苏州seo小传来给大家分享一些火狐实用插件大全：-----个人习惯优化插件：Tab Utiliti es:在新标签页打开书签、历史、主页、地址、搜索，以及更多增强标签式浏览的实用功能，包括紧邻当前标签页打开新标签页、关闭当前标签页后激活亲属标签页/上次访问的标签页、保护/锁定/图标化/固定标签页、多标签页处理、自定义标签页点击动作等等。
All-in-one sidebar:侧栏控制，率获大奖的用户体验！在侧边栏中就可以快速切换书签、下载项和扩展等面板，或者在侧边栏登陆网站、查看源代码；另外，还有侧栏切换柄和工具栏，单击浏览器一侧的突起边缘，即可打开/关闭扩展，所有这些都允许用户自由定制。
All-in-One Gesture s:多合一鼠标手势，集合了流行的滚动、导航等方位插件的鼠标手势。
Tabbrow ser Prefere nces:增强式标签页浏览扩展，提供一个很全面的图形界面，以便让用户能够轻松更改Fi refox中的隐藏设置，让Firefo x的标签页浏览功能更加强大和完善，并提供关于链接打开方式的详细设置。
Tab Mix Plus:在页签上增加了更多的功能，允许你在一个页签上打开多个链接，或者在多个页签打开同一个链接，合并或者关闭同一个域名的链接等。
Restart Firefox:在文件菜单中加了一项"重启firefox",在安装扩展或插件后，使用这个插件可以很方便，不用关闭Fir eFox.Session saver:恢复上一次打开的页面，如果你上次用过F ireFo x的话，这对于崩溃的FireFox同样有效。
浏览器不兼容原因及解决方案
浏览器间不兼容原因及解决办法网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6。
0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS，最大化兼容浏览器.一般情况下，我都会兼顾IE 6。
0 / IE 7.0 / firefox 2。
0浏览器，下面是用的较频繁的CSS Hack技巧：用的最广莫过于！important了，它可以针对IE(IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。
所以为了兼顾IE 6。
0与火狐之间的差异，我都会使用!important。
1、仅IE7与IE5。
0可以识别＊+html select {…｝当面临需要只针对IE7与IE5。
0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别*+html select {…！important;｝当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别＊ html select ｛…｝这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。
其它浏览器不识别。
4、html/**/ >body select {…}这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6select ｛ display /*屏蔽IE6＊/:none;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5select/＊*/ { display /*IE6,IE5不识别*/：none；}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
浏览器不兼容原因及解决方案
无行贿犯罪承诺书
本人郑重声明，我（姓名）_________保证自己在的任何时间点和情况下不会参与任何行贿犯罪活动。
我意识到行贿犯罪对个人、团体和社会造成的损害，并深知行贿犯罪的道德、法律和社会影响。
我郑重承诺：
1. 我将以诚信和公正的原则为准则，绝不以金钱、物质或其他非法手段来获得不正当的利益或影响他人的决策。
2. 我将遵守国家法律法规和公司、组织的规定，对于任何行贿行为，我将主动举报，并不参与其中。
3. 我将积极加强自身的道德修养和职业操守，增强自己对行贿犯罪的认识和抵制能力。
4. 我将积极参与反腐败教育和宣传活动，向他人分享反腐败的知识和经验，共同宣传反行贿犯罪的价值。
5. 在我发现他人参与行贿犯罪活动的情况下，我将积极配合调查机关进行调查，并提供必要的证据和线索。
6. 我将密切关注反腐败工作的进展，支持并参与不同层面的反腐败工作，共同维护社会的公正和廉洁。
本人郑重承诺以上内容，一旦违反本承诺，愿意承担法律和道德上的责任。
如有违反上述承诺的行为，本人愿意接受法律制裁，并承担由此产生的一切后果和损失。
本承诺书有效期为永久有效。
理解content（一）
理解content（⼀）从零开始的前端⽣活-理解content(⼀)替换元素定义我们把通过修改某个属性值呈现的内容就可以被替换的元素被称为"替换元素"。
⽐如<img src="xxx.jpg"> ,我们只需修改属性src的值，内容就会发⽣变化，这就是替换元素。
类似的有<video>、<iframe>、<input>、<textarea>等等所有的替换元素都是内联⽔平元素，inline 或者 inline-block 两种形式。
这是浏览器⼚商规定的。
尺⼨计算替换元素的尺⼨从内到外分为三种固有尺⼨就是指替换内容原本的尺⼨就是不加以任何修饰，声明⼀个<input>，此时的尺⼨就是固有尺⼨再⽐如不加任何修饰<img src="xxx.jpg"> ,此时显⽰的图⽚尺⼨就是固有尺⼨，图⽚原本最真实的⼤⼩。
HTML尺⼨HTML尺⼨是只能通过元素的原⽣属性来改变⽐如<img>的width 和 height属性。
<input>的size属性。
<textarea>的cols 和 rows属性等等<img width="300px" height="400px"><textarea cols="20 rows="5"></textarea>CSS尺⼨css尺⼨是通过css的 width 和 height 等设置的尺⼨，作⽤的⽬标是 content box规则如下:1. 优先级是 css尺⼨> HTML尺⼨ > 固有尺⼨2. 如果固有尺⼨含有固定的宽⾼⽐例，同时仅设置宽度或者⾼度，元素依然按照固有的宽⾼⽐例显⽰⽐如图⽚原本为400*300 ，⽐例为4:3 ，如果我们给与img这样设置img{ width:200px}<img src="xxx.jpg">那么最后图⽚的⾼为 200*3/4 = 1503. 内联替换元素和块级替换元素都使⽤上⾯同⼀套规则img{width:200px; height:150px}<img>对于缺省src属性的img，IE和Chrome浏览器都还认定为替换元素，结果如预期宽⾼为 200*200. 但是⽕狐浏览器就把对于缺省src属性的img 认定为普通的内联元素，所以就不能使⽤上⾯的尺⼨规则了。
zzdiv css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致
查看文章zzdiv+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动2008-01-11 1733由于IE6的盒模型计算缺陷，padding-right在特定的情况会下导致抖动。
[出现抖动的代码]最近在写一个Div+Css布局的网站首页，以前写的页面都统一width900px;不存在什么布局呀什么float的设置。
现在没办法呀！要对页面进行切割，分块。
幸好，有点css的基础，不过用起来就比较郁闷了。
在ie和firefox下，相同的属性值往往会有不同的显示效果。
没办法要兼容浏览器只得一个一个bug去找。
但完全兼容浏览器是无法做到的，所以也只能将个大概的效果展示出来，不要偏差太大太明显就行。
首先，需要提出的是float这个浮动属性，这是div+css布局的关键所在。
floatleft;floatright;是常用的浮动属性。
为了使div能在一行排列，不得补用到它们。
呵呵！不就是个float吗？这有什么好提的，要浮动我就float一下呀。
哎！话是这么说，但真正用到时却出问题了。
在ie下，只要前一个div有floatleft;后面的div宽度不超过（总body的宽度）-（前一个div的宽度），后面的div就自动浮动，并排列在同一行。
ie和firefox 下，这点效果是一样。
好，接着往下，下一行也这样布局，就分两栏吧。
style type=textcss#div1{}{width200px;height80px;floatleft;border1px solid blue;}#div2{}{width600px;height80px;border1px solid blue;}styledivdiv id=div1divdiv id=div2divdivdiv style=clearboth;margin-top20px; id=div3div这样的布局，在ie下和火狐下的显示效果就不同了在firefox下的margin-top20px;没效果。
寻找消失的margin(Firefox中clear属性的bug)
<style type="text/css"> * {margin:0; padding:0;} div {height:100px; width:300px;} .block1 {background:red; float:left;} .block2 {background:#000; clear:left; margin-top:10px;} </style> <div class="block1"></div> <div class="block2"></div>
寻找消失的margin（Firefox中"clear"属性的bug）
我们在做网页设计的时候，经常会用到margin这个CSS代码；这个代码是设计整个模块距离上下左右的边距。我们通常设计网页时，中间的模块距离头部多少像素，这时候我们会用到margin-top:xxpx这个CSS代码。我们在IE中设计，查看浏览可以达到想要的结果，但是在火狐浏览器中，就看不到了。margin-top:xxpx就没有达到预想的效果。不知道跑哪里去了。
原来clear属性应用在非float的box上的时候，这个box将产生一个足够的高度来使自己的顶端置于上一个浮动元素的低端之下。
而将clear属性应用在浮动的box上的时候，这个被清除（左，右，全部）box的顶端必须置于上一个（左，右，全部）问题，当box1左浮动时，box2清除左浮动，box2产生一个高度为100px的距离来使自己的顶端置于box1的低端之下。
网页兼容的处理
第十一章网页兼容的处理对于一个网页设计师来说，众多浏览器间的CSS兼容问题从来都是非常棘手的。
由于不同的浏览器（常见的包括IE6,IE7,Firefox等）对CSS的解析和认知的不同，严重造成了浏览器页面效果的不一致，使得我们在进行DIV+CSS页面排版时，不得不时刻考虑到常见浏览器间的CSS兼容性问题。
11.1 解决浏览器兼容的原理什么是CSS Hack呢？为解决浏览器间的CSS兼容性问题，设计师们针对不同浏览器写不同的CSS code的过程，就是一个Hack的过程了。
在这个过程中，不但要做到浏览器的兼容性，更要合理地做到CSS代码的绝对优化，尽可能少地人为制造冗余的代码，使CSS代码尽可能简练易读也是非常重要的工作之一。
为什么要用CSS Hack呢？答案很简单，通过对CSS代码的兼容性问题的解决，使得我们写出的页面能在不同的浏览器中达到统一的页面效果。
不会出现IE浏览器中完好的页面拿到FF中去就横七竖八千疮百孔的事情。
CSS Hack的原理是什么？根据不同浏览器对CSS样式的支持程度，解析结果和识别CSS的优先级不同，设计师们就可以根据这些不同浏览器的特点来书写不同的CSS样式代码。
IE6能识别下划线_和星号*，IE7能识别星号*，不能识别下划线_，而firefox两个都不能识别，如此，就可以针对IE6.IE7和FF通过对这些特殊符号的使用写不同的代码了。
div{background:green; /* for FireFox */*background:red; /* for IE7 */_background:blue; /* for IE6 */}该样式显示的效果是：在FireFox中背景色为green；在IE7中背景色为red；在IE6中背景色为blue。
CSS解析的过程：CSS读取的顺序是由上至下，由左至右。
在FireFox下，FireFox不能识别*和_，将下面的两行代码过滤掉不作任何解析，执行background:green;完后结束；在IE7下的解析结果为div{ background:green; *background:red; },根据CSS的优先级可以确定后面出现的样式会优先于前者被调用，即实现*background:red;的解析；在IE6下，因为三种样式代码都可以解析，解析结果为div{ background:green; *background:red; _background:blue;}，但同样根据CSS的优先级，只会把最后一个样式读取，即_background:blue;被应用。
火狐代码
input[type="submit"]:hover , [type="reset"]:hover
{
background: url(chrome://browser/skin/tabbrowser/tab-hover-bkgnd.png) !important;
}
button *
{
margin: 2px 15px 15px 0 !important;
}
#PopupAutoCompleteRichResult > richlistbox > scrollbox > box
{
border: 0 !important;
padding: 0 10px 0 5px !important;
}
#urlbar
{
border-bottom: 1px solid rgba(0,255,255,0.99) !important;
border-top:solid 1px rgba(0,255,255,0.99) !important;
border-left:solid 1px rgba(0,255,255,0.99) !important;
-moz-border-right-colors:rgba(0,100,2155,0.99) !important;
opacity:1!bs tab:not([selected="true"])
{
margin:5px 1px 5px 1px !important;
background: url(chrome://browser/skin/tabbrowser/tab-bkgnd.png) !important;
css样式（火狐的兼容性问题）
css样式（⽕狐的兼容性问题）1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不⾏3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) ⽅可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要⽤ !important 多设⼀个 height 和 width5.FF: ⽀持 !important, IE 则忽略, 可⽤ !important 为 FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼ line-height:200px; 然后插⼊⽂字，就垂直居中了。
缺点是要控制内容不要换⾏7.cursor: pointer 可以同时在 IE FF 中显⽰游标⼿指状， hand 仅 IE 可以8.FF: 链接加边框和背景⾊，需设置 display: block, 同时设置 float: left 保证不换⾏。
参照 menubar, 给 a 和 menubar 设置⾼度是为了避免底边显⽰错位, 若不设 height, 可以在 menubar 中插⼊⼀个空格。
9.在 mozilla firefox和IE中的BOX模型解释不⼀致导致相差2px解决⽅法： div{margin:30px!important;margin:28px;}注意这两个margin的顺序⼀定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx! important;11.ul标签在Mozilla中默认是有padding值的,⽽在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决⼤部分问题注意事项：1、float的div⼀定要闭合。
动易程序修改技巧
动易程序修改技巧大家在运用动易的后台的时候常常会觉得有些地方不近人意，很多地方不能按照自己想要的方式显示出来，我在网上找了些小技巧，做了些修改，和大家一起分享下。
1、直接显示指定频道首页【修改项目】：首页跳转【适用版本】：2005、2006【修改内容】：修改网站根目录下的首页文件In dex.asp，在最底部添加下面这一行代码即可：<%response.redirect "Article/index.html "%> 其中频道名称及首页名称可根据自己需要进行调整，如Photo/index.shtml【效果截图】：无【注意事项】：无2、简繁转换【修改项目】：程序调用【适用版本】：2005、2006【修改内容】：在模板相应位置插入以下代码即可实现页面的简繁转换。
<A class=Bottom href="" name=StranLink> 繁體中文</A><script language="javascript" src="http:// 你的网站域名/Js/gb_big5.js"></script>【效果截图】：无【注意事项】：无3、关闭鼠标滚动放大缩小【修改项目】：鼠标滚动放大缩小特效【适用版本】：2005、2006【修改内容】：将模板中无级缩放函数：//无级缩放图片大小function bbimg(o){var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';return false;}修改为：//无级缩放图片大小function bbimg(o){return true;}ps:试过删除这段代码的同学肯定发现保存后它又回来了，现在有办法解决了。
css层遮挡无法点击解决csspointer-events绝对定位层遮挡的问题解决办法
css层遮挡无法点击解决csspointer-events绝对定位层遮挡的问题解决办法本文章来给各位同学介绍关于在css pointer-events绝对定位层遮挡的问题解决办法，各位同学不防进入参考。
在没有背景和图片填充的情况下，火狐和Chrome下不能直接点击绝对定位层下面的元素（比如链接），下面的链接被上面的绝对定位层挡住了。
在IE里面是可以直接点击绝对定位层下面的链接。
对于这种问题需要用到一个css3的属性，可以通过给绝对定位的层多加一个样式 pointer-events:none; 以后，绝对定位层下的元素就可以点击了。
光给绝对定位的层添加pointer-events:none; 的样式是不够的，你可以发现所有在此层里的元素，都不能点击了，就连链接和按钮也同样不起作用，所以我们需要给绝对定位层中的其他非空的元素把样式再返回。
给里面的元素重新设置为 pointer-events:auto，只给需要操作的元素区域设置即可。
查看演示页面pointer-events属性有很多值：pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit 但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
下面介绍一下pointer-events这两个属性值详细描述auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。
在SVG中，该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。
但是如果它的子元素设置了pointer-events 为其它值，比如auto，鼠标还是会监听这个子元素的。
margin块绝对定位方法
margin块绝对定位方法在网页设计和开发中，块级元素如div是一种常用的布局工具。
绝对定位是块级元素的一种定位方式，它允许你将元素相对于其最近的已定位祖先（而不是相对于整个页面）进行定位。
如果不存在已定位的祖先元素，那么它将相对于初始包含块进行定位。
在本文中，我们将探讨如何使用margin块进行绝对定位。
一、绝对定位的基本概念绝对定位的元素被从正常的文档流中移除，并相对于其包含块进行定位。
它的位置通过top、bottom、left和right属性进行设置。
如果这些属性中的一个或多个不存在，那么元素将根据CSS样式表中的其他规则进行放置。
二、块绝对定位的方法1. 创建包含块：要使元素获得绝对定位，需要先找到一个已定位的祖先元素，这个元素被称为包含块（containing block）。
通常，包含块是包含元素的最近的已定位父级元素。
如果没有已定位的父级元素，那么包含块将是初始包含块，通常是html元素。
2. 设置位置：一旦确定了包含块，就可以使用top、bottom、left和right属性将元素定位在任何位置。
这些属性决定了元素偏移包含块的位置的程度。
例如，如果你想将一个元素向下移动50px，你可以设置top属性为-50px。
3. 固定位置：除了使用top、bottom、left和right属性进行绝对定位外，还可以使用“position: fixed”属性将元素固定在页面上的特定位置。
这将使元素的位置相对于浏览器窗口进行固定，即使页面滚动，它也会保持在相同的位置。
三、示例代码下面是一个简单的示例代码，展示了如何使用margin块进行绝对定位：```html<!DOCTYPE html><html><head><style>.container {position: relative; /* 设置包含块的相对定位 */width: 300px;height: 200px;border: 1px solid black;}.box {position: absolute; /* 块绝对定位 */top: 50px; /* 沿 y 轴向下移动50px */left: 50px; /* 沿 x 轴向右移动50px */width: 100px;height: 100px;background-color: red;}</style></head><body><div class="container"><div class="box"></div></div></body></html>```在这个示例中，我们创建了一个包含块（class为"container"），并使用margin块将子元素（class为"box"）定位在其内部。
网页设计中margin怎么用
People who often blame themselves can often get forgiveness from others.勤学乐施积极进取（页眉可删）网页设计中margin怎么用网页布局中margin也是必不可少的，那么在网页设计布局中，margin应该怎样使用呢?网页设计中margin怎么用【1】首先，我们先设计一个div，并且给这个div添加一个id，id名随意取。
02然后设置一下宽高，并且添加一个红色的背景属性值。
03默认情况下，这个div是靠近浏览器的顶部和左边的。
04接着我们给这个div设置一下margin值，从左到右表示的是上边，右边，下边，左边的margin值。
05设置好之后，可以看到左边和上边都隔开了一定的距离，这就是margin值的用处，而下边和右边因为没有其他div或者其他颜色，所以效果被忽略了。
06当然，margin值也可以分开写，比如我只设置div的上边的margin值，就可以使用margin-top，而右边则可以使用margin-right，左边则是margin-left，下边则是margin-bottom。
07如图，设置margin-top之后，只有上边拉开了距离，而左边并没有拉开距离。
08接着我们再在网页中添加一个div，并设置id为“you”。
09接着设置“you”这个div的宽高和背景。
10如图所示，新添加一个div之后，如果没有设置margin-bottom的值，两个div就会连在一起。
然后我们给上面的div，也就是“my”,设置margin-bottom。
12设置好之后，两个div之间就会拉开距离，这样就可以定位好div的位置。
13而如果我们给“my”设置好margin-bottom之后，又给“you”设置margin-top，又会有什么结果呢?14结果就是这样：有两个相邻的div，如果一个div设置了margin-top，另一个设置了margin-bottom，则以它们之间值最大的为准。
jquery.jqprint-0.3.js打印功能以及页眉页脚设置显示与否
jquery.jqprint-0.3.js打印功能以及页眉页脚设置显⽰与否项⽬中需要打印搜索使⽤了jquery.jqprint-0.3.js遇到⼀些样式问题，现在已经解决，记录下来供⼤家参考。
下⾯图显⽰为我页⾯中的样式:满⾜需要根据设备名称输⼊的多少⾃动适应打印页⾯项⽬引⼊<script type="text/javascript" src="<c:url value="/jquery.jqprint-0.3.js"/>"></script>下⾯的引⼊显⽰在页⾯<link rel="stylesheet" type="text/css" href="<c:url value="/jquery-print.css"/>"></link>下⾯的引⼊需要设置media="print" 这样只显⽰在打印的时候<link rel="stylesheet" type="text/css" media="print" href="<c:url value="/jquery-print.css"/>"></link>下⾯的样式只在页⾯显⽰打印不显⽰<style>.prints{ font-size:13px;}.prints h5{ font-size:16px;}</style>布局适应设备名称的jsvar max=0,max1=0,max2=0,max3=0,max4=0;$(".prints ul li").each(function(){$(this).height("auto").css("lineHeight","30px");if($(this).children("div")[0]){$(this).children("div").css("marginTop","0");}});$(".prints ul:nth-child(2) li").each(function(){if($(this).height()>max){max=$(this).height();}});$(".prints ul:nth-child(2) li").each(function(){$(this).height(max).css("lineHeight",max+"px");if($(this).children("div")[0]){var h_=$(this).children("div").height();$(this).children("div").css("marginTop",(max-h_)/2);}});$(".prints ul:nth-child(3) li").each(function(){if($(this).height()>max1){max1=$(this).height();}});$(".prints ul:nth-child(3) li").each(function(){$(this).height(max1).css("lineHeight",max1+"px");if($(this).children("div")[0]){var h_=$(this).children("div").height();$(this).children("div").css("marginTop",(max1-h_)/2);}});$(".prints ul:nth-child(4) li").each(function(){if($(this).height()>max2){max2=$(this).height();}});$(".prints ul:nth-child(4) li").each(function(){ $(this).height(max2).css("lineHeight",max2+"px"); if($(this).children("div")[0]){var h_=$(this).children("div").height(); $(this).children("div").css("marginTop",(max2-h_)/2); }});$(".prints ul:nth-child(5) li").each(function(){if($(this).height()>max3){max3=$(this).height();}});$(".prints ul:nth-child(5) li").each(function(){ $(this).height(max3).css("lineHeight",max3+"px"); if($(this).children("div")[0]){var h_=$(this).children("div").height(); $(this).children("div").css("marginTop",(max3-h_)/2); }});$(".prints ul:nth-child(6) li").each(function(){if($(this).height()>max4){max4=$(this).height();}});$(".prints ul:nth-child(6) li").each(function(){ $(this).height(max4).css("lineHeight",max4+"px"); if($(this).children("div")[0]){var h_=$(this).children("div").height(); $(this).children("div").css("marginTop",(max4-h_)/2); }});打印代码$("#showPrint-table").jqprint({});jquery-print.css的样式*{box-sizing:border-box;}.prints{font-size:16px;background-color: #84cdf7;color:#000;border:1px solid #000;}.prints ul{overflow:hidden;padding:0;margin:0;}.prints ul li{line-height:30px;float:left;list-style: none;}.prints h5{font-size:18px;text-align:center;line-height:46px;margin:0;}.prints ul li:nth-child(1){width:20%;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify;-moz-text-align-last:justify;-webkit-text-align-last:justify;padding:0 10px;border-top:1px solid #000;}.prints ul li:nth-child(2){width:30%;text-align:center;border-left:1px solid #000;border-top:1px solid #000;padding:0 10px;background:#fff;}.prints ul li:nth-child(3){width:20%;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify;-moz-text-align-last:justify;-webkit-text-align-last:justify;padding:0 10px;border-left:1px solid #000;border-top:1px solid #000;}.prints ul li:nth-child(4){width:30%;text-align:center;border-top:1px solid #000;border-left:1px solid #000;padding:0 10px;background:#fff;}.prints ul li.danwei{width:80%;padding:0 10px;background-color: #84cdf7;}.prints ul li div{word-wrap:break-word;line-height:30px !important;}jquery.jqprint-0.3.js代码(function($) {var opt;$.fn.jqprint = function (options) {opt = $.extend({}, $.fn.jqprint.defaults, options);var $element = (this instanceof jQuery) ? this : $(this);if (opt.operaSupport && $.browser.opera){var tab = window.open("","jqPrint-preview");tab.document.open();var doc = tab.document;}else{var $iframe = $("<iframe />");if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); } $iframe.appendTo("body");var doc = $iframe[0].contentWindow.document;}if (opt.importCSS){if ($("link[media=print]").length > 0){$("link[media=print]").each( function() {doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");});}else{$("link").each( function() {doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />");});}}if (opt.printContainer) { doc.write($element.outer()); }else { $element.each( function() { doc.write($(this).html()); }); }doc.close();(opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000); }$.fn.jqprint.defaults = {debug: false,importCSS: true,printContainer: true,operaSupport: true};下⾯为⾕歌显⽰的打印效果，可以勾除页眉页脚设置⽕狐浏览器需要这样设置页眉页脚打印--》页⾯设置设置完以后打印效果⼀样。
网页设计中margin怎么用.doc
网页设计中margin怎么用网页布局中margin也是必不可少的，那么在网页设计布局中，margin应该怎样使用呢?网页设计中margin怎么用【1】首先，我们先设计一个div，并且给这个div添加一个id，id名随意取。
02然后设置一下宽高，并且添加一个红色的背景属性值。
03默认情况下，这个div是靠近浏览器的顶部和左边的。
04接着我们给这个div设置一下margin值，从左到右表示的是上边，右边，下边，左边的margin值。
05设置好之后，可以看到左边和上边都隔开了一定的距离，这就是margin值的用处，而下边和右边因为没有其他div或者其他颜色，所以效果被忽略了。
06当然，margin值也可以分开写，比如我只设置div的上边的margin 值，就可以使用margin-top，而右边则可以使用margin-right，左边则是margin-left，下边则是margin-bottom。
07如图，设置margin-top之后，只有上边拉开了距离，而左边并没有拉开距离。
08接着我们再在网页中添加一个div，并设置id为“you”。
09接着设置“you”这个div的宽高和背景。
10如图所示，新添加一个div之后，如果没有设置margin-bottom的值，两个div就会连在一起。
11然后我们给上面的div，也就是“my”,设置margin-bottom。
12设置好之后，两个div之间就会拉开距离，这样就可以定位好div 的位置。
13而如果我们给“my”设置好margin-bottom之后，又给“you”设置margin-top，又会有什么结果呢?14结果就是这样：有两个相邻的div，如果一个div设置了margin-top，另一个设置了margin-bottom，则以它们之间值最大的为准。
比如margin-top是50像素，margin-bottom是30像素，则间隔就是50像素，而不是两个相加哦。
element实现自定义表格列
element实现⾃定义表格列在我们开发PC端的项⽬使⽤表单时，尤其是crm系统，应该经常会遇到这样的需求，⽤户需要根据设置来⾃定义显⽰列。
查了element 的官⽅⽂档，并没有此类组件，所以⼿动封装了⼀个简单的组件，希望能在⼤家开发此类需求时能够有所帮助。
效果图具体效果图如下：⾃定义显⽰列 (可实现拖拽进⾏排序，点击选中，再次点击取消选中)按照⽤户已设置好的字段排序/显⽰/隐藏每⼀列setTable组件⾸先实现拖拽排序的话我们需要借助⼀个插件：npm install vuedraggable -S具体的组件代码如下，代码内已写有详细的注释，在这⾥就不过多赘述了。
setTable.vue<template><div><el-dialog title="⾃定义显⽰列" :visible.sync="dialogVisible" width="50%"><div class="select-menus menus-box"><p class="menus-title">拖动区块调整显⽰顺序</p><div class="menus-content"><draggable v-model="selected" @update="datadragEnd" :options="{animation:500}"><transition-group><div v-for="menu in selected" :key="menu.field" class="drag-item item">{{}}</div></transition-group></draggable></div></div><div class="menus-container menus-box" v-if="fields.length"><p class="menus-title">选择显⽰列</p><div class="menus-content"><divclass="item":class="{active:menu.active}"v-for="menu of fields":key="menu.field"@click="onSelect(menu)">{{}}</div></div></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onSave">确定</el-button></span></el-dialog></div></template><script>import draggable from "vuedraggable";import { getFields, setFields, getFieldControl } from "@/api/user";export default {name: "setTable",inject: ["reload"],props: {types: String,},components: {draggable,},data() {return {dialogVisible: false,fields: [],//全部菜单selected: [],//已选中菜单};},watch: {selected: {handler(oldVal, newVal) {if (this.fields.length === 0) {return;}newVal.map((i) => {this.fields.map((j) => {if (i.field === j.field) {// 如果已选中数组内已有相同字段，则active为true。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（一）margin-top失效
先看下面代码：
<div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
</div>
两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。
<!DOCTYPE <a href="/bkhtml/c22/"
target="_blank" title="HTML/JavaScript教程">HTML</a> PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <a href="/bkhtml/c21/" target="_blank" title="XML教程">XML</a>ns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Firefox下margin-top问题</title>
<style type="text/<a href="/bkhtml/c23/"
target="_blank" title="CSS教程">CSS</a>">
<!--
* {
margin:0;
padding:0;
}
.box1{
float:left;
width:500px;
height:100px;
background:#999;
}
.box2{
margin-top:20px;
width:500px;
height:50px;
background:#000;
color:#fff;
clear:both;
}
-->
</style>
<body>
<div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
</div>
</body>
</html>
网上能找到的两种比较靠谱的解释：1：“在css2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理（地址）。
得到解决问题思路：要浮动一起浮动，要就一起不浮动。
解决办法：
1.box2增加float属性
2.box1与box2之间增加一层"<div style="clear:both;"></div>"
（二）子元素设置margin-top作用于父容器
<div class="box" style="height:100px;background:red;">
<div class="box2">clear:both;
margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>
当给box2设置margin-top时，在FF下仅作用于父容器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Firefox下margin-top问题</title>
<style type="text/css">
<!--
* {
padding:0;
}
.box2{
margin-top:20px;
width:500px;
height:50px;
background:#000;
color:#fff;
}
-->
</style>
</head>
<body>
<div class="box" style="height:100px;background:red;">
<div class="box2">clear:both;
margin-top:20px;height:50px;width:500px;background:#000;</div> </div>
</body>
</html>
解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top。