css常见的几种布局
css常见布局
·
1.float 浮动.
浮动元素的顶部，在标准文档流的底部.
浮动会脱离文档流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgb(241, 0, 221);
float: left;
}
.box2{
width: 500px;
height: 100px;
background-color: rgb(240, 156, 0);
/* float: left; */
}
.box3{
width: 400px;
height: 200px;
background-color: rgb(24, 223, 123);
float: left;
}
.box4{
width: 300px;
height: 400px;
background-color: rgb(0, 132, 255);
float: left;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div>
<div class="box4">div4</div>
</body>
</html>2.position 定位
-
relative 相对定位：相对原来位置，便宜一定距离
-
absolute 绝对定位：相对position不为static的父元素，偏移一定距离
-
fixed 固定定位：相对浏览器定位
-
static 没有定位：
-
top 上 bottom 下 left 左 fight 右
父相子绝
3.flex布局
flex-direction 主轴方向
row 行排布
row-reverse 同一行反向排布
column 列排布
column-reverse 同一列反向排布justify-content 主轴子元素排列
flex-start 从头部排列
flex-end 从尾部排列
center 居中排列
space-around 平分剩余
space-between 两边贴边，平分剩余align-items 侧轴子元素排列方式
flex-start 从上到下
flex-end 从下到上
stretch 拉伸（子元素去掉高度）
center 居中flex-wrap 是否换行
wrap 换行
no-wrap 不换行align-content 侧轴多行换行属性
flex-start 侧轴头部排列
flex-end 侧轴尾部排列
center 居中排列
space-around 恻轴平分空间
space-between 侧轴两端对齐4.grid布局
Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。
html文件
<div class="container">
<header></header>
<sidebar></sidebar>
<content></content>
<footer></footer>
</div>css部分
.container {
/* 设置为grid布局 */
display: grid;
/* 设置列宽和行高 */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
/*间隔*/
grid-row-gap: 10px;
grid-column-gap: 10px;
/* 进行位置排布 */
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content content"
"footer footer footer"
;
}
/*给子元素起名字*/
header {
grid-area: header;
background: #ef757f;
}
sidebar {
grid-area: sidebar;
background: #ffc65f;
}
content {
grid-area: content;
background: #70cfff;
}
footer {
grid-area: footer;
background: #73db91;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)