本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

1.块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

元素显示模式分类

块元素：一般指该元素自身独占一行，如div标签、p标签、ul标签、li标签等。

特点：

今天的目标是这部分二级弹出导航，思路是：鼠标经过时导航出现，移开后导航隐藏。

·在横向导航后面添加一个大盒子，写上基本样式、宽高背景颜色，看下效果。

·现在写上绝对定位，让它脱离外层盒子的限制。同时是相对顶部的盒子定位，需要写上相对定位代码：border-bottom-left-radiu，左边距离0，上面距离140像素，看下效果。

·接下来给盒子里添加内容，跟横向导航差不多，呦爱哦列表基本格式，再加上一张图片、两行文字，内容快速添加，看下效果。

今天学习下html元素的显示模式，为了之后做页面布局做好铺垫，记住了这些元素的显示模式方式，可以少走很多弯路。

元素的显示模式

1，块元素

1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。

一、CSS的元素显示模式

1.作用：网页标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局页面
2.HTML元素一般分为块元素和行内元素

（一）块元素

1.div为最典型的块元素，还有h1-h6,p,ul,ol,li等
2.特点