- 浏览: 2159047 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (401)
- Agile (16)
- Apache Commons (3)
- Architecture (8)
- DB.MongoDB (5)
- DB.Mysql (3)
- DB.Oracle (34)
- DirectoryService (1)
- DotNet (1)
- English (3)
- Groovy (0)
- Html (28)
- Java (67)
- Java.Aixs (7)
- Java.Cache (2)
- Java.jPBM (1)
- Java.Resin (6)
- Java.Spring (4)
- Java.Struts2 (5)
- Java.Tomcat (16)
- Javascript (45)
- Javascript.Google Map (2)
- Javascript.Jquery (8)
- Life (15)
- Maven&Ant (4)
- Network (5)
- OS.Linux (45)
- OS.Windows (10)
- OS.Windows.Office (1)
- PlayFramework (15)
- Python (28)
- Reading notes (11)
- Security (13)
- Server.Apache (3)
- Server.Nginx (7)
- Test (6)
- Tool (15)
- Work.Solution (15)
- Other (20)
- SSO&CAS&Identity (13)
最新评论
-
hutuxiansheng123:
防火墙、Iptables、netfilter/iptables、NAT 概述 -
dacoolbaby:
非常棒的正则表达式,非常适用。万分感谢。
用python分析nginx的access日志 -
loot00:
您好! 我也遇到了相同的错误信息。我是用f_link_lob ...
LOB variable no longer valid after subsequent fetch -
feihangchen:
@OnApplicationStop public clas ...
Play framework 1.2.3 Jobs定时任务、异步任务、引导任务、触发任务、关闭任务 -
洞渊龙王:
谢谢了
www.w3.org被qiang导致logback报错:Connect reset
参考:jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position属
position属性:position属性指出一个元素的定位方法。有4种可能值:static, relative, absolute or fixed:
float属性:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
display属性:display属性指定了一个DOM元素说使用的盒子模型(box)。即元素应该生成的框的类型。
CSS框模型(盒子模型) 一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“内联元素”,这是因为它们的内容显示在行中,即“行内框”。
您可以使用 display 属性改 变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让内联元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:
<div>
some text
<p>Some more text.</p>
</div>
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
Css属性:display, position和float的关系,参考:CSS2.1中的定义
表格 display属性转换:
position属性:position属性指出一个元素的定位方法。有4种可能值:static, relative, absolute or fixed:
- static:默认值,元素按照在文档流中出现的顺序渲染
- absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位
- fixed:元素相对于浏览器window进行定位
- relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离。
float属性:float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
- none:默认值。元素不浮动,并会显示在其在文本中出现的位置。
- Left:元素向左浮动。
- Right:元素向右浮动。
display属性:display属性指定了一个DOM元素说使用的盒子模型(box)。即元素应该生成的框的类型。
- Inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
- None: 此元素不会被显示。
- Block: 此元素将显示为块级元素,此元素前后会带有换行符。
- inline-block: 行内块元素。这个值导致一个元素产生一个块状盒模型(block box),而本身作为单一的内联盒模型(inline box)流动排列(flow),类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型,而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度,又可以和内联元素(比如文字)排列在一行。这个效果在页面设计的时候,很多地方都可以带来便利,最常见的莫过于设计导航时,既可以像inline元素那样实现居中,又可以设置像block元素那样设置单个菜单大小,还可以通过text-indent来隐藏文字显示背景图片。
- list-item: 此元素会作为列表显示。
- table :此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
CSS框模型(盒子模型) 一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“内联元素”,这是因为它们的内容显示在行中,即“行内框”。
您可以使用 display 属性改 变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让内联元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:
<div>
some text
<p>Some more text.</p>
</div>
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
Css属性:display, position和float的关系,参考:CSS2.1中的定义
- 如果一个元素的display属性被设置为none,那么就不会生成元素对应的box,这种情况下,float和position被忽略
- 否则(display非none),如果一个元素的position属性被设置为absolute或者fixed(都是绝对定位),这种情况下,float被忽略(float计算的值为none),display属性的值根据下表自动计算。box的位置取决于属性top,right,bottom,left以及box的容器
- 否则(display非none,并且position非absolute、fixed),如果float的值不为null(为left或者right),那么box是浮动的并且display的值根据下表来计算
- 否则(display非none,并且position非absolute、fixed,float为none),如果元素是根元素,display的值根据下表来计算。(这种情况下有一个例外:在CSS2.1中定义,当display被指定的值是list-item时,计算结果的display的值为block或者list-item)
- 否则(display非none,并且position非absolute、fixed,float为none,不是根元素),那么就按照被指定的display的属性值来显示。
表格 display属性转换:
- 指定值 inline-table 转成table
- 指定值 inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block 转成block
- 其他任何的指定值都保持不变
发表评论
-
CSS link、@import、media type、media query
2012-08-22 10:42 1930CSS link、@import共同点:都是为了加载CSS文件 ... -
IE兼容模式及客户端兼容模式、服务器端兼容模式设置
2012-08-20 16:24 12847IE兼容模式: 为了帮助 ... -
IE 条件注释(转)
2012-08-20 14:20 935一、条件注释简介 IE中的条件注释(Conditional ... -
Css样式覆盖顺序
2012-08-13 16:34 52201,css样式选择器的优先级为:“元素上的style” &g ... -
css属性 :after :before content css伪元素
2012-08-01 15:47 2110:after:伪元素在元素之后添加内容。 这个伪元素允许创作人 ... -
CSS3 圆角属性border-radius、边框阴影属性box-shadow、文字阴影text-shadow、文本裁剪省略text-overflow
2012-07-31 15:37 10219相关CSS圆角属性: border-radius:CSS3标准 ... -
onblur后下一个获取焦点的控件判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
2012-07-13 15:20 7277需求: input控件在失去 ... -
html中label宽度设置、非替换元素和替换元素
2012-07-05 09:02 12310<label style="float:l ... -
css属性 background
2012-06-21 14:12 919参考:http://www.w3school.com.cn/c ... -
css属性 list-style 纵向菜单、横向菜单
2012-06-20 09:49 6674参考:ul li css 做横向菜 ... -
css属性 text-decoration outline clear overflow text-indent
2012-06-20 09:02 1163参考:http://www.w3school.co ... -
pageX, pageY, screenX, screenY, clientX, clientY
2012-06-18 11:03 1531pageX, pageY, screenX, screenY, ... -
jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position属
2012-06-16 10:17 9336定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提 ... -
使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
2012-04-10 13:20 11555var htmlData1 = $.ajax( ... -
HTTP Chunk分块&java.io.IOException: CRLF&missing CR
2012-03-22 10:29 14302总结: HTTP 1.1时,Respons ... -
Fiddler常用操作&设置
2012-03-21 14:07 24232Fiddler是一个Web调试代理 ... -
UrlEncoder,UrlDecoder, 字符集对Encoder的影响
2012-03-02 16:21 4723字符集对Encoder的影响,其实就是字符在不同字符集下编码不 ... -
HTTP Cookie构成及特殊属性
2012-02-08 15:44 1550Set-Cookie: name=value; [expire ... -
history.back,Firefox 必须发送将会导致重复之前动作的数据(例如搜索或者下订单)。
2011-10-11 10:32 5004Firefox插件Web Developer,禁用了缓存 当 ... -
iframe嵌套访问含Session页面,Session丢失
2011-09-01 16:11 3608在网站www.a.com的页面用iframe嵌入www.b.c ...
相关推荐
### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中,**文档流**是一个核心概念,它指的是HTML文档中元素的自然流动方式。想象一下,网页就像一条河流,其中的元素就像河中的船只,顺流而下,...
inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否浮动显示 float : none | left | right none:设置对象不浮动 left:设置对象浮在...
设置 position 属性也可以使行内元素转换为块级元素,但这只是副作用,它们的主要作用是干扰布局效果。 需要注意的是,块级元素的宽度会继承其父元素,但只有为行内元素设置 display:block; 才会有这样的效果,其他...
- `display: block` 用于将内联元素转换为块级元素,使其独占一行,并可设置宽高和边距。 - `display: inline-block` 是两者的折中,元素保持内联特性,但可以设置宽高,常用于创建紧凑型导航条。 - `display: ...
而当元素使用了position: absolute或fixed时,display的计算值会受到float和position属性的影响,可能会变为block或table等其他值。此外,旧版的Internet Explorer浏览器(如IE6和IE7)在处理display属性时存在限制...
2. **块级元素与内联元素**:块级元素如`div`、`form`、`table`等,它们通常占据整行并可设置`width`和`height`属性。内联元素如`span`、`a`、`img`等,它们在同一行内排列,除非空间不足才会换行。浮动的作用之一...
- **在内联元素中使用边界属性**:`margin`在内联元素中的使用情况。 ### 浏览器及兼容问题 - **浏览器介绍**:常见的浏览器及其特点。 - **要兼容哪些浏览器**:针对目标用户群体选择合适的浏览器进行兼容测试。 ...
`display`属性还有其他值,如`inline-block`,它结合了块级元素和内联元素的特点,允许元素在一行内显示,同时可以设置宽高。`list-item`则是将元素显示为列表项,可以添加项目符号。对于表格元素,`display`属性...
这些元素结合了行内元素和块级元素的特点,既能设置宽高,也可以设置`margin`和`padding`,并且能与其他行内元素并排显示。`display`属性设置为`inline-block`。 接下来,我们讨论CSS的定位技术: 1. **静态定位**...
3. **内联与块级结合**:结合内联元素(如span)和块级元素,可以构建复杂的网页结构。 **CSS与div的布局技术** 1. **浮动布局**:使用`float`属性,可以使元素在容器内水平浮动,常用于创建多列布局。 2. **定位...
1. 将内联元素转换为块级元素,如`display: block;`或`display: inline-block;` 2. 或者为`div`设置固定或基于内容的高度,如`height: auto;`或`min-height: some-value;` **原因四:CSS继承问题** 有时候,子元素...
内联元素无法直接设置`width`和`height`,但可以通过`display`属性转换元素类型。 3. **display属性**:它可以改变元素的显示方式。`display:none;`用于隐藏元素;`display:block;`将元素转换为块级元素;`display:...
在CSS中,Span标签通常被用来对文本进行部分样式化,由于其默认的display属性为inline,这意味着它不会占据横向空间,而是与其他inline元素并排显示。然而,当需要为Span标签设定固定宽度时,就会遇到一些挑战,因为...
1. **display属性**:控制元素的显示方式,如`display:block`使元素成为块级元素,`display:inline`使其成为行内元素,`display:none`则隐藏元素。 2. **float属性**:用于创建浮动布局,`float:left`或`float:right...
- 使用`display`属性时需要注意与`position`、`float`等其他CSS属性的配合使用。 - 在处理响应式设计时,根据屏幕尺寸动态调整元素的`display`值是一种常见的做法。 - 测试不同浏览器下的表现非常重要,因为某些旧版...
10. 块级元素与内联元素:`display:block` 使元素表现为块级元素,如 `#first ul li a`,允许它们占据整个容器宽度。而 `display:inline` 或 `float` 可以使元素变为内联或内联块级,方便在一行内显示多个元素。 ...
可以通过`display:inline`将其转换为内联元素。 #### 2. 浮动与定位 - **浮动**:通过`float:left`或`float:right`可以使元素向左或向右浮动,从而实现多列布局。 - **定位**:包括相对定位`position:relative`、...
理解CSS中内联元素和块元素的区别对于创建响应式和适应性强的布局至关重要。块元素默认占据整个容器宽度,而内联元素则只占据其内容所需的空间。 #### CSS 权重 CSS权重是指当多个规则冲突时,浏览器根据规则的...
与`float`、`position`(absolutely positioned)、`overflow`(除了`visible`)等其他属性创建的BFC不同,`display:flow-root`创建的BFC不会带来额外的副作用,如`overflow:hidden`可能导致子元素无法超出容器的...