前端CSS样式篇（一）-- 页面布局
在PC端编写前端样式布局的时候，我们常常因为浏览器或者移动设备的改变，导致整体样式发生变形。因此在实际开发过程中，我们必须要掌握一些css调整元素适配型的技术，比如 流式布局，弹性盒子，calc属性等等，内容比较多，但是全都看懂的话，一定会对你页面布局有帮助，下面我们就来一一介绍一下吧
文章目录
一 流式布局
1.概念
流式布局也叫 百分比布局，也称非固定像素布局或自适应布局，它主要针对的是元素本身大小在页面布局中的变化。
这种布局的特点是随着屏幕的改变，元素大小在页面布局没有发生大的变化，可以进行适配调整。
优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示
公式: 目标元素百分比=目标元素宽度/父盒子宽度
这里注意百分比都是相对于目标元素的百分比的
2.效果展示
使用了流式布局的模版效果如下
左侧固定+右侧自适应
左右固定宽度+中间自适应
3.示例代码
那么具体应该怎么使用呢，其实很简单，首先先确定父盒子的宽高，然后子元素再确定百分比即可
代码案例如下：
<!DOCTYPE html>
<html lang="en">
<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>
.parent{
width: 500px;
height: 500px;
border: 5px red solid;
}
.child01{
width: 100%; /*孩子子节点宽为500px*100%; */
height: 50%; /*孩子子节点高为500px*50%; */
background-color: turquoise;
}
.child02{
width: 100%; /*孩子子节点宽为500px*100%; */
height: 50%; /*孩子子节点高为500px*50%; */
background-color: rgb(99, 224, 64);
}
</style>
</head>
<body>
<div class="parent">
<div class="child01"></div>
<div class="child02"></div>
</div>
</body>
</html>
二 弹性盒子
1.概念和特点
介绍
弹性盒子（也称Flexible Box 或 flexbox）是css3的一种新的布局模式。它能够根据页面需要适应不同的屏幕大小以及设备类型，确保元素拥有恰当的布局。它主要关注的是元素之间间距关系等不会随着容器大小变化而导致变形。
理解弹性布局要理解两个概念，主轴（main axis） 和 交叉轴（cross axis）
主轴（main axis）是沿着 flex 元素放置的横向延伸的轴。 该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置的纵向的轴。 该轴的开始和结束被称为 cross start 和 cross end。
注意：这里的主轴方向是可以通过flex-direction来进行修改的，只是默认是横向的水平方向
特点
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
- 弹性容器通过 设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
- 弹性容器内包含了一个或多个弹性子元素。
注意
- 弹性容器外及弹性子元素内是正常渲染的。也就是说 弹性盒子只定义了弹性子元素如何在弹性容器内布局，不会影响孙子元素（也就是子元素内的元素）。
- 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
- 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
flex与float布局的比较
-
弹性布局与浮动相比，不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，或等距环绕并不需要人为的计算。弹性布局会自动计算。
-
使用浮动元素会脱离标准流影响后面的盒子布局 , 但是使用弹性布局就不会，所以做一些需要元素叠加的样式用float比较好，但是如果是单纯的页面布局还是flex布局好
2.属性说明和使用
关于弹性盒子的使用，这里就介绍几个 常用的属性 和使用方法
| 属性 | 设置内容 |
|---|---|
| justify-content | 设置主轴对齐（父元素使用） |
| flex-direction | 设置主轴方向（父元素使用） |
| flex | 设置弹性子元素分配空间（子元素使用） |
| align-items | 设置单行侧轴对齐方式 |
| align-self | 设置弹性元素自身在侧轴的位置（子元素使用） |
学会这些已经足够应对大部分布局了。
2.1 设置主轴对齐 :justify-content
Justify-content 用在父元素上，可以在父元素设置 justify-content 属性，使所有子元素沿横轴方向对齐方式
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
代码示例如下
<!DOCTYPE html>
<html lang="en">
<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>
.parent{
width: 500px;
height: 500px;
border: 5px red solid;
/* flex布局 */
display: flex;
/*在父元素上设置，所有子元素沿主轴均匀排列 */
justify-content:space-between ;
}
.child01{
width: 10%;
height: 10%;
background-color: turquoise;
align-self:flex-start
}
.child02{
width: 10%;
height: 10%;
background-color: rgb(99, 224, 64);
}
.child03{
width: 10%;
height: 10%;
background-color: rgb(102, 25, 184);
}
</style>
</head>
<body>
<div class="parent">
<div class="child01"></div>
<div class="child02"></div>
<div class="child03"></div>
<div class="child01"></div>
<div class="child02"></div>
<div class="child03"></div>
</div>
</body>
</html>
2.2 设置主轴方向：flex-direction
前文有说过，主轴方向是可以通过flex-direction改变的，它有四个主要修改值
| 属性值 | 作用 |
|---|---|
| row | 行, 水平(默认值) |
| column | 列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
当我们就多设置一个 flex-direction=column 时 ，上面的案例的图形对齐会发生什么改变呢 ？
代码示例如下
<!DOCTYPE html>
<html lang="en">
<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>
.parent{
width: 500px;
height: 500px;
border: 5px red solid;
/* flex布局 */
display: flex;
/*在父元素上设置，所有子元素沿主轴均匀排列 */
justify-content:space-between ;
/*将主轴的方向改为列*/
flex-direction:column;
}
.child01{
width: 10%;
height: 10%;
background-color: turquoise;
}
.child02{
width: 10%;
height: 10%;
background-color: rgb(99, 224, 64);
}
.child03{
width: 10%;
height: 10%;
background-color: rgb(102, 25, 184);
}
</style>
</head>
<body>
<div class="parent">
<div class="child01"></div>
<div class="child02"></div>
<div class="child03"></div>
<div class="child01"></div>
<div class="child02"></div>
<div class="child03"></div>
</div>
</body>
</html>
设置该属性后，我们可以看到现在子元素全部都沿纵轴均匀排列了。
即我们可以这样理解
flex-direction: row
flex-direction: column
2.3 设置子元素在主轴分配空间: flex
当父元素设置了弹性布局display:flex 后，我们可以通过设置 子元素 的 flex属性，来自定义子元素在主轴上的空间
2.3.1 flex 各个取值的含义
flex 是 flex-grow、flex-shrink、flex-basis的缩写。
flex-grow 属性定义 元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了 元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在浏览器 主轴空间（main size）上分配剩余空间 ，等同于width的替代品。
flex-basis取值：0% 即 0 宽度 ； auto 对应取主轴尺寸值；
（注意：只要子元素设置了flex属性， 主轴方向的空余空间就会被的子元素完全分配,想要让子元素之间有间隔，可以通过设置外边距margin属性）
2.3.2 flex不同取值对应的情况：
flex取值为none，则计算值为 0 0 auto；flex取值为auto，则计算值为 1 1 auto。-
flex取值为一个非负数字，则该数字为flex-grow值，flex-shrink取 1，flex-basis取 0%，如flex:1 则计算值为 1 1 0 flex取值为一个长度或百分比，则视为flex-basis值，flex-grow取 1，flex-shrink取 1, 如 flex:5%flex取值为两个非负数字，则分别视为flex-grow和flex-shrink的值，flex-basis取 0%。flex取值为一个非负数字和一个长度或百分比，则分别视为flex-grow和flex-basis的值，flex-shrink取 1。
比较常用的有 flex:1 (1 1 0) 和 flex:auto (1 1 auto)
注意 ：当子元素设置了flex:auto时，会优先将自身设置为最长最优，缩短其他设置了flex:1或 flex:none 的元素，可以理解为当三者同时出现，分配空间大小 flex:none <flex:1 < flex:auto
代码示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
/*设置none 相当于 flex: 0 0 auto 分配空间最小 */
flex: none;
}
.item2 {
/*设置auto 相当于flex: 1 1 auto 分配空间最大，压缩了none 和 flex：1 */
flex: auto;
}
.item3 {
/*设置auto 相当于flex: 1 1 0 分配空间 flex:none <flex:1 < flex:auto */
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
</body>
</html>
展现效果如下
2.3.3 示例代码演示
代码示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
/*子元素设置了flex属性后，父元素的空余空间会被完全计算分配，所以用外边距来分割开子元素*/
margin: 10px;
}
.item1 {
/* 设置在子元素上 其完整的写法为 flex: 2 1 0 */
flex: 2;
}
.item2 {
/* 设置在子元素上 其完整的写法为 flex: 1 1 0 */
flex: 1;
}
.item3 {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
</body>
</html>
展现效果如下
注意：该属性只是改变主轴方向的子元素空间大小，交叉轴方向是不会改变的。 如我们通过上文的 flex-direction 重新设置主轴为 纵轴，那么呈现的效果如下图
修改 flex-container 样式如下
<style>
.flex-container {
display: flex;
/*设置主轴为纵轴方向*/
flex-direction:column;
/*这个是下面要介绍的属性，作用是让子元素沿交叉轴居中*/
align-items: center;
height: 250px;
background-color: lightgrey;
width: 400px;
height: 250px;
background-color: lightgrey;
}
</style>
展现效果如图
2.4 设置交叉轴对齐：align-items
除了设置在主轴方向对齐外，我们也可以设置在交叉轴方向对齐的方式，这里有一个混淆点，就是当主轴设置了 flex-direction 为column 列时，与设置交叉轴对齐有什么区别呢？这里下面会做一些具体的案例讲解 。
align-item属性值主要有以下四个：
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
代码示例如下
<!DOCTYPE html>
<html lang="en">
<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>
.parent{
width: 500px;
height: 500px;
border: 5px red solid;
/* flex布局 */
display: flex;
/*
设置沿纵轴中线对齐
这里其实是有默认设置了 （因为有默认值）
justify-content:flex-start
flex-direction: row 的
*/
align-items: center;
}
.child01{
width: 10%;
height: 10%;
background-color: turquoise;
}
.child02{
width: 10%;
height: 10%;
background-color: rgb(99, 224, 64);
}
.child03{
width: 10%;
height: 10%;
background-color: rgb(102, 25, 184);
}
</style>
</head>
<body>
<div class="parent">
<div class="child01 "></div>
<div class="child02 "></div>
<div class="child03 "></div>
<div class="child01 "></div>
<div class="child02 "></div>
<div class="child03 "></div>
</div>
</body>
</html>
展现效果如下
这里注意区分一下如果将 parent 样式改为 如下，其余不变
<style>
.parent{
width: 500px;
height: 500px;
border: 5px red solid;
/* flex布局 */
display: flex;
/*
这里设置主轴为纵向，设置居中
与上面直接设置 align-items 纵轴 居中 区别
这里的align-items 没写。取默认值 stretch
*/
justify-content:center ;
flex-direction:column;
}
</style>
2.5 设置子元素自身在交叉轴方向位置：align-self
通过设置align-self 属性可以设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。可以设置的属性和 align-items一致
代码示例如下
<!DOCTYPE html>
<html lang="en">
<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>
.parent{
width: 500px;
height: 500px;
border: 5px red solid;
/* flex布局 */
display: flex;
/*设置子元素在主轴方向横向居中*/
justify-content: center;
}
.child01{
width: 10%;
height: 10%;
background-color: turquoise;
/*设置子元素在交叉轴 纵轴方向居中*/
align-self:center
}
.child02{
width: 10%;
height: 10%;
background-color: rgb(99, 224, 64);
}
.child03{
width: 10%;
height: 10%;
background-color: rgb(102, 25, 184);
}
</style>
</head>
<body>
<div class="parent">
<div class="child01 "></div>
<div class="child02 "></div>
<div class="child03 "></div>
<div class="child01 "></div>
<div class="child02 "></div>
<div class="child03 "></div>
</div>
</body>
</html>
三 计算函数 calc()
最后再给大家介绍一个计算函数calc()，它是用来计算元素的宽度和高度值的。
使用方法为 width: calc(宽度值/百分比 - 宽度值/百分比)
下面用一个简单的示例来给大家演示一下它的用法
示例代码
<html lang="en">
<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>
.main{
width:500px;
background:black;
padding:5px;
}
/*这里以calc设置子元素宽度为例
子元素设置了外边距为10 边框厚度为5
如果在不确定父元素具体宽度，该如何设置子元素正好被父元素包裹呢？？？
*/
.box{
height:200px;
/*这里-30px 是因为左右有两边也就是 （10+5）* 2 */
width:calc(100% - 30px);
width:-webkit-calc(100% - 30px);
background:#f60;
padding:10px;
border:5px solid #f40
}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
</div>
</body>
</html>
总结
关于css样式页面布局的一些技术，本篇主要介绍了流式布局、弹性盒子、calc() 计算函数，其中比较重要的是弹性盒子的运用，只要弄懂本文介绍的这几种技巧，足以应付绝大多数页面布局适配性的问题。
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
