cssdiv布局技巧?
CSS 布局的基础方法及css布局技巧
css 是一个网页的外衣,网页好不好看取决于 css 样式,而布局是 css 中比较重要的部分,当产品把一个需求设计交到手中,我首先要做的是一点点的解剖这些需求,首先想到的是 html 的结构,根据要兼容的浏览器,数据的拼接,代码的可维护性,扩展性来选择 css 的布局方法。有时候,一个好的布局可以减少很多代码,用 css 处理网页布局的时候有很多技巧性的东西,下面就给大家介绍一些 css 布局技巧实例及 css 布局模型。
css的基础布局方法
1.块区域介绍
<body>
<div>
<p>这是一个段落.</p>
</div>
</body>
p 元素的包含块是 div 元素,因为作为块级元素,表单元格或行内元素,这是最近的祖先元素,类似的,div 的包含块是 body. 因此,p 的布局依赖于 div 的布局,而 div 的布局则依赖于 body 的布局。
块级元素会自动重启一行。
2. 块级元素
正常流布局

一般的,一个元素的width被定义为从左内边界到右内边界,height则是从上内边界到下内边界的距离。
不同的宽度,高度,内边距和外边距相结合,就可以确定文档的布局。
HTML网页布局的常见8种类型?
也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。
拐角型结构与“国”字型结构其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
2、标题正文型
这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。
3、封面型
这种类型基本上是出一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
4、“T”结构布局
所谓“T”结构布局,就是指网页上边和左边相结合,页面顶部为横条网站标志和广告条,左下方为主菜单,右面显示内容,这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式。
如左右两栏式布局,一半是正文,另一半是形象的图片、导航。或正文不等两栏式布置,通过背景色区分,分别放置图片和文字等。
这样的布局有其固有的优点,因为人的注意力主要在右下角,所以企业想要发布给用户的信,大都能被用户以最大可能性获取,而且很方便,其次是页面结构清晰,主次分明、易于使用。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“看之无味”。

