`
fantasy2005
  • 浏览: 1166 次
社区版块
存档分类
最新评论

inline elements, block elements

    博客分类:
  • html
 
阅读更多
1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table
   行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 
                  
内联元素(inline element)
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
内联元素(行内元素)内联元素(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 - 定义变量

块元素(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 - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本


2  区别:
   1)块级元素会独占一行,其宽度自动填满其父元素宽度
        行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容         而变化
   2) 块级元素可以设置 width, height属性,行内元素设置width,  height无效
         【注意:块级元素即使设置了宽度,仍然是独占一行的】
   3) 块级元素可以设置margin 和 padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
分享到:
评论

相关推荐

    CSS inline-block属性概述及其使用示例

    display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。块级元素(block elements)来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列...

    Justify:一款实现inline-block元素两端对齐布局的javascript插件(a javascript plug-in implementation inline-block elements full-justified layout)

    元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的,使用inline-block元素,配合text-align:justify,再注意处理好一些细节问题,便可以在现代浏览器上实现两端对齐,但是最后一行的处理却是个...

    block-inline-elements

    欢迎使用GitHub桌面! 这是您的自述文件。 自述文件是您可以交流项目内容以及如何使用它的地方。 在第6行上写下您的名字,将其保存,然后回到GitHub Desktop。

    Basic Visual Formatting in CSS

    Learn the details of element box types, including block, inline, inline-block, list-item, and run-in boxes ■ Change the type of box an element generates, from inline to ...replaced inline elements

    Exercise-HTML-Block-and-Inline-Elements

    完整的测试代码练习可以在这里找到:

    Web前端开发基础:CSS制作电子相册.ppt

    div与span的区别在于,div是一个块级(block-level)元素,它包围的元素会自动换行, 而span仅仅是个行内元素(inline elements),不会换行。 span没有结构上的意义,当其 他元素都 不合适的时候可以换上他,同时div...

    Flex.less:一套用于CSS3 Flex布局的Less mixins

    灵活少 一个的混入。 可用的混合 混合名称及其值对应于正式草案。 display justify-content align-items align-self ... * as inline-block elements. */ @-moz-document url-prefix() { # selector

    CodingStartup:编码启动学习

    display: inline / inline-block 将父元素(容器)设定 text-align: center; 就可左右置中 display: block 将元素本身的 margin-left 与 margin-right 设定为 auto,就可以左右置中。 三个上下左右置中的方法 <...

    tiny-bind.js:javascript的轻量级双向数据绑定

    showInline † :绑定“ display” css属性(使用“ inline-block”) html † :绑定内部HTML †这些不是双向绑定,它们只会反映属性的更改 简单的例子 创建一些变量并将其绑定到input和span元素。 <!-- ...

    dpi-aware-image:DPI感知图像CustomElement

    dpi感知图像一个img元素,它通过考虑源... /* Optional */ dpi-aware-image { display : inline-block; --max-width : 100 % ; --max-height : 300 px ; }</ style >< dpi src =' /demo/dist/icon.png '> 演示版

    标签 li 是不是块级元素分析

    The following elements may also be considered block-level elements since they may contain block-level elements: DD – Definition description DT – Definition term FRAMESET – Frameset LI – List ...

    Heilx AAC Decoder optimized for ARM

    - mono, stereo, and multichannel modes - ADTS, ADIF, and raw data block file formats <br>Not currently supported: - main or SSR profile, LTP - coupling channel elements (CCE) - 960/...

    2.-Introduction-to-HTML:每个主题的基本HTML编码步骤

    2.-Introduction-to-HTML:每个主题的基本HTML编码步骤

    出现问题a is defined高手帮忙

    DragZoomUtil.style([G.outlineDiv], {left: G.startX + addX + 'px', top: G.startY + addY + 'px', display: 'block', width: '1px', height: '1px'}); G.outlineDiv.style.width = rect.width + "px"; G....

    UE(官方下载)

    Incremental search is an inline, progressive search that allows you to find matched text as you type, much like Firefox's search feature Regular expressions Regular Expressions are essentially ...

Global site tag (gtag.js) - Google Analytics