两者可以配合使用，从而实现块的隐藏与显示 show()方法对应display:block; 或 inline hide()方法对应display:none;
引言 使用position和display来实现的当鼠标移动到图片上时显示和隐藏文字或者视频的效果。 知识点 1、relative、absolute的使用。 当子元素使用position:absolute时，父元素应该设置postion:relative以便使它作为决定定位段落的定位环境。在这里相对定位的元素 必须是绝对定位的祖先元素，才有资格成为定位环境。 2、CSS选择器。其中用到了两种选择器：element,element 和 element element di...
在CSS中，使用display属性来定义盒的类型。总体来说，盒类型分为两类：inline和block。如div默认是block，span默认是Inline。可以通过display修改默认的表现方式。 block and inline elements div { background:#aaff00; } span { background:#ffaa00; } div元素1 div元素2 span元素1 span元素2 默认的div和span表现形式：htt...
CSS如果想要将DOM元素隐藏，有2种做法：将display属性设置成none，或者将visibility属性设置成hidden。下面的html代码没有设置display和visibility属性。 使用display:none隐藏outB 使用visibility:hidden隐藏outB 对比结果可以很容易得出结论：display:none，元素实际上就从页面中移走了，它后面的元素就会自动上移；而visibility:hidden，则仅仅隐藏该元素，它占据的页面空间依然存在。 对于out...
写在前面 在群里有朋友问这样一个问题，display:none的标签，影响了布局。这就引出了本篇这样的问题，印象中display:none的块元素是不占位置的。 一个例子 第一个层 第二个层 浏览结果 为第一个层设置样式visibility:hidden 第一个层 第二个层 浏览结果 那么为第一个层设置display:none样式 通过上面的对比，你也会发现display:none可以让块元素隐藏并不占位置。...
1 不信可以去掉display试试看！！！反正我信了！！！
最近写HTML遇到一个问题：我想设置span的宽度和高度，但是在IE9和chrome下总是不起效果。代码和效果图如下： span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } 1 10 100 1000 可以看到css设置的width和height并没有起效果，span的实际显示宽度和高度由其内容决定。为什么会这样呢？这涉及到HTML中块级元素(block)和行级元素(inline)的区别，...
1. 引言 网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。 其实，这部分知识都囊括在display这个样式设置中。在网...
发现： 最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到 display:inline 这个属性，不知道的可以看看我的上一篇随笔, 之所有在前面加上-webkit-是因为太多人吧box-inline理解成内联盒子。 ...
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。display:隐藏对应的元素并且挤占该元素原来的空间。 来看看下面的这个例子： XML/HTML代...
css笔记-display属性 display属性可取值 display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group display属性取值说明 none：隐藏元素。与visibility属性...
display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 浏览器支持: 所有主流浏览器都支持 display 属性。 注释：任何版本的 Internet Explorer （包括 IE8）都不支持 "inherit"、"inline-table"、"ru...
display:table和display:table-cell的用法: 建议:尽可能的手写代码，可以有效的提高学习效率和深度。 display属性的table和table-cell属性值不怎么常用，主要是浏览器的兼容性并不好，因为万恶的IE6和IE7还有相当一部分用户在使用，不过并非没有它们展露头角的机会，在display:table-cell的用法简介中已经对display:table-cell做了简单的介绍，但是感觉不够全面，下面就集合实例稍稍全面的介绍一下。 三个属性值的基本概念: ...
FL FL FL FL nav ul li{ float: left; width: 72px; display: inline;}nav li a { display:block;} 上面是html，css和效果图 回复讨论(解决方案) 有几个问题： 1，为什么li里float left和display inline同时使用？感觉作用是差不多的。网上了解下，li是个半block元素，是不是跟这个有关系？ 2，a里为什么要display: block，而且去掉后效果似乎也没什么改变。 3，文字“FL”本来和图片是并排的...
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果： 一、首先在页面中放2个div，并用不同的背景色区分他们： 1 2 3 4 5 两种...