CSS布局与阴影技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/70886489

1.inline-block

支持IE8以上、Safari、Chrome、Opera、Firefox主流浏览器

这里写图片描述

html：

<div>
    <div class="inlineblock">inline-block类型</div>
    <div class="inlineblock">inline-block类型</div>
</div>
<div>
    <div class="inline">inline类型</div>
    <div class="inline">inline类型</div>
</div>

图一默认 css：

<style>
    div.inlineblock {display: inline-block;
      background-color: pink;
    }
    div.inline {
      display: inline;
      background-color: red;
    }
</style>

图二分别设置宽度 css：

<style>
    div.inlineblock {
      display: inline-block;
      background-color: pink;
      width: 300px;/*给inline-block类型设置宽度*/
    }
    div.inline {
      display: inline;
      background-color: red;
      width: 300px;/*给inline类型设置宽度*/
    }
</style>

解析：inline-block类型可以设置宽度，在一行中并列显示多个block类型元素时使用inline-block类型能使样式变得简单。
一般inline-block类型垂直对齐的方式是底部对齐，如果想改成顶部对齐，则添加vertical-align: top;
如果想让两个div元素中间没有缝隙则去除代码中两个div元素之间的换行符，即让第一个div的结束标签链接第二个div的开始标签。如下图：

这里写图片描述

html:

<div>
    <div class="inlineblock">inline-block类型</div><div class="inlineblock">inline-block类型</div>
  </div>

2.inline-table类型

因为tabel表格是属于block类型，所以会单独占一行；只要给tabel添加样式：display:inline-table;就可以让文字和表格在一行显示。如图一：

这里写图片描述

html：

<body>
  你好
  <table>
    <tr>
      <td>单元格A</td>
      <td>单元格B</td>
      <td>单元格C</td>
    </tr>
    <tr>
      <td>单元格D</td>
      <td>单元格E</td>
      <td></td>
    </tr>
  </table>
  你好
</body>

css：

<style>
    table {
      display: inline-table;
      border:2px solid #ccc;
    }
    td {
      border: 1px solid red;
      padding: 5px;
    }
</style>

解析：（兼容IE8以上、主流浏览器）
图一是默认样式；图二是添加display: inline-table;让文字与表格在一行显示，默认是顶部对齐；可以通过vertical-align: bottom;设置底部对齐或者中间对齐，如图三；

3.盒阴影 box-shadow

兼容性：兼容Safari、Firefox；使用Safari时写成-webkit-box-shadow形式；使用Firefox时写成-moz-box-shadow形式；

这里写图片描述

html:

<div></div>

css：

div {
     width: 100px;
     height: 100px;
     background-color: pink;
     box-shadow: 10px 10px 10px gray;
     -webkit-box-shadow: 10px 10px 10px gray;/*兼容Safari*/
     -moz-box-shadow: 10px 10px 10px gray;/*兼容Firefox*/
}

解析：box-shadow：阴影离开文字的横向距离、阴影离开文字的纵向距离、阴影的模糊半径、阴影的颜色；
图二将阴影的模糊半径设为0；
图三将横向距离、纵向距离均设为0；

4.对盒子内元素使用阴影

这里写图片描述

html：

<div>
    我是内容我是内容<span>我是加阴影的元素</span>我是内容我是内容    
</div>

css：

<style>  
    span {
      background-color: pink;
      box-shadow: 10px 10px 0 gray;    
      -moz-box-shadow: 10px 10px 10px gray;/*兼容Firefox*/
    }
    span{
      background-color: pink;
      box-shadow: 10px 10px 0 gray;
      -webkit-box-shadow: 10px 10px 10px gray;/*兼容Safari*/
    }
</style>

5.对表格使用阴影

这里写图片描述

html：

<table>
    <tr>
      <td>单元A</td>
      <td>单元B</td>
      <td>单元C</td>
    </tr>
    <tr>
      <td>单元D</td>
      <td>单元E</td>
      <td></td>
    </tr>
</table>

css：

<style>
    table {
      border-spacing: 10px;/*单元格和单元格之间的距离*/
      -webkit-box-shadow: 5px 5px 10px gray;/*兼容Safari*/
      -moz-box-shadow: 5px 5px 10px gray;/*兼容Firefox*/
    }
    td {
      background-color: #ffaa00;
      -webkit-box-shadow: 5px 5px 5px gray;/*兼容Safari*/
      -moz-box-shadow: 5px 5px 5px gray;/*兼容Firefox*/
      padding:4px;
    }
</style>