三栏布局zblog模板 三栏布局自定义是多少

QQ空间个人中心怎么排版

进入QQ空间点击“小齿轮”“空间设置”“个人中心”“三栏布局模”或者“两栏布局；

创新互联公司专业为企业提供盂县网站建设、盂县做网站、盂县网站设计、盂县网站制作等企业网站建设、网页设计与制作、盂县企业网站模板建站服务，10年盂县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

设置成“三栏布局”模式后的页面显示图：

设置成“两栏布局”模式后页面显示，如图：

提示：若在“三栏布局模”勾选“取消标题栏”，那么空间的标题栏就不会显示。

《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应

三栏布局一般指的是页面中一共有三栏， 左右两栏宽度固定，中间自适应的布局 ，三栏布局的具体实现：

利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

实现三栏布局的六种方式

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。

基础HTML：

基础CSS：

对于container，给它设置一个 overflow: hidden 使其成为一个 BFC ，使三栏浮动，并相对定位，给左右两个容器设置 200px 的宽度中间的容器设置 100% 的宽度。

此时 left 和 right 被相对于父元素 container 宽度的 100% 的 center 挤到下面。

BFC 的作用：

步骤：

这时，圣杯布局就完成了，但是在拖到很小的时候，布局会乱，以下是最终样式。

这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。

双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。

基础HTML：

步骤 1 和 2 同圣杯布局

区别：

第三步：

给 main 设置 margin: 0 200px ，同时设置 overflow: hidden 使其成为一个 BFC

这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在 main 中。

以下是最终样式：

Flex布局是由CSS3提供的一种方便的布局方式。

基础HTML：

步骤：

flex-shrink :

定义项目的缩小比例，默认为1，如果空间不足则项目缩小，如果有一项为0，其他为1，当空间不足时，前者不缩小。

可以看到，flex 布局是一种极其灵活的布局方式。

以下是最终样式：

基础HTML：

步骤：

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

表格布局的好处是能使三栏的高度统一。

基础HTML：

步骤：

这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

基础HTML：

步骤：

仅仅四条样式命令就能完成三栏布局，可见网格布局之强大