目录
字体阴影
字体阴影的属性是text-shadow，它要填四个要素，分别是
水平位置，竖直位置，模糊程度，阴影颜色
在阴影颜色后加上一个逗号可继续写下一个阴影的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体凸起</title>
<style>
div,p {
color: #ccc;
font:700 80px "微软雅黑"
}
body {
background-color: #ccc;
}
div {
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
p {
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
</style>
<body>
<div>
我是凸起的
</div>
<p>我是凹下的</p>
</body>
</html>CSS的三大特性
一，层叠性
所谓层叠性，就是先写了一个标签li的样式，又再特别的对li修饰，就会把上面的样式重叠掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠性</title>
<style>
div {
color:blue;
}
div {
color:red;
}
</style>
</head>
<body>
<div>我是啥色</div>
</body>
</html可以看出，先对div修饰变成蓝色，再修饰它为红色，所以最后就为红色
但必须是相同的选择器下才成立，不同选择器的在后面会讲
二，继承性
若子级没被修饰过，而父级被修饰过，则子级会继承父级的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠性</title>
<style>
div {
color:yellow;
}
</style>
</head>
<body>
<div>
<div>我是啥色</div>
</div>
</body>
</html上面的代码就是只把父级的div修饰了，但子级的div就会继承父级的样式
三，优先级
在优先级中，有权重这一概念 权重越大则优先级越高
优先级越高的样式会覆盖优先级低的样式
简单的权重
标签选择器的权重为0,0,0,1
类选择器和伪类选择器的权重为0,0,1,0
id选择器的权重为0,1,0,0
其中优先级由小到大 标签<类，伪类<id
而在样式后面输入!important 其权重为无穷大，是最优先的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠性</title>
<style>
div {
color:blue;!important
}
div {
color:red;
}
</style>
</head>
<body>
<div>我是蓝色</div>
</body>
</html>权重的计算
若结合之前那些复合选择器的话，权重就不是这样了
详情参考下面的代码和注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠性</title>
<style>
div div { /* 用了俩次标签选择器 权重为0,0,0,2*/
color:blue;
}
div .second { /* 用了一次标签和一次类选择器 权重为0,0,1,1*/
color:red;
}
div #father { /* 一次标签一次id 权重为0,1,0,1*/
color:pink;
}
</style>
</head>
<body>
<div>
<div>是</div>
<p>2</p>
</div>
</body>
</html权重的比较
这个很简单，举几个例子就明白了
0,2,0,3 = 2*100+3=203
0,0,7,3 = 7*10+3=73
所以0,2,0,3的权重比0,0,7,3的权重大，因此前者优先
如果权重相同，则哪个样式在后面就保留哪个
所以所谓的层叠性也就是权重相同，靠后的样式层叠了考前的样式
继承的权重为0！！！！
这个尤为关键，当父级的样式哪怕是用了!important，权重为无穷大也好
但是其子级的权重为0，所以后面的代码选择到了其子级，后面的会覆盖前面的
盒子
所谓的盒子其实就是装东西的一样，可以放很多的标签到里面
只要是个块元素都可以被认为是个盒子
而盒子里面有外边距，内边距，边框的概念
大家可以简单的理解成：
一，当我们设置了一个盒子的时候，其实就是放了部手机
二，当给我们的盒子设width,height时，其实就是设置手机的尺寸
三，当给我们盒子加上边框的时候，其实就是把手机放到了刚好能放的下的手机盒里，手机盒的厚度就是边框的粗细
四，当给我们盒子加上内边距时，就是换了个更大的手机盒(右下角拉大)，没填满的部分装满了海绵，这海绵的长度就是内边距的值
五，当给我们盒子加上外边距时，就是再套上快递盒，没填满的部分装了泡沫，这泡沫的长度就是外边距的值
边框
边框的属性是border，有粗细，样式，颜色三大属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框</title>
<style>
div {
width:50px;
height:80px;
background-color:blue;
border:2px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>其中样式有：solid直线 dashed虚线 datted点线 double双线
边框圆角
边框圆角的属性是border-radius 填一位数字或多个数字
填一位数字，且属性值为宽和高的一半的时候(宽高相等)，边框就会变成一个圆
填多位数字，两位10px 20px 代表上下10px 左右20px
三位10px 20px 30px 代表上10px 左右20px 下30px
四位，四位的话就不说了吧 上右下左 顺时针
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
weight:100px;
height:100px;
border:2px solid blue;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
合并边框
当俩个盒子是连在一起的时候，边框可能就会重合变粗加深
这样子就会有的边框浅，有的边框深，不好看
这个时候合并边框就显的很重要了
只要在样式里加上属性border-collapse: collapse;即可
外边距
外边距的属性是margin ，有margin-top margin-left，但也有综合模式margin
其中margin可填一位数字或多位数字，原理和radius差不多
但是外边距的细节很多，有下面这几点：
1.设置外边距会创造空白，这段空白不能填充东西，归属于该元素的外边距区域
2.用margin可以使块元素水平居中。第一是盒子指定了宽度，第二是margin:10px auto
3.外边距合并问题****
①当一个盒子设置下外边距为20px 另一个盒子设置上外边距为10px 则俩盒子之间只空20px 尽量避免
②当父级盒子没设边框或上内边距时，父级的上外边距会和子级上外边距合并取较大者
也就是说：
一，刚开始 父级的左上角和子级的左上角是同一个点。
二，当父级没有设置边框或上内边距时:
父级上外边距是以浏览器上界为参考线往下算，子级上外边距是以自己的上界往上算起
所以这时候子级的上外边距会超过父级本身，再来个上外边距合并取大者作整体的上外边距，出 现父级和子级整体向下
三，当父级设置了边框或上内边距时：
父级的上外边距依旧是从浏览器上界往下算起，而子级的上外边距是以父级的边框或上内边距往下算，这个时候才会有子级相对父级向下移动的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.id {
width: 300px;
height: 500px;
background-color: #00FFFF;
margin-top: 50px;
margin-left: 40px;
}
div:last-child {
width: 500px;
height: 400px;
background-color: #FF0000;
margin:10px auto;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding: 10px; */ /* 出现子级移动的现象 */
margin-top: 50px; /* 出现上外边距合并问题 */
}
.son {
width: 200px;
height: 100px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class=id></div>
<div></div>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>内边距
内边距是指边框内线到内部的距离。
大家一定要理解好上面所说的手机的例子
1.代码：padding-top padding-bottom
这些和外边距差不多 不多讲
2.清除内外边距 一般都要全部元素先清除内外边距
padding:0;
margin:0;
盒子的计算尺寸
一.首先说明盒子的空间尺寸：
盒子的空间尺寸= 原宽 + padding + border + margin
二.其次说明盒子的实际尺寸：
盒子实际尺寸= 原宽 + padding + border
三.最后是注意事项：
①当想将左内边距调成10px时，则整个盒子宽会变大15px，且文字与右界的距离不变，左边大了15px。
②若想让增大后不想让总宽变大，则应手动把总宽调成 原宽-15 px，或一开始就先不规定总宽，改了左内边距后，再规定，这个时候右边距离就会缩小。
③子级要是没设宽度，默认为父级的宽度。
④content-box就是盒子的宽度为width + border + padding
border-box就是认为盒子的宽度就为width，padding，border都往内收，而总宽不会变
盒子阴影
六个要素，前两个必填
水平位置 竖直位置 模糊程度 影子大小 阴影颜色 内阴影inset/外阴影(默认)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width:30px;
height:50px;
background-color:blue;
box-shadow:1px 1px 1px 1px rgba(0,0,0,0.5) inset
}
</style>
</head>
<body>
<div></div>
</body>
</html>
