display

先来个最终效果 代码： 　　template代码： <template> <div class="main"> <div class="title">评论</div> <div class="comment-form"> <div class="avatar-box"><el-avatar class="header-img" :src="defaultAvatar"></el-avatar></div> <div class="form-box"> <div class="input-box" > <div tabindex="0" contenteditable="true" id="replyInput" spellcheck="false" placeholder="输入评论..." class="reply-input replyInput" @focus="showReplyBtn" @input="onDivInput($event)"></div> </div> <div class="action-box"> <div class="emoji emoji-btn"> <div class="emoji-box"> <span class="replyInput" @click="showEmoji($event)" v-clickoutside=

1、居中问题 div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto; 2、高度问题 两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;} 3、clear:both; 不想受到float浮动的，就在div中写入clear:both; 4、IE浮动 margin产生的双倍距离 #box { float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 } 5、padding问题 FF设置 padding 后，div会增加 height 和

style="display:none"表示隐藏。 style="display:block"表示显示。 在代码中则使用$("#id").show(); 代码： 效果如图所示： 注意：display属性与visibiity属性的区别！ visibility属性： 确定元素显示还是隐藏； visibility="visible|hidden"，visible显示，hidden隐藏。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。 display属性: 就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。 其中 block和none值最常用。 block：默认值。 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。 inline: 将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。 none： 最后是display被设置：none,这时元素实际上就从页面中被移走

1、$("#demo").attr("style","display:none;");//隐藏div $("#demo").attr("style","display:block;");//显示div 2、$("#demo").css("display","none");//隐藏div $("#demo").css("display","block");//显示div 3、$("#demo").hide();//隐藏div $("#demo").show();//显示div 4、$("#demo").toggle(//动态显示和隐藏 function () { $(this).attr("style","display:none;");//隐藏div }, function () { $(this).attr("style","display:block;");//显示div } ); <div id="demo"></div> 注： $("#demo").show()表示display:block, $("#demo").hide()表示display:none; 1和2中的display:none可以换成visibility:hidden，display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间，而后者隐藏后会占空间 例：

1、display diagnostic-information 抓取系统信息用于诊断 2、display diagnostic-logfile 抓取日志文件用于诊断 3、display device manufacture-info 显示设备制造信息（可以查询SN） 4、display forward mode 查看报文转发模式 来源： CSDN 作者： kf305 链接： https://blog.csdn.net/kf305/article/details/104607206

子元素浮动后不在占有原文档流的位置，如果父元素没有设置高度，就会引起父元素高度塌陷，解决的办法如下： 1：给父元素设置高度，如下图： 注：只适合高度固定的布局。 2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图： 注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的元素。 3：给浮动元素末尾添加空标签，给空标签添加clear:both，如下图： 注：会添加许多无意义的标签，增加结构负担，导致代码冗余。 4：给父元素添加display:table，如下图： 注：会改变父元素的元素类型。 5：伪元素清除法：::afte{content:"";display:block;clear: both;height:0;overflow: hidden;visibility: hidden;},如下图： 注：代码太多，不易记忆。 说明：这只是我的个人见解，不足的地方还请原谅。 来源： CSDN 作者： 奋斗中的猿人 链接： https://blog.csdn.net/m0_46382643/article/details/104601341

前言 我们知道web 的UI界面真得很漂亮，而且开源社区有很多插件可以用，所以要开发出漂亮的页面也很容易。那么，我们使用SWT/JFace进行桌面软件的开发时，也想要实现一些像JQuery EasyUI等等漂亮的表格，可以说是非常难。但是，SWT Browser 是 Eclipse SWT 的标准部件，它提供了把 HTML 整合到 Java 平台的能力。该部件植入了平台流行的 HTML 渲染引擎：在 Microsoft Windows 平台上是 IE，在 Linux 平台上是 Mozilla，在 Apple Mac 平台上是 Safari。但在实现的过程中还是有很多很坑的，笔者在网上搜了很多资料，都太简略，没什么干货。所以，只能自己摸索。废话不多说，我们直接干吧！ 一. 创建简单的浏览器 import org.eclipse.swt.*; import org.eclipse.swt.browser.*; import org.eclipse.swt.layout.*; import org.eclipse.swt.widgets.*; public class SimpleBrowser { public static void main(String [] args) { Display display = new Display(); final Shell shell =

非常好用的CSS样式重置表 我们在项目前期准备时都会准备好一个reset.css，因为不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果。所以一个好的重置样式表是非常重要的。用过很多网上现成的样式重置表，然后有时写的样式代码没问题却达不到自己要的效果，查了才发现是掉进reset.css的坑里。这里推荐用过多种reset.css感觉是最好用的重置样式表： Sandal ，这个样式表的好处是他绝大多数的保留了标签的常用效果，并不是简单粗暴的全部掩杀。具体样式如下，可以直接整个复制在自己的reset.css中： 　　html { 　　　　-ms-text-size-adjust: 100%; 　　　　-webkit-text-size-adjust: 100%; 　　　　-webkit-tap-highlight-color: transparent; 　　　　height: 100%; 　　} 　　body { 　　　　margin: 0; 　　　　font-size: 14px; 　　　　font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; 　　　　line-height: 1.5; 　　　　color: #333; 　　　　#fff; 　　　　min-height

元素居中 通过display: flex;对齐 < div style = "display: flex;width: 100%;height: 500px;background: aqua;" > < div style = "margin: auto auto;" > 通过display : flex ; 对齐 < / div > < / div > 通过定位对齐 使用定位元素会脱离文档流，父级元素需要定好 宽高 < div style = "position: relative;width: 100%;height: 500px;background: aqua;" > < div style = "position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);" > 通过定位对齐 < / div > < / div > box-sizing 详细信息点我 当 box-sizing:border-box;时候 元素的宽高可直接由width 和 height定死不在更改 当 box-sizing: content-box;时 元素的宽高 除了受width 和 height影响 还受padding和元素内的内容 宽高影响 默认是box-sizing: content-box; 如果用了bootstrap

IE6/IE7下：inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性） IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。 IE6下块元素如何实现display:inline-block的效果？ 有两种方法： 1、 先使用display:inline