10. CSS 排版
2017-04-10 本文已影响4人
一Left一
1、标准流（文档流/普通流）
- 默认排版
- CSS的元素分为块级、行内、行内块级
- 块级是垂直排版，行内、行内块级是水平排班
-
display属性-
inline行内 -
inline-block行内块级 -
block块级
-
2、浮动排版 float属性
- 水平排版，只能设置元素左对齐或者右对齐
- margin：0 auto 无效
- 不区分块级、行内、行内块级元素
3、浮动元素脱标
.box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 150px;
background-color: burlywood;
}
- 标准排版会盖住浮动排版
4、隔墙法
- 外墙法
clear: both
<head>
<meta charset="UTF-8">
<title>隔墙法-外墙法</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: antiquewhite;
}
.box2{
background-color: darkgrey;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: magenta;
}
p{
float: left;
}
.wall{
clear: both;
height: 20px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
</div>
<div class="wall"></div>
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
</body>
- 内墙法
<body>
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
<div class="wall"></div>
</div>
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
</body>
5、overflow:hidden
- 超出标签的范围的内容裁剪掉，
- 也可以清除浮动
- 让里面的盒子设置margin-top之后，外面的盒子不被顶下来
