css的常见6种布局方式

下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局

流体布局

两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离）

 .left {float: left;width: 100px;height: 200px;background: red;}.right {float: right;width: 200px;height: 200px;background: blue;}.main {margin-left: 120px;margin-right: 220px;height: 200px;background: green;}
<div class="container"><div class="left"></div><div class="right"></div><div class="main"></div>
</div>

圣杯布局

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体

实现的效果：两侧的宽度是固定的，中间Main的宽度会随着屏幕的宽度进行变化

实现步骤

把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于 center 左侧之上。
同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
这时 center 的两侧被 left 和 right 覆盖了，因此给 container设置padding: 0 200px
由于 left 和 right 也同时往中间缩，因此给 left 和 right 分别设置left: -200px; right: -200px，往两侧分别偏移自身的宽度去覆盖掉 contaniner 使用padding后的空白位置。

.container {/* 设置为bfc的标准 */overflow: hidden;padding: 0 200px;
}
.container > div {position: relative;/* 给div设置成浮动，这样它的子元素也就是浮动了 */float: left;height: 100px;
}
.main {width: 100%;background-color: red;
}
.left {width: 200px;background-color: green;/* 表示的意思是除了父元素的padding区域之外的所有的宽度 */margin-left: -100%;/* 因为之前设置了padding，所有left元素会往中间缩，所以要设置一个left的负值 */left: -200px;
}
.right {width: 200px;background-color: blue;/*  要是不设置-200这个值得话，就会跑到下面的一行去。因为之前设置了一个padding 200px的值，所以要设置-200回去，然后它的属性是float：left*/margin-left: -200px;/* 表示的意思是元素的最右边相对于父元素的除了padding的区域，距离的多少px（正值），超过那根padding的界限的多少px*/right: -200px;
}
<div class="container"><div class="main"></div><div class="left"></div><div class="right"></div>
</div>

区分margin-left与left

一、在有定位声明的情况下：即position:absolute,relative,fixed这几种情况下

1>只有margin-left：这样子position的声明没有任何作用，因为即使声明了，也得靠left,top来调整位置，如果没有left等，则position失效，元素位置仍为其该在的位置，margin-left还是相对于其父元素的距离
2>只有left等：正常情况
3>同时有margin-left和left：这种情况下，定位是有作用的，在定位完成后margin-left再起作用，即margin-left和left是可以叠加的

二、在无定位声明或position:static的情况下

left等的定义无效，margin-left有效

双飞翼布局

利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，HTML 代码结构稍微复杂点。

实现步骤

把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于 center 左侧之上。
同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
给 main 设置margin: 0 200px，同时设置overflow: hidden使其成为一个BFC

.container {overflow: hidden;
}
.container > div {position: relative;float: left;height: 100px;
}
.center {width: 100%;background-color: red;
}
.left {width: 200px;background-color: green;margin-left: -100%;
}
.right {width: 200px;background-color: blue;margin-left: -200px;
}
.main {height: 100%;margin: 0 200px;background-color: rosybrown;overflow: hidden;
}<div class="container"><!-- 优先渲染 --><div class="center"><div class="main">center</div></div><div class="left">left</div><div class="right">right</div>
</div>

flex布局

实现步骤

给 container 设置为一个 flex 容器display: flex
center 的宽度设置为width: 100%，left 和 right 设置为width: 200px
为了不让 left 和 right 收缩，给它们设置flex-shrink: 0
使用order属性给三个部分的 DOM 结构进行排序：left：order: 1，center：order: 2，right：order: 3

.container {display: flex;
}
.center {background-color: red;width: 100%;order: 2;
}
.left {background-color: green;width: 200px;flex-shrink: 0;order: 1;
}
.right {background-color: blue;width: 200px;flex-shrink: 0;order: 3;
}
<body><div class="container"><!-- 优先渲染 --><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
</body>

极其灵活

绝对定位布局

实现步骤

给 container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。
left 向左浮动，right 向右浮动。
center 使用绝对定位，通过设置left和right并把两边撑开。
center 设置top: 0和bottom: 0使其高度撑开。

.center {position: absolute;left: 200px;right: 200px;top: 0;bottom: 0;
}
<body><div class="container"><!-- 优先渲染 --><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
</body>

缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

网格布局

实现步骤

给 container 设置为display: grid
设置三栏的高度：grid-template-rows: 100px
设置三栏的宽度，中间自适应，两边固定：grid-template-columns: 200px auto 200px;

    .container {display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 200px auto 200px;}
<body><div class="container"><div class="left">left</div><!-- 这时的center要放在中间 --><div class="center">center</div><div class="right">right</div></div>
</body>

使用起来极其方便

css的常见6种布局方式相关推荐

css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局
1.表格布局(不推荐) 父级容器为display:table 表格子级容器为display:table-cell 一个单元格特点:在没有特别设置的情况下,子级是自动平分宽度并填满父级的. tabl ...
css的几种布局方式都在这
说道布局方式,是我们经常遇到的问题,下面我们就来讲解css的常见的一些布局方式. 1.双飞翼布局(两边定宽,中间自适应) 主要是通过浮动与margin实现,代码如下: <!DOCTYPE htm ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
[转]企业网站首页设计常见的6种布局方式
在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让 ...
企业网站首页设计常见的6种布局方式
转载自:http://www.wzsky.net/html/Website/Experience/120178.html 在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不 ...
HTML+CSS 五种布局方式
已知布局元素的高度,写出三栏布局,要求左栏.右栏宽度各为300px,中间自适应. 一.浮动布局 <!DOCTYPE html> <html> <head><m ...
Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
常用的几种布局方式---Flex 布局(垂直居中展示）
常用的几种布局方式---Flex 布局(垂直居中展示) 前言一.默认使用静态布局二.flex布局 1.父元素container 1.1.display:flex 1.2.flex-directio ...
css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么发布时间:2020-12-05 13:24:07 来源:亿速云阅读:102 作者:小新这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...

css的常见6种布局方式

css的常见6种布局方式相关推荐

最新文章

热门文章