使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6.7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象. 代码以及IE6.7下的表现 CSS: body { padding: 10px; } .block_to_inlineblock, .in

display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问题,仅在 Chrome 浏览器测试通过 HTML Code: <h5>未处理空格</h5> <ul> <li>One

呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.html#h-7.5.3): 1. 内容模型:block元素可以包含block元素和inline元素,inline元素可以包含数据和其他inline元素(就是说inline不能包含block).核心思想就是相比inline元素,block元素构建的结构都“比较大”. 2. 格式:默认,block元素之间

1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;} .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;} </style> <div class=&q

inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示,多个block元素会各自新起一行. inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示) 常見的inline元素:span,a,strong,em等. 常見的block元素:div,p,h1到h6,form,ul,ol等. 常見的inline-block元素:im

一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间(独占一个水平空间) 4.忽略vertical-align 二.inline元素特点 1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在垂直方向上无效,在水平方向上有效 5.width/height对非替换行

inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能容纳文本和其他内联元素 只有水平方向margin-left.margin-right.padding-left.padding-right会产生边距效果 block元素 会独占一行,默认情况下,其宽度自动填满父级元素宽度 高度.行高.以及外边距和内边距都可控制 宽度缺省时默认容器的百分之百 可以容纳

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有

  为了实现上面效果: <dl>     <dt>提问:</dt><dd>为什么没有男朋友?</dd> </dl> <dl>     <dt>回答:</dt><dd>男朋友是什么.可以吃吗?</dd> </dl>   原理显而易见:标题元素前换行,去除第一个标签元素前面的换行符. dt:before {     content: '\D\A';     white

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,

display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行. block元素可以设置margin和padding属性. display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化. inline元素设置width,height属性无

先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { display: inline; background: #f00; } .inline-0f0 { display: inline; background: #0f0; } .inline-block-00f { display: inline-block; background: #00f; } .inline-bl

原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

html 中 nowrap是用来强制不换行的 在排版中 对包裹plain text的标签使用nowrap属性即刻实现强制不换行. 如:<p nowrap>强制不换行</p><p style="white-space:nowrap">强制不换行</p> 在使用div的超文本中 把div,h1,section,nav,a,li等元素 强制变成行内元素display:inline; 然后就能够像第一种情况一样对其进行操作. 例子: 父级nav限

行标签:内容撑开宽度,不可以控制宽和高,它的宽和高随标签里的内容而改变 块标签:撑满行(默认) ,可以用样式控制其宽和高 但行标签 img,textarea,select,input 是可以设置宽和高并且有效的 如果对 iniline元素设置了浮动 则具有块级元素的性质 块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易,也是css layout的主要标签* dl

// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css('background-color', colorRandom); }); }, 1000); }); // ]]> 块状元素(block): 总是另起一行开始 高度,行高以及顶.底边距都可控制:行高可以设置文字内容的垂直位置 若不设置大小,默认为父元素的100% 我是h1 我是h6,我宽100,

float:left ---------------------------------------------------------------------------------------- 参考 http://www.w3school.com.cn/css/css_positioning_floating.asp 最常见的布局会有局限性,要求高度相同,不然会出现卡住的情况 eg 1 : 当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: eg 2: 当

在CSS中,标签span 强制换行失败:(使用display:block) 可能原因:float:left   or  float:right

首先明确,vertical-align只对inline-block和inline元素有效. 在说vertical-align之前,需要先说明一下什么是line box. 浏览器中显示的一行会包含多个非block元素(有block元素时就换行了),通过一个box可以把这一行包含起来,这就是一个line box. 比如一个div,他会占据一行,包裹着内部所有非block元素的就是一个line box. line box的高度,是本行中拥有最高行高的元素的高度. 此时,对拥有最高行高的非block元素

box:盒子,每个元素在页面中都会生成一个矩形区域(盒子) 盒子类型: 1.行盒,display属性=inline的元素,不换行(默认值) 2.块盒,display属性=block的元素,换行 浏览器默认样式表设置的块盒:容器元素.h1~h6.p 常见的行盒:span.a.img.video.audio 盒子的组成部分 无论是行盒还是块盒,都有下面4个部分组成,从内到外分别是: ①内容区域 content 内容盒:content-box width  height ②填充区     paddin