任何属性加了如何居中一个浮动元素都变成块级元素了吗?还是有块级元素的属性了

div标签不是属于块级元素吗(一个元素占一行),为什么用了float就能把他们两个并列?
如题 请大神解答一下 谢谢
非常感谢!
你好 请问一下怎么保存代码为html格式,然后在浏览器打开?谢谢
写下你的评论...
全选代码怎么打开
保存后的文件右键选择浏览器打开.
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2HTML块级元素与行级元素
我的图书馆
HTML块级元素与行级元素
转自:http://gkecenter./blog/static//
一.两种类型
HTML中的大部分元素都可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素会从新的一行出现,行 级元素则不会。块级元素的前后都会有插入的断行,所以如果不用CSS则没法让两个块级元素并列在一起。
二.块级元素
块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如&form&只能包含块级元素。其他的块级元素则可以包含 行级元素如&P&.也有一些则既可以包含块级,也可以包含行级元素。如,&div&,&li&
三.行级元素
行级元素一般是包含语义意义的元素。行级元素一般只能包含文字或其他行级元素。行级元素不能被应用下列属性:
max-height
min-height
如果你想改变这些属性,应该应用给它的属于块级元素的父元素。
四.Spring Brother
有些元素既可以是块级元素,也能成为行级元素。例如&ins& 和&del&。当这两个元素直接出现在&body&中时,它们就是块级元素。如果作为&P&的子元素,他们就是行级 元素,此时不能包含其他的块级元素。
五.CSS中的类型
CSS中的盒子也有块级和行级之分,也包括其他类型,如,列表和表格等。HTML中的块级元素会产生块级盒子,行级元素会产生行级盒子。在CSS 中,可以用display控制盒子的类型。如,把一个行级元素转换成块级元素。注意,这种转换并不能改变元素本质。即使你把它转换成了 块级元素,你也不能让它包含其他的块级元素,你转换的只是CSS的盒子的外观。
通常没有必要改变元素的盒子类型,下列情况一般有改变盒子的需求:
水平的列表菜单
不断行的标题
六.盒子类型的变化
对于应用了浮动或绝对定位的元素,如此类样式:float:left,position:absolute,position:fixed。这类元 素的盒子类型显然改变了。它们都变成了块级元素,因此display属性一般都被忽略。
七.盒子的消失
如果对元素应用display:none,它(包括它的子元素)将会被隐藏起来。对它应用的float,position属性也不再有意义。因为它将不会产生任何的盒子。
一.行内元素和块级元素有哪些?
information on author
&blockquote&
long quotation
push button
table caption
definition description
deleted text
generic language/style container
definition list
definition term
&fieldset&
form control group
interactive form
horizontal rule
inline subwindow
inserted text
fieldset legend
client-side image map
&noframes&
alternate content container for non frame-based rendering
&noscript&
alternate content container for non script-based rendering
generic embedded object
ordered list
preformatted text
table body
table data cell
table footer
table header cell
table header
unordered list
abbreviated form
bold text style
I18N BiDi over-ride
large text style
forced line break
push button
computer code fragment
deleted text
instance definition
italic text style
inline subwindow
Embedded image
form control
inserted text
text to be entered by the user
form field label text
client-side image map
generic embedded object
short inline quotation
sample program output, scripts, etc.
option selector
small text style
generic language/style container
strong emphasis
superscript
&textarea&
multi-line text field
teletype or monospaced text style
instance of a variable or program argument
大家可以发现,上面有些元素有重复,为什么呢,是因为HTML中存在可变元素。可变元素为根据上下文语境决定该元素为块元素或者内联元素。  ◎ applet - java applet  ◎ button - 按钮  ◎ del - 删除文本  ◎ iframe - inline frame  ◎ ins - 插入的文本  ◎ map - 图片区块(map)  ◎ object - object对象(当浏览器不支持时,则显示为块级)  ◎ script - 客户端脚本&但是就我个人而言,我更愿意把它们当做行内元素,因为一般情况下,不会解释为块级元素
二.行内元素与块级元素有什么不同?
块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
通过样式控制,它们可以相互转换。
1.尺寸-块级元素和行内元素之间的一个重要的不同点
设置宽度width 无效。设置高度height 无效,可以通过line-height来设置。设置margin 只有左右margin有效,上下无效。设置padding 只有左右padding有效,上下则无效。
注:这里说的无效, 是指,它对其它元素的排列没有影响。也就是说,对于设置的margin,padding行内元素文档流里的上下元素来说,他们的间距不会因为上下margin或者上下padding而产生间距。但是就他本身而言,对于上下margin与padding是有效的。
上面写的有点绕了,我也是尽量表达。请参照下图,如果还是不清楚,请动手自己写一下,就能明白了。
2.text-align属性是两者表现的又以不同之处
这个特性描述了如何使一个块元素的行内内容对齐。注意一点,w3c标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。解释一下,行内内容是说由行内元素组成的内容,这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?***是否定的。啊? 又是IE!!IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
发表评论:
TA的最新馆藏进一步理解CSS编程中的块级元素和行内元素
作者:清枫草塘
字体:[ ] 来源:freshlover的专栏 时间:09-26 11:26:26
这篇文章主要介绍了CSS编程中的块级元素和行内元素,是CSS入门学习中的基础知识,需要的朋友可以参考下
Block element 块级元素顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的&div&、&p&、&ul&默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:将其更改成块级元素。此外还有个特殊的,float也具有此功能。
Inline element 内联元素通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的&a&、&span&、&em&都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。当然块级元素也能变成内联元素,那就是通过css的display:和float来实现。
内联元素是什么意思呢?什么是块级别元素。
《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是&行布局&形式,这里的&行布局&的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。
p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;strong、span等元素称为行内元素,它们的内容显示在行中,即&行内框&。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间)
A:行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方
B:说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。
C:一般的块级元素诸如段落&p&、标题&h1&&h2&...、列表,&ul&&ol&&li& 、表格&table&、表单&form&、DIV&div&和BODY&body&等元素。而内联元素则如:表单元素&input&、超级链接&a&、图像&img&、&span& ...
D:块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。
E:&span&在CSS定义中属于一个行内元素,而&div&是块级元素。
对于学过CSS的人来说一听就能明白。可对于新手来说不易理解,我主要对新手说通熟点吧!
用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而&div&相当于一个大容器,大容器当然可以放一个小容器了。&span&就是小容器,这样一说你也许会在脑海中有一个初步的印象了吧,如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么办?很简单,我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。
我在举个简单的一个实际例子吧,比如:
我想用CSS定义字母c的样式,因此我们就可以用到&span&了。
&div&ab&span&c&/span&defg&/div&&&
块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&。&form&这个块元素比较特殊,它只能用来容纳其他块元素。
如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 &a&。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
ps:关于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易,也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容* noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表
内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器,定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量
可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。* applet - java applet* button - 按钮* del - 删除文本* iframe - inline frame* ins - 插入的文本* map - 图片区块(map)* object - object对象* script - 客户端脚本
行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。
块级内容跟则是由块级元素构成,DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。
块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
1、对行内元素,需要注意如下:
设置宽度width&& 无效。设置高度height& 无效,可以通过line-height来设置。设置margin 只有左右margin有效,上下无效。设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。2、IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
解决方法:为所有需要相对父容器居中对齐的块级元素设置&margin:0 auto&。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 &text-align:&。若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置&text-align:left&:
3、块级元素、行内元素分别汇总如下:
大家感兴趣的内容
12345678910
最近更新的内容

参考资料

 

随机推荐