web前端复习系列[6]——css样式设置小技巧

|---- 1.水平居中设置
    |----1.1 行内元素（仅限于行内元素）
　　　　如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
    |----1.2 定宽块状元素（必须满足两个条件：定宽、块状）
　　　　通过设置“左右margin”值为“auto”来实现居中。

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
html代码
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
CSS代码
margin-left:auto;
margin-right:auto;
也可以写成

　　　　注意：元素的“上下 margin” 是可以随意设置的。
    |----1.3 不定宽块状元素——如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
        |---- 方法一：加入 table 标签
            |---- 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
            |---- 第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>
html代码
<style>
table{
    margin:0 auto;
}

ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
CSS代码

        |---- 方法二：设置 display;inline 方法
        　　改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
html代码
<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>
CSS代码

        |---- 方法三：设置 position:relative 和 left:50%;
　　　　 |---- 步骤一：给父元素设置 float，然后给父元素设置 position:relative 和 left:50%
            |---- 步骤二：给子元素设置 position:relative 和 left:-50% （注意：有个负号“-”）来实现水平居中。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
html代码
<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
CSS代码

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

|---- 2.垂直居中设置
    |---- 父元素高度确定的单行文本
　　　　　设置父元素的 height 和 line-height 高度一致。
    |---- 父元素高度确定的多行文本（适用于多行文本、图片、块状元素）
        |---- 方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
        |---- 方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
　　　　　　这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
|---- 3.隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

  •     position : absolute
  •     float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
html代码
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>
CSS代码

 

posted @ 2016-01-24 12:06  叶莜落  阅读(317)  评论(0)    收藏  举报