`
feiliboos
  • 浏览: 664900 次
文章分类
社区版块
存档分类
最新评论

CSS2样式表(属性·尺寸)

 
阅读更多
1、height

语法:
height : auto | length
取值:
auto : 默认值。无特殊定位,根据HTML定位规则分配
length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。不可为负数。请参阅 长度单位

说明:
检索或设置对象的高度。
对于 img 对象来说,仅指定此属性,其 width 值将根据图片源尺寸等比例缩放。
按照样式表的规则,对象的实际高度为其下列属性值之和:
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
在IE6中使用 !DOCTYPE 声明指定 standards-compliant mode 可以实现这一点。
而在IE6中如果没有将 !DOCTYPE 声明指定 standards-compliant 模式,以及以前的浏览器版本,对象的实际高度等于:
margin-top + height+ margin-bottom
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 height 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posHeight , pixelHeight ,以及对象的 offsetHeight 等特性。


示例:

div { height: 1in; }
div { position:absolute; top:-3px; height:6px; }

2、max-height

语法:
max-height : none | length
取值:
auto : 默认值。无最大高度限制
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅 长度单位

说明:
设置或检索对象的最大高度。
如果此属性的值小于 min-height 属性的值,将会被自动转设为 min-height 属性的值。

对应的脚本特性为 maxHeight 。


示例:

p { max-height: 200%; }

3、min-height

语法:
min-height : none | length
取值:
auto : 默认值。无最小高度限制
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅 长度单位

说明:
设置或检索对象的最小高度。
如果此属性的值大于 max-height 属性的值,将会被自动转设为 max-height 属性的值。
在IE6中这个属性仅仅作用于固定布局的表格内的 td 对象, th 对象, tr 对象。表格的默认布局是自动计算的,要得到固定布局的表格,设置表格的 table-layout 属性的值为 fixed 。固定布局的算法比默认的自动算法要快很多。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 minHeight 。


示例:

p { min-height: 200px; }

4、width

语法:
width : auto | length
取值:
auto : 默认值。无特殊定位,根据HTML定位规则分配
length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。不可为负数。请参阅 长度单位

说明:
检索或设置对象的宽度。
对于 img 来说,仅指定此属性,其 height 值将根据图片源尺寸等比例缩放。
按照样式表的规则,对象的实际宽度为其下列属性值之和:
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
在IE6中使用 !DOCTYPE 声明指定 standards-compliant 模式可以实现这一点。
而在IE6中如果没有将 !DOCTYPE 声明指定 standards-compliant mode,以及以前的浏览器版本,对象的实际宽度等于:
margin-left + width + margin-right
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 width 。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posWidth , pixelWidth ,以及对象的 offsetWidth 等特性。

示例:

div { width: 1in; }
div { position:absolute; top:-3px; width:6px; }

5、max-width

语法:
max-width : none | length
取值:
auto : 默认值。无最大宽度限制
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅 长度单位

说明:
设置或检索对象的最大宽度。
如果此属性的值小于 minwidth 属性的值,将会被自动转设为 minwidth 属性的值。

对应的脚本特性为 maxWidth 。


示例:

p { min-width: 200px; }

6、min-width

语法:
min-width : none | length
取值:
auto : 默认值。无最小宽度限制
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。请参阅 长度单位

说明:
设置或检索对象的最小宽度。
如果此属性的值大于 max-width 属性的值,将会被自动转设为 max-width 属性的值。

对应的脚本特性为 minWidth 。

示例:

p { min-width: 200px; }

分享到:
评论

相关推荐

    CSS(层叠样式表)笔记.txt

    CSS(层叠样式表)是一种用于控制网页样式和布局的语言,它赋予网页以美观的外观和结构。通过将HTML文档与CSS样式分离,开发人员可以更好地管理、修改和维护网页的外观。以下是关于CSS笔记的详细描述: 样式规则: ...

    5日精通CSS层叠样式表

    这项CSS规则让浏览器将的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置,请观看代码的执行效果。 注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。 ...

    CSS速查手册(简要列表描述常见的样式表)

    CSS速查手册,其中列出背景属性、边框属性、文本属性、字体属性、外边距属性、内边距属性、列表属性、内容生成、尺寸属性、定位属性、 打印属性、伪类等

    html+css+js网页设计

    样式表达能力: 使用 CSS 选择器和属性来为页面元素应用样式,包括颜色、字体、大小、间距等。 响应式设计: 使用媒体查询和其他技术来实现响应式设计,使网页在不同设备和屏幕尺寸上呈现良好的外观和布局。 CSS ...

    css入门笔记

    创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的...

    css2中文手册 学习css的必选

    CSS Properties Reference 样式表属性 字体 Font font color font-family font-size font-size-adjust font-stretch font-style font-weight text-decoration text-underline-position text-shadow font-...

    零基础学HTML CSS源代码

    style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔.html 属性间距与间隔用法。 设置行距....

    css中文手册、帮助文档

    其目的是提供最新最全的样式表内容的快速索引及注释。 里面的目录包括以下: 一、属性 1、字体 Font 2、文本 Text 3、背景 Background 4、定位 Positioning 5、尺寸 Dimensions 6、布局 Layout 7、外补丁 ...

    html 版 CSS中文速查手册

    CSS Properties Reference 样式表属性  字体 Font fontcolorfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-weighttext-decorationtext-underline-positiontext-shadowfont-varianttext-...

    非常强大的CSS编辑器-SimpleCSS

    SimpleCSS是一个非常强大的CSS编辑器,可以通过不同选框来设置Calss, ID和自定义Tag的文字,显示样式,...使用 Simple CSS 你不仅可以从零开始编写 CSS,而且也能导入存在的样式表,并重新修改它,目前支持 CSS2 规范。

    HTML5与CSS3基础教程(第8版)高清文字

    8.6 使用与媒体相关的样式表 147 8.7 借鉴他人的灵感 148 第9章 定义选择器 150 9.1 构造选择器 150 9.2 按名称选择元素 152 9.3 按类或ID选择元素 153 9.4 按上下文选择元素 156 9.5 选择第...

    懒人原生jQuery可调整图片大小排列方式特效

    效果描述: 之前见过一款类似的效果,不过网上的那个采用的是插件的形式 而且代码冗余繁多,不利于懒人使用 ... 1、将style里的css样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方即可

    前端前端知识点总结思维导图18

    2. CSS(层叠样式表):用于美化网页的样式语言,包含选择器、属性和值,用于描述网页元素的样式和布局。 3. JavaScript(脚本语言):用于添加交互性和动态效果的编程语言,可以操作网页元素、处理用户输入、实现...

    前端开发笔记.docx

    CSS(层叠样式表): CSS用于定义页面的外观和样式。记录不同类型的选择器、样式属性和值,以及如何创建响应式布局和设计。 JavaScript: JavaScript是一种用于添加交互性和动态性的脚本语言。笔记内容应包括变量、...

    HTML基础学习基础认知,适合小白玩

    css层叠样式表 HTML选择器 选择器--通配符 选择器--类选择器 选择器--ID选择器 选择器--伪类选择器 选择器--上下文选择器 选择器--群组联合选择器 样式规则的编写 常用的CSS属性 样式背景 样式边框 样式...

    HTML5与CSS3基础教程(第8版)中文高清版

    1.3 标签:元素、属性、值及其他 ......4 1.4 网页的文本内容 ..............................7 1.5 链接、图像和其他非文本内容 ......8 1.6 文件名和文件夹名 ..........................9 1.7 URL ..................

    JS固定表头和左边列V2.0(源码)

    2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线,...

    html入门到放弃笔记

    2、属性与标记名称之间,用 空格 隔开 3、属性的值 与 属性之间 使用 "=" 连接 4、一个元素允许有多属性,多属性间,排名不分先后,中间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ,增加属性 ,设置 ...

    Design Analysis-crx插件

    用于禁用CSS的工具: - 禁用外部CSS(使用“链接”标记添加): - 禁用内联CSS(通过'样式'属性添加) - 禁用内部CSS(通过'样式'标签添加) - 禁用外部打印CSS(使用“使用”链接“标记)添加) - 禁用内部打印CSS...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例024 Dreamweaver中创建和附加CSS样式 42 实例025 Dreamweaver控制弹出信息 45 实例026 Dreamweaver控制浏览器的窗口 46 实例027 通过Dreamweaver创建站点 47 实例028 通过Dreamweaver开发第1个PHP程序 48 1.7 ...

Global site tag (gtag.js) - Google Analytics