您的位置：首页 > Web前端 > CSS

前端开发笔记（3）css基础（中）

2016-11-18 21:51 435 查看

上一篇中我们学习了html的标准文档流，下面我们先来看看如何脱离标准流。

脱离标准流

css中一共有三种方法脱离标准流

浮动

绝对定位

固定定位

浮动

我们要搞清楚什么是浮动，先来看一个标准文档流的例子

<style type="text/css">
div{
width:100px;
height:100px;
margin:10px;
border:1px solid red;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

浏览器执行效果：

会发现标准文档流这4个div不能并排，下面我们设置浮动让他们可以并排。

<style type="text/css">
div{
width:100px;
height:100px;
margin:10px;
border:1px solid red;

float:left;  /* 设置浮动（向左浮动） */
}
</style>

浏览器运行结果：

浮动的特点：

浮动的元素脱离标准流。（这个已经在上面看到了）

浮动的元素相互贴靠。

我们去掉上面样式中的margin看看是否使靠帖的

div{
width:100px;
height:100px;
/* margin:10px; */
border:1px solid red;
float:left;  /* 设置浮动（向左浮动） */
}

浮动的元素有“字围”效果。

<head>
<style type="text/css">
img{
float:left;
}
</style>
</head>
<body>
<img src="img1.jpg"/>
<p>
这里是文字...(此处省略1000字)
</p>
</body>

浏览器执行结果：

绝对定位

演示一个绝对定位脱离标准流的例子，下面详细介绍几种定位。

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
border: 1px solid red;
width:100px;
height:100px;
position:absolute;  /* 绝对定位 */
top:20;
}

.div1{
left:20;

}

.div2{
left:120px;
}

.div3{
left:230px;
}

.div4{
left:340px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>

固定定位

将上面例子中的position值改为fixed后效果和上面一样

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
border: 1px solid red;
width:100px;
height:100px;
position:fixed;  /* 固定定位 */
top:20;
}

.div1{
left:20;

}

.div2{
left:120px;
}

.div3{
left:230px;
}

.div4{
left:340px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>

浮动的清除

清除浮动的原因

先来看一个小案例

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float:left;
background-color:yellow;
padding:20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
</div>

<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>

</body>

我们会发现上面的第二个div中的li元素会去贴靠第一个div中的最后一个元素。原因是因为div没有设置高度，那么此时你可能会问了，给div设置一个高度不就可以了，为什么要想办法去清除浮动呢？有的小朋友可能就问了，刚刚不是学习了怎么浮动，浮动能脱离标准文档流，现在怎么又要清除浮动了？

一般我们给容器不去设置固定的高度，而是由它的内容的高度自适应，这样才能适配到更多浏览器并且容易维护和修改。这只是清除浮动的一个原因，总之有的时候我们并不希望我们的块标签跟随着另一个标签，此时就需要清除浮动。

给父标签添加高度

给上面的案例中的div添加高度

div{
height:50px;
}

浏览器执行结果：

这个方法并不为一种很好的清除浮动的方法，如果确实需要设置高度可以这样做。

clear:both;属性清除

将上面的div样式改为clear:both;

div{
clear:both;
}

浏览器执行结果和上面一致，但是这种方法有一个不好的地方margin在一定程度上会存在失效。

div{
clear:both;
margin:50px;
}

会发现上面设置的margin没有效果

隔墙法

在两个div中间放置一个clear:both;样式的div

<style type="text/css">
.splite{
clear:both;
}
li{
float:left;
background-color:yellow;
padding:20px;

}
</style>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
</div>
<div class="splite"</div>  <!-- 这是一堵墙 -->
<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>

内墙法

内墙法和上面的隔墙法很相似，是将“这堵墙”放到了第一个div内部

<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
<div class="splite"</div>  <!-- 这是一堵墙 -->
</div>

<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>

overflow:hidden;属性清除

overflow:hidden;的本意是隐藏超出部分的内容，但是实际开发中发现这个属性可以巧妙的清除浮动。

<style type="text/css">
div{
overflow: hidden;
}
li{
float:left;
background-color:yellow;
padding:20px;

}
</style>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>APP</li>
</ul>
</div>

<div>
<ul>
<li>数据结构</li>
<li>设计模式</li>
<li>操作系统</li>
</ul>
</div>

</body>

IE6不兼容overflow:hidden;清除浮动，解决办法添加一个属性zoom:1;

overflow: hidden;
_zoom:1;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航