display有几个属性

<display>标签的几个属性

<display>这个标签个人觉得挺强大的,但是用不好的话就会成为个累赘,下面给大家分享一下他的几个属性. none:表示此元素不会被显示. block:此元素将显示为块元素,前后会换行.(此属性可以用来去除图片自带的3px的问题) inline:此元素将显示为行元素,前后不会换行. inline-block:此元素显示为行内块元素,具有块元素的属性,但是允许其他块元素与其同行显示. list-item:此元素会作为列表显示. table:此元素会作为块级表格来显示,前后换行. inline-

理解display中的box-flex属性

今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局,要求页面效果如下: 在实现这种页面布局时,他使用了display:box-flex,下面是相应的代码: css2 方式 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> html{hei

CSS布局 ——从display，position， float属性谈起

页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul

Code笔记之：CSS+HTML display 属性

display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.(CSS2.1 新增的值) list-item 此元素会作为列表显示. run-in 此元素会根据上下文作为块级元素或内联元素显示. compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除. marker CSS 中有值 marker,

尖刀出鞘的display常用属性及css盒模型深入研究

一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性. 其实display:inline-block这个属性现在浏览器都支持,其实IE从5.5开始就已经支持了,但是IE6,7支持的还不够完善,我们可以先来做demo测试下就可以明白.为了做demo,所以我们现在需要

CSS布局 ——从display，position， float属性谈起(转)

CSS布局 ——从display,position, float属性谈起页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块

<display:column>属性解释

参考官方网站:http://www.displaytag.org/1.2/displaytag/tagreference.html 所有属性: autolink,class,comparator,decorator,defaultorder,escapeXml,format,group,headerClass,headerScope,href,maxLength,maxWords,media,nulls,paramId,paramName,paramScope,paramProperty,pro

html5的float属性超详解（display，position， float）（文本流）

html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照文本流的位置顺序布局. 4.相对定位可以看作特殊的普通流定位.相对定位的元素是相对自己本身的位置(在普通流中)进行定位. 5.position的absolute属性绝对定位:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位. 6.position中的fix属性是相对浏览器窗

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性分别取值 0.hidden.none 都能使元素在页面上看不见,但是他们在方方面面都还是有区别的. 是否占据页面空间举个例子 <!doctype html> <html lang="en"> <head> <meta charset="

大话css之display的Block未解之谜（一）

用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处

display:table-cell

布局神器display:table-cell Author:owenhong2015-06-17 随着时间的推进,ie6.ie7在中国浏览器市场的占有率越来越低的情况,我现在工作的团队,经过用户访问数据,得知ie6.ie7的用户已经非常少的前提下,决定不在兼容ie6.ie7.正式在这个激动人心的决定后,让我对display:table-cell:这个属性有了更加深入的应用和理解.在ie8还必须兼容的pc端,它绝对是一个现代的布局神器. 我并不喜欢用float来做布局,因为它触发的问题比较多,例如

CSSText属性批量修改样式

给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200px";head.style.height = "70px";head.style.display = "block"; 使用cssText属性 var head= document.getElementById("head");he

css中 Span 元素的 width 属性无效果原因及多种解决方案

先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout .而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 he

display : -webkit-box-inline 我见

发现: 最近在做移动端的东西,说起移动端弹性盒子布局真是无往不利,用起来特别爽,我也是偶尔间发现的这个属性并且它的用法,在网上基本查不到这个属性的资料(个人看法).如果没有听说过(display:box)的朋友建议去别人家的博客看看CSS3就可以直接command+w了,由字看意,是不是能联想到 display:inline 这个属性,不知道的可以看看我的上一篇随笔, 之所有在前面加上-webkit-是因为太多人吧inline-box理解成内联盒子,-webkit是webkit内核的浏览器对于

JQGrid 参数、属性API

JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/ ui.jqgrid.css

布局神器display:table-cell

元素两端对齐第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 * { box-sizing: border-box; } .content { display: table; border: 1px solid #06c; padding: 15

display : -webkit-box-inline 的理解

发现: 最近在做移动端的东西,说起移动端弹性盒子布局真是无往不利,用起来特别爽,我也是偶尔间发现的这个属性并且它的用法,在网上基本查不到这个属性的资料(个人看法).如果没有听说过(display:box)的朋友建议去别人家的博客看看CSS3就可以直接command+w了,由字看意,是不是能联想到 display:inline 这个属性,不知道的可以看看我的上一篇随笔, 之所有在前面加上-webkit-是因为太多人吧inline-box理解成内联盒子,-webkit是webkit内核的浏览器对于

让css初学者抓狂的属性float

挣扎了好久,始终没有决定要不要写博客,心里有几个顾虑一是我是小白,我写的文章有没有人看?二是我是小白,我写的文章假如存在诸多错误,理解的不对发表上去再去误导别人.三是写一篇文章费时费力.但是我现在想明白了,我不写技术大牛的文章,就写菜鸟的学习型文章.我写文章是为了我自己,不是为了别人.有错误正好别人提出改正. 写文章有几个好处,一来可以理清思绪,对于我这个思维混乱的人来说是再好不过的方法了,二来可以记录学习知识,方便以后忘记了可以回来看看.三是已积累起来的文章可以让自己很有成就感. 文章多是学习

display和visibility的区别

一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流而visibility隐藏的元素仍然占文档流二.display和visibility的属性值 1.display display:block:将元素设置为块级元素,独占一行,能设置宽高 display:inline-block;将元素设置为行内快显示,能设置宽高,但是不独占一行 display:none:将元素

HTML的定位属性

position 用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定) top层距离顶点纵坐标的距离 left层距离顶点横坐标的距离 width层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值 height层的高度,可以用一个长度或“auto”值来指定高度,不允许使用负值 z-index决定层的先后顺序和覆盖关系,值高的元素会覆盖比较低的元素 display是一个显示属性,设定block值是以块显示,在元素

关于display的那些事儿!

关于display的那些事儿! display,display,display!嘿嘿嘿!display这一CSS属性,还是相当神奇的哦!给它设置不同的值,被修饰的标签相应的就随之变换了自身的属性特性,具有变色龙特性,该怎么适应,就怎么变!我们常常会用到display对应值有block.none.inline等等!OK!那下面,我就来聊聊关于display的那些事儿吧! display有哪些比较常用的值呢? 欲知其所以然,则必先知其然!在通常的项目开发中比较容易被使用的值主要有:none(元素不会

display有几个属性

热门专题