- 浏览: 267381 次
- 性别:
- 来自: 天津
文章分类
最新评论
-
1260533105:
uncaught invalidstateerror:Fail ...
WebSocket -
sh747665463:
压力好大啊
【转】如果你不知道接下去学什么,就看这个
DIV 全部属性【DIV】
CSS属性:
3、布局(Layout)属性:
在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3C在CSS提出了类似于Layer标记的功能。
position属性:
position属性用来决定元素的位置类型,详见属性:
属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表:
absolute:屏幕上的绝对位置。
relative:屏幕上的相对位置。
static:固有位置。
direction属性:
direction属性决定BOX的排列方向,详见属性:
属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
float和clear属性:
在HTML中图片可以选择飘浮的位置,现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性,BOX将飘浮在其他元素的左或右方:
属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
例如:
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>
相反的,使用clear属性将禁止元素在BOX的左方或右方飘浮:
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
绝对位置属性:
绝对位置属性有四个属性:top、right、bottom和left,属性值为长度单位或百分数:
属性名称: 'top'、'right'、'bottom'、'left'
属性值: <length>|<percentage>|auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
利用以上属性,用户就可以精确定义元素的位置,如:
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>
z-index属性:
在CSS中允许元素的重叠显示,这样就有一个显示顺序的问题,z-index属性描述了元素的前后位置,如果把电脑屏幕看作X-Y平面的话,那么Z轴就是垂直于屏幕的,z-index使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且CSS同意在z-index中使用负数。
属性名称: 'z-index'
属性值: auto|<integer>
初始值: auto
适合对象: 使用position属性的元素
是否继承: no
百分比备注: 被禁止
width属性:
规定BOX的width属性,可以使BOX的宽度不依靠它所包含的内容的多少:
属性名称: 'width'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的width而定
在CSS中还提供了min-width和max-width属性,使得BOX的宽度在最小宽度和最大宽度之间。
属性名称: 'min-width'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定
属性名称: 'max-width'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定
height属性:
相同的BOX还有height属性来控制本身的高度:
属性名称: 'height'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的height而定
在CSS中还提供了min-height和max-height属性,使得BOX的高度在最小高度和最大高度之间。
属性名称: 'min-height'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定
属性名称: 'max-height'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定
overflow属性:
在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到overflow属性:
属性名称: 'overflow'
属性值: visible | hidden | scroll | auto
初始值: visible
适合对象: 元素的position属性
是否继承: no
百分比备注: 被禁止
属性值含义如下:
visible:扩大面积以显示所有内容。
hidden:隐藏超出范围的内容。
scroll:在元素的右边显示一个滚动条。
auto:当内容超出元素面积时,显示滚动条。
clip属性:
CSS还提供了一种clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种:
属性名称: 'clip'
属性值: <shape> | auto
初始值: auto
适合元素: 元素的position属性被设为absolute
是否继承: no
百分比备注: 被禁止
<shape>值为rect(top right bottom left)。
line-height和vertical-align属性:
line-height属性可以规定元素内部的行间距,使用长度单位或百分数:
属性名称: 'line-height'
属性值: normal | <number> | <length> | <percentage>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注:根据元素的字体大小而定
例如下面的例子,虽然表达方式不同,但结果一样:
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
vertical-align属性决定元素在垂直位置的显示:
属性名称: 'vertical-align'
属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
初始值: baseline
适合对象: inline elements
适合继承: no
百分比备注: 根据元素的line-height属性而定
属性值含义如下:
baseline:与元素的基线对齐。
middle:与元素中部对齐。
sub:字下沉。
super:字上升。
text-top:文本顶部对齐。
text-bottom:文本底部对齐。
Top:和本行位置最高元素对齐。
Bottom:和本行位置最低元素对齐。
Visibility属性:
该属性用于控制元素的显示或隐藏:
属性名称: 'visibility'
属性值: inherit | visible | hidden
初始值: inherit
适合对象: 所有元素
是否继承: 如果该值为inherit,则继承父元素属性
百分比备注: 被禁止
发表评论
-
protobuf c++
2018-09-23 20:16 669./protoc --cpp_out=./ people. ... -
转:zookeeper环境搭建
2017-10-29 15:42 465说到分布式开发 ... -
http协议详解
2016-09-11 20:32 444HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的 ... -
巴科斯范式
2016-08-28 15:35 445α→β表示为α∷=β * 非终结符用“<”和“> ... -
简单工厂,工厂方法,抽象工厂
2016-08-27 17:09 496工厂方法模式提供的是对一个产品的等级模式,,而抽象工厂方法提供 ... -
git ,hg,svn等代理
2016-08-10 15:53 6581,CVS CVS使用代理非常 ... -
转:hive分区表
2016-04-29 19:01 510所介绍内容基本上是翻译官方文档,比较肤浅,如有错误,请指正!h ... -
mac/linux Vim 默认显示行号,开启语法高亮
2016-03-21 18:02 1149mac/linux中vim永久显示行号、开启语法高亮 ... -
转:tcp 建立连接和断开连接及中间状态
2012-07-03 16:41 13311、建立连接协议(三次 ... -
Memcached 相关收藏
2012-03-09 22:17 9721.memcahed官方网 http://www.dan ... -
Smooth Gestures 好用的插件
2012-02-01 12:46 935Smooth Gestures 这个插件好用。 -
工作分解结构(WBS)标准
2011-08-16 11:41 1610工作分解结构(WorkBreakdow ... -
邮件头信息
2011-05-05 22:04 1060邮件头信息提供了详 ... -
双绞线 线序
2011-05-04 13:46 1046普通的网线分为两种,一种是机对机,一种是机对集线器,既一种是同 ... -
div例子
2011-02-25 16:44 850附件 -
flex4
2011-01-18 22:22 895在C:\WINDOWS\system32\driver ... -
SSL VPN技术规范笔记
2010-12-16 14:26 543一下是最近读SSL VPN技术 ... -
加密算法类型
2010-12-15 17:51 1503加密算法类型 2010-12-09 1 ...
相关推荐
以下是一些主要的Div属性及其详细说明: 1. accessKey:设置或获取对象的快捷键,使得用户可以通过键盘快速激活Div元素。 2. align:设置或获取Div元素的对齐方式,可以是"left", "right", "center", "justify"等...
DIV 的 Style 常用属性 在网页设计中, DIV 是一个非常重要的元素,它可以用来布局网页的结构。 Style 属性是 DIV 的一个重要属性,它可以用来设置 DIV 的样式和布局。下面我们将介绍 DIV 的 Style 属性中一些常用...
在探讨“div所有属性介绍和各种用法”这一主题时,我们不仅会深入解析div元素的基本属性,还将拓展到CSS中与div相关的样式属性,这些属性使得div成为了网页布局和设计中的核心元素之一。 ### div的基本概念 div是...
"table转div工具"就是为了帮助开发者将原有的基于table的布局转换成更现代、更优化的div+CSS布局。 首先,我们需要理解table和div之间的主要差异。Table元素主要用于显示结构化数据,如表格或矩阵。它的布局是固定...
在CSS中,我们可以为Div设置样式,包括高度(height)、宽度(width)和其他属性,以控制其显示效果。 1. **高度自适应(Height Auto Adjustment)**: - `auto`值:在CSS中,将Div的高度设置为`auto`可以使它根据...
4. **处理定位**:对于需要绝对或相对定位的部分,软件会应用相应的`position`属性,确保元素位置正确。 5. **优化代码**:最后,软件可能会对生成的`div+CSS`代码进行一些优化,如减少冗余、提高可读性等。 在实际...
### div的position属性详解 #### 一、流动模型(块元素与内联元素) 流动模型是CSS布局的基础,指的是在没有特别指定定位方式的情况下,元素按照文档流的自然顺序排列。 - **块元素**:默认情况下,每个块元素...
达内php培训:div页面布局中常用的属性使用示例 详尽的解说,简单易懂,对于初学者,很有帮助。
3. 应用样式:根据表格的原有样式,将边框、填充、对齐等属性转换为CSS样式,并添加到对应的Div中。 4. 重新组织内容:将表格中的文本和图像等内容复制到新的Div中。 5. 输出新代码:生成新的HTML代码,其中表格已被...
在本教程中,我们将学习如何创建和定位DIV,以及如何使用Float属性让多个DIV并排显示。例如,通过设置`float:left`或`float:right`,可以实现左右排列的布局。同时,使用CSS的`margin: 0 auto`可以实现DIV的水平居中...
《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》案例设计精美、内容丰富、文字简洁、代码清晰,可以帮助读者在不知不觉中,掌握CSS网页布局精华,融会贯通HTML标签与CSS属性的应用。《变幻之美:Div+CSS网页布局揭秘...
这个任务的标题"div内容转成图片格式"以及描述"可以将div里面的内容转换为图片,并且保存下载到本地"都指向了一个基于HTML5的解决方案。标签"div 图片 转换 canvas html5"进一步明确了我们是通过`canvas`来实现这一...
标题"table转div、table转css"所指的就是这一过程,即利用特定工具将原本用表格布局的内容转化为更灵活的div+CSS布局。这种转换可以提高页面加载速度,提升用户体验,并更好地适应不同设备的显示需求。 描述中提到...
### Div+Css常用属性详解 #### 一、概述 在网页设计中,`Div+Css`是一种非常重要的布局方式,它能够帮助我们更加灵活地控制网页元素的位置、大小及样式等。通过合理运用`Div+Css`,可以实现美观且响应式的网页布局...
本篇文章详细介绍了 DIV 滚动条的样式设置,包括如何实现 DIV 滚动条、DIV 滚动条的样式设置和滚动条颜色属性。通过设置 `overflow` 属性和滚动条颜色属性,可以实现 DIV 元素的滚动条样式设置。
在CSS3中,我们可以使用`<div>`标记的`id`和`class`属性来应用样式。`id`是唯一的,用于标识页面上的一个特定元素,而`class`则可以被多个元素共享,用于定义一类元素的共同样式。例如,可以这样设置样式: 1. 通过...
本文将详细探讨如何通过CSS属性实现这一目标,确保外部`<div>`的宽度不会被内部`<div>`撑开。 ### CSS中的`overflow`属性 在HTML文档中,当内部元素的尺寸超过其父级元素的尺寸时,默认情况下,父级元素会自动调整...
如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div <div di=dction_1> 这里是被跳转的区域 </div> 第二个,使用jquery添加或者移除class属性 也很简单,使用...
首先,要创建一个 `div` 自动旋转的效果,我们需要借助 CSS3 的 `transform` 属性。`transform` 可以对元素进行多种变换,如旋转、缩放、平移等。对于旋转效果,我们使用 `rotate()` 函数,语法如下: ```css div {...