div style常用属性
CSS中样式display属性inline，block及inline-block
CSS中样式display属性inline，block及inline-block分类：div 元素默认display属性为block 为块状元素，⽆论div中⽂字字数，总以块状显⽰，即占满浏览器宽度。
[html]1. <div style="background-color:red;">测试测试</div>[html]1. <div style="display:inline;background-color:red;">sss</div>⽽span元素默认display属性为inline，只占据span中所占字数的宽度。
[html]1. <span style="background-color:red;">测试测试<span>[html]1. <span style="background-color:red;display:block;">测试测试<span>inline-block[html]1. <div style="display:inline-block;background-color:red;width:20px;">sfffs</div>2. <p>3. <span style="display:inline-block;background-color:red;width:20px;">sfffs</span>inline-block 与 inline 的区别默认情况下 inline-block 与inline 效果⼀致但当对div设置width或height时，由于width和height属性只对块状元素即block类型起作⽤，就能看出inline-block与inline 的区别了。
element 描述contentstyle
element 描述contentstyleelement是一款非常出色的前端UI框架，它提供了许多的组件和模板，让开发者可以快速高效地搭建出漂亮、功能强大的Web应用。
其中，element的contentstyle是一个非常重要的概念，它主要用于控制网页中的内容的样式，包括字体、颜色、边框等。
它是一种非常灵活且易于使用的样式控制方式，可以让开发者在不改变网页结构的情况下，轻松地控制网页内容的样式。
在element中，contentstyle主要是通过以下几种方式来实现的：1.在元素内部使用style属性：元素内部可以通过style属性来设置其样式，如下所示：<div style="font-size:16px; color:red;">This is anexample</div>上述代码会在网页中创建一个div元素，并将其字体大小设置为16px，颜色设置为红色。
这种方式非常简单易用，但是不适用于大规模的样式控制，因为需要在每个元素中都手动添加style属性。
2.在CSS文件中使用class或id选择器：在CSS文件中定义class或id选择器，如下所示：.my-class {font-size: 16px;color: red;}#my-id {font-size: 14px;color: blue;}上述代码将创建两个选择器，第一个选择器.my-class将所有具有class属性为my-class的元素样式设置为字体大小为16px，颜色为红色；第二个选择器#my-id将id属性为my-id的元素的样式设置为字体大小为14px，颜色为蓝色。
在HTML文件中，可以通过添加class或id属性来指定元素应用哪个类或id选择器的样式，如下所示：<div class="my-class">This is an example</div><div id="my-id">This is another example</div>这种方式可以应用于大规模的样式控制，但是需要手动编写CSS 文件和HTML文件，并且容易产生选择器重复的问题。
div函数含义
div函数含义摘要：1.简介div函数2.div函数的语法和参数3.div函数的应用场景4.div函数的优缺点5.总结正文：div函数是一种在网页开发中常用的编程语言，主要用于将文本、图片、链接等元素进行分割和组合。
本文将详细介绍div函数的含义、语法、应用场景以及优缺点，帮助读者更好地理解和运用div函数。
一、简介div函数是HTML和CSS中的一个重要概念，它的全称是“文档对象模型”（Document Object Model），简称DOM。
DOM是一种编程接口，允许程序员通过JavaScript操作HTML文档的结构、样式和属性。
在DOM 中，div元素是一个重要的基本单元，可以通过div函数进行创建、修改和删除。
二、div函数的语法和参数div函数的语法如下：```div(configuration)```其中，configuration是一个对象，包含了创建div元素所需的所有属性。
常用的属性包括：1.id：设置div元素的唯一标识符。
2.class：设置div元素的类名，可以用于CSS样式。
3.style：设置div元素的样式，如颜色、字体、大小等。
4.html：设置div元素的HTML内容。
5.append：向div元素添加内容。
6.prepend：在div元素之前添加内容。
7.remove：删除div元素。
三、div函数的应用场景1.布局：使用div函数可以轻松实现网页的布局，如创建栅格系统、响应式设计等。
2.模块化：通过将代码封装成独立的div函数，可以提高代码的可维护性和复用性。
3.内容分割：使用div函数可以将网页内容进行分割，使页面结构更加清晰。
4.动态加载：通过div函数，可以实现网页内容的动态加载和更新。
四、div函数的优缺点优点：1.易于学习和使用：div函数的语法简单，易于上手。
2.强大的布局能力：div函数可以实现各种复杂的网页布局。
3.高度灵活：div函数可以根据需求进行定制，满足不同场景的需求。
Div style常用属性
一、常用属性：1、Height:设置DIV的高度。
2、Width:设置DIV的宽度。
例：<div style="width:200px;height:200px;background-color:Black;"></div>3、margin:用于设置DIV的外延边距，也就是到父容器的距离。
例:1 <div style="background-color:Black;width:500px;height:500px;">23 <div style="margin:5px 10px 20px 30px;width:200px; height:200px;backgro und-color:White;">45 </div>67 </div>说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。
还可以分别设置这四个边的距离，用到的属性如下：4、margin-left:到父容器左边框的距离。
5、margin-right:到父容器右边框的距离。
6、margin-top: 到父容器上边框的距离。
7、margin-bottom:到父容器下边框的距离。
例：1 <div style="width:500px;height:500px;background-color:Black;">23 <div style="margin-left:50px; margin-top:50px; width:200px; height:20 0px;45 background- color:White;">67 </div>89 </div>108、padding:用于设置DIV的内边距。
Css div 常用CSS标签及属性
Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位：几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位：较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值，较难求得，一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别，不可继承none(设定为不显示在屏幕上)block(块级元，包括 P,H1-H6,list,div,body)inline(内联元，包括 a,em,span)list-item(列表元，如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色，格式同上；不可继承，可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片，默认为none，不可继承，可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列，不可继承，用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列，默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动，不可继承，用于所有元scroll(随网页卷动，默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置，不可继承，用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性，不要求顺序，各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。
html中div 和 表单的简单运用
html中div 和表单的简单运用在HTML中，<div>和<form>是两个常用的元素，它们各自有着特定的用途。
<div>元素：<div>元素是一个块级元素，通常用于对其他元素进行分组或布局。
它本身并不代表任何特殊的语义，但其样式和布局可以通过CSS 来定义和调整。
例如，你可以使用CSS为<div>设置背景色、边框、宽度和高度等属性。
下面是一个简单的例子：html复制代码<div style="background-color: lightblue; width: 200px; height: 200px;">这是一个div元素。
</div><form>元素：<form>元素用于创建一个HTML表单，用户可以在其中输入数据，例如文本、复选框、单选按钮、提交按钮等。
这些数据可以发送到服务器进行处理。
下面是一个简单的表单例子：html复制代码<form action="/submit" method="post">姓名：<input type="text" name="name"><br>邮箱：<input type="email"name="email"><br><input type="submit" value="提交"></form>在这个例子中，当用户填写完姓名和邮箱并点击“提交”按钮后，表单数据将被发送到服务器的"/submit"路径，处理方法为POST。
结合使用<div>和<form>：你还可以将<div>元素与<form>元素结合使用，以实现更复杂的布局和样式。
div属性
字体属性（Font）font-family 使用什么字体所有的字体font-style 字体是否斜体 Normal、italic、obliquefont-variant 是否用小体大写 Normal、small-capsfont-weight 字体的粗细 Normal、bold、bolder、lithter等font-size 字体的大小 Absolute-size、relative-size、length、percentage等颜色和背景属性Color 定义前景色颜色Background-color 定义背景色颜色Background-image 定义背景图案路径Background-repeat 重复方式 Repeat-x、repeat-y、no-repeatBackground-attachment 设置滚动 Scroll、FixedBackground-position 初始位置 Percentage、length、top、left、right、bottom等文本属性Word-spacing 单词之间的间距 Normal <length>Letter-spacing 字母之间的间距 Normal <length>Text-decoration 文字的装饰样式None|underline|overline|line-through|blinkVertical-align 垂直方向的位置Baseline|sub|super|top|text-top|middle|bottom|text-bottom Text-transform 文本转换 Capitalize|uppercase|lowercase|noneText-align 对齐方式 Left|right|center|justifyText-indent 首行的缩进方式 <length>|<percentage>Line-height 文本的行高 Normal|<number>|<length>|<percentage> 边距属性Margin-top 顶端边距 Length|percentage|autoMargin-right 右侧边距 Length|percentage|autoMargin-bottom 底端边距 Length|percentage|autoMargin-left 左侧边距 Length|percentage|auto填充距属性Padding-top 顶端填充距 Length|percentagePadding-right 右侧填充距 Length|percentagePadding-bottom 底端填充距 Length|percentagePadding-left 左侧填充距 Length|percentage边框属性Border-top-width 顶端边框宽度 Thin|medium|thick|length Border-right-width 右侧边框宽度 Thin|medium|thick|length Border-bottom-width 底端边框宽度 Thin|medium|thick|length Border-left-width 左侧边框宽度 Thin|medium|thick|length Border-width 一次定义宽度 Thin|medium|thick|lengthBorder-color 设置边框颜色 ColorBorder-style 设置边框样式 None|dotted|dash|solid等Border-top 一次定义顶端 Border-top-width|color等Border-right 一次定义右侧 Border-top-width|color等Border-bottom 一次定义底端 Border-top-width|color等Border-left 一次定义左侧 Border-top-width|color等Width 定义宽度属性 Length|percentage|autoHeight 定义高度属性 Length|autoFloat 文字环绕 Left|right|noneClear 哪一边环绕 Left|right|none|both分级属性Display 定义是否显示 Block、inline、list-item、none White-space 怎样处理空白 Normal、pre、nowrapList-style-type 加项目编号 Disc、circle、square等List-style-image 加图案 <url>|noneList-style-position 第二行起始位置 Inside、outside List-style 一次定义列表 <keyword>|<position>|<url> 鼠标 ( Cursor ) 属性Auto 自动Crosshair 定位“十”字Default 默认指针Hand 手形Move 移动e-resize 箭头朝右方Ne-resize 箭头朝右上方Nw-resize 箭头朝左上方n-resize 箭头朝上方Se-resize 箭头朝右下方Sw-resize 箭头朝左下方s-resize 箭头朝下方w-resize 箭头朝左方Text 文本“I”形Wait 等待Help 帮助。
div 文本垂直居中
div 文本垂直居中div 文本垂直居中：1、vertical-align属性让文字居中vertical-align值有很多，常用的就是middle，bottom，text-bottom等，然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。
那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。
示例：<divstyle="vertical-align:middle;display:table-cell;"><imgsrc="02.jpg"alt=""><p>文本居中</p></div>2、利用行高（line-height）让文字垂直居中如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可。
示例：p{height:30px;line-height:30px;width:100px;overflow:hidden;}3、利用内边距（padding）让文字垂直居中使用内边距让文字垂直居中和利用行高让文字垂直居中差不多，同样适合一行或几行文字垂直居中。
示例：p{padding:20px0;}4、利用CSS3的transform来实现文字垂直居中示例：.center-vertical{position:relative;top:50%;transform:translateY(-50%);}.center-horizontal{position:relative;left:50%;transform:translateX(-50%);}5、利用flex布局实现文字垂直居中示例：.flex{/*flex布局*/display:flex;/*实现垂直居中*/align-items:center;/*实现水平居中*/justify-content:center;text-align:justify;width:200px;height:200px;background:#000;margin:0auto; color:#fff;}。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
div style常用属性一、常用属性：1、Height:设置DIV的高度。
2、Width:设置DIV的宽度。
例：<div style="width:200px;height:200px;background-color:Black;"></div>复制代码3、margin:用于设置DIV的外延边距，也就是到父容器的距离。
例：1<div style="background-color:Black;width:500px;height:500px;">23<div style="margin:5px10px20px30px;width:200px;height:200px;backgr ound-color:White;">45</div>67</div>复制代码说明：margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；可以看例子中的白色DIV到黑色DIV的边距离效果。
还可以分别设置这四个边的距离，用到的属性如下：4、margin-left:到父容器左边框的距离。
5、margin-right:到父容器右边框的距离。
6、margin-top:到父容器上边框的距离。
7、margin-bottom:到父容器下边框的距离。
例：代码8、padding:用于设置DIV的内边距。
例：1<div style="padding:5px10px20px30px;background-color:Black;width:500px;height:500px;">23<div style="width:200px;height:200px;background-color:White;"></div>45</div>6复制代码说明：padding的格式和margin的格式一样，可以对照学习。
可以看黑色DIV与白色DIV的边距来体会此属性的效果。
这是还需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中)，比如一个DIV的width设置了100px,而padding-left 设置了50px,那么这个DIV在页面上显示的将是150px宽。
也可以用以下四个属性来分别设置DIV的内边距：9、padding-left:左内边距。
10、padding-right:右内边距。
11、padding-top;上内边距。
12、padding-bottom:下内边距。
例：1<div style="padding-left:50px;padding-top:50px;width:150px;height:150 px;background-color:Black;">23<div style="width:140px;height:140px;background-color:White;">45</div>67</div>8复制代码13、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中没有效果(期待高手指点原因)；14、left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。
15、top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。
16、right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。
17、bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。
18、z-index:设置DIV的层叠顺序。
例：代码说明：上例效果中如果不设z-index属性蓝色DIV应该在中间，而现在的效果蓝色在最上面了。
还要说明的是用z-index属性时，position必需要指定为absolute才行。
19、font:指定DIV中文本的样式，其后可跟文本的多个样式。
例：<div style="font:bold14px宋体;background-color:Yellow">明月几时有？把酒问青天。
不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。
不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共蝉娟。
</div>说明：font后可以跟文本样式的多个属性，如字体粗细、字体大小、何种字体等等。
还可以用以下几个属性分别加以设置：20、font-family:设置要用的字体名称；21、font-weight:指定文本的粗细,其值有bold bolder lighter等。
22、font-size:指定文本的大小。
23、font-style:指定文本样式，其值有italic normal oblique等。
24、color:指定文本颜色。
25、text-align:指定文本水平对齐方式，其值有center(居中)left right justify。
26、text-decorator:用于文本的修饰。
其值有none underline overline line-through和blink的组合。
(在IE中无闪烁效果，FF中有效果。
期待高手指点，)27、text-indent:设置文本的缩进。
28、text-transform:设置文本的字母大小写。
其值有lowercase uppercase capitalize(首字母大写)none。
例：代码29、overflow:内容溢出控制，其值有scroll(始终显示滚动条)、visible(不显示滚动条，但超出部分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。
30、direction:内容的流向。
其值有ltr(从左至右)、rtl(从右至左)。
31、line-height:指定文本的行高。
32、Word-spacing:字间距。
例：代码33、border:设置DIV的边框样式。
例：<div style="border:dotted2px black;background-color:Yellow;width:100p x;height:100px;"></div>复制代码说明：border后跟边框的样式、宽度、颜色等属性。
还可以用以下属性分别设置。
34、border-width:设置边框的宽度。
35、border-color：设置边框的颜色。
36、border-style:设置边框的样式。
例：代码说明：border是对四个边框同时进行设置。
也可以单独对某一边或几个边进行设置，此时用以下属性：border-top:设置上边框样式。
37、border-bottom:设置下边框样式。
38、border-left:设置左边框样式。
39、border-right:设置右边框样式。
说明：某一边框的某一样式也可单独设置，以上边框为例可以用：border-top-style、border-top-width、border-top-color来分别设置，由于使用各border相同，所以不在举例说明。
40、display:设置显示属性。
其值有block、none。
41、float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none。
50、background:设置DIV的背景样式。
例：1<div style="width:600px;height:200px;background:yellow url(mw3.jpg)r epeat scroll;23overflow:auto">45<div style="width:2px;height:1000px;"></div>67</div>复制代码说明：background后可直接跟背景的颜色、背景图片、平铺方式等样式。
也可以用以下属性分别设置。
51、background-color:设置背景颜色。
52、background-attachment:背景图像的附加方式，其值有scroll、fixed。
53、background-image:指定使有的背景图片。
54、background-repeat:背景图象的平铺方式。
其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)。
55、background-position:在DIV中定位背景位置。
其值有top bottom left right的不同组合。
也可以以用坐标指定具体的位置。
例：1<div style="background-color:Yellow;background-image:url(mw3.jpg);ba ckground-position:right bottom;background-attachment:scroll;width:600 px;height:200px;">23</div>4复制代码二、一些特殊效果：1、cursor:设置DIV上光标的样式。
2、clip:设置剪辑矩形。
例：代码说明：clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。
看以上效果。
3、filter:滤镜效果。
例：代码说明：设置透明度:opacity：value(FF专用,value的取值为0至1之间的小数)，filter:alpha(opacity=value)(IE专用，value取值：0至100)。
如果要有JavaScript改变DIV的透明度可用下面的方法：FF中：document.getElementById('tdiv').style.opacity='0.9';IE中：document.getElementById('tdiv').style.filter='alpha(opacity=90)';*以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。