DIV和CSS使用说明

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>![](/Users/u01/Desktop/b.png)
        </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;进行相对定位

推荐阅读更多精彩内容