CSS总结

最新推荐文章于 2024-10-01 23:20:42 发布

High_Mount

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量889

点赞数

分类专栏： CSS 文章标签： css div class border 浏览器 html

本文链接：https://blog.csdn.net/High_Mount/article/details/1773333

版权

CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1、使内容居中的方法：
（1）
html,body {

   margin:0px;
   padding:0px;
   text-align:center;
  }
  然后，让内容：
  #header{
   width:800px;
   height:73px;

   margin:0 auto; /*这句是关键点*/
   padding:0px;
   text-align:center;
  }

  即可

（2）或直接在最外面的层设置样式
        #wrapper{
            width:750px;
            margin:0px auto;
            background-color: #D7D493;
        }

2、line-height相当有用
设置 line-height:20px; 来调整文字所占的行高，以便使文字上下居中等，达到美观的效果！！！

（1）应用在分多行显示的链接中。
        .cnp li a {
            display:block;
            overflow:hidden;
            white-space:pre;
            line-height:27px; /*行高设置*/
            color:#039;
            width:100%
        }

3、使链接单独成行，让它呈现为块级元素
（1）
  .sHot a {
   display:block;
   line-height:20px； /*设置行高后他们间的间距变大，更好看*/
  }
（2）图片在上方，链接文字在下的情况；把图片和链接设为块级元素。

如：
.model ul {padding:10px 0 0 8px; height:307px;}
.model li {width:140px; text-align:center;float:left;}
.model li a { line-height:20px;_height:20px;min-height:30px;display:block;}
.model li img { width:120px; height:110px; border:1px #939393 solid;display:block;margin:7px auto; }

4、使用1*1的空白图片做空白行,只设置div的高度也可

<div class="vblank"><img src="../17_CSS_无懈可击/images/spacer.gif" alt=""></div>
.vblank
{
  height:10px!important;
  overflow:hidden;
  clear:both;
}
====修改为===>

<div class="vblank"></div>
.vblank
{
  height:10px!important;
  overflow:hidden;
  clear:both;
}

5、===================================================================

vertical-align:middle不起作用的情况下

1.单行文字

设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.

这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一

name{
height: 20px;
line-height: 20px;
overflow: hidden;
}

2.多行文字

很简单,只要设定一样的 padding-bottom 和 padding-top 就可以了

name{
padding-top: 20px;
padding-bottom: 20px;
}