1.display属性
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>08display属性</title><style>.c1 {background-color: red;/*display: none; !* 让其在页面上不显示 *!*//*display: inline; !* 让其变成一个行内标签 *!*/display: inline-block; /* 让其具有块级标签和内联标签(行内标签)特点,就是可以设置长和宽的行内标签 */}.c2 {width: 100px;height: 100px;background-color: green;/*display: block; !* 让其变成一个块级标签*!*/display: inline-block; /* 让其具有块级标签和内联标签(行内标签)特点,就是可以设置长和宽的行内标签 */}#ulid1 {background-color: darkslategrey;display: inline-block;list-style-type: none; /* 将标题前面的点去掉 */}li {display: inline-block; /* 将li标签变为行内标签,并且可以设置长和宽 */border-right: 2px solid bisque; /* 设置右边框2像素 实线 */}li.last {border-right: none; /* 将li最后一个标签的右边框设置成没有 */}</style> </head> <body><div class="c1">div</div> <!-- div是块级标签,可以设置长和宽 --> <span class="c2">span</span> <!-- span标签是一个内联标签,自己占多大就占多大,不能设置长和宽 --> <span class="c2">span</span><ul id="ulid1"><li>玉米商城</li><li>电脑</li><li>手机</li><li class="last">平板</li> </ul></body> </html>