用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

}

十，设置元素周围的外边距

margin：x;   (-top ; -right; -bottom; -left)(x为带单位的数值)

margin-left: 10px;

.page{
         margin:0 auto;
}<!--让网页的内容水平居中-->

auto的值一来于width的值。

！！margin和padding，border的用法类似。

十一，使元素浮动,控制元素浮动的位置，

1、float:dir;  (dir:left or right or none)

2、清除浮动：clear：X；（X：left，right，both，none）（清除浮动很重要）

3、创建自清除浮动元素

.container{overflow:hidden;}

!!浮动元素的display属性值会自动强制转化为block。

十三，对元素进行定位

1，相对定位

possition：realitive;

top:d;  (top,right,bottom,left皆可用)（d为希望元素从它自然位置偏移的距离）

2、绝对定位

possition：absolute;

top:d;  (top,right,bottom,left皆可用)（d为希望元素从它自然位置偏移的距离）

！！定位是不继承的。

十四，在栈中定位元素。

1、z-index：n；n表示定位过的对象堆中的层级的数字。

十五、溢出处理

overflow：hidden；（隐藏）

overflow：auto；（滚动）

overflow：hidden；（滚动）

！！overflow是不继承的。

十六、垂直对齐元素

vertical-align：baseline；middle；sub；super；text-top；

vertical-align仅适用于行内元素（inline 入em，strong，cite），不能适用于块级元素（bolck 如h1~h6）；

十七，修改鼠标指针

cuesor：pointer；default；crosshair；move；help；等等

注：今天遇到一个比较大的问题，没有解决：我做了一个有主要栏和附注栏的页面，本来附注栏在主要栏下面，想让附注栏浮动在主要栏右边，写了float：right；它只是向右移动，不是移动到主要栏的右边。然后我就用position把它定位在主要栏右边了。我觉得这样应该是不对的。