CSS3盒子相关样式

  1. diaplay的属性:inline 和block,  inline-block.

    在CSS 中,可以用display控制盒子的类型。如,把一个行级元素转换成块级元素。注意,这种转换并不能改变元素本质。即使你把它转换成了 块级元素,你也不能让它包含其他的块级元素,你转换的只是CSS的盒子的外观。

    像<p> <div>是块级元素,<span><a>是行级元素。



  2. css中:
    <style type="text/css">
    div{
    background-color:red;
    }
    span{
    background-color:blue;
    }
    </style>
  3. eg:html代码:
    <body>
    <div>div元素</div>
    <div> div元素</div>
    <span>span元素</span>
    <span>span元素</span>
    </body>

     从上面的代码可以看到原来的块级元素是独占一行的,而行级元素都是在一行内排列的。

      现在,如果我们希望div变成一个内联元素,span元素变成一个块级元素。

CSS如下:

css中:
<style type="text/css">
div{
background-color:red;
display:inline;
}
span{
background-color:blue;
display:block;
}
</style>

    现在将盒子的外观改变了,现在的效果是翻过来的。

2.inline-block类型

  inline-block和inline类型显示是一样的,但是inline-block是使得元素是内联元素的形式,但可以像块级元素一样设置高度和宽度了。

3.inline-table类型

<table>
hello上
<tr>
   <td>A</td><td>A</td><td>A</td>
</tr>
<tr>
   <td>A</td><td>A</td><td>A</td>
</tr>
<tr>
   <td>A</td><td>A</td><td>A</td>
</tr>
<tr>
   <td>A</td><td>A</td><td>A</td>
</tr>
hello下
</table>
css中:
<style type="text/scc">
tabe{
border:solid 3px #00ooff;
}
td{
border:solid 3px #e1e2e3;
}
</style>

此时hello上和hello下是在表格的上面和下面。

如果想要他们都排列在一行上面。

就在table的css中加上:display:inline-table 就可以了。

4.list-item类型

  display:list-item之后,就可以设置list-style-type:circle;之类的,就可以将元素设置成列表了。

你可能感兴趣的:(CSS3盒子相关样式)