2015年7月9日 CSS第二课（浮动、盒子模型、绝对定位和相对定位）

list-style-type:none是指不显示项目符号

1、块级元素的特点：

      常用的块级元素有：body，ul li，ol li，h1-6，div,hr,p，table……等

　　（1）块级元素里面的内容，或者背景图片，默认显示在块的左上角
　　（2）块级元素，默认情况下，单独占满一行。

2、浮动：float 

　　作用：通过漂浮，让块级元素实现并排

　　float:left 或 right

　　注意：如果div左边或者右边的块存在浮动，会对此div产生影响，此时需要清除左右方的浮动

　　清除浮动：clear:left（清除左边div的浮动）或right（清除右边div的浮动）或both（同时清除两侧的浮动）

　　简单说明：想排在一行就使用浮动（float:left） ，想提行就清除浮动（直接用 clear：both 即可，不用管左右）

 

3、盒子模型：

　　（1）border：边框
　　　　border-top：上边框
　　　　border-left：左边框
　　　　border-right：右边框
　　　　border-bottom：下边框

　　（2）padding：内边距（框内文字距离框线的间距）有3种写法

　　　　第一种当padding只写一个值时：上下左右 padding:10px;
　　　　第二种当padding写两个值时：上下 左右 padding:10px 20px;
　　　　第三种当padding写四个值时按顺时针方向：上 右 下 左 padding:10px 20px 10px 15px;

          padding-top:上边距    padding-right:右边距     padding-bottom:下边距    padding-left:左边距

有一个特例：比如有一个150*150大小的DIV盒子，当间距都设为10个像素时，padding会把盒子撑大20个像素，即右边增大20像素，下边增大20像素，此时要保持盒子原来大小不变，可通过减小盒子的width:130px,height:130px来操持盒子原来大小。

　　（3）margin：外边距（边框对边框外其他内容的间距）有3种写法

　　　　第一种：上下左右 margin:10px;
　　　　第二种：上下 左右 margin:10px 20px;
　　　　第三种：上 右 下 左 margin:10px 20px 10px 15px;

　　margin-left,margin-right,margin-top,margin-bottom它们的值可以写负数。

　　*{ padding,margin:0px;}：默认网页里所有的标签都内外间距为0

 

4、行内元素的特点：

　　（1）行内元素它的宽度、高度不受到CSS中height、width属性的影响，而是根据内容的多少决定。

　　（2）默认情况下不会占满一行

　　常用的行内元素：

                        <span></span>（适用于一小节文字的样式设定，不会受到块级元素的影响）

                        <a></a>（链接）

　　【备注】行内元素可以转换成块元素，只需在CSS中写上 display:block;  

 举例：现有一个DIV，里面有文字超链接，如何让鼠标指到文字、DIV的这个块上后，超链接也超作用？

          可以给文字的a属性写上宽、高等于DIV的宽度、高度才起作用，同时设置display:block;

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接例子</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>

<body>
<div>
<a href="http://www.baidu.com" id="f1">百度</a>
</div>
</body>
</html>

CSS代码：

#f1{
height:150px;
width:150px;
border:solid 2px red;
}
a{
height:150px;
width:150px;
text-align:center;
line-height:150px;
display:block;
}

效果如下：

5、绝对定位 & 相对定位：

　　（1）绝对定位：position:absolute;

　　　　当设置一个块级元素为绝对定位的时候，它就脱离了文档流，它就不会占满整行，然后浮动就不会对它有影响

　　　　此时对它设置top、left、right、bottom，就是针对窗体的距离

　　（2）相对定位：position:relation;

　　　　当设置一个块级元素为相对定位的时候，它没有脱离文档流，浮动对它是有影响的

　　　　此时对它设置top、left、right、bottom，是针对上一级容器的距离

　　　　【注意】当相对定位的前面有块级元素占据位置时，则实际距离=设置距离+占位块级元素宽或高

【备注】当一个DIV中内容过多超过边框大小时，可设置overflow:hidden;隐藏，auto当内容超过时有滚动条，没有超过则不会显示滚动条；scroll不管内容多少，都会显示滚动条。

posted @ 2015-07-12 09:28  征途缘  阅读(255)  评论(0)    收藏  举报