CSS布局

时间：2023-03-30 22:25:20 CSS

合理的布局是产品的基础，让人感觉整洁大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大的帮助。原文链接单栏布局单栏布局通常用在网站首页，分为头部导航、网页内容、页脚相关信息。//html

//css.body{最大宽度：1200px；margin:0auto;}优点：布局实现简单，界面展示一体化，感觉简洁大方。左右布局左右布局常见于博客和后台管理系统，左边是导航，右边是内容展示。//htmlfloat+margin左边元素设置为浮动左边和有固定的宽度，右边元素的左边距保留左边元素的宽度。//css.body{最大宽度：1200px；边距：0自动；}.left{宽度：200px；float:left;}.right{margin-left:200px;}优点：布局简单，右边宽带可以自定义适配。position+margin左边元素以绝对定位固定在左边，右边元素保留左边外边距。.body{最大宽度：1200px；边距：0自动；}.left{位置：绝对；顶部：0；左：0；width:200px;}.right{margin-left:200px;}优点：左侧内容位置可以固定，右侧内容宽度自适应。HolyGrailLayout圣杯布局和双飞翼布局都解决了两侧固定宽度和中间自适应三列布局的问题。中间栏最先呈现在前面，这在商场网站的布局中比较常见。float+negativemargin+padding+position布局步骤：1、三列内容全部设置为向左浮动。2.将容器宽度设置为100%，并设置侧边栏的宽度。3.将left的左边距设置为负100%，将right的左边距设置为负自己的宽度。4.设置body的padding值，为左右两块内容留出空间。5、设置left和right为相对定位，左边的left属性值为负自身宽度，右边的right属性值为负自身宽度。//html//css.body{padding:0150px;}.container{float:left;宽度：100%；}.left，.right{位置：相对；向左飘浮;宽度：150px;}.left{左：-150px;margin-left:-100%;}.right{right:-150px;margin-left:-150px;}这个布局中html的顺序是不能改变的，当窗口太小时，布局会乱，可以通过设置min-widthmin-width来解决。双飞翼布局双飞翼布局始于淘宝UED，类似于圣杯布局，但通过调整html结构减少相对属性设置float+negativemargin+margin布局步骤：1.设置三列内容向左浮动。2、设置容器宽度为100%，设置左右内容的宽度。3、设置左边距为负100%，设置左边距为负自宽。4.设置内容的边距值，为左右内容留出空间。//html//css.container,.left,.right{float:left;}.container{width:100%;}.left{width:150px;margin-left:-100%;}.right{宽度:150px;margin-left:-150px;}.content{margin:0150px;}优点：圣杯使用padding，双飞翼使用的margin解决了圣杯布局main的最小宽度不能小于左侧边栏的缺点。双翼布局不需要设置相对布局，对应的左右值。通过引入相对布局，可以实现三列布局的多种组合。比如设置position:relative；左：150px；对于右栏可以实现左+右+内容的布局。与传统的布局方式相比，flex布局提供了一种简单、完整、响应式的解决方案。您可以查看flex布局来了解它。这里只是简单介绍几种布局方式。display+position+float属性可以实现不同的特效布局显示形式。选择最适合的方案才是王道

上一篇：IFC

下一篇：Vue类与样式绑定

CSS布局相关文章