普通流排版
- 根据排列顺序划分元素
块级元素（block level）：块级元素独占一行，其宽度自动填满父元素宽度，并和相邻的块级元素依次垂直排列，可以设定元素的宽度和高度以及四个方向的内、外边距。
块级元素一般是其他元素的容器，可以容纳块级元素和行内元素。
常见块级元素：div，li,p,h1-h6
行内元素(inline)：行内元素不会独占一行，相邻的行内元素会排列在同一行距，直到一行排不下才会换行。
行内元素可以设置四个方向的内边距以及左、右方向的外边距，但不能设置宽度、高度和上、下方向的外边距，行内元素的高度由元素的高度决定，宽度由内容长度控制。
行内元素内一般不可以包含块级元素。
常见行内元素：span，a,em,strong。
- 说明
使用display属性可以实现行内元素和块级元素的相互转换。
当display的值设为block时，行内元素将以块级方式呈现；当display值设为inline时，块级元素将以行内形式呈现。如果要让一个元素既可以设置宽度和高度，又能以行内形式显示，则需要设置display的值为inline-block,此时，元素变成行内块级元素
- 留意
<div>和<span>这两个元素主要用于排版和样式设置。
<div>是块级元素，相邻块级元素会自动换行显示，在页面中主要作为容器元素使用，其可以容纳段落，标题，表格，图像等各种HTML元素。
通过div的容器功能，实现了对页面元素的分块，进而通过CSS实现div的排版
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>普通流排版</title>
<style type="text/css">
div{
border:1px dashed #8B4513 ;
margin: 4px;
}
.c3,.c4{
display: inline;
}
span{
margin: 6px;
border: 2px double forestgreen;
}
.c7,.c8{
display: block;
}
</style>
</head>
<body>
<p>firstly</p>
<div class="c1">this is one!</div>
<div class="c2">this is one!</div>
<p>secondly</p>
<div class="c3">this is one!</div>
<div class="c4">this is one!</div>
<p>thirdly</p>
<div class="c5">this is one!</div>
<div class="c6">this is one!</div>
<p>four</p>
<span class="c7">this is one!</span>
<span class="c8">this is one!</span>
</body>
</html>
盒子外边距的合并
盒子外边距的合并主要针对普通流排版，指的是两个或更多个相邻普通流块级元素在垂直外边距相遇是，将合并成一个外边距，如果发生合并的外边距全部为正值，则合并后的外边距的高度等于这些发生合并的外边距的高度值中的较大者；如果发生合并的外边距不全为正值，则会拉近两个块级元素的垂直距离，甚至会发生元素的重叠现象。
两种情况
相邻元素外边距合并：两个相邻块级元素，上面元素的margin-bottom边距会和下面元素的margin-top边距合并，如果两个外边距全为正值，则合并的外边距等于margin-bottom边距和margin-top边距中最大的那个边距，这种现象称为margin的“塌陷”，即较小的margin塌陷到较大的margin中了。如果两个外边距存在负值，则合并后的外边距的高度等于这些发生合并的外边距 的和，当和为负数时，相邻元素在垂直方向上发生重叠，重叠深度等于外边距和的绝对值。当和为0时，两个块级元素无缝连接。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子外边距的合并</title>
<style type="text/css">
*{margin: 0px;padding: 0;}
.c1{
margin: 30px;
border: 2px dotted navy;
}
.c2{
margin: 40px;
border: 4px double navajowhite;
}
.c3{
margin: 40px;
border: 4px double navajowhite;
}
.c4{
margin-left: 20px;
margin-top: -40px;
border: 9px solid teal;
}
</style>
</head>
<body>
<div class="c1">nice to meet you!</div>
<div class="c2">nice to meet you,too.</div>
<div class="c3">nice to meet you!</div>
<div class="c4">nice to meet you,too.</div>
</body>
</html>
包含（父子）元素外边距合并：外层元素和内层元素形成父子关系，也称为嵌套关系。当父元素没有内容、内边距或边框时，子元素的上外边距将和父元素的上外边距合并为一个上外边距，且值为最大的那个上外边距。
要防止父、子元素的上外边距合并，只需要对父元素设置内容、内边距或边框即可。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子外边距的合并</title>
<style type="text/css">
#father1{
margin-left: 30px;
margin-top: 8px;
height: 60px;
background-color: #FAEBD7;
}
.son1{
border: 2px dotted darkblue;
}
#father2{
margin-left: 100px;
border: 2px solid firebrick;
}
#father3{
margin-left: 30px;
margin-top: 8px;
height: 60px;
padding-top: 8px;
background-color: #FAEBD7;
}
.son3{
margin-top:14px;
border: 2px dotted darkblue;
}
</style>
</head>
<body>
<div id="father1">
<div class="son1">it's important for sb to do shtn</div>
</div>
<br />
<div id="father2">
<div class="son2">only in this way,can we do sth</div>
</div>
<br />
<div id="father3">
<div class="son3">it's important for sb to do shtn</div>
</div>
<br />
</body>
</html>
相邻盒子之间的水平间距
只有行内元素和浮动排版，才需要考虑相邻盒子之间的水平间距。两个相邻元素之间的水平间距等于左边元素的margin-right+右边元素的margin-left，如果相加的margin-right和margin-left分别为正值，则会拉开两元素之间的距离，否则则拉近两元素的距离。
如果margin-right和margin-left相加为0，则两元素无缝相连。
如果margin-right和margin-left相加为负数，则右边元素重叠在左边元素上，重叠的深度等于负数的绝对值。
当父元素存在内边距时，父、子元素之间的位置关系由内、外边距和边框决定。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型——相邻盒子之间的水平间距</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
padding: 20px;
}
.c1{
margin-right: 30px;
border: 2px ridge brown;
}
.c2{
margin-left: 50px;
border: 2px ridge brown;
}
.c3{
border: 2px ridge brown;
margin-right: 20px;
}
.c4{
padding: 2px;
border: 2px ridge brown;
margin-left: -40px;
}
</style>
</head>
<body>
<span class="c1">盒子模型</span>
<span class="c2">盒子模型</span>
<br />
<br />
<span class="c3">盒子模型</span>
<span class="c4">盒子模型</span>
</body>
</html>
浮动排版
在浮动排版中，块级元素的宽度不再自动伸展，而是根据盒子里放置的内容决定其宽度，要修改该宽度，可设置元素宽度和内边距。浮动的盒子可以向左 或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。任何显示在浮动元素下方的HTML元素都在网页中上移，如果上移的元素中包含文字，则这些文字将环绕在浮动元素的周围，因而我们可以使用浮动排版来实现元素环绕效果。
用途：灵活布局网页中的各个盒子。
浮动设置：盒子的浮动需要使用“float”CSS属性来设置。属性值：none（盒子不浮动），left（盒子浮在父元素的左边），right（盒子浮在父元素的右边）
注意：盒子一旦设置为浮动，将脱离文档流，此时文档流中的块级元素表现得就像浮动元素不存在一样，所以如果不正确设置外边距，将会发生文档流中的元素和浮动元素重叠的现象。
向同一方向浮动元素形成流式布局，排满一行或一行剩下的空间太窄无法容纳后续浮动元素排列时自动换行。在换行的过程中，如果前面已排列好的浮动元素排列时会出现换行排列时被“卡住”的现象。
使用浮动排版会产生的副作用：（1）元素一旦设置为浮动后，其下方的元素将上移，此时常常会造成网页的布局面目全非。（2）当一个元素的所有子元素都设置为浮动时，由于浮动元素脱离了文档流，因此会使元素无法根据子元素自适应高度，而导致元素最后收缩为一条线或高度仅为内边距+内容高度+上下边框（如果存在内边距和内容的话）。
浮动清除：清除元素的浮动需要使用“clear”CSS属性。属性值：left（在元素的左侧不允许出现浮动元素）；right（在元素的右侧不允许出现浮动元素）；both（在元素的左、右两侧均不允许出现浮动元素）；none（默认值，允许浮动元素出现在元素的左、右两侧）
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型-浮动排版</title>
<style type="text/css">
.c1{
border: 1px outset darkblue;
height: 40px;
background: silver;
}
.c2{
float: left;
background: azure;
height: 40px;
border: 1px dashed violet;
}
.c3{
height: 100px;
float: left;
width: 400px;
border: 1px solid saddlebrown;
}
.c4{
margin: 20px;
height: 200px;
float: left;
width: 300px;
border: 1px double seagreen;
}
.c5{
margin: 20px;
float: left;
width: 100px;
height: 100px;
border: 1px solid saddlebrown;
}
.c6{
margin: 20px;
float: left;
height: 100px;
width: 100px;
border: 1px double seagreen;
}
.c7{
float: left;
margin: 20px;
width: 100px;
height: 100px;
border: 1px solid saddlebrown;
}
.c8{
float: right;
margin: 20px;
width: 100px;
height: 100px;
border: 1px double seagreen;
}
#m1{
float: left;
}
#m2{
float: right;
}
</style>
</head>
<body>
<div class="c1">浮动排版</div>
<div class="c2">浮动排版</div>
<br />
<br />
<br />
<br />
<p><img id="m1" src="../img/bg.JPG" width="100" height="100"/>
todahey is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good today is a good day!!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
<img id="m2" src="../img/bg.JPG" width="100" height="100" />
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!
</p>
<br />
<br />
<br />
<br />
<div id="d1">
<div class="c3">浮动排版</div>
<div class="c4">浮动排版</div>
<div class="c5">浮动排版</div>
<div class="c6">浮动排版</div>
<div class="c7">浮动排版</div>
<div class="c8">浮动排版</div>
<p>
today is a good day!today is a good day!today is a good day!today is a good day!today is a good today is a good day!!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
</p>
</div>
</body>
</html>
例子
p{
clear: both;
}
<div id="d1">
<div class="c3">浮动排版</div>
<div class="c4">浮动排版</div>
<div class="c5">浮动排版</div>
<div class="c6">浮动排版</div>
<div class="c7">浮动排版</div>
<div class="c8">浮动排版</div>
<p>
today is a good day!today is a good day!today is a good day!today is a good day!today is a good today is a good day!!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
today is a good day!today is a good day!today is a good day!today is a good day!today is a good day!
</p>
</div> 
定位排版
要使用定位排版，需要使用position等CSS属性。
position属性取值：（1）static（默认值，实现静态定位）（2）relative（相对定位，设置它在普通流中的位置进行偏移），不管是否偏移，它原来所占的空间仍然保留，没有脱离文档。相对定位移动元素由可 能会导致它覆盖其他的元素。（3）absolute（绝对定位。绝对定位的元素会基于相对于距离它最近的那个已定位（相对/绝对）的祖先元素偏移某个距离，如果元素没有已定位的祖先元素，那么它的偏移将相对于了最外层的包含框。（4）fixed（固定定位），固定定位的元素相对于浏览器窗口偏移某个距离，且固定不动，不会随着网页移动而移动。固定定位的元素脱离文档流，原来所占的空间不保留。其以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象不变。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型-定位排序</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
div{
border: 1px dashed lightcoral;
height: 200px;
width: 200px;
margin: 20px;
}
.c1{
position: static;
}
.c2{
position: relative;
left: 300px;
}
.c3{
position: absolute;
left: 100px;
}
.c4{
position: fixed;
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="c1">
定位排序1
</div>
<div class="c2">
定位排序 2
</div>
<div class="c3">
定位排序3
</div>
<div class="c4">
定位排序4
</div>
<div class="c5">
定位排序5
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
