CSS布局基本知识
Category : CSS
在CSS布局中,应该注意以下细节,否则网页的结构会变的非常混乱,布局也会变的异常复杂
内联(inline)元素和块级(block)元素的区别:
内联元素就是会显示在行内的元素,它默认是不会换行的,后面的元素会跟着它继续显示的;而块级元素就是刚好和它相反的元素,默认是会独立占据一行,后面的元素会显示在下一行.
常见的内联元素有a,span,input,select,code,img,常见的块级元素有div,h1-h6,p,pre
计算盒子的大小:
首先要清楚盒子的模型,盒子的最外层(黄色区域)是margin外补丁,然后是border边框(灰色区域),再往里面是padding内补丁(蓝色区域),最后才是元素的大小width和height(红色区域),所以一个盒子实际的宽度是margin+border+padding+width,高度是margin+border+padding+height,注意,margin,border和padding都要算2倍的,因为左右和上下都有.
页面的布局:
要让各个元素都按自己的要求来排列,其实也不是件容易的事情.如果要对页面的几个大的div进行布局的话,一般都会给要并排的div加上float:left的CSS属性,它的意思是让元素左浮动.因为默认的div是会独立占据一行的,只有让它浮动后,它才会并排.下面有个例子:
上面的2个层就是使用了float:left属性,是它们排在了一行,代码如下:
<div style="width:200px;height:100px;">
<div style="width:100px;height:100px;float:left;background-color:blue;"></div>
<div style="width:100px;height:100px;float:left;background-color:yellow;"></div>
</div>
使用float有一点需要注意的就是,下面的元素会继承上面的float属性,为了不使页面混乱,下面的元素必须要加上clear:both来清除浮动,或者在最后一个浮动的元素后面加上<br style="clear:both;">
