a 的display:block 的作用

display:block即是块级元素

display:inline即是内联元素

块状元素默认是占据一行的位置,下一个元素将被迫挤到下一行显示。内联元素则不是,它会使得下一个元素自动贴到自己的有边显示。

内联元素有:

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var

basefont, font, s, u

块状元素有:

address, blockquote, div, dl, fieldset, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul center, dir, isindex, menu

出于某些设计目的的考虑,可以将某些内联元素作为块状元素显示。例如:将a元素display:block后,将从内联元素变成块状元素,从而可以对这个元素设置margin, padding, border等属性了。

关于内联元素和块级元素,还有一个重要的属性——float浮动属性,详情可以参考:

http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

时间: 2024-10-10 09:29:24

a 的display:block 的作用的相关文章

CSS中display:block属性的作用

display:block可以理解为块,举个简单的例子!比如你做一个超链接,<li><a href="#">超链接</a></li>当你鼠标移过到文字的时候,超链接有效果!而当我把样式这样设置:li a{width:100px;height:100px; display:block; color:red; text-decoration:none;}鼠标移到文字周围100*100的地方,就有超链接效果了,就是把100*100做为一块来的超

抛弃float直接运用display:block项目开发

默许:核算面积.以习惯页面:最小规划和最大规划的物业核算规划 minimum-scale – The minimum scale of viewport. 最小规划 -视口的最低规划.[Default: 0.25, Range: >0 - 10] [默许:0.25规划:0 - 10] maximum-scale – The maximum scale of viewport. 最大规划的-视口的最大规划.[Default: 1.6, Range: >0 - 10] [默许值:1.6规划:0 -

在table中&lt;tr&gt;的display:block显示布局错乱

当用谷歌浏览器时,在将表格table中的<tr>的display属性从none改为block时,或出现所有的td都不起作用,内容都集中在第一列里,然后在网上百度了一下,一下事原因分析和解决方法 1.当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析.2.同一行反复的在"display:none;"与"display:block;&quo

CSS 问题 中 li{display:inline;}的作用

<html><head><style type="text/css"> ul{list-style-type:none;width:100%;padding:0;margin:0;float:left;} a{text-decoration:none;float:left; width:120px;font-size:15px;border-right:1px white solid;color:white;padding:3px 8px;} a:h

display值的作用分别是什么?relative和absolute分别是相对谁定位的?

display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-item:该元素会作为列表显示 run-in:该元素会根据上下文作为块级元素或内联元素显示 table:该元素会作为块级表格来显示 inline-table:该元素会作为内敛表格来显示 table-row:该元素会作为一个表格行来显示 table-row-group.table-header-group

display:inline 跟 display:block 跟 display:inline-block区别

我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a> <a

Display:Block 详细用法

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素. 块级元素: 动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样子: 行内元素: 自己的

display:block | inline | inline-block的区别

display:block; 1.默认宽度为父元素宽度. 2.可设置宽高. 3.换行显示. display:inline: 1.默认宽度为内容宽度. 2.不可设置宽高. 3.同行显示. display:inline-block: 1.默认宽度为内容宽度. 2.可设置宽高. 3.同行显示. 4.整块换行. 例:input,buttom,select等表单元素.

DIV CSS display(block,inline,none)的属性教程

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