常用CSS布局

mikasa 发布于2019-08-29 12:24 / 1749人阅读

摘要：此时，是不好用的，因为它只能应用于清除左侧或右侧的浮动。而是傲娇的小公举，有她自己的布局规则内部的会在垂直方向，一个接一个地放置。用来在内部元素超出时显示进度条。这样在页面高度变化，或者内部的高度变化时，都始终可以保持正常的三行布局。

1.导航条垂直居中

导航条nav 从左到右分为 nav-left , nav-mid , nav-mid ，怎样达到从左到右依次排列，且全部垂直居中的效果呢？
全部设置 float:left , 这样之后才可以方便的使 nav-left, nav-right, nav-right 都垂直居中，只需要设置一次父元素nav的 line-height 等于它的 height 就可以啦~

1.1 ul>li>a 构成的导航条内部导航水平居中：
ul设置 text-align:center;
li和a都设置 display: inline-block;

2.清除父元素的浮动

假设父元素为 wrap ，未设置高度，包含三个子元素 left mid right，需要实现水平三列布局。
首先，对left mid right 三部分应用 float: left;并设置合理的宽度，假设都为30%
这时由于内部元素全部浮动而脱离文档流，导致父包含块高度无法被撑开，缩成了一条。下面，需要对父包含块做清除浮动。
此时，clear:both; 是不好用的，因为它只能应用于清除左侧或右侧的浮动。

方法一、overflow: hidden;

我们需要对父元素应用overflow: hidden; 来清除浮动。原理是 overflow 的值只要不是默认值visible，就触发了 BFC。
而 BFC 是傲娇的小公举，有她自己的布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边，
与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float
box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

注意最后一条，因为计算BFC高度时，浮动元素也参与计算，所以父元素的高度被撑开。而这也正符合包含块未设置高度（height: auto;）时的裁切准则。因为包含块高度（height: auto;），所以永远不会出现内容超出包含块的情况，因此overflow:hidden应用后，需要计算内部所有元素高度才能进行裁切。

补充下哪些元素会生成BFC：

根元素 
float属性不为none 
position为absolute或fixed 
display为inline-block,table-cell, table-caption, flex, inline-flex 
overflow不为visible

方法二、clearfix:after{ ... }

clear属性清除浮动通用方案：.clearfix:after{ ... } 实际上是添加了一个看不见的元素。

主要代码：

.clearfix: after {
  content: " ";
  display: block;
  clear: both;
  //用于清除浮动：设置了clear:both的块级元素可以清除浮动
  overflow: hidden;
  visibility: hidden;
}

将clearfix这个class添加到浮动元素的父元素上，就清除了因为子元素浮动缩成一条的父元素的影响，完整代码见：
jsfiddle栗子

3.水平三列等宽布局

水平三列等宽布局当页面宽度变化时，怎样一直保持三列始终均匀的居中显示？
（实在不知道该怎样简洁的描述“均匀的居中”。。。意思就是左右两列与页面之间的间隙，以及列与列之间的间隙，这四块间隙一样宽。）
其实就是考算术的。按照设计稿样式计算3个列以及4个空隙的百分比宽度，让它们相加约等于100%，比如 26% * 3 + 5% * 4 = 78% + 20% = 98%

//html

    left
    middle
    right

//css
.wrap {
  margin: 0 auto;
  width: 400px;
  background: yellow;
  overflow: hidden;
}
.left, .mid, .right {
  float: left;
  margin-left: 5%;
  width: 26%;
}
.left {
  background: blue;
}
.mid {
  background: pink;
}
.right{
  background: red;
}

效果就是下图介样子：

更多方法参考这篇文章：页面架构之等分布局 4.三行自适应布局：header（定高） + main（高度自适应） + footer（定高） 方法一、position

jsfiddle中的栗子

//html
header

  content

footer

//css
.header {position: absolute;top: 0;left: 0; width: 100%; height: 100px;background-color: pink;}
.footer {position: absolute;bottom:0;left:0; width: 100%;height: 100px;background-color: pink;}

.main {position: absolute; top: 100px;left:0; bottom: 100px;right: 0;overflow: auto;background-color: yellow;}
.content {height: 1000px;}

header 和footer 的css属性基本一样。
main的设置注意两点：
1.用了同时设置top与bottom , left与right，撑开元素的技巧。
2.overflow:auto; 用来在内部元素超出时显示进度条。
这样在页面高度变化，或者内部的content高度变化时，都始终可以保持正常的三行布局。

方法二、flex （三行高度自适应 + 两列宽度自适应）

可以直接看 jsfiddle栗子

主要代码：

//html
header

  side
  main

footer

//css
body { display: flex; flex-flow: column;}
.heater, footer { height: 100px; }
div.body { flex: 1; display: flex; width: 500px; align-self: center; }
//div.body 既做三行flex布局的item，也是两列flex布局的container
.side { width: 200px; }
.main { flex: 1; } // 其实是flex-grow: 1; 占满剩余宽度的1/n，而这里的n就是1

可以看到我们的div.body还是水平居中的，其实是我们给.body设置了一个定宽 width: 500px; 加上本元素交叉轴上的对齐方式 align-self: center; 的作用。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111877.html

CSS常用布局

摘要：头部主要内容左边栏右边栏尾部显示为头部主要内容左边栏右边栏尾部圣杯布局和双飞翼布局的原理这篇文章讲解得比较清楚，我就不再赘述。 ====== 样例代码不能显示，请看原文https://magicly.me/css-layout/ ====== 布局是CSS中一个很重要的部分，甚至我觉得是最重要也是最难的部分，其他诸如字体大小、颜色等等都是很容易的。最近总结一下使用过的CSS常...

aaron 2019-08-29 12:59 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0
CSS常用布局简洁解决方案

摘要：与常人的直觉不符的是，实际上表示视口宽度的，而不是。与类似，表示视口高度的。存在问题它只适用于在视口中居中的场景基于的解决方案伸缩盒是专门针对这类需求所设计的。相关基础知识 1.内部与外部尺寸模型：（w3c草案）亲测google可支持。（http://w3.org/TR/css3-sizing ）基于原有CSS尺寸特性，可以使CSS更容易描述内容自适应以及适应固定上下文的盒模型： ...

2450184176 2019-08-29 12:55 评论0 收藏0
JS / CSS 常用实战代码片段

摘要：常用模式片段之摘要第一次看到这个字眼是在中，即。之后也见到一些别人的代码里有，它和页面的有什么关系，以及和有何渊源。以前都见过这些词，但都似懂非懂，今天查了些资料收集了些代码，做个完整的理解。 CSS篇常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性质...

sutaking 2019-08-30 13:14 评论0 收藏0