CSS基础之高度宽度背景.docVIP

CSS基础之高度，宽度，背景 CSS自适应高度，在Html中要用height:auto，而在CSS中默认就是自适应，通常默认情况下不设置高度。 下面这个例子设置了固定高度，超出了固定的框 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleCSS 高度实例/title style .mode{height:50px; width:50px ; border:1px solid #666;} /style /head body div class=mode固定高度和宽度，固定高度和宽度 /div /body /html 若要阻止超出框，则可以在mode中添加overflow:hidden 下面是效果 还有一个line-height属性用于设置行高，默认为normal !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleCSS 高度实例/title style .mode{height:100px;width:100px;line-height:30px; border:1px solid #666;} /style /head body div class=mode啦啦啦啦啦今天是个好天气 /div /body /html line-height为20px line-height为30px 之后还可以设置最小高度和最大高度，对应为min-height何max-height，最小高度超出内容会自适应高度.，宽度和高度一样min-width和max-width，下面讲讲背景 background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺重复方向background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。background-position 设置或检索对象的背景图像位置。 下面这个例子是background-color的效果 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleCSS 高度实例/title style .mode{ background-color:#456; height:100px; width:100px; line-height:30px; border:1px ； solid #666; } /style /head body div class=mode啦啦啦啦啦今天是个好天气 /div /body /html background-image 可以使用 background:url(/img/logo.gif);这样图片只会出现一次 如果使用background-image:url(/img/logo.gif);图片如果不能覆盖住元素则会重复出现 Background-repeat有无重复no-repeat，横向重复repeat-x和纵向重复repeat-y background-attachment:fixed； 背景固定（默认）background-attachment:scroll 背景图像是随对象内容滚动 为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。