在css中,有一个属性为“display”它可以将内联元素,块元素,行内块元素互相转化:
display:block;转化为块元素,(以便于设置宽高);
display:inline-block;;转化为行内块状元素;
display:inline;转化为行内元素
1、行内元素(又称为内联元素)的代表元素:span;
特点:一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。
1、1:不能设置宽高,即使设置宽高也不能对元素起作用;
1、2 : 对 margin的设置,,只对左右有效,上下无效,即(margin-left、margin-right)有效,(margin-top、margin-bottom不会起作用);
1、3:对padding的设置,上下左右都有效,即设置padding-top、padding-right、padding-bottom、padding-left都有效;
1、4:行内元素的大小是有内容撑开的,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin 却只有水平方向的值,垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin- left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。padding设置上下左右都有效,即会撑大空间但是不会产生边距效果。
2、块元素的代表元素:div(常用块级容器,也是css layout的主要标签)
块元素的特点:
注意:块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。
(1)、结构化块状元素: 这类元素用于构造文档的结构,没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。
3、行内块元素:
3、1不自动换行;
3、2能够识别宽高;
3、3默认排列方式为从左到右;
行内、块状元素区别:
块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化。
一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
常见的内联(行内)元素:行内大多为描述性标记
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<sup>...</sup> 上标
<sub>...</sub> 下标
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
<span>...</span>
常见的块元素:块级大多为结构性标记
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单