1,首先放上没有设置display属性时候的html代码和初始视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>试试它们的功能</title>
<style>
p{
border-color: aqua;
border-width: 8px;
border-style: inset;
background-color: aquamarine;
}
</style>
</head>
<body>
<p>夜饮东坡醒复醉,归来仿佛三更。家童鼻息已雷鸣。敲门都不应,倚杖听江声。</p>
<p>长恨此身非我有,何时忘却营营。夜阑风静縠纹平。小舟从此逝,江海寄余生。</p>
</body>
</html>
在火狐浏览器上运行的结果是这样的
可以发现元素的宽度自动撑满了整个页面并且独占一行。这也是<p>标签本身就具备的特性,中间的空隙也是因为p标签自带的上下边距,同样的上阕离网页边也有一定距离。
2,于是我们可以熟悉常见的块级元素都有哪些:div,p段落标签,h1这一系列标题字,ul无序列表,ol有序列表,dt,dd定义列表标签等。
3,现在看行内元素【inline
行内元素常见的有span,a,em,strong
4,行内块元素【inline-block
常见的行内块元素有img,input。
这样看起来好像行内元素和行内块元素没什么区别,但是行内元素是不能设置宽和高的,行内块元素就可以设置。并且行内元素只能设置左右方向的外边距。
5,display取值为table时
6,取值为none则隐藏。
写得很简略,主要用来复习一下。