DIV常用属性大全自己整理

DIV概述

DIV是HTML中最基本的结构化标签，用于对HTML页面进行布局。之所以常用是因为DIV可以轻松的实现元素的定位、居中、布局等功能。

DIV常用属性

下面是DIV常用的属性，可以通过设置这些属性来实现元素的布局、样式、动态效果。

布局相关属性

1. width：设置元素的宽度。
2. height：设置元素的高度。
3. margin：设置元素的外边距。
4. padding：设置元素的内边距。
5. position：设置元素的定位方式，包括static(默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。
6. left, top, right, bottom：用于设置元素的位置，仅当设置了position属性为relative、absolute或fixed时才生效。

示例：

<div style="width: 100px; height: 100px; margin: 10px; padding: 5px; position: relative; left: 50px; top: 50px; background-color: red;"></div>

样式相关属性

1. background：用于设置元素的背景颜色或背景图片。
2. color：用于设置元素的文本颜色。
3. font-size：用于设置元素的字体大小。
4. font-weight：用于设置元素的字体粗细。
5. text-align：用于设置元素内文本的水平对齐方式，包括left(左对齐)、center(居中对齐)、right(右对齐)。
6. vertical-align：用于设置元素内文本的垂直对齐方式，包括top(上对齐)、middle(居中对齐)、bottom(下对齐)。

示例：

<div style="width: 100px; height: 100px; margin: 10px; padding: 5px; background-color: blue; color: white; font-size: 20px; font-weight: bold; text-align: center; vertical-align: middle;">Hello World</div>

动态相关属性

1. display：用于设置元素的可见性，包括block(块级元素)、inline(行内元素)、inline-block(行内块级元素)、none(隐藏元素)。
2. visibility：用于设置元素的可见性，包括visible(可见)、hidden(隐藏)。

示例：

<div style="width: 100px; height: 100px; margin: 10px; padding: 5px; background-color: green; display: inline-block;"></div>
<div style="width: 100px; height: 100px; margin: 10px; padding: 5px; background-color: yellow; visibility: hidden;"></div>

总结

DIV是HTML页面布局中不可或缺的元素，掌握常用的属性可以灵活的实现页面布局、样式、动态效果。