`

CSS元素分类

    博客分类:
  • CSS
css 
阅读更多

在CSS中,html中的标签元素大体被分为三种不同的类型块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有
<img>、<input>

块级元素特点
设置display:block就是将元素显示为块级元素
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素特点
当然块状元素也可以通过代码display:inline将元素设置为内联元素
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素特点
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。

分享到:
评论

相关推荐

    纯css3图片分类过滤效果

    本教程主要探讨的是如何利用纯CSS3实现一个图片分类过滤效果,这个功能在现代网页设计中非常常见,尤其适用于图片展示或者产品分类的场景。通过这个插件,用户可以根据类别筛选并显示相关图片,提供更加直观和交互式...

    jQuery和CSS3超酷元素分类过滤和排序插件

    **jQuery和CSS3元素分类过滤与排序插件详解** 在网页开发中,高效地管理和展示大量数据是一项挑战。为了简化这一过程,许多开发者选择使用插件来实现元素的分类、过滤和排序功能。这里我们讨论的是一款基于jQuery和...

    Html+Css简单仿京东商品分类导航

    在这个"Html+Css简单仿京东商品分类导航"项目中,我们将深入探讨如何利用这两门技术构建一个类似京东商城的商品分类导航界面。 首先,HTML是构建网页内容的基础,它通过一系列标签来定义页面结构。在模仿京东商品...

    div+css常用标签.docx

    3. **CSS元素分类**:CSS中的元素主要分为三类:`block`(块级元素),如`p`、`h1`-`h6`、`ul`、`div`等,它们占据整行并可以设置宽度和高度;`inline`(内联元素),如`a`、`span`、`em`等,它们只占据内容本身的...

    div+css常用标签.pdf

    三、CSS元素分类 1. `display`属性:设定元素所属类别,如`none`(隐藏),`block`(块级元素,如`p`, `h1-h6`, `div`, `body`),`inline`(内联元素,如`a`, `em`, `span`),`list-item`(列表元素,如`li`)。 四、...

    DIVCSS商品分类下拉导航菜单.zip

    "DIVCSS商品分类下拉导航菜单"就是一个典型的网页交互元素,主要用于电商网站的商品分类展示。这个压缩包文件“DIVCSS商品分类下拉导航菜单.zip”包含了一个绿色风格的茶叶分类下拉菜单实例,名为“jdNavcss”。 ...

    div+css常用标签 (2).docx

    【CSS元素分类】 1. `display` 属性用于定义元素的显示类型: - `none`:元素不显示。 - `block`:块级元素,占据整行,如`p`、`div`。 - `inline`:内联元素,只占据自身宽度,如`a`、`span`。 - `list-item`...

    HTML5+CSS3移动商城-分类

    1. 层叠样式:CSS3的层叠上下文增强了样式的控制,允许更精细的元素定位和优先级设定,这对于复杂布局的分类页面至关重要。 2. 选择器增强:CSS3新增了伪类和伪元素选择器,如`:nth-child()`、`:not()`、`:checked`...

    jQuery+css国外分类目录网页导航条代码

    "jQuery+css国外分类目录网页导航条代码"是一个专为构建高效、美观且交互性强的导航条而设计的资源。这个压缩包可能包含了实现这一功能的HTML、CSS和JavaScript文件,特别是jQuery库的运用,使得动态效果更为流畅。 ...

    CSS基础视频教程

    内容包括css基础、css选择器上、css属性、背景、颜色、边框、字体文本文本装饰、列表、css元素分类等 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    CSS+div分类

    在本主题“CSS+div分类”中,我们将深入探讨如何利用CSS和div来实现灵活多样的分类布局,特别是左右两侧的分类展示。 首先,让我们了解`div`元素。`div`是HTML中的一个块级元素,它允许我们将页面内容进行分组,并...

    css样式分类

    在探讨CSS样式分类之前,我们首先需要理解CSS(层叠样式表)的基本概念。CSS是一种用于控制网页布局和样式的语言,它独立于HTML,使得网页的结构与表现分离,提高了网页的可维护性和可访问性。根据描述,本文将深入...

    纯css打造网上商城左侧垂直商品分类菜单

    在创建这个菜单时,CSS的关键在于利用选择器来定义元素的样式。例如,我们可以使用`&lt;ul&gt;`和`&lt;li&gt;`标签来构建菜单的基础结构,然后通过`.menu`, `.menu-item`, `.menu-link`等类名来对它们进行样式定制。CSS的选择器...

    淘宝SDK模块代码 左侧分类导航CSS样式

    在这个特定的场景中,我们关注的是“左侧分类导航”的CSS样式部分。 首先,让我们理解什么是SDK。SDK是一组工具和资源,它允许开发者在特定平台上创建、测试和调试应用程序。淘宝SDK可能包括用于商品搜索、订单管理...

    web前端面试

    CSS元素分类** - **块级元素**:默认独占一行,如`div`、`h1`~`h6`等。 - **内联元素**:与其他元素在同一行显示,如`a`、`span`等。 **5. CSS样式规则** - **盒模型**:包括内容(content)、内边距(padding)、...

    DIV+CSS教案

    课程旨在让学生熟悉HTML语法结构,掌握CSS的语法和代码解读,理解CSS选择器分类,并通过实际操作训练,提升学生们使用CSS控制网页元素的能力。这门课分为多个部分,包括CSS的印象、HTML与CSS的关系、CSS的选择器分类...

    CSS样式Table[2] - CSS3Tables

    在网页设计领域,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的重要技术。本篇主要关注CSS3中的表格样式,即“CSS3 Tables”。CSS3 Tables扩展了早期CSS...

Global site tag (gtag.js) - Google Analytics