码迷,mamicode.com
首页 > 其他好文 > 详细

元素类型

时间:2019-01-21 11:23:21      阅读:296      评论:0      收藏:0      [点我收藏+]

标签:strong   盒子模型   它的   也会   行高   ica   spl   显示   网页   

元素类型分类
根据css显示分类,XHTML元素被分为
三种类型:块状元素,内联元素,行内块元素、可变元素
 
1.块状元素(block element)
A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域
B)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。
C)块状元素都可以定义自己的宽度和高度。
D)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
 
2.内联元素(inline element)(或是行内元素)

 

A) 常见的内联元素如:a,span,i,em,strong,b等
B) 内联元素的表现形式是始终以行内逐个进行显示;
C) 内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
D)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性值不能正确显示;
a - 锚点 i - 斜体 em - 倾斜
span - 常用内联容器,定义文本内区块
strong - 粗体强调 b--加粗
 
3.内联块状元素

 

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,<img>、<input>标签就是这种内联块状标签。
inline-block元素特点:
A、和其他元素都在一行上;
B、元素的高度、宽度、行高以及顶和底边距都可设置

 

常见标签:img input textarea
img - 图片 input - 输入框
textarea - 多行文本输入框
 
4、可变元素
需要根据上下文关系确定该元素是块元素或者内联元素。
 
类型的转换
盒子模型可通过display属性来改变默认的显示类型
 
display属性与属性值 (18个属性值)
属性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group
 
作用:块状元素和内联元素之间的转换。
 
说明:各属性值的作用
1、Block块状显示:类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。或者就是让元素竖排显示。
2、inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示。或者就是让元素横排显示。
3、当元素设置了float属性后,就相当于该元素具备块状元素显示的特点;

 

4、Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。
只有这一个元素类型支持vertical-align属性)img,input
垂直对齐方式{vertical-align:top/bottom/middle;}
5、none 此元素不会被显示。
6、list-item:将元素转换成列表。li的默认类型。
7、大部分块元素display属性值默认为block,其中列表的默认值为list-item。
8、大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block。
 
vertical-align
只对行内块有效果,且是图在动
 
baseline         默认基线
middle           文字或行高的中间
top              盒子最上边
text-top/bottom  文字的顶部或底部
bottom           行高的最下面
margin:0,auto  水平居中
 
单行文本显示居中对齐,多行时左对齐
给父元素加 text-align:center
给子元素加 text-align:left;display:inline-block;

元素类型

标签:strong   盒子模型   它的   也会   行高   ica   spl   显示   网页   

原文地址:https://www.cnblogs.com/tis100204/p/10297121.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!