设为首页加入收藏

css网页设计布局方式都有哪些

作者:信息发布中心来源:2020-06-10 23:56

css是网页设计师在学习网页开发制作的时候需要掌握的一个编程知识,主要是用来完成网页中各个组成元素的定位布局,而今天我们就一起来了解一下,css网页设计布局方式都有哪些。

css网页设计布局方式都有哪些

一、文档流

文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。

CSS文档流大致可以分为3种:标准流,浮动流,定位流。

1,标准流

默认情况下,HTML元素都在标准流中呈现和展示。我们之前把元素分为块级元素,行内元素,行内块级元素,他们的特性是块级独占一行,行内和行内块级可以在一行内共存,这些特性都是针对标准流的。总结一下就是,标准流中元素只能在水平或垂直方向上排版。如果元素是块级元素,那么就会垂直排版,如果元素是行内元素/行内块级元素,那么就会水平排版。

2,浮动流

浮动流只有一种排版方式,就是水平排版。它只能设置某个元素在父元素内左对齐或者右对齐。设置了浮动的元素,将脱离标准流,之后它将无视元素的display属性,并且都被当做块级元素处理。

请注意,浮动float属性没有center取值,并且,如果设置了浮动属性,那么你将不能通过使用margin:0auto;属性使元素居中。

3,定位流

标准流和浮动流都只能在水平或垂直方向布局元素,但现实是,我们可能需要在上下左右几个方向上同时偏移元素,定位流正是为了解决这一问题而设计的。通过设置元素的position属性,可以让元素处于定为流中,并通过left、right、top、bottom属性设置元素具体的偏移量。

定为流分为四种:

a)static静态定位,实际上所有元素默认都是静态定位的,即处于标准流中。

b)relative相对定位,元素保留在标准流中所占用的位置,但实际是边框及以内的部分将显示在偏移之后的位置。即虽然元素已经不再原来的位置了,但之前所占用的空间并不会被释放给其他标准流中的元素。

c)absolute绝对定位,元素脱离标准流,浏览器把它视作块级元素,不论定位之前它是何种元素,其他元素也将无视它。绝对定位的偏移量是相对于其有定位属性的一个祖先元素的。

d)fixed固定定位,固定定位和绝对定位相似,但它的偏移量固定的相对于浏览器窗口。

二、浮动

当某个元素浮动之后,相当于从标准流中删除了该元素,标准流中的元素将会无视浮动元素,并且可能被浮动元素覆盖。

当有多个元素浮动时,他们有以下特点:

a)在相同方向上浮动的元素,先浮动的元素会显示在前面。

b)不同方向的浮动元素,会尽量去寻找并贴靠前面和它浮动方向相同的元素。如果前面没有其他浮动元素,那么它将紧贴其父元素的边界。

c)如果有未浮动的兄弟元素,那么元素在浮动之后,会根据它在标准流中的位置确定该在几行展示。

浮动元素还有一个特点:浮动元素不会挡住没有浮动元素中的文字,没有浮动的文字会自动给浮动的元素让位置。这才是设计浮动的初衷。

元素浮动后会带来两个问题,一个是造成父元素的高度塌陷,padding和margin无效。二个是被其他元素无视,出现元素相互覆盖的现象。那么要怎样才能消除浮动对其他元素的影响呢?我们通过下面的方式清除浮动带来的影响。

a)为父元素设置固定的高度(解决问题一)。

b)为父元素设置浮动(解决问题一)。

c)设置clear属性。clear属性的功能是使浮动元素不去寻找相邻的其他浮动元素,从而消除浮动元素对其他元素的影响(解决问题二)。

d)为父元素设置overflow:hidden;属性(解决问题二)。

【免责声明】本文系本网编辑部分转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与管理员联系,我们会予以更改或删除相关文章,以保证您的权益!更多内容请在707945861群中学习了解。

上一篇:运城达内web前端培训浏览器对象模型基础知识分享 下一篇:没有了
最近更新
热门点击

Copyright 2008 北京医疗器械网 版权所有所有 All Rights Reserved.
京ICP备05069099号