3、">
当前位置：文档之家 › Div style常用属性

Div style常用属性

  • 格式：docx
  • 大小：39.51 KB
  • 文档页数：13

一、常用属性：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的内边距。

例：1 <div style="padding:5px 10px 20px 30px;background-color:Black;width:500px;h eight: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:150px;bac kground-color:Black;">23 <div style="width:140px; height:140px;background-color:White;">45 </div>67 </div>813、position:设置DIV的定位方式。

例：1 <div style="width:200px; height:200px;background-color:Black;">23 <div style="position:relative; top:10px;left:10px; width:140px; height: 140px;45 background-color:White;">67 </div>89 <div style="position:absolute; top:60px;left:60px; background-color:Si lver;1011 width:100px;height:100px;">1213 </div>1415 <div style="position:fixed; top:210px;left:210px; background-color:Nav y;1617 width:100px;height:100px;">1819 </div>2021 </div>2223 <div style="position:absolute; top:50px;left:50px; background-color:Blue; 2425 width:100px;height:100px;">2627 </div>2829 <div style="position:fixed; top:200px;left:200px; background-color:Navy; 3031 width:100px;height:100px;">3233 </div>3435 <div style="position:static; top:200px;left:100px; background-color:Yello w;3637 width:100px;height:100px;">3839 </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的层叠顺序。

例：1 <div style="position:absolute; top:50px;left:50px; width:100px; height:100 px;background-color:black;">23 </div>45 <div style="position:absolute; top:60px;left:60px; width:100px; height:100 px;67 background-color:Blue;z-index:1;">89 </div>1011 <div style="position:absolute; top:70px;left:70px; background-color:Silver; width:100px;height:100px;">1213 </div>14说明：上例效果中如果不设z-index属性蓝色DIV应该在中间，而现在的效果蓝色在最上面了。

还要说明的是用z-index属性时，position必需要指定为absolute才行。

19、font:指定DIV中文本的样式，其后可跟文本的多个样式。

例：1 <div style=" font:bold 14px 宋体;background-color:Yellow">2 明月几时有？把酒问青天。

不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？转朱阁，低绮户，照无眠。

不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。

但愿人长久，千里共蝉娟3 </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。

例：1 <div style="text-align:left; text-decoration:line-through blink; text-inde nt:30px;23 text-transform:capitalize;color:Blue; font:bold italic 14px 宋体; backgrou nd-color:Yellow">45明月几时有？把酒问青天。

合集下载

CSS中样式display属性inline，block及inline-block

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 描述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函数含义

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函数可以根据需求进行定制，满足不同场景的需求。

Css div 常用CSS标签及属性

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 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。