2.3css特性、权重、盒子模型、ps基本操作

CSS三大特性

1. 层叠性：

1. 样式冲突，遵循就近原则（哪个样式离结构近就执行哪个）、
2. 样式不冲突的不会层叠

1. 继承性：

1. 子元素可以继承父元素的样式（text，font-，line-，color属性）

行高的继承性：

body { font: 12px/1.5 Microsoft yahei ; }

1. 行高可以跟单位也可以不跟单位
2. 若子元素没有设置行高，则会继承父元素行高（12*1.5）
3. body行高1.5 这样写的优势是子元素可以根据自己文字大小自动调整行高

1. 优先级：

 权重：

优先级注意点：

1. 权重有4组数字组成，但不会有进位
2. 等级判断从左到右，若某位数值相同，则判断下一位数值
3. 简单记忆法：继承和通配符权重为0；标签选择器权重为1；类（伪类）选择器权重为10；id选择器为100；行内样式表为1000； ！important为无穷大
4. 继承的权重是0，若该元素未直接选中，不管父级权重多高，子元素继承得到的权重都是0。子元素未指定样式才会显示父级样式

例子：（权重可以相加）

.nav li {}  权重为10+1=11

.nav .pink {}  权重为10+10=20 (下面权重比上面大，所以优先显示下面的指定样式）

盒子模型

1. 网页布局：

 网页布局过程：

1. 准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用css设置好盒子样式并摆放到相应位置（核心本质）
3. 往盒子里装内容

2、盒子模型组成：

border：边框；   margin：外边距；    padding：内边距；    content：内容

边框（border）：

1. border-width: 5px; （边框粗细）
2. border-style:  solid（实线框）|  dashed（虚线框）|  dotted（点线框）
3. border-color: pink （边框颜色）

边框简写：border: 1px solid red; （没有顺序）

边框分开写法：border-top: 1px solid red; （只设定上边框）

border-bottom: 1px solid red; （只设定下边框）

border-left: 1px solid red; （只设定左边框）

border-right: 1px solid red; （只设定右边框）

分开写的时候注意边框的层叠性（单独设置其中一条边的样式）

1、表格的细线边框：

border-collapse: collapse; （控制浏览器绘制表格边框的方式，控制相邻单元格的边框）

1. collapse：合并的意思
2. 此代码表示相邻边框合并在一起

1. 边框会影响盒子实际大小：

1. 测量盒子大小时不量边框
2. 若测量时包含了边框，则需要weight/height减去边框宽度

内边距（padding）：

即边框与内容之间的距离

padding-left： 左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

1、内边距简写：

2、内边距会影响盒子大小：

（1）width/height减去多出来的内边距大小

1. 内边距不会影响盒子大小：

1. 盒子本身没有指定width/height属性时，此时padding不会撑开盒子大小（没指定的属性不会变，指定的那个还是会变）

例：

 div{ width: 300px;

     height: 100px;

     background-color: purple;

}

 div p { padding: 30px;

      background-color: skyblue;

}

此时p 宽300px（和父级一样），高60px（30乘2）

外边距（margin）

盒子与盒子之间的距离

margin-left： 左外边距

margin-right：右外边距

margin-top：上外边距

margin-bottom：下外边距

1. 外边距简写方式和padding简写方式完全一致

1. 外边距典型应用：

  1、块级盒子水平居中对齐，但必须满足两个条件：

1. 盒子必须制定了宽度（width）
2. 盒子左右的外边距都设置为auto

例： .header{ width: 960px; margin: 20px auto;}  （常用写法：margin:0 auto; ）

（盒子的宽度为960px，上下外边距为20px，左右外边距为auto，即会水平居中)

2、行内元素或行内块元素水平居中对齐：（如文字或插入的图片都可以）

给其父级元素添加text-align: center 即可

1. 外边距合并

1. 相邻块元素垂直外边距的合并：

   当上下相邻的两个块元素相遇时，若上面元素有下边距，下面元素有上边距，则他们之间的垂直间距不是两个值的和，而是取两个值中较大的值。

   解决方法：尽量只给一个盒子添加外边距

1. 嵌套块元素垂直外边距的塌陷

   对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷

   解决方案：（1）可以为父元素定义上边框（border-color设为transparent）

（2）可以为父元素定义上内边距

（3）可以为父元素添加一句代码： overflow:hidden （最常用）

（4）还有其他方法如浮动、固定、绝对定位的盒子就不会有塌陷问题

4、清除内外边距：

网页元素很多都带有默认的内外边距，且不同浏览器默认的也不一致。因此我们在布局前要先清楚下网页元素的内外边距

css布局的第一行代码：

* {

  padding: 0;

  margin: 0;

}

注意：行内元素为了照顾兼容性，只设置左右内外边距，不要设置上下内外边距

5、Photoshop基础操作：

以后大部分切图工作都在photoshop里完成

1. Ctrl+R：可以打开标尺 （或视图-标尺）
2. 右击标尺，把里面的单位改为像素（默认是厘米）
3. 按住空格键，鼠标可以变成小手，拖动视图
4. 用选区拖动，可以测量图片大小