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

本文深入探讨CSS布局方法，包括DIV居中、三栏布局、浮动原理及CSS Sprite技术的应用。讲解高效CSS编写策略，解决IE6兼容性问题，以及页面重构与优化实践。

1，DIV居中，或浮动元素居中

2，构成CSS的基本语句

选择器{键值对}

选择器{

属性名称：属性值；

……

}

3，display有哪些值？说明他们的作用

display的值有：inline,block,none,inline-block,list-item,table和inherit

block块类型，默认宽度为父元素宽度，可设置宽高，换行显示

inline行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示

inline-block是默认宽度是内容宽度，同行显示，可设置宽高。

list-item是指像块元素一样显示，并添加样式列表标记

none元素不会显示，已脱离文档流

table是指元素会作为块级表格显示

inherit是指从父元素继承display属性的值

4，块级元素和行内元素的区别

块级元素前后都会自动换行，默认情况下，块级元素独占一行，显示这些元素中间的文本时，都将从新行中显示，其后的内容也在新行显示；
行内元素可以和其他行内元素位于同一行，比如<img><input>等，同时可以设置其宽高

5，用DIV和CSS实现3栏布局

padding：内边距，补白/留白，控制元素和内容的边距

margin：外边距，边框外空白，控制元素与元素的边距

<div class="container">
    <div class="main">中间</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

<style>
    .container div {
        height:200px;
    }
    .container{
        padding:0 200px;
        background-color: #2aabd2;
    }
    .left,
      .main,
      .right{
          float: left;
          position: relative;
      }
    .left,
    .right{
        width: 200px;
    }
    .main{
        width: 100%;
        background-color: #4cae4c;
    }
    .left{
        background-color: #2aabd2;
        margin-left: -100%;
        left:-200px;
    }
    .right{
        background-color: #2aabd2;
        margin-left: -200px;
        left:200px;
    }
</style>

6，浮动，及其工作原理

7，CSS Sprite，解释，以及如何在页面和网站中使用

CSS Sprite其实就是把网页中的一些背景图片整合到一张图片文件里，再利用background-image，background-repeat，background-position的组合进行背景定位。

8，书写高效CSS需要考虑的问题