网页端的布局方式比起iOS客户端比较灵活，iOS从最初的绝对定位，逐步发展到现在的autolayout，可以通过约束设置控件相对于其他控件的边距。但是比起网页端，很多需求实现起来还是很难实现，所以学习下网页的CSS布局方式，长长见识，记录下知识，希望以后自己用到的时候不会完全没有思路。
CSS布局方式比较灵活多样，根据排版方式不同可以分为标准流，浮动流，定位流。
1.标准流
标准流时浏览器的默认排版方式，在标准流中CSS元素分为以下三类元素
- 块级元素
独占一行（所以垂直排版），可以设置宽度和高度,如p,div,h,ul,ol,ul - 行内元素
在同一行显示（所以水平排版），不能设置宽度和高度 a,img,select,input - 行内块级元素
在同一行显示（水平排版），可以设置宽度和高度。
标准流里面主要是根据设置元素的display为inline，block，inline-block来改变元素的显示模式。可以很方便的控制元素的水平和垂直排版的，也能够控制元素的大小。但是仅仅依靠标准流，许多网页布局效果无法实现。
2. 浮动流排版
浮动流只有水平排版，只能设置某个元素左对齐或者右对齐，是一种半脱离标准流的排版方式，可以通过设置元素的float属性设置浮动方向，当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样，如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;
- 特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
实现案例
2.1 浮动元素贴靠现象
规则
- 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
- 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
<style>
.father{
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box1{
float: left;
width: 50px;
height: 300px;
background-color: red;
}
.box2{
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3{
float: left;
width: 250px;
height: 100px;
background-color: blue;
}
</style>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
2.2 文字环绕现象
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象。
<style>
.c1 {
float: left;
background-color: green;
}
.c2{
background-color: red;
width: 200px;
}
</style>
2.3 浮动元素的高度
在标准流中内容的高度可以撑起父元素的高度，在浮动流中浮动的元素是不可以撑起父元素的高度的。
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid #000;
}
p{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
清除浮动影响
浮动的元素在标准流中默认不占位置，但是有点时候确实需要浮动的元素占据位置，否则页面会塌陷，有以下几种方式解决浮动带来的问题。
给浮动元素的一个父标签设置高度，比如给上段代码的div设置个高度。这个方法不常用，尽量不写高度。
clear属性
可以给浮动元素的后面的盒子添加clear属性。
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
p{
background-color: red;
float: left;
}
div{
background-color: green;
float: left;
clear: left;
}
</style>
</head>
<body>
<p>段落段落浮动了</p>
<div>div也浮动了但是没有出现在p的右边</div>
</body>
3.设置overflow属性
1overflow: hidden的作用很多不局限于解决浮动的元素在标准流中不占位置的问题。
- 可以将超出标签范围的内容裁剪掉
- 清除浮动
-
可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
overflow.png
3.定位流排版
3.1 相对定位
相对定位就是相对于自己以前在标准流中的位置来移动,4用于对元素进行微调或者配合绝对定位来使用。
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 在相对定位中同一个方向上的定位属性只能使用一个，
- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
}
.d1{
background-color: red;
}
.d2{
background-color: green;
position: relative;
left: 10px;
top: 10px;
/*同一个方向只能有一个*/
right: 10px;
margin-bottom: 20px;
}
.d3{
background-color:yellow;
}
span{
position: relative;
left: 10px;
top: 10px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<span>这是span标签</span>
</body>
</html>
3.2绝对定位
绝对定位的元素脱离标准流，不区分块级元素/行内元素/行内块级元素。
3.2.1 参考点选取规则
默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
只要是这个绝对定位元素的祖先元素都可以
指的定位流是指绝对定位/相对定位/固定定位
定位流中只有静态定位不行
如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
}
.d1{
background-color: red;
}
.d2{
background-color: green;
position: absolute;
left: 30px;
width: 100px;
top: 10px;
font-size: 12px;
}
.d3{
width: 100px;
height: 100px;
background-color:cyan;
/*祖先元素的有定位*/
position: relative;
}
.d4{
position: absolute;
width: 50px;
height: 50px;
bottom: 0px;
right: 0px;
background-color: blue;
}
</style>
</head>
<body>
<div class="d1"></div>
<div style="background-color: deeppink"><span class="d2">这是span标签</span></div>
<div class="d3">
<div class="d4"></div>
</div>
</body>
3.3固定定位
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
<head>
<meta charset="UTF-8">
<title>83-定位流-固定定位</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: fixed;
}
.box3{
background-color: blue;
}
.box4{
height: 2000px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<!--<span>我是span</span>-->
</body>
