div内的属性总结

1、style 设置css样式(扩展了解style标签)
2、align 设置div盒子内的内容居中、居左、居右
3、id 引人外部对应#(井号)选择符号样式
4、class 引人外部对应.(句号)选择符号样式
5、title 设置div(标题)鼠标经过时显示文字(扩展了解 title标签)

color:#F00; //字体颜色
font-size:18px//字体大小n
align:left/center/right //作用是让对象内的内容居左、居中、居右效果
font-weight:bold //字段粗细 normal/bold/50
title: //鼠标悬停显示

DIVCSS5内容

一、常用属性

1、Height:设置DIV的高度;Width:设置DIV的宽度。

2、margin:用于设置DIV的外延边距,也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;margin: [top][right][bottom][left]

可以分别设置:margin-left:到父容器左边框的距离;margin-right:到父容器右边框的距离;margin-top: 到父容器上边框的距离;margin-bottom:到父容器下边框的距离。

3、padding:用于设置DIV的内边距(内如子元素与DIV边界的距离)。padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;margin: [top][right][bottom][left]:需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中),比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。

4、border:设置DIV的边框样式;display:设置显示属性。其值有block、none;float:设置DIV在页面上的流向,其值有left(靠左显示)、right(靠右显示)、none;

background:设置DIV的背景样式;background后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。

background-image:指定使有的背景图片;background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺); background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标指定具体的位置。

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中没有效果(不知为什么)。

6、font:指定DIV中文本的样式,其后可跟文本的多个样式。font-family:设置要用的字体名称;font-weight:指定文本的粗细,其值有bold bolder lighter等;font-size:指定文本的大小;font-style:指定文本样式,其值有italic normal oblique等;color:指定文本颜色;text-align:指定文本水平对齐方式,其值有center(居中) left right justify;text-decorator:用于文本的修饰;其值有none underline overline line-through和blink的组合;text-indent:设置文本的缩进;text-transform:设置文本的字母大小写。其值有lowercase uppercase capitalize(首字母大写) none;direction:内容的流向。其值有ltr(从左至右)、rtl(从右至左);line-height:指定文本的行高;Word-spacing:字间距。

7、overflow:内容溢出控制,其值有scroll(始终显示滚动条)、visible(不显示滚动条,但超出部分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。

二、一些特殊效果:

1、z-index:设置DIV的层叠顺序。用z-index属性时,position必需要指定为absolute才行。

2、cursor:设置DIV上光标的样式。

3、clip:设置剪辑矩形。clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。

4、opacity 透明度 filter:alpha(opacity=value) eg:filter:alpha(opacity=50);opacity:0.5;

转自:http://www.cnblogs.com/crazylight/archive/2012/05/13/2498120.html

<think>嗯,用户想了解HTML中div标签的id和class属性的作用及用法。首先,我需要回忆一下相关的HTML知识。根据引用中的内容,div标签是块级元素,常用于布局,而id和class属性用于标识和样式化这些元素。 首先,id属性是唯一的,每个页面中只能有一个唯一的id值,而class可以被多个元素共享。比如引用1提到div id和class最常见,用于逻辑区块。引用3也强调id用于特定单独元素,class用于元素组。这可能意味着id更适合唯一的元素,如页眉、页脚,而class适用于多个需要相同样式的元素。 接下来,id的用法。用户可能想知道如何在HTML中定义id,然后在CSS中使用#符号来引用,比如#header。而class则用点号,比如.t1,像引用2中的例子,通过class应用多个样式属性。同时,JavaScript操作元素时常用id,因为getElementById方便,而class则用getElementsByClassName。 还需要注意,同一个元素可以同时有id和class,但通常只用一个。引用3提到这点,可能用户会混淆两者的使用场景,需要明确区分。比如,结构上唯一的元素用id,重复样式用class。 另外,div的布局功能。引用4说明div嵌套使用来构建网页布局,结合CSS设置宽高、背景等。用户可能想知道如何在实际布局中结合id和class来管理样式和结构。 最后,可能需要总结两者的主要区别:唯一性、CSS选择器符号、JavaScript操作方式,以及应用场景的不同。确保用户理解何时该用id,何时该用class,避免误用导致的样式冲突或脚本错误。</think>### HTML中div标签的id和class属性详解 #### 一、核心作用 1. **id属性** - **唯一标识**:每个页面中`id`值必须唯一,用于标识特定元素(如导航栏、页脚)[^3][^4]。 - **功能关联**:常用于JavaScript操作或锚点跳转(例如`document.getElementById("header")`)。 - **CSS定位**:通过`#id`选择器定义样式,如: ```css #sidebar { width: 200px; background: #f0f0f0; } ``` 2. **class属性** - **样式分组**:允许多个元素共享相同样式(如按钮组、表格单元格)[^2][^3]。 - **复用特性**:同一元素可绑定多个class(`class="btn btn-primary"`)。 - **CSS定义**:通过`.class`选择器定义样式,如: ```css .highlight { color: red; font-weight: bold; } ``` #### 二、关键区别 | 特性 | id属性 | class属性 | |-------------|---------------------------|---------------------------| | 唯一性 | 全页面唯一 | 可重复使用 | | CSS选择器 | `#`符号(如`#main`) | `.`符号(如`.container`) | | JavaScript | `getElementById()` | `getElementsByClassName()`| | 应用场景 | 结构标识/脚本操作 | 样式复用/批量控制 | #### 三、代码示例 ```html <!-- id用于唯一区块 --> <div id="header"> <h1>网站标题</h1> </div> <!-- class用于样式复用 --> <div class="card"> <p>卡片内容1</p> </div> <div class="card"> <p>卡片内容2</p> </div> <style> #header { background: #333; padding: 20px; } .card { border: 1px solid #ccc; margin: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } </style> ``` #### 四、使用建议 1. **优先使用class**:当需要样式复用时选择class[^3] 2. **谨慎使用id**:仅在需要唯一标识或脚本操作时使用 3. **组合应用**:可同时使用id和class(如`<div id="main" class="content-box">`)[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值