13.元素显示模式

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1块级元素02行内元素03行内块元素04元素转换目录contents05元素隐藏问题1：div和span标签的区别有哪些？问题2：哪些标签和div的特点相似？问题3：哪些标签和span的特点相似？什么是元素显示模式元素显示模式就是元素(标签)以什么方式进行显示比如<div>独占-行比如一行可以显示多个<span>HTML分为块元素和行内元素两种类型我是div标签我是div标签我是div标签我是span标签我是span标签我是span标签PART1块级元素块级元素(block-level)块级元素的特点：

总是从新行开始

高度，行高、外边距以及内边距都可以设置

宽度默认是容器的100%

可以容纳内联元素和其他块元素块级元素(block-level)常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等其中<div>标签是最典型的块元素只有文字才能组成段落，因此<p>标签里面不能放块级元素。同理还有标签：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<dt>，这些都是文字类块级标签，里面不能放其他块级元素。PART2行内元素行内元素(inline-level)行内元素的特点：与相邻行内元素在一行上不能设置宽、高，但水平方向的padding和margin可以设置，垂直方向的无效默认宽度就是它本身内容的宽度行内元素只能容纳文本或其他行内元素。但a标签特殊，链接里面不能再放链接，但可以存放其他行内或块级元素。常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等其中<span>标签是最典型的行内元素。块级元素和行内元素区别（1）总是从新行开始。（2）高度，行高、外边距以及内边距都可以控制。（3）宽度默认是容器的100%。（4）可以容纳内联元素和其他块元素。块级元素（1）和相邻行内元素在一行上。（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。（3）默认宽度就是它本身内容的宽度。（4）行内元素只能容纳文本或其他行内元素。行内元素PART3行内块元素行内块元素(inline-block)行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。常见的行内块元素有：<img/>、<input/>、<td>PART4元素转换标签显示模式转换display

转换为行内：display:inline;

转换为块：display:block;

转换为行内块：display:inline-block;任务实践（1）创建6个a标签内容如图，125*60，文字为白色，16px.并且设置文字水平和垂直居中；（2）根据提供的素材设置背景为huang.png；（3）当鼠标经过的时候，背景图片换为lv.png（4）设置导航链接在浏览器水平居中。提示：给盒子插入背景图片

如：background-image:

url(imgs/huang.png);

/*url指向图片路径*/PART5元素隐藏display:nonecss让元素不可见，最常用两种方式就是display:none和visibility:hiddendisplay:nonevisibility:hidden那么该元素以及它的所有后代元素都会隐藏是前端开发人员使用频率最高的一种隐藏方式隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问占据的空间消失不支持CSS3的transition过渡属性隐藏后位置仍然保留不会影响计数器的计数具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性如果重新给子元素设置visibility:visible,则子元素会显示出来支持CSS3的transition过渡属性display:none和visibility:hidden的区别display:block作用1.可以将行内元素和行内块元素转换为块级元素；2.可以将display:none隐藏的元素进行显示；3.可以取消图片在盒子里默认的下间隙任务实践(1)在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建602.html(2)根据效果图6.2.1将网页，分好结构标签，输入内容和图片(3)给body设置背景颜色#e1e6eb;(4)主导航条背景颜色为#249c6e,内容水平居中(5)用a标签做好导航菜单，设置宽高为宽度为16%，高度为40px（记得要模式转换哟），导航菜单文字水平、垂直居中，字体颜色为白色，去除a自带的下划线(6)鼠标经过菜单时，背景颜色为白色，字体颜色为#249c6e(7)主体部分，分为左边侧导航和右侧文章部分，模式转换为行内块，水平居中(8)左侧导航宽24%，背景颜色为白色，内容垂直靠上对齐(9)左侧导航菜单a,字体颜色为#249c6e，字符间距2px,高度是60px，水平、垂直居中(10)鼠标经过侧导航菜单时，背景颜色为