前言
博主最近刚完成一个项目，其中以新的知识点（即我前面分享的那些页面布局）为框架，涵盖了许多以前学过的内容，可以说是零零散散，概念记得不是很清楚了，一路跌跌撞撞，虽坎坷颇多，但也收获不少，边分享给你们的同时，也帮助我再次巩固，一举两得，何乐而不为，下面进入正题。
一、背景渐变
background: -webkit-linear-gradient(起始方向，颜色1，颜色2，...)；
起始方向可以是: 方位名词或者度数，如果省略默认就是top
注意：背景渐变必须添加浏览器私有前缀
介绍完 背景渐变的定义后，我们来看看它可以实现什么样的效果把~
这是携程的案例，实现的代码：
background: -webkit-linear-gradient(left, #FA5A55, #FA994D); 再来看一个背景渐变搭配hover实现下面效果的代码：
section .bj {
width: 100%;
height: 100%;
opacity: 0.8;
background: -webkit-linear-gradient(rgb(185, 185, 185),black);
transition: opacity 0.5s ease-in;/*添加一个0.5s的过渡，ease-in:缓慢进场*/
}
section .sec3:hover .bj {
opacity: 0; /*.sec3代表的是鼠标所要经过的地方，.bj是要实现效果的对象*/
}当鼠标经过时渐变背景就消失了，实现方法关键步骤是：①要设置渐变背景的不透明度为0.8，否则就把后面的图片都覆盖了。 ②当鼠标经过时，渐变背景的不透明度为0，即为全透明，就好比消失了。③在上面两步能实现的基础下，如果你觉得变化的太生硬，就使用transition属性，来加一个过渡效果（transition属性前面分享过的哟~忘记了可以往前翻翻），这样效果就可以实现啦~是不是很简单呢
二、下拉列表的实现（如经过一个图标出现导航栏）
我们先来看看效果：
这是省略的导航栏，点击这个图标时
就会出现
这个下拉导航栏，这在移动端是非常常见的，要实现其实也不难，但是有个小细节要注意~我先来讲讲实现的步骤。
① 定义一个父盒子用来装导航栏和省略图标（这就是细节！虽然只是给了一个装她们的盒子，但是这个盒子非常重要，就像她们的家，只有住在一起才是一家人，如果不把它们放在一起，就会出现鼠标移到图标上，导航栏出现，当你想要去选择内容时，导航栏就会消失，这是为什么呢？因为她们没住在一起，所以关系没那么亲密，导致导航栏的出现挡住了图标，所以hover作用消失）
② 制作一个省略的导航栏图标，可以用字体图标，或者自己制作（比如给定一个宽高的长方形，但只显示一个底边，这样就可以实现一条线的效果啦）
③ 制作导航栏，设置样式，把导航栏设置成绝对定位，这样就不会影响到别人了
④ 做一些基础设置，如：把导航栏的位置先调整到屏幕的最上方，到完全遮住，把文字居中，如果省略的导航栏图标也是用的定位，那么要显示出来的导航栏就要设置层级（z-index属性），只要比导航栏图标高就行，为了防止导航栏出现时显示不完整
⑤ 最后一步就是设置效果了，当鼠标经过装它们的父盒子（父盒子的大小可以和图标大小一样，相当于经过图标，这就是有父盒子的作用，这样就不会出现经过图标，导航栏出现又消失了），作用在导航栏上，导航栏位置发生改变，往下移原先移动的单位，为了让它出来时不那么生硬，再加一个transition 过渡效果即可，记得要加在作用的对象上！（这里过渡就是加在我们的导航条上）
讲完步骤来展示展示代码，学过的同学可以看着步骤在脑子里布局一遍代码，看看是不是和我写的一样，没学过的同学也不要紧，看着步骤结合代码更容易理解哟。
.tubiao {
position: relative;
left: 0;
top:0;
margin-top: 7px;
margin-left: 8px;
z-index: 1;
}
.tubiao::before {
font-size: 25px;
color: white;
/*我这里的图标是调用的字体图标，字体图标默认是给在调用元素的before上，所以通过before改变图标的大小和颜色*/
}
.box {
position: absolute;
width: 40px;
height: 36px;
margin: 28px 10px;
}
.box:hover .daohanglan {
cursor: pointer; /*设置鼠标变成小手的形状*/
transform: translateY(272px); /*将原先在最上方的导航栏往下移*/
}
.daohanglan {
position:absolute;
top: -300px;
left: 0;
width: 88px;
height: 265px;
text-align: center;
background-color: white;
transition: all 0.5s; /*设置0.5s的过渡，实现有个下拉的效果*/
z-index: 2;
}
/*下面就是设置导航栏的样式，大家可以根据自己喜欢设置不同的样式*/
.daohanglan li {
margin-bottom: 10px;
text-align: center;
}
.daohanglan li a {
display: block;
width: 100%;
height: 24px;
line-height: 24px;
color: #757474;
}
.daohanglan li a:hover {
color: white;
background-color: #6db36d;
}三、hover用法
前面两个内容虽然不是讲解hover用法，但是都搭配的使用到了它，想必这也足以证明它是重要的。在大家学完并在平时用hover的时候，应该都不会有什么问题，当然我也是如此，直到这次的项目，让我发现了hover在另一种条件下的用法(当然有些认真的同学应该在学hover的时候就去了解了它的全部用法，而我只能通过碰壁，来补充自己知识的缺漏)
① 在:hover前加空格，本身不会有:hover的效果，而后代元素会有:hover的效果
② 在:hover前不加空格，即正常谁加hover，就谁有hover效果
③ :hover+(要作用的对象) ，即实现当鼠标经过时，让其他元素改变样式（这里的其他元素指的是紧挨在执行:hover 元素后的兄弟元素，不是紧挨着的话不会有效果！注意！）
测试代码如下：
<style type="text/css">
.father {
margin: 100px auto;
width: 400px;
height: 300px;
background: pink;
}
.item-1 {
margin: 100px auto;
width: 100px;
height: 100px;
background: #5aea72;
}
.item-2 {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4998da;
}
.item-3 {
margin: 0 auto;
width: 300px;
height: 100px;
background: #f305c0;
}
.father:hover {
background: #b7eb29;
}
</style>
<body>
<div class="father">
<div class="item-1">
</div>
<div class="item-2">
</div>
<div class="item-3">
</div>
</div>
</body>将代码复制到编辑器中，通过更改
图片红色框中的代码来进行测试。
测试①：将代码:hover前面加一个空格：
.father :hover {
background: #b7eb29;
}此时测试出的结果会是，当鼠标经过.father的时候没有变化，当经过它的子元素时，对应元素颜色会发生变化.
测试③： 将代码改为 :hover+ 的形式：
.item-1:hover+.item-2 {
background: #b7eb29;
}此时鼠标经过item-1的时候item-2会发生变化，如果将item-2改为与item-1不相邻的item-3，那么将不会有任何效果.
四、flex属性
在前面我分享过的弹性布局中，经常会见到flex:1的写法，但其实这是flex的缩写，flex包括：
flex-grow、flex-shrink、flex-basis.
1.flex-basis
意为：分配固定的空间数量
flex-basis: number| auto | initial | inherit;
number: 长度单位或百分百，规定弹性项目的初始长度
auto: 默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。
initial：将此属性设置为其默认值。
inherit：从其父元素继承此属性。
这个属性有几个要注意的点：
一、和盒模型的关系: 和width 属性一样的， 作用在 content-size
1、前提是box-sizing: content-size;情况下。
2、如果是在box-sizing:border-size;时flex-basis设置宽度
时，就是由内容决定的，而width是由内容+内边距+边框
的，而内容要减去内边距和边框
二、和宽度的关系
1、当width和flex-basis同时书写 ，是作用于flex-basis .因为flex-basis的优先级高于width
2、flex-basis:auto;默认值，子项的尺寸是由自身的尺寸决定的: box-sizing、width\min-width\max-width、 content内容的尺寸决定的
2.flex-grow:数字
意为：把父级剩余的空间按照特定比例进行划分，用来“瓜分”父项的“剩余空间”
值：就是我们”填充“的比例
默认值，0（不会分配剩余空间）
数值：为占比
小数：总数小于1，没有把所有空间分配给子元素。（按小数分时，把小数乘以剩余空间数就是所分到的份额）
3.flex-shrink:数字
意为：溢出部分按照特定的比例进行划分压缩，用来”吸收“超出的空间，换句话说就是剩余空间不足时，解决如何分配.
值：就是我们”压缩“的比例
默认值，1
0： 不压缩
小数： 总数小于等于1
压缩率=每个元素的加权值（flex-shrink*width）/ 加权总和
（加权总和： 每个元素的宽度*flex-shrink 的值的和）
光看个概念还是不太利于充分的理解，下面来看个例子：
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent .div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: red;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: blue;
}
.item-3 {
flex: 1 1 200px;
background: yellow;
}
</style>
<body>
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
</body>大家可以来算一下，这三个盒子最终分别的宽度是多少呢 ？
揭秘时刻：
①各个盒子的起始宽度：首先我们来看item-1，虽然它有一个默认宽度为140px,但是它的flex-basis为0%，所以它的起始宽度为0；item-2也有一个默认宽度为100px，并且它的flex-basis为auto，所以它的起始宽度为100px；最后来看item-3，虽然它没有默认宽度，但是它有flex-basis呀，flex-basis给了它一个200px的起始宽度。那获取到每个元素的起始宽度后我们就可以计算出父盒子的剩余空间了，那就是：600px-100px-200px=300px
②各个盒子的剩余空间分配情况：三个盒子的flex-grow值分别为 2 2 1 ，所以加起来的系数之和为5，每个盒子分别是： 2/5 、2/5 、1/5.
③各个盒子最终的宽度： 起始宽度加剩余空间分配的宽度
item-1： 0+300* 2/5 =120px
item-2: 100px + 300* 2/5 =220px
item-3: 200px+ 300* 1/5 =260px
好啦，这就是最终的结果，你算对了吗？
五、布局方式
学前端的同学们，在做页面的时候，会发现像京东、淘宝那种两边固定中间自适应的布局真的是非常的常见，而我们常规的做法用ul和li，确实没什么问题，但是，却没有自适应功能，而我下面要介绍的这两种布局方式，又简单又可以自适应，还不快快学会用起来~
1、双飞翼布局
简单来讲就是先给一个中间的盒子，然后左右两个固定的部分分别浮在中间盒子的左边和右边，再通过padding值把内容部分显示出来。详细步骤如下：
① 先将中心部分设置宽度100%+浮动，并优先加载
② 左边和右边两个固定布局设置浮动，此时会被压在下一行显示
③ 将左边盒子向左移 -100%（left:-100%），此时盒子跑到了第一排的最左边，且挡住中心部分（盒子的宽度那么宽）
④ 再将右边的盒子左移盒子的宽度，此时右边的盒子就会在第一行的最右边显示，且挡住中心一部分
⑤ 将中心部分中再放入一个 盒子，用来放主要内容，给中心部分一个padding-left和padding-right（给左右盒子那么宽的宽度），把内容部分挤到中间即可。这样页面移动时，左右盒子不动，内容部分自适应。 如图：
2、圣杯布局
圣杯布局大体上和双飞翼布局没有太大差别，如果你能理解双飞翼那圣杯布局也是不难滴。
圣杯布局就是对版心主体内容动手，添加左右两侧外边距，然后将左右两边侧边栏使用相对定位进行移动。详细步骤如下：
①先定义一个父盒子，用来装这三个区域，父盒子可以不给宽，给个高就可以，再这个盒子里设置一个margin左右（固定盒子宽度）的外边距，将内容盒子挤在中间
② 设置内容盒子，内容部分设置宽度100%，再给个高度，设置左浮动
③ 左边和右边两个固定布局设置浮动，此时会被压在下一行显示
④ 将左边盒子向左移 -100%（left:-100%），此时盒子跑到了第一排的最左边，且挡住中心部分（盒子的宽度那么宽）
⑤ 再将右边的盒子左移盒子的宽度，此时右边的盒子就会在第一行的最右边显示，且挡住中心一部分
⑥ 将左右盒子定为相对定位，然后分别向左和右移负的自身宽度即可
代码：
<!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>
* {
margin: 0;
padding: 0;
}
.box {
height: 300px;
margin: 0 200px;
min-width: 600px;
}
.center {
float: left;
width: 100%;
height: 300px;
background-color: antiquewhite;
}
.left {
float: left;
width: 200px;
height: 300px;
position: relative;
top: 0;
left: -200px;
margin-left: -100%;
background-color: aqua;
}
.right {
float: left;
width: 200px;
height: 300px;
position: relative;
top: 0;
right: -200px;
margin-left: -200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
内容中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间
中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间
中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间内容
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html> 
总结：双飞翼布局和圣杯布局的区别在于 双飞翼布局添加的是左右padding值，而且中间自适应部分还要再给一个内容盒子，而圣杯布局是给内外一个margin值即可。
以上就是这次我的分享啦，如果你喜欢的话就点个👍~ 如有错误，留言指正哟
扫一扫
3914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
