CSS学习笔记（三）

一.CSS的三大特性

1.层叠性（主要解决样式冲突的问题）
层叠性原则:
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就遵循哪个样式；
样式不冲突。不会层叠；

2.继承性
子标签会继承父亲的某些样式，并不是所有的都继承。如文本颜色和字号（text-，font-，line-以这些元素开头的可以继承，以及color属性）
行高的继承性：body{ font：12px/1.5 Microsoft YaHei }
行高可以不跟单位，也可以跟单位；
如果子元素没有设置行高，则会继承父元素的行高为1.5；
此时子元素的行高是：当前子元素的文字大小*1.5；

3.优先级
当同一个元素指定多个选择器，就会有优先级的产生，选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行；
选择器权重：！important > 行内样式 style="..." > id选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承或通配符选择器
注意：
不管父元素权重多高，子元素得到的权重都是0（我们看标签到底执行哪个样式，就先看这个标签有没有直接被选出来）；
浏览器给a链接默认指定了一个样式，蓝色的有下划线；
权重叠加（复合选择器会有权重叠加问题）

二.盒子模型

页面布局三大核心：盒子模型、浮动、定位

1.看透网页布局的本质（利用CSS摆盒子）
网页布局过程：先准备好相关的网页元素–>利用CSS设置好盒子样式–>往盒子里面装内容

2.盒子模型的组成
CSS模型本质上是一个盒子，封装周围的HTML元素有：border边框、margin外边距、padding内边距和content实际内容

3.边框
属性：border : border-width(粗细) | border-style（样式） | boder-color（颜色）
border-style：
实线边框：solid；虚线边框：dashed；点线边框：dotted
复合写法：border：1px solid red没有顺序
边框分开写法：border-top | border-bottom | border-left | border-right

4.表格的细线边框
语法格式：border-collapse：collapse（相邻的边框合并到一起）

5.边框会影响盒子的实际大小
边框会使实际盒子大小变大

6.内边距
设置盒子边框和内容之间的距离
语法格式：padding-left | padding-right | padding-top | padding-bottom
简写：
一个值，代表上下左右都有5像素内边距：padding：5px；
两个值，代表上下内边距是5像素，左右内边距是10像素：padding：5px 10px；
三个值，代表上内边距5像素，左右内边距10像素，下内边距20像素：padding：5px 10px 20px；
四个值，上是5像素，右是10像素，下是20像素，左是30像素：padding：5px 10px 20px 30px；
注意：
给盒子指定padding之后，内容和边框有了距离，添加了内边距，padding影响了盒子的大小（也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子），如果保证盒子和效果图保持一致，则让width、height减去多出来的内边距大小即可；
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小；

7.外边距
控制盒子和盒子之间的距离
语法格式：margin-top | margin-bottom | margin-left | margin-right
margin简写代表的意义与padding类似
典型应用：外边距可以让块级盒子水平居中，必须满足的条件：
①盒子必须指定了宽度
②盒子左右的外边距都设置为auto
常见的写法：margin：0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父亲添加text-align：center;

8.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并，主要有两种情况：
（1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直间距不是其之和，而是取两个值中的较大者；解决方案是尽量只给一个盒子添加margin值。
（2）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
①为父元素定义上边框，边框可以设置透明
②可以为父元素定义上内边距
③可以为父元素添加overflow：hidden
④：其他方法：浮动、固定、绝对定位等等

9.清除内外边距
网页元素有很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此在布局前，首先要清除下网页元素的内外边距
代码格式：*{margin : 0; padding : 0;}
注意：行内元素为了照顾兼容性，尽量只设置左右的内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

三.PS的基本操作

标尺：Ctrl+R
放大视图：Ctrl++
按住空格键，拖动PS视图
取消选区：Ctrl+D
吸管工具取色

四.CSS3新增样式

1.圆角边框
代码格式：border-radius：length;(半径为length的⚪与矩形组成，参数值可以使用像素值和百分比)
圆形：如果正方形想要设置为一个圆，半径为边框宽度一半（50%就是宽度和高度的一半）；
圆角矩形：半径为高度一半；
不同的圆角：简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针），分开写为border-top-left-radius.......

2.盒子阴影
语法格式：box-shadow：h-shadow v-shadow blur spread color inset；
水平阴影：必需，允许负值h-shadow
垂直阴影：必需，允许负值v-shadow
模糊距离：可选，blur
阴影尺寸：可选，spread
阴影颜色：可选，color
将外部（outset）改为内部阴影：可选，inset

3.文字阴影
代码格式：text-shadow：h-shadow v-shadow blur color

总结

1.标签都是有语义的，合理的地方使用合理的标签，比如产品标题就用<h>，大量段落文字就用<p>；
2.给盒子起类名可以更好找到这个盒子，后期维护更方便；
3.margin和padding可以混用，两者各有优缺点，根据实际情况选取；