Day6(元素类型分类依据和元素类型分类)
根据css显示分类,XHTML元素被分为
三种类型:块状元素、内联元素(行内元素)、内联块级元素(行内块元素)
1. 块 状 元 素 ( b l o c k e l e m e n t ) \color{skyblue}{1.块状元素(block element)} 1.块状元素(blockelement)
a)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域。常用的块状元素包括**div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,**等;
b)默认情况下,块状元素独占一行,会按顺序自上而下排列。
c)块状元素都可以定义自己的宽高。
d)块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他块状元素。我们可以把这个容器比喻成为一个盒子。
2. 内 联 元 素 ( i n l i n e e l e m e n t ) ( 或 是 行 内 元 素 ) \color{skyblue}{2.内联元素(inlineelement)(或是行内元素)} 2.内联元素(inlineelement)(或是行内元素)
a)常见的内联元素如:a,span,i,em,strong,b等
b)内联元素的表现形式是始终以行内逐个进行显示;
c)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
d)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性值不能正确显示;
a - 锚点 i - 斜体 em - 倾斜
span - 常用内联容器,定义文本内区块
strong - 粗体强调 b–加粗
3. 内 联 块 状 元 素 \color{skyblue}{3.内联块状元素} 3.内联块状元素
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,、标签就是这种内联块状标签。
inline-block元素特点:
a)和其他元素都在一行上;
b)元素的高度、宽度、行高以及顶和底边距都可设置
常见标签:img input textarea
img - 图片 input - 输入框
textarea - 多行文本输入框
4. 可 变 元 素 \color{skyblue}{4.可变元素} 4.可变元素
dzXaR-1638166901927)]
4. 可 变 元 素 \color{skyblue}{4.可变元素} 4.可变元素
需要根据上下文关系确定该元素是块元素或者内联元素。