所谓层叠样式表，
其中的层叠是什么意思？
-
层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程.
-
css之所以有“层叠”的概念，是因为有多个样式来源。
-
其中css样式来源有5个，分别是内联样式（
<a style="">）,内部样式(<style>``</style>),外部样式（写在css文件中的样式），浏览器用户自定义样式，浏览器默认样式；来源权重：按照其来源优先级为内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
-
选择器优先级：按照选择器优先级为id >class>元素选择器
-
同一元素引用了多个样式时，排在后面的样式属性的优先级高
-
如果有!important,!important优先级最高。
还有一个理解，层叠指的是上级标签的样式会自动继承到其所有下级标签，如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中，除非<p>重写了相关样式将其覆盖。颜色不继承。
.abc>p {...} 这里的“>”意为只设定第一级子标签的样式。**
关于浏览器默认样式： 检查，styles，user agent stylesheet，会看到浏览器默认的样式
常用的css reset
*{margin:0;padding:0;box-sizing:border-box;}
*::after,*::before{box-sizing:border-box;}
a{color:inherit;text decoration:none;}
ul,ol{list-style:none;}
<style>
h1{font-size:48px;}
h2{font-size:36px;}
</style>
table的css reset
table{
border-collapse:collapse;
border-spacing:0;
}
code也可以是标签，<code></code>在里面放代码
CSS语义化
是指用易于理解的名称对html标签附加的class或id命名，如对于页面上方的<div>，可将其id设为header；页面下方的<div>设为footer，可以增强CSS的可维护性。
多余的字用省略号表示
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden ;
-
想要hover到按键上就有链接显示，让a标签里设置
display：block -
margin-top没有用，试试在父元素上设置
overflow：hidden -
想要消除掉
display：inline-block的默认5px间隔，试试设置float：left -
l-v-h-a：hover必须放在link和visited之后，active必须放在hover之后
-
想要一个播放的符号（朝右的箭头），纯css就能做↓
.box{
width:0px;
blackground:pink;
border-left:10px solid red;
border-top:10px solid white/transparent;
border-right:10px solid white/transparent;
border-bottom:10px solid white/transparent;}
-
瀑布流布局，善用“>”和“float：left”。.left>div表示选择left中第一个子元素，设置第一个子元素的宽高就可以
如何解决子元素设置margin-top：50px却直接设置到了/传递给父元素————1，fc：给父元素添加overflow：hidden；2，给父元素添加border：1px solid transparent会撑大盒子高度；3，给父元素添加padding也会撑大盒子高度
渐变
- 背景线性渐变：background：linear-gradient(to bottom,#fcffa2,#fbb700)简单滴做一个按钮的背景渐变。渐变没过渡。
- 重复性渐变：background-image：repeating-linear-gradient(45deg,pink 0px,pink 20px,yellow 20px,yellow 40px),也可以设置opacity。
- 45deg可以是-45deg，方向会换。
- 45deg的渐变和-45deg的渐变用margin-top：-400px可以叠在一起。#如何用css设计格子款式#
- 径向渐变：background-image：radial-gradient(#ccc 0,#666 30%,#ccc 100%)
- 重复径向渐变：background-image：repeating-redial-gradient(#ccc 0px,#ccc 5px,#666 5px,#666 10px,#ccc 10px)
- repeating-redial-gradient(#ccc 0%,#ccc 5%,#666 10%,#666 15%,#ccc 20%)
5.图片滤镜
<style>
div{
width: 500px;
height: 329px;
background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.8)), url(./images/sky.jpg);
}
</style>
注意：在设置的时候，先设置渐变效果，再设置背景图，反之则显示不正常
6.字体蒙版（这个很漂亮）
<!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>
h2{
font: bold 200px;
background: linear-gradient(transparent,transparent),url("./images/army.png");
/* 设置背景，以文本作为参考，只在文本区域设置样式 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2>这是我们的蜗牛学苑欢迎大家</h2>
</body>
</html>
7.光感标题（hover上去会有光感左右移动，字体蒙版和线性渐变的结合，也很漂亮）
<!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>
.area {
transition: 5s;
width: 500px;
height: 50px;
background-color: black;
text-align: center;
background-image: linear-gradient(135deg, rgba(162, 173, 59, 0) 60px, rgb(200, 230, 69) 100px, rgba(204, 240, 4, 0) 120px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.area:hover {
background-position: 300px 0;
}
.title {
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="area">
<div class="title">hello,world</div>
</div>
</body>
</html>
如何清除浮动呢？
弹性盒子
- flex-shrink默认份额1。flex-grow默认分额为0。order默认顺序为0。
- flex-basis>width>自己内容决定的宽度
- flex-grow:1每个项目写这个，将自动平分所有的弹性项目的宽度
- flex是一个符合属性，可以把flex-grow,flex-shrink,flex-basis一起设置,默认值0 1 auto，经常书写flex：1，flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
如何让字体垂直居中：line-height=div的高度
让绝对定位的div上下左右居中：left:50%;top:50%;transform:translate(-50%,-50%);
不是所有属性都能过渡，display:block=>display:none就不行，转而使用visibility：hidden到visibility：visible比较好。
