Web前端笔记（7）
阴影效果：
1. CSS3中的文字阴影：
text-shadow: 给文字添加阴影，阴影的默认颜色跟文字的颜色相同
x: x轴偏移的像素
y: y轴偏移的像素
blur: 阴影的模糊值，越大表示阴影越模糊
color: 阴影的颜色
text-shadow: x y color blur的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 30px;
color: red;
text-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div>shadow in CSS3</div>
</body>
</html>阴影的效果：
多阴影：通过逗号分分隔的多阴影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 30px;
color: red;
text-shadow: 10px 10px 5px gray, -10px -10px 5px green;
}
</style>
</head>
<body>
<div>shadow in CSS3</div>
</body>
</html>
2. box-shadow盒子阴影： 盒子阴影的默认颜色是黑色
box-shadow: 给盒子添加阴影效果
x: x方向偏移
y: y方向偏移
blur: 模糊值
spread: 阴影的扩散范围
color: 阴影的颜色
inset: 如果有inset则表示内阴影 默认值为外阴影
多阴影：逗号分隔
格式为： box-shadow: x, y, blur, spread, color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px;
box-shadow: 10px 10px 10px 10px gray;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>阴影效果：
小米官网的box-shadow效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
display: block;
}
.box{
border: 1px solid rgba(195, 195, 195, 0.11);
width: 234px;
height: 300px;
overflow: hidden;
/*margin: 5px 0 0 5px;*/
/*padding: 20px 0;*/
}
.box div.picture{
width: 100%;
margin-top: 15px;
}
.box img{
width: 160px;
height: 160px;
margin: 0 auto;
}
.box .text-top{
width: 80%;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
margin: 0 auto;
margin-top: 10px;
color: #333;
/*cursor: pointer;*/
}
.box .text-middle{
width: 80%;
height: 18px;
line-height: 18px;
font-size: 12px;
color: #b0b0b0;
text-align: center;
margin: 0 auto;
margin-bottom: 15px;
/*cursor: pointer;*/
}
.box .text-bottom{
width: 100%;
height: 20px;
line-height: 20px;
color: #ff6700;
font-size: 14px;
text-align: center;
margin: 0 auto;
/*cursor: pointer;*/
}
.container ul{
}
.container ul li{
float: left;
margin: 40px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: 0;
transition: 0.5s;
}
.container ul li:hover{
top: -3px;
box-shadow: 0 3px 10px 3px darkgrey;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="box">
<div class="picture">
<img src="../picture/others/mi.png" alt="" title="小米10">
</div>
<div class="text-top">小米10</div>
<div class="text-middle">骁龙865一亿像素相机</div>
<div class=text-bottom>3999元起</div>
</div>
</li>
<li>
<div class="box">
<div class="picture">
<img src="../picture/others/mi.png" alt="" title="小米10">
</div>
<div class="text-top">小米10</div>
<div class="text-middle">骁龙865一亿像素相机</div>
<div class=text-bottom>3999元起</div>
</div>
</li>
</ul>
</div>
</body>
</html>效果如下所示：
4. CSS中的模糊与计算：
针对某一个容器进行模糊操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
filter: blur(10px);
}
</style>
</head>
<body>
<img src="../picture/others/mi.png">
</body>
</html>
calc计算：在有一个父容器的情况下，需要子容器的大小和父容器之间有一定关系，使得子容器能够跟随父容器大小进行自适应的变化，使用CSS中的计算能够实现子容器大小的精确控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 400px; /*变化*/
height: 300px;
border: 1px solid black;
}
.box{
width: calc(100% - 100px); /*始终保留100px的大小区域。不管父容器大小怎么变化*/
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>效果：
5. column分栏布局：
column-count: 分栏的个数
column-width: 分栏的宽度
column-gap: 分栏的间距
column-rule: 分栏的边线
column-span: 合并分栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 600px; /*始终保留100px的大小区域。不管父容器大小怎么变化*/
height: 400px;
border: 1px solid black;
margin: 30px auto;
column-count: 2;
/*column-width: 100px;*/ /*不要和column-count一起设置*/
column-gap: 40px;
column-rule: 1px #b5ef84 dashed;
}
/*合并h2的分栏*/
.box h2{
column-span: all;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h2>金融政策持续推出支持中小微企业复工复产</h2>
<p>
人民银行累计投入8000亿专项再贷款，效果正逐步显现；银监会将疫情防控和企业发展作为最
重要工作，成为金融支持的主力军；银行业协会积极行动，政策性银行大中型银行发挥各自优势，
积极帮助困难企业摆脱困境；债券市场不断扩大，成为除贷款外企业融资第二大来源。
</p>
<p>
央行今年1月31日设立3000亿元抗疫专项再贷款，为支持疫情防控发挥积极作用。中国人民银
行货币政策司司长孙国峰说，截至3月13日，人民银行已经发放专项再贷款1840亿元。
</p>
<p>
从效果看，1月25日至3月10日名单内的重点企业生产口罩16亿个、防护服8779万件、
护目镜421万个、病毒检测试剂1029万人份、负压救护车4143辆。专项再贷款还为一些
重点项目提供资金支持。目前医用物品紧张局面已经明显缓解，生活物资供应充足，专项
再贷款的政策效果显著。
</p>
</div>
</body>
</html>
6. 伪元素概念及意义
在CSS3之前的版本中，对伪类和伪元素的区别比较模糊，CSS3中对这两个元素做了相对较清晰的解释，并且在语法上也做了很明显的区分。CSS3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后是伪元素的名称。
1. 伪类的概念
伪类本质上是为了弥补常规CSS选择器的不足，以便获取更多的信息，通常表示获取不存在于DOM树中的信息，或获取不能被常规CSS选择器获取的信息。
:hover 鼠标移入所添加的样式
:focus
:empty
2. 伪元素的概念
伪元素本质上是创建了一个有内容的虚拟容器，这个容器不包含任何DOM元素，但可以包含内容，同时，还可以为伪元素制定样式。
::selection
::first-line / ::first-letter
:: before/ after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px; /*始终保留100px的大小区域。不管父容器大小怎么变化*/
height: 300px;
border: 1px solid black;
margin: 30px auto;
}
.box:hover{
background: red;
}
.box::selection{ /*被鼠标选中的样式*/
background: red;
color: yellow;
}
</style>
</head>
<body>
<div class="box">
人民银行累计投入8000亿专项再贷款，效果正逐步显现；银监会将疫情防控和企业发展作为最
重要工作，成为金融支持的主力军；银行业协会积极行动，政策性银行大中型银行发挥各自优势，
积极帮助困难企业摆脱困境；债券市场不断扩大，成为除贷款外企业融资第二大来源。
央行今年1月31日设立3000亿元抗疫专项再贷款，为支持疫情防控发挥积极作用。中国人民银
行货币政策司司长孙国峰说，截至3月13日，人民银行已经发放专项再贷款1840亿元。
</div>
</body>
</html>7. CSS hack
CSS hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。
hack分类：
1. CSS属性前缀法
2. 选择器前缀法
3. IE条件中注释法
工具： IE-test,可以代替低版本的IE浏览器来测试前端版本
8. 渐进增强与优雅降级：（兼容性处理方案）
渐进曾强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始九九构建完整的功能，然后再针对低版本浏览器进行兼容。
9.网页布局扩展
1. 版心 + 通栏的布局方式
2. 等高布局
左边的列能够根据右边的列的高度自适应变化，右边的列能够根据左边的列的高度自适应变化。
原理：
margin 负值，会使得父容器的高度减小， padding: 抵消margin的负值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#parent{
border: 10px black solid;
overflow: hidden;
}
#box1{
float: left;
width: 100px;
/*height: 100px;*/
background: red;
margin-bottom: -2500px;
padding-bottom: 2500px;
}
#box2{
float: right;
width: 100px;
height: 100px;
background: blue;
margin-bottom: -2500px;
padding-bottom: 2500px;
}
</style>
</head>
<body>
<div id="parent">
<div id="box1">
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
</div>
<div id="box2">
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
</div>
</div>
</body>
</html>
3. 双飞翼布局：
是一种左侧固定，右侧固定，中间自适应的布局
布局特点：
a. 先写中间部分，让主体内容先输出
b.让左中右三个部分都浮动
c. 利用margin负值将left，right移动到指定位置
d. 对中间的内容进行调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
height: 100px;
background: red;
}
.container{
overflow: hidden;
}
.container .center{
width: 100%;
height: 200px;
float: left;
}
.container .center p{
background: #6f72ff;
height: 100%;
margin: 0 150px 0 100px;
}
.container .left{
width: 100px;
height: 200px;
background: #32ff47;
float: left;
margin-left: -100%;
}
.container .right{
width: 150px;
height: 200px;
background: yellow;
float: left;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="center">
<p>This is content</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
