DIV布局

2024年3月7日发(作者：)

DIV布局

D

片x与y轴的位置

链接

A 所有超连接

A:link 超连接文字格式

A:visited 浏览过的连接文字格式

A:active 按下连接的格式

A:hover 鼠标移至连接

边框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四边框

虚线

</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>实线 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><TEXTAREA STYLE="border:1px solid pink"> </p><p style="text-indent: 2em;";>设置div的高度与文字的行高一样就可以了,即 </p><p style="text-indent: 2em;";>line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>二、常用属性 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>代码如下: </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>1、Height:设置DIV的高度；Width:设置DIV的宽度。 </p><p style="text-indent: 2em;";>2、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left] </p><p style="text-indent: 2em;";>可以分别设置：margin-left:到父容器左边框的距离；margin-right:到父容器右边框的距离；margin-top: 到父容器上边框的距离；margin-bottom:到父容器下边框的距离。 </p><p style="text-indent: 2em;";>3、padding:用于设置DIV的内边距（内如子元素与DIV边界的距离）。padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]：需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中)，比</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。 </p><p style="text-indent: 2em;";>4、border:设置DIV的边框样式；display:设置显示属性。其值有block、none；float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none； </p><p style="text-indent: 2em;";>background:设置DIV的背景样式；background后可直接跟背景的颜色、背景图片、平铺 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>方式等样式。也可以用以下属性分别设置。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>background-color:设置背景颜色；background-attachment:背景图像的附加方式，其值有scroll、fixed; background-image:指定使有的背景图片;background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺); background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标指</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>定具体的位置。 </p><p style="text-indent: 2em;";>5、position:设置DIV的定位方式。position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。若指定为static时，DIV遵循HTML规则；若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移（相对于自身的偏移），但是此时不可使用层；若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位（对自己最近的父级元素）；若指定为fixed时，在IE7与FF中DIV的位置相对于屏屏固定不变，IE6中没有效果（不知为什么）。 </p><p style="text-indent: 2em;";>6、font:指定DIV中文本的样式，其后可跟文本的多个样式。font-family:设置要用的字体名称；font-weight:指定文本的粗细,其值有bold bolder lighter等；font-size:指定文本的大小；font-style:指定文本样式，其值有italic </p><p style="text-indent: 2em;";>normal oblique等；color:指定文本颜色；text-align:指定文本水平对齐方式，其值有center(居中) left right justify；text-decorator:用于文本的修饰；其值有none underline o</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>verline line-through和blink的组合；text-indent:设置文本的缩进；text-transform:设置文本的字母大小写。其值有lowercase uppercase capitalize(首字母大写) none；direction:内容的流向。其值有ltr(从左至右)、rtl(从右至左)；line-height:指定文本的行高；Word-spacing:字间距。 </p><p style="text-indent: 2em;";>7、overflow:内容溢出控制，其值有scroll(始终显示滚动条)、visible(不显示滚动条，但超出部分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>三、一些特殊效果： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>1、z-index:设置DIV的层叠顺序。用z-index属性时，position必需要指定为absolute才行。 </p><p style="text-indent: 2em;";>2、cursor:设置DIV上光标的样式。 </p><p style="text-indent: 2em;";>3、clip:设置剪辑矩形。clip:rect(top right </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>bottom left);设置上下左右的距离,但此时要把position指定为absolute。 </p><p style="text-indent: 2em;";>4、opacity 透明eg度 </p><p style="text-indent: 2em;";>：filter:alpha(opacity=value) </p><p style="text-indent: 2em;";>filter:alpha(opacity=50);opacity:0.5; </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>四、定位和控制 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>绝对定位和相对定位 （position） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>绝对定位： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>定位属性将是网虫们打开幸福之门的钥匙： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>H4 { position: absolute; left: 100px; top: </p><p style="text-indent: 2em;";>43px } </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>相对定位： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>I { position: relative; left: 40px; top: </p><p style="text-indent: 2em;";>10px } </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>定位单元的控制 （width、height、visiblility） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>DIV { position: absolute; left: 200px; top: </p><p style="text-indent: 2em;";>40px; width: 150px } </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>DIV { position: absolute; left: 200px; top: </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>40px; height: 150px } </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这里我用了“理论上讲”，因为有些浏览器不支持高度属性。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>H4 { visibility: hidden } </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>选项： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>visible 使要素可以被看见 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>hidden 使要素被隐藏 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>inherit 指它将继承母体要素的可视性设置。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。此新闻 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>单元层次 （z-index） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 </p><p style="text-indent: 2em;";>-2 的单元的上面）。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图象设定z-index。（对于Communicator，最好将 <IMG>标签包在<SPAN>或 </p><p style="text-indent: 2em;";><DIV>标签内，然后将z-index应用到<SPAN>或 </p><p style="text-indent: 2em;";><DIV>。） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>剪辑绝对定位单元 （clip） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape </p><p style="text-indent: 2em;";>Communivator 4 和 Internet Explorer 4 </p><p style="text-indent: 2em;";>都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>clip : rect(top,,left) ; </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 </p><p style="text-indent: 2em;";>auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>控制单元溢出 （overflow） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>固定绝对或相对定位单元的 width 和 </p><p style="text-indent: 2em;";>height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值 none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip </p><p style="text-indent: 2em;";>要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 </p><p style="text-indent: 2em;";>scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>div所有属性/DIV各种属性解释 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>div的属性 </p><p style="text-indent: 2em;";>2007-11-22 11:27 </p><p style="text-indent: 2em;";>主要设置如下： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>overflow（溢出控制）：visible（默认，可见）auto（自动）、scroll（显示滚动条）； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>width（宽度）：数值； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>height（高度）：数值； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>color（字体颜色）：色彩代码； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>font-size（字体大小）：数值； </p><p style="text-indent: 2em;";>、</p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>line-height（行高）：数值； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> border（边框）：宽度、类型和颜色，类型主要支持以下几种： none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> font-weight（字体粗细）：normal、bold、bolder、lighter； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> background（背景颜色）：色彩代码； </p><p style="text-indent: 2em;";>scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadowcolor,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar </p><p style="text-indent: 2em;";>-3dlight-color,scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>HTML中的Div分区属性基本属性：width, height, </p><p style="text-indent: 2em;";>left, top, background-color（当设置为transparent时表示透明） </p><p style="text-indent: 2em;";>2、定位属性：position: absolute/relative absolute时，位置固定；relative时，位置会随着内容的实际情况进行浮动 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>3、显示属性：display: block/none block为默认状态，表示显示；none为隐藏 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>4、优先属性：z-index:n </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> n表示一个整数（正负均可），有多个Div时n越大，则越靠前显示； </p><p style="text-indent: 2em;";>z-index可以理解为z轴的坐标（x,y轴控制左右、上下方位，z轴控制层叠div的前后方位） 只有用绝对定位（position:absolute）时，属性z-index才起作用； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>未设置绝对定位（position:absolute）的div，其z-index永远为0； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>未设定优先属性（z-index）的div，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个Div属于父子关系，则子div覆盖父div； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>5、透明属性：opacity:0.3;（firefox专用）；filter:alpha(opacity=30)（IE专用） </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>两者一起用的时候就将两种主流浏览器都兼容了；上面例子是将Div的透明度设置为30％，可以看出两者的设置稍有不同；Div的文本与背景色均能被透明化！ </p><p><p><h2></h2></p></img></p></div></article></div><div class="fzithome-com info"><div><span>本文发布于:2024-03-07，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="https://www.fzithome.com/xitong/1709756032a298806.html" title="DIV布局">https://www.fzithome.com/xitong/1709756032a298806.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/2359.html" target="_blank">单元</a><a href="/tag/1260.html" target="_blank">定位</a><a href="/tag/133.html" target="_blank">设置</a><a href="/tag/197.html" target="_blank">显示</a><a href="/tag/211.html" target="_blank">属性</a></span></div><div class="fzithome-com post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/298806.html?safe_token=OCeQmHqt2bqkgt6Gs_2F6Q4ewlob7pja5PyXYwVDhT2HzFBbG_2B37qsf7kWtATC5tqLd2GqUNVNYuViC3wq9Rg_2FuA_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="fzithome-com tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">