隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden",但是这两种方法会产生不同的结果. display:none隐藏某个元素,且隐藏的元素不会占用任何空间,即该元素不但被隐藏了,而且原本占用的空间也会从页面布局中消失. visibility:hidden隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,即该元素虽然被隐藏了,但仍然会影响布局. 块元素:占用全部宽度,可设置高度和宽度,前后都是换行符,如…
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否浮动显示 float : none | left | right none:设置对象不浮动 left:设置对象浮在左边 right:设置对象浮在右边 浮动的目的: 就是要打破文档流的默认显示规则.如果要让元素按…
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏.当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例: <script language="JavaScript"…
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt408 大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility和display两个属性都有隐藏元素的功能.visibility属性所控制的元素虽然不在浏览器里面显示出来,但他在浏览区里是存在的,只是不显示而已.而display属性设置为none,这个元素就变成了一个不显示的元素 一.Displa…
CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间). 二.隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden".但是请注意,这两种方法会产生不同的结果. visibility:hidde…
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(style属性) >id选择样式(#获取) > 属性选择 ([title="da"]) > 标签选择 div p > 通配符* 2. 同一等级优先级具有叠加性.div p的优先级大于p.相同优先级,越晚设置的样式优先级越大 3. 绝大部分样式会从父元素继承到子元素上,继承…
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性…
一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置.2.浮动的概念:所谓的浮动就是指元素脱离文档流,漂浮到文档流的上方,不会占据位置.3.浮动的特性:(1).浮动元素有左浮动(float:left)和右浮动(float:right)两种.(2).浮动的元素会向左或向右浮动,碰到父元素边界,浮动元素,未浮动的元素才停下来.(3).相邻浮动的块元素可以…
一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ content:""; display: block; clear:both; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&…
盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两遍. 计算 宽高box-sizing: border-box;(意义是将盒子大小定死,不会再因边距边框大小改变.) 设置上一行属性后,盒子宽度就是width,里面内容自适应.(计算的时候不再需要加边框和边距.) 从里到外: padding(内边距): 属性值的前后顺序代表了上右下左的属性值. 上右下…