css的小问题总结

1.居中问题

比如让宽度为60%的<div class="box">居中，可以再.box里面设置margin:auto

2.高度固定的div里面有两个子类div且高度和父类一致，但是不是左右排列，而是上下排列

原因是没有设置float属性。

3.在设计整个页面时，要考虑的东西（持续更新）

首先抓住页面的共性，把这些共性提取出来

4.h标签

不能直接使用。可以定义的有<h1>~~<h6>.

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。在使用时css比较好的用法是直接定义h1 ,h2而不是定义

某某div.class h1{}这样就违背了本身的原意。

5.css

ul.box-icon li{
    width: 110px;
    height: 150px;
    padding-right: 34px;
    float: left;
}

ul.box-icon li.last{
     width: 110px;
     height: 150px;
     float: left;
}

在 <li class="last">里面的所有的属性将会依然包含padding-right:34px;  如果想要消除这个必须在ul.box-icon li.last 里面设置padding-right:0;

6.css里面图片竖直居中

  <div class="logo">
            <a href="/"><img src="/static/image/logo_03.png" alt=""/></a>
        </div>

css设置

.logo a {
    position: absolute;
    height: 82px;
    line-height: 82px;
}
.logo a img{
    vertical-align: middle;
}

需要注意的是：.logo a 里面必须要设置line-height的高度，否则图片不会居中。

7.图片大小比例随着窗口变化等比例缩放

.banner img{
    width: 100%;
    display: block;
}

8.css控制单行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;