目录
CSS的三大特性
层叠性
后来居上，相同选择器设置相同样式时，一个样式会覆盖（层叠）另一个样式
就近原则，样式冲突，哪个样式离结构近，就选择哪个样式。
层叠的意思就相当于覆盖。
样式不冲突，不会层叠。
继承性
子标签会继承父标签的某些样式，如文本颜色和字号
可以简化代码，降低CSS样式的复杂性
color、text- 、font-、 line-这些元素开头 和文字相关的可以继承
line-height也能继承，行高可以跟单位px也可以不跟单位，如1.5 即1.5倍
是当前元素文字大小的1.5倍大小
优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，执行层叠性
- 选择器不同，则根据选择器权重执行
- 继承和*（0）<元素选择器（1）<类选择器伪类选择器（10）<ID选择器（100）<行内样式（1000）<!important（正无穷）
- 继承的权重是0
- a链接浏览器默认指定了一个样式，蓝色有下划线
div{ color:pink!important;} 权重最高
#father { color:red; }
p { color:pink; }
#father为p的父元素，p的颜色为pink，因为继承权重为0
权重的叠加
复合选择器会有权重叠加的问题
li的权重 0001
ul li 的权重 0001+0001=0002
.nav li的权重 0010+0001=0011
a:hover的权重0010+0001=0011
不是二进制，会叠加但永远不会进位，10个标签选择器为 0 0 0 10
盒子模型
BOX MODEL
border 边框
content 内容
padding 内边距
margin 外边距
边框 border
- border-width 边框粗细
- border-style 样式 实线或虚线：solid 实线 none 无 dashed虚线 dotted点 double双实线
- border-color 边框颜色
复合写法:
border： width style color；没有顺序
边框可以分开写:
border-top: ...上边框
border-buttom/left/right
表格的细线边框:边框重叠会变粗
table,
td {
border:.........
}
border-collapse:collapse; 相邻边框合并
边框会影响盒子的实际大小=盒子大小+边框大小
内边距 padding
padding-left / right / top / buttom
简写
padding: 5px;上下左右都5px
padding: 5px 10px; 上下5 左右10
padding 5px 10px 20px 上5 左右10 下20
padding: 5px 10px 20px 30px; 上5 右10 下20 左30 顺时针
- padding也会影响盒子的实际大小=盒子大小+上下左右边距 内容大小不变
- 要让实际大小和效果图一样 盒子大小需要减去两份边距
- 如果盒子没有指定宽高，则padding不会撑开盒子
- 如果孩子没有指定宽高，则和父亲一样宽，但不是继承性，相当于没有指定宽高，再加padding值，也不会撑开盒子。只有本身指定了宽高 才会撑开
- 用内边距可以使盒子宽度合理
新浪导航栏案例：
<!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>Document</title>
<style>
.nav {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
height: 41px;
line-height: 41px;
}
.nav a {
display: inline-block;
color: #4c4c4c;
text-decoration: none;
font-size: 12px;
padding-left: 1em;
padding-right: 1em;
}
.nav a:hover {
background-color: #eceeeb;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>外边距 margin
控制盒子和盒子之间的距离
margin-left/right/top/buttom
使用方法和padding基本一致
典型应用：
- 外边距可以让块级盒子水平居中，但是必须满足两个条件：1.盒子必须指定了宽度2.盒子的左右外边距都设置为auto
margin-left: auto; margin-right:auto;
margin: 0 auto; 左右
margin: auto;上下左右
- 行内元素或者行内块元素水平居中只要给其父元素添加text-align: center; 即可
外边距合并：
嵌套块元素垂直外边距的塌陷：两个嵌套关系的块元素，父元素和子元素都有外边距此时父元素会塌陷较大的外边距。
- 为父元素定义上边框 颜色设成transparent
- 为父元素指定内边距
- 给父元素添加overflow:hidden; 不会额外增加盒子的大小
- 浮动、固定、绝对定位的盒子不会有塌陷问题
清除内外边距：
网页元素会默认带有内外边距
用通配符选择器清除内外边距
* {
margin: 0;
padding: 0;
}行内元素为了照顾兼容性，尽量只设置左右内外边距不要设置上下内外边距，但是转换成块元素和行内块元素就可以。
PS测量
Ctrl+r 标尺 快捷键 右击修改单位
alt+滚轮放大缩小
空格键抓手工具
Ctrl+D取消选区
