CSS布局基本知识

Category : CSS

在CSS布局中,应该注意以下细节,否则网页的结构会变的非常混乱,布局也会变的异常复杂

内联(inline)元素和块级(block)元素的区别:

内联元素就是会显示在行内的元素,它默认是不会换行的,后面的元素会跟着它继续显示的;而块级元素就是刚好和它相反的元素,默认是会独立占据一行,后面的元素会显示在下一行.

首先要清楚盒子的模型,盒子的最外层(黄色区域)是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属性,是它们排在了一行,代码如下:

使用float有一点需要注意的就是,下面的元素会继承上面的float属性,为了不使页面混乱,下面的元素必须要加上clear:both来清除浮动,或者在最后一个浮动的元素后面加上