文档介绍：Div+css
一,什么是CSS
CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术统称。
DIV+CSS
简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构(框架)标签,像<b>、<h1>、<span>等html标签一样,再认识CSS是用于创建网页表现(样式/美化)样式表统称,通过css来设置div标签样式,这一切常常我们称之为div+css。
表格
以前html直接设置高度 width="300"这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。
例子:
<table>
<tr>
<td height="100">我的高度为100px</td>
</tr>
<tr>
<td height="50">我高度为50px</td>
</tr>
</table>
分别设置了高度为100px和50px的两行表格
DIV的布局方法
CSS 代码
.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}
Html body内代码:
<div class="yangshi">,内容
测试内容高度超出演示实例,divcss5实例
</div>
完整CSS html最小高度实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
<html xmlns="9/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>
CSS 宽度
传统Html 宽度属性单词:width 如width="300";
CSS 宽度属性单词:width 如width:300px;
HTML宽度与DIV+CSS对比
1、传统html中宽度width="300",即设置对应元素宽度为300px(像素)。而宽度值后无需跟单位,默认情况下以像素(px)为单位。
如:<td width="300">我的宽度为300px</td>
即:设置了对应表格td的宽度为300px.
2、div css中宽度设置width:300px;,即设置对应CSS样式为300px,这里需要跟单位。
如:#header{ width:300px;}
即:定义header CSS选择器样式为300px宽度。
而在标签运用:<div id="header">我的宽度为300px宽度</div>
CSS 宽度自适应
常常我们看见一个网页宽度随浏览器宽度改变而自动改变,宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。
如果网页总宽度为80%即width:80%;,将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。
DIV CSS 自适应宽度例子:
CSS样式代码:
<style type="text/css">
body{ margin:0 auto; text-align:center;}
.yangshi{ width:80%; border:1px solid #003; margin:0 auto;}
</style>
Html中body div代码:
<div class="yangshi">我是80%自适应宽度</div>
CSS边框
CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性
Html表格控制边框:
border="1" bordercolor="#000000"
说明:控制表格边框宽度为1px,颜色为黑色,默认为实线样式边框
DIV CSS边框:
borde