day14-CSS display样式

一、引子

　　前面我们在学习Html 的时候就有提到了块级标签，行内标签。他们之间的转换，通过displsay。它的功能不仅仅于此哦，下面让我们来深入的学习这个知识点。

二、display样式

默认 行内标签，span ,<input> ,...没有宽，高，padding,margin 即使设置了也没有效果，如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .c1{
 8             background-color: #dddddd;
 9             width: 80%;
10             height: 30px;
11         }
12         .c2{
13             display: block;
14         }
15     </style>
16 </head>
17 <body>
18     <span class="c1">我是span ,默认没有宽，高，padding,margin</span>
19     <div class="c1"> 我是div 我有</div>
20 </body>
21 </html>

我们可以把行内标签转换为 块级标签，displsy:black ,可以设置高度，宽度。。。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .c1{
 8 
 9             background-color: #dddddd;
10             width: 80%;
11             height: 30px;
12         }
13         .c2{
14             display: block;
15         }
16     </style>
17 </head>
18 <body>
19     <span class="c1 c2">我是span ,默认没有宽，高，padding,margin</span>
20     <br>
21     <div class="c1"> 我是div 我有</div>
22 </body>
23 </html>

效果：

display:inline ，把块级标签设置成 行内标签。高度、宽度。。。等属性就无效。

display：inline-block  ,具有行内标签特性，又有块级标签的特性，有多少占多少，又可以设置高，宽

display：none  不显示这个标签，后面JS中用来控制页面动态效果。

 

posted @ 2018-05-17 14:15  东郭仔  阅读(123)  评论(0)    收藏  举报