`
kyleo
  • 浏览: 44239 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

CSS教程:元素详解(转)

阅读更多
CSS教程:元素详解

块元素(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”。

  需要说明的是:inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

  块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

  可变元素是基于以上两者随环境而变化的,它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

  html标签的block、inline分类明细:

  块元素(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 - 客户端脚本

分享到:
评论

相关推荐

    CSS详解教程(基础)

    **CSS详解教程(基础)** CSS,全称为Cascading Style Sheets,中文译为层叠样式表,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是将内容与表现分离,使得网页...

    网页样式设计:CSS使用详解

    总的来说,《网页样式设计:CSS使用详解》是一本全面覆盖CSS基础到高级特性的教程,适合网页设计师和开发者学习,通过深入学习,你可以掌握创建美观、响应式和易维护网页的技能,提升你的网页设计水平。

    《网页开发手记:HTML+CSS+JavaScript实战详解》

    《网页开发手记:HTML+CSS+JavaScript实战详解》是一本专门为初学者设计的Web前端技术教程,旨在帮助读者深入理解和掌握网页开发的核心技术。这本书的内容涵盖了HTML、CSS和JavaScript这三个网页开发的基础和核心...

    Apress.Beginning CSS Web Development From Novice to Professional

    CSS属性详解:** - **盒模型:**包括margin、border、padding和content等属性,用于控制元素的空间布局。 - **文本样式:**如font-family、color等,用于控制文字的外观。 - **背景与边框:**包括background-color...

    CSS教程(高清PDF文档)

    ### CSS教程核心知识点详解 #### 一、CSS简介 - **定义**:CSS,全称为Cascading Style Sheets,即层叠样式表,是一种用来增强HTML文档表现力的语言。 - **作用**:CSS用于控制HTML文档中的布局效果,如字体、颜色...

    非常经典的CSS教程

    【CSS教程详解】 在网页设计领域,CSS(层叠样式表)起着至关重要的作用,它赋予HTML元素样式,让网页变得美观且易于布局。这篇非常经典的CSS教程以实例教学的方式,带你掌握当今最前沿的CSS建站技巧。 首先,教程...

    CSS基础教程PDF

    ### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**,全称为 **Cascading Style Sheets**(级联样式表),是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观,如字体、颜色、间距、大小...

    CSS3教程详解(完整教学详解) PPT幻灯片.rar

    **CSS3教程详解** 在网页设计领域,CSS3(层叠样式表第三版)是用于控制网页元素样式的重要技术,它的出现极大地提升了网页的视觉效果和用户体验。本教程旨在为Web前端开发人员提供一个全面的CSS3学习指南,无论你...

    CSS伪类:before在元素之前 :after 在元素之后实例讲解

    本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素...

    CSS教程文档

    ### CSS教程知识点详解 #### CSS简介 - **CSS**(Cascading Style Sheets)是一种用于定义HTML文档中元素外观及布局的语言。它使得内容与表现形式得以分离,从而极大提升了网页设计的灵活性与效率。 #### CSS的...

    CSS教程:网页布局定位及z-index解释

    **CSS定位与Z-Index详解** 在网页设计中,CSS(Cascading Style Sheets)扮演着重要的角色,尤其是在实现复杂的网页布局和元素定位时。本文将深入探讨CSS中的定位属性和Z-Index的概念,帮助你更好地理解和应用这些...

    css教程css理解

    ### CSS教程核心知识点详解 #### 一、CSS简介与作用 **CSS**(Cascading Style Sheets)即**层叠样式表**, 是一种用于定义HTML文档外观的语言。它可以帮助开发者更加高效地控制网页的设计和布局。CSS的核心优势在于...

    css教程2016

    ### CSS3教程知识点详解 #### 一、新增选择器 CSS3引入了多种新的选择器,使得网页的设计更加灵活和强大。 ##### 1. 属性选择器 属性选择器允许根据元素的属性来选择元素。 - **E[attr]**:选择具有特定属性的...

    CSS详解-DIV布局!!

    在"CSS详解—DIV网页样式与布局"的压缩包中,你将找到更多关于CSS和DIV布局的详细示例和教程,帮助你进一步掌握这些核心概念和技术。通过实践和学习,你将能够熟练地运用CSS和DIV构建出美观、功能完善的网页。

    css经典教程 css电子书

    ### CSS经典教程知识点详解 #### 一、CSS简介与基础知识 - **CSS定义**:CSS全称为层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档外观及格式的语言。它允许用户控制页面布局、字体、颜色等...

    DIV+CSS入门教程

    标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS(层叠样式表)进行网页布局的基础教程,适合初学者。通常,这种布局方式被称为“Div+CSS布局”,但实际上是不准确的术语。 在描述中提到,"DIV+CSS...

    CSS高级学习教程

    #### 三、CSS核心概念详解 - **选择器**:用于指定应用样式的HTML元素。选择器可以是元素名称、类名、ID或其他条件。 - **属性与值**:属性表示要更改的样式方面,值则是具体的样式设置。例如,`color: red;` 表示...

    DIV+CSS_入门教程

    ### DIV+CSS入门教程知识点详解 #### 一、页面布局与规划 在网页设计与开发领域,**DIV+CSS**是一种流行的布局技术,它利用HTML中的`<div>`标签结合CSS(层叠样式表)来实现网页的布局与美化。在深入学习之前,...

Global site tag (gtag.js) - Google Analytics