用css进行布局

     用css进行布局

一，开始布局的注意事项

1、作为最佳实践，应把html（内容）和css（显示）分离；

2、网站设计主要有两大类型：固定宽度（基于像素）和响应式（也称流式，使用百分数定义）

二，构建页面

！！高效网页的核心是结构良好，语义化的HTML。

1、恰当的使用article、aside、nav、section、header、footer、和div等元素将页面分成不同的逻辑块，并对他们使用ARIR地标角色。如以下代码：

                   <article class="about">
                        <h2>..</h2>
                        <img src=".." width="n" height="m" src="..">
                        <p>..</p>
                    </article>

                    <div class="..">
                        <h2>..</h2>
                        <img src=".." width="n" height="m" src="..">
                    </div>

                    <aside class="mod">
                        <h2>...</h2>
                        <ul class="links">
                            <a href="..">..</a><br/>
                            <a href="..">..</a>
                        </ul>
                    </aside>

(其中的...根据自己的需要进行填写)

三，在旧版浏览器中为html5元素添加样式

将以下代码添加到网页的主样式表文件（所有页面都用到的样式表文件）

article,aside,figcaption,figure,footer,header,main,nav,section{
display:block;
}

2,在每个页面的head元素添加以下代码：

<!--if it IE9-->
<script scr="http://html5shiv.googlecode.com/svn/trunk/html5.js">

四，对默认样式进行重置或标准化

1、css重置可以有效的将所有默认样式都设置为”0“

五，盒模型

1、定义：css进行处理是，它认为每个元素都包含在一个不可见的盒子里。

2，盒子构成：内容区域，内容区域周围的空间（内边距，padding），内边距的外边缘（边框，border），边框外面将元素与相邻元素隔开的不可见区域。

六，控制元素的显示类型和可视性

1、h1~h6、p等元素为块级元素（display：block;），em，strong，cite等为行内元素(display：inline;)。本质区别是他们的display属性。css可以改变默认的属性值，如p{display：line;}或者em{display：block;}

2,设置为inline的元素会忽略任何width，height，margin-top和margin-bottom设置。inline-block元素可以使用这些属性。

3，display：XX;用于指定元素的显示方式；XX：block（块）；inline（行内）；inline-block（显示行内元素，但是具有块级元素的特征，可以为四条边设置：width，heigth，margin，padding等属性）；display：inline；中元素可接受padding的设置，但是padding-top和padding-bottom会越界进入相邻元素空间。

    ！！

4，控制元素可见性，如

em{
       visibility:hidden;
}

将元素隐藏。

七，设置元素的宽高

1、可以为很多元素设置宽高，如：分块内容、段落、列表项、div、图像、video、表单元素等。

如以下代码：

main{
      width：600px；
}
.sidebar{
        width:300px;
}

2、设置宽高：width：w; height:h;   (w 和 h ,只表示长度，单位如px，em等 或者使用auto让浏览器计算高度)

    （width和heigth不是继承的）

3、宽度，外边距和auto

.secend{
          border:3px soild royalblue;
          margin:10px;
          padding:8px;
}

八，在元素周围添加内边距

1、如果不设置内边距（左），内容就会贴在边框上。添加后内容的外围就会有一些空白。

.about{
           padding: .3125em .625em  .625em
}

2、在元素周围添加边距的方法  padding：X;   x为要添加的空间量，带单位（px或em）的长度，或者父元素宽度的百分比

九，设置边框

1、例如

.about img{
             border:5px soild #bebebe

}

（未更新完）

用css进行布局

原文：http://www.cnblogs.com/lal-fighting/p/5077204.html