html+css基础教程入门学习之DIV常用属性大全自己整理

text-decoration:underline 加底线

text-decoration:none ?h除连接底线

text-transform : capitalize 首字大写

text-transform : uppercase 英文大写

text-transform : lowercase 英文写

text-align:right 文字*右对齐

text-align:left 文字*左对齐

text-align:center 文字置中对齐

这些是一些简单的文字效果，可以应用到css的页面中。

背景

background-color:black 背景颜色

background-image : url(image/bg.gif) 背景图片

background-attachment : fixed 固定背景

background-repeat : repeat 重复排列-网页预设

background-repeat : no-repeat 不重复排列

background-repeat : repeat-x 在x轴重复排列

background-repeat : repeat-y 在y轴重复排列

background-position : 90% 90% 背景图片x与y轴的位置

链接

A 所有超连接

A:link 超连接文字格式

A:visited 浏览过的连接文字格式

A:active 按下连接的格式

A:hover 鼠标移至连接

边框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四边框

虚线

  实线    设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.  **二、常用属性**  复制代码 代码如下: 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-color:设置背景颜色；background-attachment:背景图像的附加方式，其值有scroll、fixed; 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;  **四、定位和控制**  **绝对定位和相对定位 （position）**  绝对定位：  定位属性将是网虫们打开幸福之门的钥匙：  H4 { position: absolute; left: 100px; top: 43px }  这项CSS规则让浏览器将

的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。  左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。  你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。  相对定位：  绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：  I { position: relative; left: 40px; top: 10px }  相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。  除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。  **定位单元的控制 （width、height、visiblility）**  除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。  宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。  ### 最后 面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。 **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**     /bbs.csdn.net/topics/618166371)** [外链图片转存中...(img-yMKNHLfc-1714287749734)] [外链图片转存中...(img-lEM4lowU-1714287749735)] [外链图片转存中...(img-Q3JtM9st-1714287749735)] [外链图片转存中...(img-F6YOd1EF-1714287749736)]