html页面的一些小结

 

一般初学者对网页的布局总是觉得不屑一顾，在学的 时候感觉很简单，当真的要简单的设计一个页面的时候，总是会遇到这样那样的困难，和不解

首先，用最简单的方法去控制。

如果要横排  用span  如果要竖排，那就用div         简单吧  不变应万变

通常div  设置一个大的位置  而span呢  较小的布局

 

 

“无意义”的元素div和span  没有内容的意义   只是用来布局      有意义的标签去掉意义再布局

 

div  属于块级

 

一般页面上的div 有两种  一种是绝对位置定位的 可以这么写

#id

{

 height:200px;

width:300px;

position:absolute;

left:50%;

top:50%;

margin-left:-150px;

margin-top:-100px

}

这样 这么个div  无论页面这么缩小 变化  都在页面中间；

Position 用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）
Top 层距离顶点纵坐标的距离
Left 层距离顶点横坐标的距离
Width 层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值
Height 层的高度，可以用一个长度或“auto”值来指定其高度，不允许使用负值
z-index 决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
Display 是一个显示属性，设定block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示
Visibility 这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏
Overflow 用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才显示滚动条

 

 

Margin(注) 是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负值边际。如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界margin-bottom、左边界margin-left和右边界margin-right属性分别设置与上级元素的外边距。
padding 用于设置区块的内边距属性，是边框和元素内容之间的间隔距离。与margin属性相返，但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写
float 设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left值，右漂浮right值
clear 清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的both值

 

 

 

在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。