用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把它定位在主要栏右边了。我觉得这样应该是不对的。
