天津博奥教育首页>天津博奥教育培训课程学习辅助资料>网页设计培训就业学习资料2>网页设计中CSS高度使用方法及技巧

注重实战经验传授，打造视觉设计精英

视觉设计培训天津博奥教育全新五合一教学模式线上下同时授课

1.十多年教学经验，由视觉设计行业专家授课

2.视觉设计采用WORKSHOP授课方式，更好吸收教学内容

3.有问题可以随时提出，不积压问题及时解决问题

4.视觉设计培训学习期满后可推荐就业

5.在工作中遇到技术或者设计上的问题给予免费指导

6.视觉设计培训课程可免费重修

了解更多天津视觉设计培训学什么 >>

天津平面设计培训分类

天津平面设计培训就业实操课程不单专业讲解PS_AI_CDR_ID平面设计软件的使用方法及设计的实用技巧,并要让学生认识设计软件的基本工作原理和将创意设计呈现的方法,利用平面广告设计经典案例让学生把握在商业性平面广告设计有关的领域中的应用特性、制作方法步骤、拓展学生的平面广告设计构思,提升学生的现实实践经验,提升自主的设计的工作能力,在培训中注入较多的项目拓展成功案例和印刷前制作方法步骤及实用技巧和印刷后工艺,使其更深层次的达到工作实操的要求，并拥有自主进行各类平面广告设计项目的工作能力,学好后可任职平面媒体、广告创意设计师、美术编辑、印前工程师、数码打印高工、图像合成与制作师、网站美工等

2023年9月天津PS培训AI培训开课时间

室内设计培训高端培训班9月余2人

室内设计培训效果图培训班9月余2人

CAD培训室内设计CAD制图培训班9月余2人

su培训三维家具设计培训班9月余4人

天津办公软件培训Word、Excel、PPT培训班9月余2人

SolidWorks培训班9月余2人

培训咨询电话：
022-58697923
022-58697932
18222233399

天津平面设计培训视觉设计培训精品设计培训课程推荐

天津平面设计培训就业实战班

高端天津平面设计培训课程

天津UI设计师培训

UI设计师培训一对一

天津平面设计培训软件精讲班

天津平面设计软件培训

天津C4D培训

天津平面设计C4D培训

网页设计中CSS 高度使用方法及技巧

本文章摘自十多年天津平面设计培训教学经验的天津博奥教育官网www.boaoit.com

1、CSS自适应高度：一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:auto来实现高度自适应。通常默认情况下不设置高度，对象高度即是自适应高度。

固定高度及隐藏超出固定高度的内容：很多时候我需要设置对象固定高度同时让多余的内容不显示出来，解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容），如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为1px黑色边框演示，

CSS 代：.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}

Html body内代码：<div class="yangshi">www.divcss5.com演示，内容测试内容高度超出演示实例，divcss5实例 </div>

CSS 固定高度效果截图：

说明观看此上图，看出设置固定高度宽度并设置1px的黑色边框，并且实现内容未超出设置高度宽度。

禁止溢出设置CSS高度、CSS宽度的CSS属性单词及值overflow:hidden;。

3、设置最小高度：使用CSS 单词：min-height，为什么要设置最小高度？有时特别是在文章页面里因为文章内容多少参差不齐，所以我们可以使用最小高度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度，因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。这里有个问题就是IE6不支持最小高度设置（min-height），解决办法使用css hack方法来解决，大家知道区别不同浏览器时候用的css hack中IE6可以使用“_”来区别其它浏览器。最小高度运用：

.yangshi{min-height:50px; _height:50px;}这样就可以解决此问题，说明这里就不能再使用overflow:hidden;->CSS overflow设置隐藏超出内容溢出。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>

.yangshi{ min-height:50px;_height:50px;width:150px;border:1px solid #666;}

</style>

</head>

<body> <div class="yangshi">www.boaoit.com演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，divcss5实例

</div>

</body>

</html>

效果图：