css元素类型哪几种

最新推荐文章于 2022-10-09 22:05:23 发布
原创 最新推荐文章于 2022-10-09 22:05:23 发布 · 3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css元素类型

元素的类型

根据css显示分类，XHTML元素被分为三种类型：

块状元素（block element）

说明：没有动过 修饰过 它的宽度就是浏览器的宽度，高度就是子元素的高度

1.块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为
矩形区域，常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,(h1~h6)
,p,form,hr,iframe,colgroup,col,table,tr,td，等；
2.默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素
不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列
3.块状元素都可以定义自己的宽度和高度
4.块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他
块状元素。我们可以把这种容器比喻为一个盒子。

以下这类属于块状元素

div-最常用的块级元素
dl- 和dt-dd 搭配使用的块级元素
form-交互表单
h1-h6 大标题
hr-水平分隔线
ol-排序表单
p-段落
ul-非排序列表
fieldset- 表单字段级
colgroup-col- 表单列分组元素
table-tr-td 表格及行-单元格

内联元素（inline element）（或是行内元素）

1.常见的内联元素如：a,span,i,em,strong,b等等
2.内联元素的表现形式是始终以行内逐个进行显示
3.内联元素没有自己的形状，不能定义它的宽和高，它显示的高度和欢度
只能根据所包含内容的高度和宽度来确定，它的最小内容单元
也会呈现矩形形状；
4.内联元素也会遵循盒模型基本规则，如可以定义
padding，border，magrin，background等属性，但个别属性不能正确显示；

以下这类属于内连元素也叫行内元素

a-锚点
br-换行
em-强调
b-粗体（不推荐）
i-斜体
font-字体设定（不推荐）
img-图片
input-输入框
label-表格标签
span-常用内联容器，定义文本内区块
strong-粗体强调
sub- 上标
sup-下标
textarea-多行文本输入框
u-下划线

可变元素：
需要根据上下文关系确定该元素是块元素或者内连元素

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

最后讲一个属性：display属性
display属性：用于定义建立布局时元素生成的显示框类型

display-block
说明：
类似在元素后面添加换行符，也就是说其他元素不能再后面
并列显示

特征：
不设置宽度时，宽度撑满一行，独占一行
支持宽高
当元素设置了float属性后，就相当于给该元素加了display：block属性

给行内元素添加display-block属性后 能产生宽度和高度，成块状元素

display-inline
说明：
再元素后面删除换行符，多个元素可以在一行内并列显示

特征：
内容撑开宽度
非独占一行
不支持宽高
代码换行被解析成空格

能使块状元素添加display-inline属性后，变成行内元素

display-inline-block
说明：
元素的内容以块状显示，行内的其他元素显示在同一行

特征：
不设置宽度时，内容撑开宽度
非独占一行
支持宽高
代码换行被解析成空格

图片和表单
img input 是行内块元素 又能在一行内显示，又能设置宽和高

none 此元素不会被显示
特征：隐藏元素并脱离文档流

list-item 将元素转换成列表。li的默认类型
特征： 不设置宽度时，宽度撑满一行
独占一行 支持宽高

大部分块元素display属性值默认为block，其中列表的默认值
为list-item。

大部分内联元素的display属性值默认为inline，其中img.input
默认为inline-block

CSS教程:闭合CSS浮动元素的几种方法
09-27
另外，根据CSS规范，浮动元素（无论是`float:left`还是`float:right`）、绝对定位的元素、`inline-block`元素（在Gecko引擎中不完全支持）、`table-cell`类型的元素以及`overflow`非`visible`的元素都会创建一个...
详解CSS 去掉inline-block元素间隙的几种方法
09-22
inline-block是一种结合了内联元素与块级元素特性的CSS显示方式。它允许元素在一行内并排显示，同时还能设置宽度、高度和内外边距等块级元素的属性。例如，我们经常利用此特性来创建响应式布局或移动端页面。 二、...
css元素类型
郑怪兽
07-14 225
css元素类型分为： 块状元素，内联元素，内联块状元素 块状元素 1）在页面中以矩形区域显示 2）自上而下排列，独占一行 3）可以直接添加宽高，可做为其他元素或者内容的容器 常用的块状元素有：div、p、h1…h6、ol、ul、dl、table、address、blockquote 、form 、fieldset(表单字段集)、colgroup-col(表单列分组元素)、table-tr-td 内联元素 1）在页面中最小单位也是矩形 2）在一行内排列，不独占 3）不可以直接添加宽和高，大小是由内容撑开的。
CSS 样式
chenhj153的博客
09-18 296
引入CSS样式表 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义，其基本语法格式如下： <head> <style type="text/css"> 选择器 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head&g...
CSS中的元素类型
Donough★
07-12 334
元素类型 根据css显示分类，XHTML元素被分为 三种类型: 块状元素，内联元素，可变元素 && 三种类型： 块状元素，内联元素，内联块元素(css2.1增加) 块状元素的特点 A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域， B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。 C:块状元素都可以定义自己的宽度和高度。 D:块状元素一般都作为其他元素的容器，它可以容纳其它
6、CSS元素类型
hl8187的博客
10-09 232
6、元素类型
元素类型
seeyouhao的博客
03-26 242
css的显示对标签分类： 块状元素 内联元素（行内元素） 第三类（争议点）：a：可变元素 b：行内块元素 元素类型分类：块状元素，内联元素，可变元素。 注：把行内块元素归在内联元素这一类里边。 默认情况下元素类型每个类型特点： 块状元素特点： a：在页面中以矩形区域显示。 b:自上而下排列，独占一行。 c：可以直接添加宽高。 d:一般情况下，作为其他元素或内容的容器 内联元素特点： a:在页面中最...
css外部文件的引用方式有哪几种
09-25
下面我们将详细探讨两种引用CSS外部文件的方法。 1. **通过`<link>`标签引用** 在HTML文档的`<head>`部分，可以使用`<link>`标签来引用外部CSS文件。`<link>`标签的主要属性包括`rel`（关系）、`href`（资源链接...
WEB前端CSS居中的几种方法共4页.pdf.zip
10-30
以下将详细讲解几种常用且有效的CSS居中方法。 1. **水平居中** - **Text-align属性**：适用于内联元素或块级元素容器。设置`text-align: center;`可以使容器内的文本和内联元素水平居中。 ```css .container...
最新简单 几种常见的CSS阴影效果代码
07-16
`几种常见的CSS阴影效果代码.zip`文件可能包含了一系列预设的阴影样式，供开发者快速应用到自己的项目中。通过查看`说明.txt`文件，可以了解如何使用这些代码片段。 总的来说，熟练掌握CSS阴影效果对于提升网页设计...
css样式以及种类
Technology_liu的博客
07-17 1280
Css用来干什么，一句话，就是装修，将页面结构更加完善，更加合理，html就是搭建页面结构，但是他没有没胡说界面的能力，需要用到什么，就是css将布局更加合理，那么css有三种样式： 1.      行间样式：主要写在标签内部， 2.      内联样式，主要写在head之间，用表示 3.      外联样式：主要写在后缀名是.css文件中，在html文件中需要用到标签里面的href去找到文
前端css基础知识点之element——元素类型
Sun_Raiser的博客
07-13 728
前端css基础知识点之element——元素类型 元素根据表现的特性分为块级元素（block ）、行内元素（inline）、行内块元素（inline-block） 元素类型 特点 块级元素 1 独占一行 2 设置宽高有效(padding、margin、line-height) 3 不设置宽度 默认是父亲的100% 行内元素 1 可以与其他行内元素并排 2 设置宽高无效（不支持垂直方向的margin和padding） 3 元素靠元素撑开 行内块元素 1 可以与其他行内元素或行内块元素并
css最基本的元素是什么,前端基础之CSS（1）
weixin_31785177的博客
08-03 283
1.css3的新特性有哪些(1)CSS3选择器(基本、属性、伪类具体见下)(2)CSS3边框与圆角圆角border-radius属性：border-top-left-radius 左上角 border-top-right-radius右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角(3)CSS3背景与渐变可以设置多个背...
css元素分类
赵玉玲的博客
12-08 710
css中有两种元素分类方式：块级元素与行内元素、替换元素与不可替换元素 特性1 块级元素： 独占一行 行内元素： 并排显示 特性2 块级元素： width\height\margin\padding均有效 行内可替换元素： width\height\margin\padding均有效 行内不可替换元素： width\height无效，可以使用line-heihgt设置行高； margin左右有效，...
css基础-元素类型
qq_38679881的博客
08-15 435
 元素类型 XHTML元素分类；根据css显示分类，XHTML元素被分为三种类型:块状元素，内联元素，内联元素； 1.块状元素（block element） 1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块 div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,...
CSS元素分类
weixin_33831673的博客
05-07 357
CSS元素分类 CSS元素大的分为两类：块级元素和行内级元素但行内元素可以进一步分为：行内替换(置换)元素、行内非替换(非置换)元素。 一、块级元素与块元素 块级元素：元素会新起一行，并独占一行，如div、p、form等。display 属性值为：block, list-item, table, flex, grid 时，都可以将一个元素...
css选择器按功能分,css规则按选择器类型分为那四种
weixin_28707739的博客
08-04 451
满意答案keshaping推荐于 2017.05.19采纳率：51%等级：8已帮助：665人1、简易属性选择器只顾其名不顾其值，这是简易属性选择器的特点。h1[class] {color: silver;}将会作用于任何带class的h1元素，不管class的值是什么。所以Hello、Serenity、Fooling的h1都会受到这条规则的影响。2、精确属性值选择器3、部分属性值选择器如其...
块状元素
qq_39115357的博客
03-31 1393
1.块状元素： 特点：        1.网页中以块的形式显示         2.独占一行，也就是说相邻的块状元素不会出现并列的现象，默认情况都是自上而下的排列。        3.块状元素可以定义自己的宽高...
xhtml三种元素类型
weixin_34114823的博客
03-04 328
xhtml三种元素类型：块级元素/内联元素/可变元素 块级元素：独占一行、可自定义自己的宽度和高度、作为其他元素的容器，可容纳其他内联元素和块级元素，喻做一个盒子。内联元素：始终以行内逐个显示、不能设置宽高，宽高由内容支撑、可定义padding/margin/border/background。可变元素：根据上下文确定是块级元素还是内联元素。注：不同的元素类型之间可以通过display属性来实现...
css选择器有哪几种
最新发布
04-23
### CSS 选择器的类型与用法 CSS 选择器是用于定位 HTML 文档中的特定元素并将样式应用于这些元素的核心工具。以下是 CSS 选择器的主要分类及其具体用法： #### 1. **基本选择器** 基本选择器是最常用的几种选择器，它们可以直接匹配单个或一组 HTML 元素。 - **元素选择器 (Type Selector)** 使用 HTML 标签名称作为选择器来选中所有该类型的元素。这种方式简单直接，但缺乏灵活性[^1]。 ```css div { color: blue; } ``` - **类选择器 (Class Selector)** 类选择器通过 `.` 符号加上指定的 class 名称来选取具有相同 class 的所有元素。它允许重复使用同一组样式[^2]。 ```css .highlight { background-color: yellow; } ``` - **ID 选择器 (ID Selector)** ID 选择器通过 `#` 加上唯一的 id 来选取单一元素。由于其唯一性，在实际开发中较少单独使用，更多配合 JavaScript 动态操作 DOM[^2]。 ```css #header { font-size: 20px; } ``` - **通配符选择器 (Universal Selector)** 通配符选择器由 `*` 表示，能够匹配页面上的每一个元素。然而，它的性能较差且容易引起不必要的全局影响，因此通常不建议频繁使用[^2]。 ```css * { margin: 0; padding: 0; } ``` --- #### 2. **组合选择器** 组合选择器通过对多个选择器进行逻辑运算或者层次关系定义，增强了样式的精确度和可维护性。 - **并集选择器 (Grouping Selector)** 并集选择器允许多个独立的选择器共享同一样式声明，减少冗余代码[^3]。 ```css h1, p, span { text-align: center; } ``` - **后代选择器 (Descendant Selector)** 后代选择器用来选择某个父级元素内部的所有符合条件的子元素。这种选择方式体现了文档结构的关系[^3]。 ```css ul li { list-style-type: square; } ``` - **子选择器 (Child Selector)** 子选择器仅限于直接父子层级之间的匹配，相比后代选择器更加严格。 ```css nav > a { display: block; } ``` - **相邻兄弟选择器 (Adjacent Sibling Selector)** 当两个元素处于同一个父节点下，并且第二个紧接在第一个之后时生效。 ```css h2 + p { margin-top: -1em; } ``` --- #### 3. **伪类选择器** 伪类选择器主要用于描述某些特殊状态下的元素行为，比如链接的状态变化、表单项的有效性验证等。 - 链接状态控制：`:link`, `:visited`, `:hover`, `:active` 等。 ```css a:hover { text-decoration: underline; } ``` - 表单交互反馈：`:focus`, `:valid`, `:invalid` 等。 ```css input:focus { border-color: green; } ``` --- #### 4. **伪元素选择器** 伪元素选择器则针对一些虚拟的内容片段提供样式支持，常用于装饰效果实现。 - 添加前缀/后缀文字：`::before`, `::after`。 ```css ::before { content: "Tip:"; color: gray; } ``` - 调整首字母样式：`::first-letter`；调整首行布局：`::first-line`。 --- #### 5. **属性选择器** 属性选择器依据 HTML 属性的存在与否以及具体的值来进行筛选[^3]。 - 完全匹配某属性值 `[attr="value"]`。 ```css img[src="logo.png"] { width: 100px; } ``` - 开头匹配 `[attr^="prefix"]` 或结尾匹配 `[attr$="suffix"]`。 ```css a[href$=".pdf"] { color: red; } ``` --- ### 总结 以上列举了几大类别下的主要 CSS 选择器形式，每一种都有各自适用场景及局限之处。合理选用不同类型的选择器不仅有助于提高效率还能优化最终渲染表现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值