作为一名刚刚接触HTML+CSS的前端小白,对于布局的理解十分浅显,在第一周的学习过程中,
由刚开始的全局absulote绝对定位,逐渐发展到float“砌砖头”式定位。今天观看张鑫旭大神的CSS-float
慕课后觉收获颇丰。
主要内容:float与流体布局
首先摆上一个demo,想要达到左侧一张图片,右侧是文本的效果。
在传统的浮动“砌砖头”布局当中,我们会进行以下布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.picture{float: left;width: 56px;}
.container{
width: 500px;
background-color: #2c4b63;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
<p class="text">:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
</div>
</body>
</html>
先给头像和文本一个宽度为500px的容器效果
如下:
在容器宽度较大时,显示正常。但如果将容器的宽度改为300px,便会产生错位,如下图:
这就是传统砌砖头式布局的局限性。
而下面就衍生出新的布局。即赋予文本一个margin-left的值,即可避免产生错误。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.picture{float: left;width: 56px;}
.container{
width: 300px;
background-color: #2c4b63;
color:#fff;
}
.text{margin-left: 76px;}
</style>
</head>
<body>
<div class="container">
<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
<p class="text">:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
</div>
</body>
</html>
这样子,即使容器宽度变小,头像与文本之间也始终会保持着一段间距。如图:
接下来,如果我们想要实现头像在右边,文本在左边我们依照上述的方法,便会自然而然的产生以下想法:
令图片右浮动,给文本增加一个margin-right的值。然而这样实现有一个问题,在我们的看到的效果图中
文本在左边,图片在右边,也就是说文本的是在图片之前的。然而在HTML代码当中则不然,在HTML中图片
的位置是在文本的前面的。以下就是让文本与图片的位置在HTML代码与肉眼所见一致的方法。
也就是DOM与显示位置匹配的单侧布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
width: 300px;
background-color: #2c4b63;
color:#fff;
height: 300px;
}
.container2{width: 100%;float: left;background-color: #2c4b63;}
.text{margin-right: 76px;}
.picture{width:56px;float:left;margin-left: -56px;}
</style>
</head>
<body>
<div class="container">
<div class="container2">
<p class="text">:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
</div>
<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" alt=""></div>
</div>
</div>
</body>
</html>
最后,如果头像的大小也想变化怎么办?
这时就是最后一种方法:浮动与两侧皆适应的流体布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
width: 600px;
background-color: #2c4b63;
color:#fff;
height: 300px;
}
.container2{display: table-cell; *display: inline-block; width: 2000px; *width: auto;background-color: #2c4b63;}
.picture{float:left;margin-right: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="picture"><img src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg" style="width:80px;" alt=""></div>
<div class="container2">
<p class="text">:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
</div>
</div>
</div>
</body>
</html>
即也给文本外套一个标签,并且给他的样式添加display属性,其中table-cell适用于IE8+,而inline-block适用于低版本,再
将他的宽度设为一个较大的数值如代码中的2000,甚至是9999,即可达到两侧自适应的效果。