zoukankan      html  css  js  c++  java
  • HTML+CSS笔记 CSS中级 一些小技巧

    水平居中

    行内元素的水平居中

    在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的
    如果被设置元素为文本图片行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

    语法:
    1. <body>
    2. <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>
    3. </body>
    1. <style>
    2. div.txtCenter{
    3. text-align:center;
    4. }
    5. </style>


    块状元素

    当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

    定宽块状元素水平居中

    满足定宽块状两个条件的元素是可以通过设置左右margin”值为“auto”来实现居中的。
    语法:
    1. <body>
    2. <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
    3. </body>
    1. <style>
    2. div{
    3. border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    4. width:500px;/*定宽*/
    5. margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
    6. }
    7. </style>
    注意:元素的“上下 margin” 是可以随意设置的。

    不定宽元素水平居中

    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
    不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
    1. 加入 table 标签
    2. 设置 display;inline 方法
    3. 设置 position:relative 和 left:50%;

    第一种加入table标签

    第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )
    第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)
    1. <div>
    2. <table>
    3. <tbody>
    4. <tr><td>
    5. <ul>
    6. <li><a href="#">1</a></li>
    7. <li><a href="#">2</a></li>
    8. <li><a href="#">3</a></li>
    9. </ul>
    10. </td></tr>
    11. </tbody>
    12. </table>
    13. </div>
    1. <style>
    2. table{
    3. margin:0 auto;
    4. }
    5. ul{list-style:none;margin:0;padding:0;}
    6. li{float:left;display:inline;margin-right:8px;}
    7. </style>

    第二种方法display:inline

    改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果
    1. <body>
    2. <div class="container">
    3. <ul>
    4. <li><a href="#">1</a></li>
    5. <li><a href="#">2</a></li>
    6. <li><a href="#">3</a></li>
    7. </ul>
    8. </div>
    9. </body>
    1. <style>
    2. .container{
    3. text-align:center;
    4. }
    5. .container ul{
    6. list-style:none;
    7. margin:0;
    8. padding:0;
    9. display:inline;
    10. }
    11. .container li{
    12. margin-right:8px;
    13. display:inline;
    14. }
    15. </style>
    这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值

    第三种设置position:relative和left:50%

    通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中
    1. <body>
    2. <div class="container">
    3. <ul>
    4. <li><a href="#">1</a></li>
    5. <li><a href="#">2</a></li>
    6. <li><a href="#">3</a></li>
    7. </ul>
    8. </div>
    9. </body>
    1. <style>
    2. .container{
    3. float:left;
    4. position:relative;
    5. left:50%
    6. }
    7. .container ul{
    8. list-style:none;
    9. margin:0;
    10. padding:0;
    11. position:relative;
    12. left:-50%;
    13. }
    14. .container li{float:left;display:inline;margin-right:8px;}
    15. </style>

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

    总之,这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。



    垂直居中

    父元素高度确定的单行文本的垂直居中

    父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的
    语法:
    1. <div class="container">
    2. hi,imooc!
    3. </div>
    1. <style>
    2. .container{
    3. height:100px;
    4. line-height:100px;
    5. background:#999;
    6. }
    7. </style>

    父元素高度确定的多行文本的垂直居中

    父元素高度确定的多行文本图片块状元素的竖直居中的方法有两种:
    方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle
    说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了
    1. <body>
    2. <table><tbody><tr><td class="wrap">
    3. <div>
    4. <p>看我是否可以居中。</p>
    5. <p>看我是否可以居中。</p>
    6. <p>看我是否可以居中。</p>
    7. <p>看我是否可以居中。</p>
    8. <p>看我是否可以居中。</p>
    9. </div>
    10. </td></tr></tbody></table>
    11. </body>
    1. table td{height:500px;background:#ccc}
    因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了
    在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式
    1. <div class="container">
    2. <div>
    3. <p>看我是否可以居中。</p>
    4. <p>看我是否可以居中。</p>
    5. <p>看我是否可以居中。</p>
    6. <p>看我是否可以居中。</p>
    7. <p>看我是否可以居中。</p>
    8. </div>
    9. </div>

    1. <style>
    2. .container{
    3. height:300px;
    4. background:#ccc;
    5. display:table-cell;/*IE8以上及Chrome、Firefox*/
    6. vertical-align:middle;/*IE8以上及Chrome、Firefox*/
    7. }
    8. </style>
    这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7

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

    1. position : absolute
    2. float : left 或 float:right

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

    1. <div class="container">
    2. <a href="#" title="">进入课程请单击这里</a>
    3. </div>
    小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了
    1. <style>
    2. .container a{
    3. position:absolute;
    4. width:200px;
    5. background:#ccc;
    6. }
    7. </style>













  • 相关阅读:
    奇数阶魔方问题
    《DSP using MATLAB》示例9.3
    《DSP using MATLAB》示例9.2
    《DSP using MATLAB》示例9.1
    找个目标很重要
    《DSP using MATLAB》示例Example 8.30
    《DSP using MATLAB》示例Example 8.29
    《DSP using MATLAB》示例Example 8.28
    《DSP using MATLAB》示例Example 8.27
    《DSP using MATLAB》示例Example 8.26
  • 原文地址:https://www.cnblogs.com/echorep/p/5185862.html
Copyright © 2011-2022 走看看