div布局

2019-04-16

盒模型

​ 可以把网页看作是由一个个的“盒子”组合而成。这个盒子就是div标签。HTML主要利用div标签进行网页布局，利用CSS进行样式设置，这种方法称为“Div+CSS” 。

div常用属性

1.width

2.height

3.margin

属性	描述
margin	简写属性。按照上、右、下、左顺序设置外边距。
margin-bottom	下外边距。
margin-left	左外边距。
margin-right	右外边距。
margin-top	上外边距。

4.padding

属性	描述
padding	简写属性。在一个声明中设置元素的所内边距。
padding-bottom	下内边距。
padding-left	左内边距。
padding-right	右内边距。
padding-top	上内边距。

5.float

​ 也称为浮动属性，设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行。

float属性取值：

none：不会浮动，默认值。
left：向左浮动。
right：向右浮动。

6.clear

清除浮动效果

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。

7.box-flex

规定盒容器的各子元素所占的尺寸比例。

说明：
目前没有浏览器支持box-flex属性。
Firefox支持替代的-moz-box-flex属性。
Safari、Opera以及Chrome支持替代的-webkit-box-flex属性。

div定位

position属性

值	描述
static	默认值。没有定位，元素出现在正常的流中（ top, bottom, left, right 属性皆无效）。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。即不论网页如何滚动，该元素始终停留在屏幕某个位置上。IE6-7不支持。 元素位置通过left, top, right 以及 bottom 属性设定。
relative	生成相对定位的元素，以它自己原来位置为基准，相对于元素自身位置进行偏移，还占用着原来位置，未脱离标准流（即元素没有离开原来的位置，只是在视觉上实现了位移）。因此"left:20" 会向元素的left位置添加20像素。 relative总是相对于最近的父元素定位，而不论其父元素是何种定位方式
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。以距离它最近的设置了定位属性(relative或absolute)的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准。元素位置通过 left, top, right 以及 bottom 属性设定。定位之后不会占用浏览器中的原来位置。

堆定位

​ 可以使用z-index属性设置元素层叠次序。其方法是为每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上。

语法格式： z-index:数字;

说明：只作用于position属性值为relative和absolute的对象。

div布局

命名规范

container：整个页面容器层，版心宽度应在1200px以内，文字大小应在12px、14px之间

header:顶部

logo：公司标志

nav:导航条

主导航：mainnav

子导航：subnav

顶导航：topnav

main:中间块的内容主体

sidebar：侧边栏

左侧栏：leftsidebar

右侧栏：rightsidebar

菜单：menu

子菜单：submenu

content：内容

footer：底部

copyright：版权部分

标题: title 摘要: summary 箭头： arrow 商标： label 网站标志： logo 转角/圆角： corner 横幅广告： banner

栏目： column 子菜单： subMenu 搜索： search 搜索框： searchBox 登录： login 工具条： toolbar 下拉： drop

标签页： tab 当前的： current 列表： list滚动： scroll 服务： service 提示信息： msg 新闻： news 小技巧： tips

下载： download 栏目标题： title 热点： hot 加入： joinus 注册： regsiter 指南： guide友情链接： friendlink

状态： status 版权： copyright 按钮： btn 合作伙伴： partner 投票： vote

html5新增布局标签

html5新增了文档结构元素，以取代单一的div布局。

标签名称	说明
header	一般放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题、简介、导航等信息，比如搜索框或logo。一个文档中可以包含多个header标记。可以为body、article、section和aside增加header标记。
nav	表示页面的菜单导航、链接导航。nav可以放在任意位置，比如foot元素或header元素中。
main	显示页面的主体内容。每个页面只能包含一个main标记，main标记中不包含网站标题、logo、主导航区、版权声明等信息。
footer	一般被放置在页面的底部，或者页面中某个区块元素的底部。通常用来定义文档页脚。页脚一般包含文档的作者、版权信息、使用条款链接、联系信息等。
article	代表页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。一般为文字集中显示的区域。除了内容部分，一个article元素通常有它自己的标题、脚注。 总之该元素能够独立的被发布或者重新使用，并可以嵌套使用。
section	用于对页面上的内容进行分块，或者说对文章进行分段，即定义文档中的节。比如章节、页眉、页脚。一个section元素通常由内容及其标题组成。 section元素不要与有着自己的完整的、独立的内容的article元素混淆。article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。如果一块内容相对比较独立、完整，应该使用article元素，如果要将一块内容分成几段，应该使用section元素。
aside	包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充，表示当前页面的附属信息。 主要用于：页面侧边栏、广告、友情链接、文章引语（内容摘要）
figure	可包含img元素，用来定义图片列表。可以替代ul和li元素。还可同时使用figcaption元素定义图片列表项的标题。
hgroup	用于包含h元素，对 所有h1-h6元素进行分组