DIV常用属性大全自己整理

一、属性列表

 

 代码如下:color : #999999 文字颜色
font-family : 宋体 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜体育
font-variant:small-caps 小字体
letter-spacing : 1pt 文字间距
line-height : 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h除线
text-decoration:overline 加顶线
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的页面中。 
背景
TEXTAREA STYLE="border:1px dashed pink">
实线
<TEXTAREA STYLE="border:1px solid pink">
设置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规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。

左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。

你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

相对定位:

绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例:

I { position: relative; left: 40px; top: 10px }

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间,定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位,则文字的显示位置将恢复正常。使用相对定位时要小心,否则容易将页面弄得非常乱。

除了相对定位和绝对定位,你还可以使用static(静止)参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。也就是说,除了边距特性,或通过使用 float 特性来浮动单元可影响单元的定位外,其它均不可以。

定位单元的控制 (width、height、visiblility)

除了控制定位单元的左上角位置,你还可以控制单元的宽度和高度,及单元在页面的可视性。

宽度:定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制,即设定要素的宽度。

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

浏览器接到这项规则时,它将文字按照规则规定的效果显示,还将段落的最大水平尺寸限制在150象素。

宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位,或使用比例值设定宽度,比例值指相对于母体要素的比例。IE 4中,这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

高度:理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上:

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”,因为有些浏览器不支持高度属性。

可视性:利用CSS,你可以隐藏要素,使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。

H4 { visibility: hidden }

选项:

visible 使要素可以被看见

hidden 使要素被隐藏

inherit 指它将继承母体要素的可视性设置。

值 inherit 为缺省值。这使单元继承父单元的可见性。所以,如果某一段是隐藏的,则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如,段内的 EM 单元被指定为可见,这时如果该段被隐藏,则段内的所有其它内容都将消失,而唯有 EM 单元中的文本是可见的。

当一个要素被隐藏后,它仍然要占据浏览器窗口中的原有空间。所以,如果你将文字包围在一幅被隐藏的图象周围,那么,其显示效果将是文字包围着一块空白区域。此新闻

这条属性在编写语言和使用动态HTML时很有用,比如你可以使某段落或图象只在鼠标滑过时才显示。

单元层次 (z-index)

特性 z-index 用于堆叠屏幕上的单元。缺省情况下,单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说,后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属(sibling)单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案,具有正 z-index 值的单元群都堆叠在父单元之上,它们自己的堆叠顺序则按其取值的大小来决定(值大的单元在上层)。同样,具有负 z-index 值的单元群都堆叠在父单元之下,它们自己的堆叠顺序也按取值的大小来定(值大的单元在上层,例如值为 -1 的单元在值为 -2 的单元的上面)。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图象设定z-index。(对于Communicator,最好将 <IMG>标签包在<SPAN>或 <DIV>标签内,然后将z-index应用到<SPAN>或 <DIV>。)

剪辑绝对定位单元 (clip)

绝对定位单元可以被剪辑——也即剪辑显示给用户的区域,只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面,这并不是一个很有用的特征。但若要求多媒体页面,这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面,它们通过文档的脚本接口动态地调整单元周围的剪辑区,从而实线文本“划入”和图像渐显等显示特征。

在CSS中,剪辑通过 clip 特性来控制,这一特性只能用于绝对定位单元,其缺省值为 auto,按单元的外边缘来剪辑单元(实际上等于没有剪辑)。另外,可通过如下表达式设置剪辑框:

clip : rect(top,right.bottom,left) ;

其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值(但不能为百分比值),或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后,被剪辑单元中的任何内容都不会超出这个区域。

控制单元溢出 (overflow)

固定绝对或相对定位单元的 width 和 height,很可能会因为指定的区域不能满足单元实际内容的需要,而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出:值 none(缺省值)允许浏览器显示溢出的内容,因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容,这样,超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容(同 clip),不过,浏览器应该(如果可能的话)为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容

转载于:https://www.cnblogs.com/weiqingfeng/p/6874334.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET 3.5 - DLINQ(LINQ to SQL)之面向对象的添加、查询、更新和删除

步步为营VS 2008 .NET 3.5(8) - DLINQ(LINQ to SQL)之面向对象的添加、查询、更新和删除作者&#xff1a;webabcd介绍以Northwind为示例数据库&#xff0c;DLINQ(LINQ to SQL)之完全面向对象的添加操作、查询操作、更新操作和删除操作示例Sample.aspx <% Page Language&quo…

ARM处理器的分类

对于ARM处理器而言&#xff0c;其目前有Classic系列、Cortex-M系列、Cortex-R系列、Cortex-A系列和Cortex-A50系列5个大类。 Classic系列 该系列处理器由三个子系列组成&#xff1a; ARM7系列&#xff1a;基于ARMv3或ARMv4架构 ARM9系列&#xff1a;基于ARMv5架构 ARM11系列…

Poj 1019

传送门&#xff1a;http://poj.org/problem?id1019 主要是找数学规律 然后用好pow和log函数&#xff0c;由于数组过大&#xff0c;数组的类型用unsigned 1 #include<iostream>2 #include<cmath>3 using namespace std;4 5 int t;6 int k;7 int n;8 unsigned a[312…

ARM版本系列及家族成员梳理

ARM公司简介 ARM是Advanced RISC Machines的缩写&#xff0c;它是一家微处理器行业的知名企业&#xff0c;该企业设计了大量高性能、廉价、耗能低的RISC &#xff08;精简指令集&#xff09;处理器。 1985年第一个ARM原型在英国剑桥诞生。 公司的特点是只设计芯片&#xff0c…

z-index ie无效

首先来个 解释了三个原因&#xff1a;http://www.cnblogs.com/hakuci/archive/2011/01/05/1926212.html 我这个还比较特殊 爸爸级别在最底层 遮羞层在中间 儿子最外边 <div>遮羞层</div> z-index2 <div>爷爷 <div>小爸爸</div> <div>爸…

数据结构与算法问题 AVL二叉平衡树

AVL树是带有平衡条件的二叉查找树。这个平衡条件必须保持&#xff0c;并且它必须保证树的深度是O&#xff08;logN&#xff09;。 一棵AVL树是其每一个节点的左子树和右子树的高度最多差1的二叉查找树。&#xff08;空树的高度定义为-1&#xff09;。在插入以后。仅仅有那些从插…

tomcat源码阅读之StandardHost和StandardEngine

StandardHost及UML类图&#xff1a; 1、StandardHost类是Host接口的默认实现&#xff1b;其继承自ContainerBase类&#xff0c;说明他也是一个容器类&#xff0c;既然是容器类&#xff0c;那肯定也有管道对象PipeLine和阀门&#xff0c;其基础阀门&#xff08;Basic Valve&…

安防监控产业链全景梳理

安防行业是随着现代社会安全需求应运而生的产业&#xff0c;围绕着视频监控技术的改革创新&#xff0c;行业从“看得见、看得远、看得清到看得懂”&#xff0c;一共经历模拟监控、数字监控、网络高清监控和智能监控4个阶段&#xff0c;每一阶段的突破&#xff0c;都由上游技术的…

Vue项目搭建步骤

一&#xff0e; vue-cli初始化1. 全局安装 vue-cli  npm install --global vue-cli2. 创建一个基于 webpack 模板的新项目  vue init webpack my-project3. 安装依赖  cd my-project  npm install (换源安装: npm install --registry https://registry.npm.taobao.org …

Python tutor 简介

Python tutor 能够直观显示object 引用关系。 网址是 http://www.pythontutor.com/visualize.html 先分享一下我的一个Python tutor&#xff1a; 点我出现神奇&#xff1a; 1&#xff09; 编辑code。 2&#xff09; 运行&#xff0c; 能够看到以下界面。 这个工具是很酷的&…

提高CSS性能

1、选择器 了解CSS的查找匹配原理&#xff0c;让CSS更简洁、高效使用高效率的CSS选择器如何使CSS渲染更高效 总结 不要在ID选择器前使用标签名 一般写法&#xff1a;div#divBox 更好写法&#xff1a;#divBox 解释&#xff1a; 因为ID选择器是唯一的&#xff0c;加上div反而增加…

光学镜头行业发展现状及趋势,智能手机应用领域占比最高

一、光学镜头分类 光学镜头也叫摄像镜头或摄影镜头&#xff0c;简称镜头&#xff0c;其功能就是光学成像。光学镜头是光学成像系统中的必备组件&#xff0c;直接影响到成像质量的好坏&#xff0c;影响算法的实现和效果。从结构来看&#xff0c;光学镜头一般由精密五金、塑胶零…

关于_vmvare workstation装32ubuntu的问题

刚开始启动的时候是黑屏&#xff0c;没有任何反应 1.bios也设置BIOS intel virtual technology 设置了enabled(开启硬件虚拟化:要运行一些操作系统&#xff0c;虚拟化软件和虚拟机&#xff0c;硬件虚拟化就需要启用。大多数情况下&#xff0c;不需要虚拟化技术的操作系统可以正…

window screen (获取屏幕信息)

document.write("屏幕宽度"screen.width);document.write("屏幕高度"screen.height);//&#xff08;整个电脑的屏幕的高&#xff09;上面和下面不是有效区的也被包括了 document.write("可用高度"screen.availHeight)//除了上面的任务栏 其他的全…

360°环视(全景影像)系统发展趋势

360环视系统&#xff0c;系统同时采集车辆四周的影像&#xff0c;经过图像处理单元一系列的智能算法处理&#xff0c;最终形成一幅车辆四周的全景俯视图显示在屏幕上&#xff0c;直观地呈现出车辆所处的位置和周边情况。系统大大地拓展了驾驶员对周围和环境的感知能力&#xff…

python简记

Python新手懵懂区&#xff1a; 1.不可变对象是传值&#xff0c;可变对象是传引用 2.不可变对象被真正复制&#xff0c;而可变对象只是复制了一个对它们的引用 3.*args --> 元组型参数传递 **args --> 字典型参数传递 4.浅拷贝&#xff1a;只复制了对对象的引用&#…

需求分析挑战之旅(疯狂的订餐系统)(8)——最后的疯狂

摘要&#xff1a; 说教性质的需求分析理论&#xff0c;各位看了也白看&#xff0c;所以咱们就来一个真实个案——“订餐系统”体验一下。“订餐系统”貌似简单&#xff0c;但陷阱重重&#xff0c;各种需求分析的经典场景将会一一重现&#xff0c;各位做好准备接受这个挑战没有&…

CPU架构:CPU架构详细介绍

1 概述 CPU架构是CPU商给CPU产品定的一个规范&#xff0c;主要目的是为了区分不同类型的CPU。目前市场上的CPU分类主要分有两大阵营&#xff0c;一个是intel、AMD为首的复杂指令集CPU&#xff0c;另一个是以IBM、ARM为首的精简指令集CPU。不同品牌的CPU&#xff0c;其…

【NOIP】关押罪犯

带权并查集&#xff0c;其实这种并查集的核心就是“向量” 1 #include<cstdio>2 #include<iostream>3 #include<algorithm>4 using namespace std;5 int n,m,p[20001],r[20001]; //0表示在同一监狱&#xff0c;1表示在不同监狱 6 struct node{7 int…

数学之路(3)-机器学习(3)-机器学习算法-SVM[7]

SVM是新近出现的强大的数据挖掘工具&#xff0c;它在文本分类、手写文字识别、图像分类、生物序列分析等实际应用中表现出非常好的性能。SVM属于监督学习算法&#xff0c;样本以属性向量的形式提供&#xff0c;所以输入空间是Rn的子集。 图1 如图1所示&#xff0c;SVM的目标是找…