页面布局心得

来源：互联网发布：js得到div高度编辑：程序博客网时间：2024/06/06 16:26

CSS的一些基本概念
说到布局，就要介绍到viewport，canvas，box,render tree
· viewport: 展现网页的媒体，比如窗口或者某个区域，它的大小是有限制的，为了不被平台术语所束缚，我们给他起名viewport，中文意思就是视口。
· canvas: 而我们在渲染网页的时候通常并不知道我们需要多大的空间，而且这些空间通常尺寸会超过viewport的大小，于是实际上我们需要设想一个无限大的画布来绘制我们的元素，我们把它称为canvas。
· box: element（元素）和node(节点)是大家很熟悉的概念，当我们做布局计算的时候，通常会把节点变成box，一个节点可能产生多个box，伪元素也会产生box。
*·**render tree: 对应于dom树，我们把box的包含关系构成的属性结构成为渲染树render tree
1.块区域介绍

<body>     <div>        <p>hello world.</p>     </div></body>

p 元素的包含块是 div 元素，因为作为块级元素，表单元格或行内元素，这是最近的祖先元素，类似的，div的包含块是 body. 因此，p的布局依赖于 div的布局，而div的布局则依赖于 body的布局。
块级元素会自动重启一行。

2.块级元素
这里写图片描述

一般的，一个元素的width被定义为从左内边界到右内边界，height则是从上内边界到下内边界的距离。

不同的宽度，高度，内边距和外边距相结合，就可以确定文档的布局。

水平布局

简单规则，正常流中块级元素框的水平部分总和就等于父元素的 width . 假设一个div中有两个段落，这两个段落的外边距设置为 1 em，段落内容宽度 width 在加上其左，右内边距，边框或外边距加在一起正好是div内容的width.

7大属性，margin-left, border-left, padding-left, width, padding-right, border-right, margin-right

这 7 个属性的值加在一起必须是父块元素的width值. ( 其中 margin-left, margin-right, width 可以设置成auto ) 设置成 auto, 会按照以上规则自动匹配到父块的宽度，例如 7个属性的和必须为 400像素，没有设置内边距或边距 ( 默认为 0) 而右外边距和width设置为100px, 左外边距为 auto,那么左外边距的宽度将是200px. 可以用 auto 弥补实际值与所需综合的差距。注：如果3个可以设置auto,都没设置成auto,而且宽度加在一起还不够父块区域的宽度的话，会默认将margin-right设置成 auto来满足总和与父块相等的要求。

如果两个外边距设置成 auto,那么，它们会是等长的，因此将元素在其父亲元素中居中。

如果这3个属性都设置成auto, 那么, 外边距会是0，而让 width 尽可能的长。

可以使用百分数，但是边框的宽度不能是百分数。

垂直布局

7大属性，margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom , 同样，这7个属性的值的总和是父元素 height 值。

其中 , margin-top, height, margin-bottom 也可以设置成 auto. ( 如果 margin-top, margin-bottom设置成 auto, 那么它们就会自动设置成 0 ).

3.浮动与定位( 确认基本布局 )

1) 浮动

一个元素浮动时，其他内容会“环绕”该元素，浮动元素要设置一个width.

float ( left , right , none ) , none 的情况一般用在文档内部，用来覆盖式样表，一般很少使用 none.

浮动元素会自动生成一个块级框。

浮动元素规则