我的css学习博客（三）
开头记录一个小知识点：去掉li前面的项目符号（小圆点）
list-style: none;
CSS的三个特性
1.层叠性
相同选择器设置相同的样式，此时一个样式会覆盖另一个冲突的样式。层叠性主要解决此类问题。
层叠性原则：
- 样式冲突时遵循就近原则，执行离结构近的样式
- 样式不冲突不会层叠
<style type="text/css">
div{
color:red;
font-size:18px;
}
div{
color:green;
}
</style>
此时div内容为绿色，大小为18px
2.继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
<style type="text/css">
div{
color:red;
font-size:18px;
}
</style>
<div>
<p>文本</p>
</div>
<p>标签继承<div>的字号和文本颜色属性，为红色且文字大小为18px
可供继承的样式有text-，font-，line-这些元素开头的可继承，以及color属性。
行高的继承性
body {
font:12px/1.5 Microsoft YaHei;
}
行高可以跟单位也可以不跟单位
若子元素没有设置行高，则会继承父元素的行高为1.5，此时子元素的行高是当前子元素的文字大小*1.5
body行高1.5这种写法里面的子元素可以根据自己文字大小自动调整行高。
3.优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素选择器，伪元素选择器 | 0,0,0,1 |
| 类选择器，属性选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important | 无限大 |
优先级注意点：
- 权重是由4组数字组成的，权重可以叠加，但不会有进位
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值
- 继承的权重是0，如果该元素没有直接选中，不论父元素权重多高，子元素得到的权重都是0
- 特别的，对于a链接，浏览器默认指定了一个样式，因此a标签无法继承父元素的样式
盒子模型
1.1 边框(border)属性及作用
border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色。
border : border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
border-width: 5px;
/*边框的粗细，一般情况都用px*/
border-style: solid;
/*边框的样式，solid 实线边框 dashed 虚线边框 dotted 点线边框*/
border-color: pink;
/*边框的颜色*/
1.2 边框简写：
border: 1px solid red;
/*没有顺序*/
1.3 边框分开写法：
border-top: 1px solid red;
border-bottom: 1px dashed red;
border-left: 1px dotted red;
border-right: 1px solid red;
1.4 表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
border-collapse: collapse;
- collapse是合并的意思，上述代码表示相邻边框合并在一起
1.5 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。有如下两种方案解决
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要width/height减去边框宽度（记得*2）。
1.6 内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
padding简写属性可以有一到四个值。
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 1个值，代表上下左右都有5像素内边距 |
| padding: 5px 10px; | 2个值，代表上下内边距是5像素，左右内边距是10像素 |
| padding: 5px 10px 20px; | 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 |
| padding: 5px 10px 20px 30px; | 4个值，上是5像素，右是10像素，下20像素，左30像素 |
同时我们也可以单独指定一侧的padding值：
padding-top: 5px
当我们给盒子指定padding值之后，发生了2件事情：
- 内容和边框有了距离，增加了内边距。
- padding影响了盒子实际大小
即，如果盒子已经有了高度和宽度，此时再指定内边框，会撑大盒子。
不过，如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
1.7 外边距（margin）
margin属性用于设置外边距，即控制盒子与盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| ...... | ...... |
margin简写方式代表的意义与padding完全一致。
应用：
外边距可以让块级盒子水平居中，但必须满足两个条件：
① 盒子必须指定了宽度（width）
② 盒子左右的外边距都设置为auto
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center即可。
1.8 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：
1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有margin-bottom,下面的元素有margin-top，则他们之间的垂直间距不是两者之和，而是取两个值中的较大者。这种现象叫做相邻块元素垂直外边距的合并。
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有margin-top的同时子元素也有margin-top，此时父元素会塌陷较大的外边距值。
解决方案：
① 可以为父元素定义上边框
② 可以为父元素定义上内边距
③ 可以为父元素添加overflow:hidden
1.9 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距，
* {
padding: 0;
margin: 0;
}
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。若想设置其他的，转换为块级或行内块元素即可。
1.10 圆角边框
border-radius属性用于设置元素的外边框圆角。
border-radius: length
原理：圆或椭圆与边框的交集形成圆角效果。
- 参数值可以为数值或者百分比的形式
- 如果是正方形，想设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
- 如果是个矩形，设置为高度的一半就可以做
- 该属性是个简写属性，可以跟四个值，分别代表左上，右上，右下，左下
- 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
盒子阴影与文字阴影
1.盒子阴影
box-shadow属性用于为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值（越大阴影越靠右） |
| v-shadow | 必需，垂直阴影的位置，允许负值（越大阴影越靠下） |
| blur | 可选，模糊距离（虚实） |
| spread | 可选，阴影的尺寸大小 |
| color | 可选，阴影的颜色，一般为rgba(0,0,0,.3) |
| inset | 可选，将外部阴影(outset)改为内部阴影 |
注意：
1.默认的是外阴影，但是不可以写outset这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。
2.文字阴影
text-shadow用于将阴影应用于文本。
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
