CSS常见布局方式
UilQi
已于 2023-04-15 17:11:29 修改
阅读量1.8k
收藏
17
点赞数
6
已于 2023-04-15 17:11:29 修改
阅读量1.8k
收藏
17
点赞数
6
于 2023-04-15 17:09:03 首次发布
1、盒子布局
border------边框
margin------外边距
padding------内边距
边框的定义：
例如：border: 1px solid black;
除了solid还有以下形式：
2、浮动布局
通过float属性去设置浮动布局
取值：left none(不浮动) right
注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响
如果要消除这种影响（消除浮动）通过clear属性
none:默认 允许两边都可以浮动
left：不允许左边的浮动
right：不允许右边的浮动
both：不允许两侧有浮动
<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>浮动布局</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
clear: left;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
background-color:green;
float: left;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
3、定位布局
属性：position ------ 设置对象的定位方式
static ----- 静态定位（没有设置位置）默认
absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置left top right bottom这四个方向去设
置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置
相较于自身的相对定位
<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>定位布局</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
.box3{
width: 100px;
height: 100px;
background-color:green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
4、弹性盒子
弹性盒子是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成
设置弹性容器是通过display属性进行设置，---------- display:flex或则inline-flex
注意：一个弹性容器可以包含多个弹性元素
常见的属性：
flex-direction ------- 指的是弹性容器中子元素的排列方式
flex-wrap ------ 指的是弹性容器中子元素超出父容器时是否换行
flex-flow ------ flex-direction 和flex-wrap 的简写
align-items ------ 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
align-content------ 修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
4.1、flex-direction
row ----- 左对齐（横向的从左到右排列），默认
row- reverse ------ 反向的横向排列（右对齐），从后往前排，最后一项排在最前面
column ----- 纵向排列
column-reverse ----- 反向纵向排列
4.2、flex-wrap
nowrap ---- 默认值，规定弹性元素不会换行
wrap ---- 弹性元素在需要的时候会换行
wrap-reverse ------ 会换行，但是是反方向
4.3、flex-flow
例如：
display: inline-flex;
flex-flow: column-reverse wrap;
4.4、align-items
align-items --- 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
<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>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: flex;
align-items: baseline;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
4.5、 justify-content
justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
4.6、align-content
align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
扫一扫
暂无认证
到【灌水乐园】发言
ha_lydms: 博主的文章一直都是我的学习指南，内容详实，让我从中获益良多，每篇博文都是知识的瑰宝，我真的很喜欢你的风格，你的博客内容深入浅出，总是让我不再感到学习的困难，期待你的下一次精彩分享
CSDN-Ada助手: 恭喜作者撰写了第9篇博客！标题中提到的VLAN---虚拟局域网划分是一个非常有趣和实用的主题。我很高兴看到您对网络技术的深入探索。在这篇博客中，您可能可以进一步介绍VLAN的具体应用场景和其在网络管理中的作用。此外，您还可以考虑分享一些实际案例或者提供一些配置和故障排除方面的实用技巧。希望您能够继续保持创作，并且我期待着您下一篇博客的发布！
CSDN-Ada助手: 恭喜您写下了第5篇博客！标题“两台PC端的简单全网通”让我感到非常期待。您对PC端的全网通功能进行了简洁明了的介绍，让读者能够快速了解这个特性的优势。接下来，我建议您可以进一步深入探讨这两台PC端的性能差异，或者分享一些使用全网通功能的实际案例。这样可以为读者提供更多的参考和实用价值。期待您的下一篇博客，继续为我们带来新的见解和启发！
CSDN-Ada助手: 恭喜您写了第四篇博客！标题为“网络基础知识”，这是一个非常重要且有趣的主题。在这篇博客中，您有机会向读者们分享网络基础知识，帮助他们更好地理解和应用网络技术。 我想给您提一个创作建议：或许在下一篇博客中，您可以深入探讨一些关于网络安全的话题。网络安全是当今社会中的一个热门议题，了解如何保护个人隐私和数据安全对每个人都至关重要。您可以分享一些有用的技巧、建议或者故事，帮助读者们更好地应对网络威胁。 再次恭喜您，并期待您未来更多精彩的创作！请继续保持谦虚的态度，我们一起努力学习和进步。 如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
CSDN-Ada助手: 非常感谢用户撰写的这篇博客，讲解了CSS常见布局方式。您的博客内容非常有价值，对广大读者来说是非常有帮助的。在此祝贺您持续创作，希望您能够继续分享更多关于CSS的知识和技巧，让我们一起学习进步。下一步的创作建议，可以考虑分享一些实用的CSS框架和工具，让读者能够更快速、更轻松地实现网站布局。再次感谢您的分享！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3