Paste_Image.png
在html页面中，我们有时候需要放入一些内容，比如文字、表格table、列表ul、图片img、音频、视频等，我们可以把这些内容放在div中。然后可以使用css将div元素进行修饰，不会影响其他HTML元素。
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
outline-style: solid;
outline-width: 2px;
}
</style>
</head>
<body style="background: #dddddd">
<div>
你好，div
</div>
<div>
谢谢，我很好
</div>
<div>
</div>
<div>
<ul>
<li>
语文
</li>
<li>
数学
</li>
</ul>
</div>
<div>
<a href="www.baidu.com">百度</a>
</div>
<div>
<table>
<tr>
<td>1班</td>
<td>2班</td>
<td>3班</td>
</tr>
<tr>
<td>1班</td>
<td>2班</td>
<td>3班</td>
</tr>
</table>
</div>
<div>
<pre><pre>
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>
</pre></pre>
</div>
<div>
<i> 标签一定要和结束标签 </i>
</div>
<div>
<form action="form_action.asp" method="get">
<p>
First name:
<input type="text" name="fname" />
</p>
<p>
Last name:
<input type="text" name="lname" />
</p>
<input type="submit" value="Submit" />
</form>
</div>
<div><div>你好，div</div><div>你好，div</div></div>
</body>
</html>
</html>
在html中，分块级元素和行级元素。div属于块级元素。默认情况下，这些div是自上而下顺序摆放的，每个div会开始一个新行。
div的宽度占据了整个浏览器的宽度。我们将html标签，放在div中，他们自上而下摆放，有些html标签会之间会自动加上间隔。
div作为块级元素，会自动开辟新行，这是规范中的固有的，唯一的格式，除此之外，没有别的默认的格式了。
设置字体格式
颜色
字体
大小
文字样式：斜体等
小字体：把段落设置为小型大写字母字体
文字间距：横向的文字间距
文字对齐：
设置背景色
background-color:black 背景颜色
background-image : url(image/bg.gif) 背景图片
background-attachment : fixed 固定背景
页面下拉的时候，背景图片是否随滚动条滚动。
scroll:默认值，滚动。
fixed:背景图像固定。
inherit:规定应该从父元素继承 background-attachment 属性的设置
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置
background-position : center;北京图片居中
超链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
这是css的样式，我们可以这样定义
a:link {
background-color:yellow;
}
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线<textarea style="border:1px dashed pink">
实线<textarea style="border:1px solid pink">
事件属性
事件是作为div的一种属性出现的。基本的事件属性有下列几种
onclick(单击)
ondblclick(双击)
onmousedown(鼠标按下)
onmouseup(鼠标抬起)
onmousemove(鼠标移动)
onmouseover(鼠标在div内部)
onmouseout(鼠标移出div)
onkeypress(键盘按下)
onkeydown(键盘按键)
onkeyup(按键抬起)
div空间控制
定位div：position: absolute; left: 200px; top: 40px;
绝对定位:H4 { position: absolute; left: 100px; top: 43px }
相对定位
I {
position:relative;/*位置:相对;*/
left:40px;/*左:40像素;*/
top:10px/*顶部:10像素;*/
}
设置宽高： width、height
**可视性 **：visibility：visible/hidden/inherit 使要素可以被看见/使要素被隐藏
层次：z-index
显示div的一部分：clip，只显示单元的一部分，其余部分做透明处理
clip : rect(top,right.bottom,left) ;
是否显示滚动条：overflow
css盒模型
盒模型是指将网页上div元素视为长方形的盒子。CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。
1.盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。
2.盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。
content（内容）：盒子模型中必需的部分，可以是文字、图片等元素
padding（空白）：也称页边距或补白，用来设置内容和边框之间的距离
border（边框）：可以设置内容边框线的粗细、颜色和样式等。
margin（边界）：外边距，用来设置内容与内容之间的距离
div+css 布局
1、div是块级元素，自上而下摆布
2、使用float:left/right属性可以使div脱离文档流
3、使用
position: absolute; left: 200px; top: 40px; 进行绝对定位
position:relative;进行相对定位
网友评论