CSS页面布局及排版
作者: 发布时间:2019-05-02 来源:本站 点击:

  独立盒子模型由:内容、border、padding、margin四部分组成。详见之前的文章内容。

  (3)border-style,重要属性。如果没有指定边框样式,其他属性都不起作用,边框将不存在。属性值有:

  (1)width、height。有三种值:auto(根据盒子内容自动调整)、固定值、百分比(占

  还有两个子属性:overflow-x 和 overflow-y ,用来单独定义水平/垂直方向的处理方式。

  padding值不能是负数。另外使用padding时,盒子宽度为auto/没有定义宽度时,内边距计算在盒子内,否则计算在盒子外。

  margin值可为负数。默认情况下,有些元素的padding和margin会有相应的默认值,不同浏览器不同。所以CSS布局中,利用下面代码将所有元素的内外边距设为0,重置边距。

  (2)不是行内元素,有换行效果的块级元素:上下间的距离是两者中的较大者,如上面的margin-bottom大于下面的margin-top,距离就取margin-bottom。

  内容区域为参考。“标准流”中,块级元素没有设width和height时,默认宽度会自动延伸到父元素的内容区域为限,高度为包容下内容的最小高度。如果设置了width和height,就以值来显示。

  (4)当margin为负数时。被设为负数的往相反方向移动,甚至会覆盖在其他元素上。当块级元素间形成嵌套的父子关系时,margin设为负数可以使子元素从父元素中分离出来。如:

  设置浮动后,盒子的宽高也会有改变。要清除浮动。也就是:(块级元素设置为浮动后,将脱离“标准流”,但还占据着父元素的空间,父元素的高度不再受浮动的子元素的影响,而由没浮动的其他子元素高度确定。)

  2).仍在标准流中,对父元素和兄弟元素无任何影响,即使由于偏移移到了父元素外边,其他元素也还在原来位置,不会顶上来。

  “最近”的一个“已经定位”的“祖先元素”为基准进行偏移,如果没有已经定位的祖先元素,则以浏览器窗口为基准进行偏移。3).

  5. z-index空间位置z-index属性调整重叠元素的上下位置,值大的位于小的上方。值可为正数可为负数。

  设计者根据页面显示的内容,对页面有个整体的框架规划,包括整个页面分为哪些区域,各区域的父子关系等。div对整体区域进行划分,然后用css进行定位,再在各个div中添加相应的内容并用css进行样式控制。常用布局方式:宽度固定且居中板式、“工”字型板式。

  2)文字大小:font-size。(如果是百分比,行内元素是相对于父元素文字大小的百分比。如果本身是块级元素,就是相对于自身的百分比。)

  1)图像边框:html有自带了border属性,但一般用css设置。2)图像缩放:通过width和height实现。

  。vertical-align只能用于行内元素。vertical-align属性值:baseline(默认值,落在文字的基线上)、top、middle、bottom、sub、super、text-bottom(与文字底端对齐)、text-top(与文字顶端对齐)。也可以用数值表示,正负都可,以文字基线为基准,上移(正)或下移(负值)一定距离,均以图像底部为准。

  3)背景图像平铺:默认情况,自动沿水平和垂直平铺。希望只沿着一个方向平铺,通过background-repeat控制:

  1)按钮式超链接:通过css属性,设置border边框属性实现。2)背景图像变换超链接:多种方法。可通过项目列表的list-style-type设为none来制作菜单和导航条。

  难点:利用float属性使得列表中每一个列表项达到水平排列。利用display属性将行内元素a转换为块级元素,从而可以设置width和height。

  ps:table summary=这里的值用于概括整个表格内容,浏览器不显示,对于搜索引擎抓取有用

  1)设置表格、单元格边框:border。默认情况下,各个单元格边框数分离的,如果要设置相邻单元格边框间距,table有自带了html的collspacing属性,此处用css的border-spacing属性。border-spacing:10px;

  ——d.如果边框的其他设置均相同,只有颜色上的区别,则单元格样式行行组列列组表格样式。

  3)表格宽度:table-layout。auto时为自动方式,默认值。fixed为固定值,表格宽度不依赖单元格中的内容,由width指定。

  IE6识别“ * ”和“ _ ”,IE7识别“ * ”,firefox都不能识别。顺序应该是 正常,带*号的,带_的。

  此外:!important声明在IE6和FF中可以提升样式应用优先权。但在IE6中,!important声明会被之后的同名属性定义替换。所以*和!important声明搭配可以很好的解决IE6、IE7和FF的兼容性问题。

  
【评论】【加入收藏夹】【 】【打印】【关闭