DIVCSS基础教程全攻略资源-CSDN文库

需积分: 3 94 浏览量 2013-05-18 09:28:57 上传评论收藏 1.01MB DOC 举报

【CSS高度基础知识】在网页设计中，CSS（层叠样式表）用于控制页面元素的样式，包括元素的高度。`height`属性是CSS中用于设定元素高度的关键属性，它允许开发者精确地定义元素占据的垂直空间。高度可以设置为具体数值，如像素（px）、百分比或其他相对单位，例如em。例如： ```css .yangshi { height: 300px; } ``` 这段代码将`.yangshi`选择器所选元素的高度设定为300像素。 **CSS最大和最小高度** - `max-height`: 这个属性限制了元素的最大高度。当内容超过这个高度时，元素将不再扩展。在IE7及以上版本的浏览器中被支持。 - `min-height`: 对应地，`min-height`属性设定了元素的最小高度。即使内容较少，元素也会至少保持这个高度。同样，IE7及以上版本浏览器支持此属性。 **CSS上下居中** `line-height`属性在某些情况下可以实现元素内容的垂直居中。如果给定一个数字和单位，它会设置行高的值，使文本在垂直方向上居中对齐。 **HTML初始高度与DIV+CSS高度** 在HTML中，传统做法是直接在标签内设置`height`属性，如`<td height="100">`，这默认以像素为单位。而在使用DIV+CSS布局时，我们可以将这些样式移到外部CSS文件中，以更灵活地控制元素的高度。 **CSS自适应高度** 有时，我们希望元素的高度根据内容动态调整。在这种情况下，通常不设置`height`属性，而是让元素自动适应其内容的高度。默认情况下，不指定高度的元素将自动扩展以容纳其所有内容。 **固定高度与隐藏超出内容** 在需要固定元素高度并隐藏超出内容的情况下，可以结合使用`height`和`overflow`属性。`overflow:hidden;`将隐藏超出指定高度的内容，保持元素的固定尺寸。例如： ```css .yangshi { height: 50px; width: 50px; overflow: hidden; border: 1px solid #666; } ``` **设置最小高度** `min-height`属性确保元素至少具有指定的高度，但不会限制其因内容增加而扩展。然而，IE6浏览器不支持`min-height`，需要使用CSS Hack来兼容，如`_height:50px;`。综合示例代码： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS高度实例</title> <style> .yangshi { min-height: 50px; _height: 50px; width: 150px; border: 1px solid #666; } </style> </head> <body> <div class="yangshi"> 内容测试... </div> </body> </html> ``` 这个例子展示了如何使用`min-height`来确保元素至少具有50像素的高度，同时保持内容的适应性。总结，理解并熟练应用CSS中的`height`、`max-height`、`min-height`以及`overflow`属性，能够帮助开发者更好地控制网页元素的布局和视觉效果，使得网页设计更加灵活和精致。对于初学者来说，掌握这些基础知识是至关重要的。

资源推荐

资源详情

资源评论

CSS

教程基础

一、CSS 高度_css height

DIV CSS

高度基础知识

这里的 CSS 高度是指通过 



来控制设置对象的高度。使用  



属性 单词 height。单位可以使

用 ，



等常用使用 （像素）为单位。

实例：

即设置了  选择器对象高度为 。

 高度单词：

最大高度： 及以上版本浏览器支持

最小高度： 及以上版本浏览器支持

 



上下居中 ：

以上可跟值为数字加单位。

Html 初始高度与 DIV+CSS

高度对照

以前 html 直接设置高度 width="300"这种方式嵌入表格标签内，而且无需带单位，默认以

px（像素）为单位。

实例：

 !"

#"

$%&'&"我的高度为 ' ($"

(#"

#"

$%&)&"我高度为 ) ($"

(#"

(!"

分别设置了高度为 ' 和 ) 的两行表格

3、设置最小高度

使用  单词 ：

为什么要设置最小高度？

有时特别是在文章页面里因为文章内容多少参差不齐，所以我们可以使用最小高度设置让左右结构

的布局对齐，感觉饱和一点，但是我们又不能设置固定高度，因为内容可能多可能少，当多的时候

自然设置固定高度就不会显示完整内容。

这里有个问题就是 0 不支持最小高度设置（），解决办法使用 223



方法来解决，

大家知道区别不同浏览器时候用的 223 中 0 可以使用“45来区别其它浏览器。

最小高度运用：

)4)这样就可以解决此问题，说明这里就不能再使用

+-#.+,$$+-#.+,



设置隐藏超出内容溢出。

完整 CSS html 最小高度实例代码：

 6789:    ;<=  &((>((797  19?=  '  9#+((@&

&((,,,,+#(9A('(797('#+$$&"

%&((,,,,+#('BBB(&"

$"

C*-%&+9&2+%&(2#%!D'D&("

"高度实例 ("

"

)4),$')!+#$#'+$/000

("

($"

!+$"

$-2%&&",,,$-2)2+ 演示，内容

测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例， $-2)

实例

($-"

(!+$"

("

效果图：



以上是超出内容自动适应高

这里是内容够少，未能充满设置最小高度。

无论在 0 还是  及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设置。

关于 CSS height 高度总结说明：

这里讲解  与  区别及用法，同时讲解了最小高度、自适应高度、固定高度

的设置及运用。

二、CSS 宽度——CSS width

一、宽度基础知识

宽度是指通过  样式 设置对应 div 宽度，以下我们了解传统 



宽度、宽度自适应、固定

宽度等宽度知识。

传统 1宽度属性单词：,$如 ,$%&&

宽度属性单词：,$如 ,$

最大宽度单词：,$如 ,$2 手册中了解 

,$：((,,,$-2)2+(+*2(24,$。

最小宽度单词：,$如：,$2 手册中了解 

,$：((,,,$-2)2+(+*2(24,$

同时你可以进入  



在线手册 中 ,$ 



手册 了解详细基础知识：((,,,$-2)2+(+*

2(24,$

二、Html 初始宽度与 DIV+CSS

宽度对照

'、传统  中宽度 ,$%&&，即设置对应元素宽度为 （像素）。而宽度值后无需跟

单位，默认情况下以像素（）为单位。

如： $,$%&&"我的宽度为  ($"

即：设置了对应表格 $ 的宽度为 

D、$-2



中宽度设置 ,$，即设置对应  样式为 ，这里需要跟单位。

如：/$#,$

即：定义 $# 选择器样式为  宽度。

而在标签运用： $-$%&$#&"我的宽度为  宽度 ($-"

三、css 宽度演示与讲解

1、CSS 宽度自适应

常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如 www.divcss5.com 一样，宽

度是自适应宽度。这里运用了百分比即可实现自适应宽度。

如果网页总宽度为 80%即 width:80%;，将使此宽度知道自适应宽度为浏览器 80%。当然前

提是设置最外层没有宽度限制条件下。

DIV CSS 自适应宽度例子：

CSS 样式代码：

 %&(2&"

!+$#*+2#

,$EF!+#$#'+$/#*+

("

Html 中 body div 代码：

 $-2%&&"我是 EF自适应宽度 ($-"

这样即设置内容居中，为了方便测试加上 ' 黑色边框。大家可以测试观察其内容是随浏览器拉大

而宽度变宽而自适应宽度 EF，而左右两边始终有 'F宽度留着，因为设置此 !+ 宽度为 EF。

以上为 宽度（,$）演示图解。

D、宽度固定

固定即设置宽度为固定值即可如

很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度 ,$，即设置对应固定

宽度为  像素。

、最小固定宽度

 样式属性单词：,$

兼容支持：,$ 除 0 不支持为， 以上浏览器、火狐、谷歌都支持

常常用于设置宽度最小值，如设置对应 7G 的样式最小宽度值限制。

例：

!+#$#'+$/,$

即设置最小宽度为 ，当然一般很少设置最小宽度。如果要使用最小宽度即，使用浮动

（.+）可使用最小宽度限制。

最大固定宽度

 



属性 单词：,$

兼容支持：,$ 除 0 不支持为， 以上浏览器、火狐、谷歌都支持

最大固定宽度是对对应的样式 $- 设置最大宽度限制，即内容不超过此设置最大宽度。

最大宽度限制例子：

!+#$#'+$/,$

即设置了最大宽度限制为 ，以下为设置最大宽度限制演示图：

剩余46页未读，继续阅读

评论收藏

内容反馈

q330189088

粉丝: 1
资源: 4

DIV CSS基础教程全攻略

最新资源

DIV CSS基础教程全攻略

DIV+CSS基础教程全攻略

DIV+CSS基础教程

DIV+CSS基础教程全攻略 (2).pdf

后盾网DIVCSS系列视频教程（24集）

DIV+CSS入门教程

divcss布局入门教程

DIV CSS基础教程-15页word资料.pdf

DIV+CSS基础教程全攻略.pdf

DIV+CSS网页设计的基础教程.pdf

DIV CSS基础教程-15页word资料.docx

DIV+CSS教程——第一天XHTML_CSS基础知识

DIVCSS视频教程1

css基础教程,css+div技术整理

div css 基础教材

div+css例子 div+css例子

div+css布局教程入门

十天学会DIV CSS教程完整版完美整理 完整代码.pdf

div+css pdf 教程

div+css基础教程

DIV CSS网页布局经典教程

div+css布局教程

div+css布局制作箭头步骤流程样式 - div+css教程

div+css入门教程.rar

DIV+CSS教程

DivCSS.rar_ divcss_divcss

最新资源

十天学会DIV CSS教程完整版完美整理完整代码.pdf