css布局：在我的理解不就是左一块右一块拼接起来的嘛，类似于盖房子，一块一块的区域，只不过是css布局是平面上的。这里css布局要指出是按左中右，上中下排序（今天用到了布局有点忘掉了，顺便记录一下）
1.这第一种按我的记忆来说应该是浮动布局
1.1，浮动嘛：就是浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，word里有一种图片环绕的方式是文字环绕，对就是这种效果。
浮动自然是有左浮动和右浮动在此基础上再进行扩展左上还是左下（float:left;float:right;）
1.2，需要注意的是使用float需要为其父元素添加（class类名），然后再给相应元素添加浮动属性，否则会出现其父元素高度坍塌无法被撑开的现象
1.3，给需要浮动的元素添加float属性，就可以将其浮动到其父元素内的左或右边，需要注意的是，添加浮动属性的元素是从当前文档流位置开始脱离文档流进行左右浮动的
例如：
<style>
body{
background: grey;
}
.main{
background: lightseagreen;
border: 3px solid yellow;
width: 250px;
overflow: hidden;
}
.red{
background: red;
width: 100px;
height: 100px;
/* float: left; */
}
.blue{
background: rgb(6, 224, 240);
width: 100px;
height: 100px;
float: right;
}
.green{
background: green;
height: 100px;
width: 250px;
}
</style>
</head>
<body>
<div class="main">
<div class="red">红</div>
<div class="blue">蓝</div>
</div>
<div class="green">绿</div>
</body>这里要注意要给父元素添加overflow：hidden；防止溢出（在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷）如图所示蓝色会跑到下面：
可以看出给蓝设置了float：right那么红色是从下往上浮动的，那么当蓝色元素大于红色元素的高度就会把父元素的高度给撑开
.red{
background: red;
width: 100px;
height: 120px;
/* float: left; */
}
.blue{
background: rgb(6, 224, 240);
width: 100px;
height: 160px;
float: right;
}
当然其它的例子同上，就不一一说了，那么浮动有什么影响呢，我觉得不会影响未浮动的块级元素布局，但会影响内联元素的布局，浮动后的元素可以设置宽度和高度，也就是说内联元素浮动后会变成块级元素，这样就便于后续对元素的移动进行操作
2.位置布局
position属性（position:static/fixed/absolute/relative;）默认嘛是静态的属性
2.1，相对定位（relative）：是让元素正常地流入页面，不过在页面上显示之前要进行偏移（高宽计算在流当中，显示进行偏移）。
2.2，绝对定位（absolute）
绝对定位是完全从流中脱离出来 参照嘛是离他最近的已经定位的父元素
2.3，固定布局是相对于浏览器窗口的一个位置，而不是相对页面
3.表格布局
若不指定大小，默认平均分配大小，会根据内容进行自适应调整，这里要指出的是display属性
<style>
.container{
height:200px;
width: 200px;
display: flex
}
.left{
background-color: red;
flex: 1;
}
.middle{
background-color: black;
flex: 1;
}
.right{
background-color: green;
flex: 1;
}
</style>
<body>
<div class=container>
<div class=left>红</div>
<div class=middle>黑</div>
<div class=right>绿</div>
</div>
</body>
6790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
