display

vue 仿掘金评论列表

我是研究僧i 提交于 2020-03-04 12:35:49
先来个最终效果 代码:   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=

前端浏览器兼容问题及解决

为君一笑 提交于 2020-03-03 12:03:14
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 和

2016.8.19 将div设置为隐藏使用style=“display:none”

我是研究僧i 提交于 2020-03-03 10:09:09
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,这时元素实际上就从页面中被移走

jQuery显示隐藏div的几种方法

天涯浪子 提交于 2020-03-03 02:50:00
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.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间 例:

网络设备命令

时光总嘲笑我的痴心妄想 提交于 2020-03-02 13:18:01
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

父元素高度塌陷的解决办法

耗尽温柔 提交于 2020-03-02 11:01:31
子元素浮动后不在占有原文档流的位置,如果父元素没有设置高度,就会引起父元素高度塌陷,解决的办法如下: 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

SWT内嵌浏览器Browser对象使用JQuery等Web插件

▼魔方 西西 提交于 2020-03-01 21:19:47
前言 我们知道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样式重置表

可紊 提交于 2020-03-01 18:07:24
非常好用的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

前端常用总结

心不动则不痛 提交于 2020-03-01 15:35:44
元素居中 通过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解决方案

a 夏天 提交于 2020-03-01 09:36:52
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