web进阶之十一：文档流、浮动、文字绕图、内联元素的浮动
2018-09-10 本文已影响11人
甚得朕心
文档流
文档流指的是文档中可现实的对象在排列时所占用的位置。
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。
也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。
这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。
块元素在文档流中会独占一行
浮动
所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
浮动使用float属性
- 可选值
none：不浮动
left：向左浮动
right：向右浮动
- 这里要注意的是：一用浮动，所有的元素都会成为一个块级元素
- 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color:red;
/*float:right;*/
float:left;
}
.box2{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color:yellow;
/*float:right;*/
float:left;
}
.box3{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color:green;
float:left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
在上面的代码中，大家可以取消浮动float然后观察效果，再添加浮动，就会看出不同了。
文字绕图
文字绕图也用到了浮动的知识，即把上面代码中盒子box1的位置换成一张图片的地址，然后把图片浮动起来，让文字标签顶上去就会实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
/*.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}*/
/*这里把盒子换成图片就实现了文字绕图了*/
img{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
p{
/*当我给定内容时，但如果不给定高时，文字会自动撑开父元素*/
/* height: 200px;*/
background-color:blue;
/* overflow:scroll;*/
/* float: left;*/
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<img src="C:\Users\ljy\Desktop\图片1.png">
<p>
1.形散神聚:"形散"既指题材广泛、写法多样，又指结构自由、不拘一格;"神聚"既指中心集中，又指有贯穿全文的线索。散文写人写事都只是表面现象，从根本上说写的是情感体验。情感体验就是"不散的神"，而人与事则是"散"的可有可无、可多可少的"形"。
2."形散"主要是说散文取材十分广泛自由，不受时间和空间的限制;表现手法不拘一格:可以叙述事件的发展，可以描写人物形象，可以托物抒情，可以发表议论，而且作者可以根据内容需要自由调整、随意变化。"神不散"主要是从散文的立意方面说的，即散文所要表达的主题必须明确而集中，无论散文的内容多么广泛，表现手法多么灵活，无不为更好的表达主题服务。
3.意境深邃:注重表现作者的生活感受，抒情性强，情感真挚。
作者借助想象与联想，由此及彼，由浅入深，由实而虚的依次写来，可以融情于景、寄情于事、寓情于物、托物言志，表达作者的真情实感，实现物我的统一，展现出更深远的思想，使读者领会更深的道理。
4.语言优美:所谓优美，就是指散文的语言清新明丽(也美丽)，生动活泼，富于音乐感，行文如涓涓流水，叮咚有声，如娓娓而谈，情真意切。所谓凝练，是说散文的语言简洁质朴，自然流畅，寥寥数语就可以描绘出
</p>
</body>
</html>
如图所示:
文字绕图.JPG
内联元素的浮动
我们在前面讲到浮动的时候，有一句：元素一旦浮动，就会变成为一个块级元素。
那么内联元素也是如此，本身内联元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.box1{
/*在文档流中，子元素的宽度默认占父元素的全部*/
/*height: 100px;*/
background-color: red;
/*
当元素设置浮动以后，会完全脱离文档流.
块元素脱离文档流以后，高度和宽度都被内容撑开
如果没有内容，我们就得为其设置宽高
*/
float: left;
}
.s1{
/*
开启span的浮动
内联元素脱离文档流以后会变成块级元素
那么我们设置的宽和高就能用了
否则内联元素是不能设置宽和高的
只能被其内容撑开。
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
有任何问题请给我留言，或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。
