4、行内块元素

在行内元素中有几个特殊标签——//，它们可以具有块元素和行内元素的特点

行内块元素的特点

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度
3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

5、元素显示模式的转换

• 转换为块元素

  display: block;

  a {
      width: 30px;
      height: 30px;
      /* 把行内元素a转换为块级元素 */
      display: block;
  }
  

• 转换为行内元素

  display: inline;

  div {
      /* 把div块级元素转换为行内元素 */
      display: inline;
      width: 30px;
  }
  

• 转换为行内块

  display: inline-block;

  span {
      /* 把span转换为行内块 */
      display: inline-block;
  }
  

6、垂直居中

盒子的高度等于行高

十、CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等

1、背景颜色

background-color属性定义了元素的背景颜色

div {
background-color: 颜色值;
}

一般情况下元素的背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色

2、背景图片

background-image属性定义了元素的背景图片

div {
    /* 不要拉下url() */
    background-image: url(图片url);
}

3、背景平铺

如果需要在HTML页面对背景图片进行平铺，可以使用background-repeat属性

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

repeat：平铺（默认），repeat-x：沿着X轴平铺，no-reapeat：不平铺

4、背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position: x y;
/* 如果是方位名词，right center和center right 效果是等价的 */

参数代表的位置：x坐标和y坐标。可以使用方位名词或者精确位置

参数是方位名词

• 如果指定两个字都是范围名词，则两个值的位置是无关的
• 如果只指定了一个方位名词，另一个是省略，则第二个值默认居中对齐

参数是精确单位

• 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
• 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中参数

参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

5、背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分移动

用来做视觉滚动效果

background-attachment: scroll | fixed

6、复合型写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置;

7、背景色半透明

background: rgba(255, 255, 255, 0.3);
opacity: 0.5;  /* 也可以设置背景透明度 */

最后一个参数是alpha透明度，范围是在0~1之间

我们习惯把0.3的0省略掉，写为background: rgba(0, 0, 0, .3);

背景半透明是指盒子背景半透明，盒子里面的内容不受影响

8、总结

十一、CSS三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级

1、层叠性

相同选择器个设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则

• 样式冲突：遵循的原则是就近原则，哪个样式离结构近就执行哪个样式

  div {color: red}
  div {color: pink}  # 就近原则
  

• 样式不冲突：不会层叠

2、继承性

现实中的继承，我们继承了父亲的姓

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解是：子承父业

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性
• 子元素可以继承父元素的某些样式（text-, font-, line-这些元素开头的可以继承，以及color属性）

行高的继承

div {
    font: 12px/1.5 "Microsoft YaHei";    /* 那个1.5代表字体大小的1.5倍 */
}

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素的行高
• 此时子元素的行高是：当前子元素的文字大小的1.5倍
• 这样的写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

当同一个元素指定了多个选择器，就会有优先级的产生

• 选择器相同，则执行层属性

• 选择器不同，则根据选择器的权重执行

  • 继承 / * < 元素选择器 < 类选择器 / 伪类选择器 < ID选择器 < 行内样式 < !important 重要的
  • |0, 0, 0, 0 | 0, 0, 0, 1 | 0, 0, 1, 0 | 0, 1, 0, 0 | 1, 0, 0, 0 | = 无穷大 | --> 选择器权重
  • 优先级注意点：
    • 权重是由4位数字组成，但是不会有进位
    • 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
    • 等级判断从左到右，如果是某一位数值相同，则判断下一位
    • 继承的权重是0，如果该元素没有直接被选中，不管父元素权重有多高，子元素得到的权重都是0
    • 所以我们看这个标签到底执行哪个样式，就先看这个标签有没有直接被选出来

• 指代的范围越小，权重越大

div {
    color: red!important;  /* !important，其权重最高 */  
}

权重叠加

如果过复合选择器，则会有权重的叠加，需要计算权重

权重虽热会叠加，但是不会有进位的问题

div ul li |----->| 0, 0, 0, 3 |
.nav ul li |---->| 0, 0, 1, 2 |
a:hover |------->| 0, 0, 1, 1 |
.nav a |-------->| 0, 0, 1, 1 |

注意：a标签浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}

十二、页面布局

页面布局的步骤

1. 先准备好相关的网页元素，网页元素基本都是盒子
2. 利用CSS设置好的盒子样式，然后摆放到相应的位置
3. 往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

1、盒子模型

页面布局：盒子模型、浮动 和 定位，学好盒子模型能非常好的帮助我们布局页面

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS盒子模型的本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

组成

border边框

• border可以设置元素的宽度。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

  属性	作用
  border-width	边框的粗细，一般情况下都用px
  border-style	边框的样式,/ scolid实线边框 / dashed虚线边框 / dotted点线边框
  border-color	边框颜色
  复合写法	border:1px scolid red; 注意没有先后顺序

  边框分开写法

  border-top: 1px scolid red;  /* 只设定上边框，其余同理*/
  /* 还有buttom left right */
  

表格的细线边框

• border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

  border-collapse: collapse;  /* 合并的意思 */
  

注意

• 边框会增加盒子的实际大小

  1. 测量盒子大小的时候不要量边框

  2. 如果测量的时候包括了边框，则需要width/height 减去边框的宽度

content内容

content内容就是盒子的内容部分

padding内边距

padding属性用于设置内边距，即边框与内容之间的距离

复合写法

注意

• padding会影响盒子实际大小
• 内容和边框有了距离，添加了内边距
  1. 如果要保持盒子的大小和原来的一致，则让 width/height 减去多出来的内边距大小即可
• 如果没有给盒子指定宽度padding不会影响，则不会撑开盒子的大小

margin外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

margin简写方式代表的意义和padding的简写方式大概相同

外边距的典型应用

• 外边距可以让块级盒子水平居中

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

  以上方法是让块级元素水平居中，行内块元素或者行内元素水平居中给父元素添加 text-align： center即可

• 问题

  • 相邻块元素垂直外边距的合并

    • 当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom 与 margin-top 之和。取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并
      • 解决方案：尽量只给一个盒子添加margin值

  • 嵌套块元素的塌陷

    • 对于两个嵌套关系的块元素，父元素有上边距，同时子元素也有上边距，此时父元素会塌陷较大的外边距
      • 解决方案
        • 可以为父元素定义一个上边框
        • 可以为父元素第一一个内边距
        • 可以为父元素添加overflow: hidden

清除内外边距

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

* {
    padding: 0;
    margin: 0;   /* 使用通配符清除 
    					这也是我们CSS的第一行代码*/
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素和行内块元素就可以了

2、PS基本操作

因为网页美工大部分效果图都是利用PS来做的，所以以后我们大部分切图工作都是在PS里面完成

• 文件 -》打开：可以打开我们要测量的图片
• Ctrl + R：可以打开标尺，或者 视图-》标尺
• 右击标尺，把里面的单位改为像素
• Ctrl + 加号，可以放大视图
• 按住空格键，鼠标可以变成小手，拖动PS视图
• 用选区拖动，可以测量大小
• Ctrl + D可以取消选区，或者在旁边空白处点击一下也可以取消选区

3、圆角边框**

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了

border-radius属性用于设置元素的外边框的圆角

border-radius: 10px;  /* 添加圆角 */

radius 半径（圆的半径）原理：椭圆和边框的交集形成圆角效果

• 参数可以是数值或百分比形式
• 如果是正方形，想要设置为一个圆，把数值改为高度或宽度的一半即可，或者直接写为50%
• 如果是一个矩形，设置为高度的一半可以做圆角矩形
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

4、阴影

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;

注意

• 默认的是外阴影（outset），但是不可以写这个单词，否则阴影无效
• 盒子阴影不占用空间，不会影响其他盒子的排序

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;

十三、浮动

传统网页布局的三种方式

• 普通流（标准流）
  • 所谓标准流，就是标签按照规定好的默认方式排列
    1. 块级元素会独占一行，从上向下排序排列
    2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
• 浮动
• 定位

1、为什么需要

有很多的网页效果，标准流是没办法完成，此时就可以利用浮动完成页面布局，因为浮动可以改变元素标签的默认的排序方式

浮动最典型的应用：可以让多个块级元素一行内显示

网页布局第一准则：多个块级元素纵向排列找标准线，多个块级元素横向排列找浮动

2、什么是浮动

浮动属性用于创建浮动框，将其移动到一边，知道左边或右边缘触及包含块或另一个浮动框的边缘

选择器 { float: 属性值; }

3、浮动特性

1. 浮动的元素会脱离标准流（脱标）
   • 脱离标准流的控制（浮）移动到指定位置（动）
   • 浮动的盒子不再保留原先的位置
2. 浮动元素会一行内显示并且元素顶部对齐排列
   • 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子多出的盒子会另起一行对齐
   • 浮动元素中间是没有空隙的
3. 浮动元素会具有行内块元素的特性
   • 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性
   • 如果行内元素有了浮动，则不需要转换成行内块元素就可以直接给高度和宽度

4、应用

浮动元素经常和标准流父级元素搭配使用

为了约束浮动元素位置，我们网页布局一般采用的策略是：

• 先采用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

5、注意

浮动元素和标准流的父盒子搭配

• 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动

• 一个盒子里面有多个盒子，如果其中一个盒子浮动，那么其他兄弟也应该浮动，以防止引起问题
• 浮动的盒子只影响浮动盒子后面的标准流，不会影响前面的标准流

6、清除浮动

由于父级盒子在很多情况下，不方便设置高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

• 由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响
• 父级没有高度
• 子盒子浮动了
• 影响下面的布局

清除浮动的本质是清除浮动元素造成的影响

选择器 { clear: 属性值; }

清除浮动方法

1. 额外标签法，也称隔离法，是W3C推荐的做法

   额外标签法会在浮动元素末尾添加一个空标签。例如：

   ，或者其他标签
   • 优点：通俗易懂，书写方便
   • 缺点：添加许多无意义的标签，结构比较差

2. 父级添加overflow属性

   • 可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
   • 注意是给父级元素添加代码
   • 优点：代码简洁
   • 缺点：无法显示溢出部分

3. 父级添加after伪元素

   • .clearfix:after {
         content: "";
         display: block;
         height: 0;
         clear: both;
         visiblity: hidden
     }
     .clearfix {
         *zoom: 1;  /* IE6 IE7 专有 */
     }
     

   • 优点：没有增加标签，结构简单

   • 缺点：照顾低版本浏览器

4. 父级添加双伪元素

   • .clearfix:before, .clearfix:after {
         content: "";
         display: table;
     }
     .clearfix:after {
         clear: both;
     }
     .clearfix {
         *zoom: 1;
     }
     

   • 优点：代码更简洁

   • 缺点：照顾低版本浏览器

十四、PS切图

1、常见的图片格式

1. jpg图像格式：JPEG（JPG）对色彩信息保留较好，高清、颜色较多，我们产品类的图片经常使用JPG格式
2. gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景的动画效果，实际效果经常用于一些图片小动画效果
3. png图像格式：其是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成透明背景，选择png格式
4. psd图像格式：psd格式是PS专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点是我们可以直接从上面复制文字，获得图片，还可以测量大小和距离

2、PS切图

图层切图

最简单的切图方式：右击图层 -> 快速导出为png

但是很多情况下，我们需要合并图层再导出

1. 选中需要的图层：图层菜单 -> 合并图层（Ctrl + e）
2. 右击 -> 快速导出为png

切片切图

1. 利用切片选中图片
   • 利用切片工具手动划出
2. 导出选中的图片
   • 文件菜单 -> 导出 -> 存储为web设备所用的格式 -> 选择我们要的格式 -> 存储

PS插件切图

Cutterman是一款运行在PS里面的插件，能够自动将需要的图层进行输出，以代替传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程

3、页面布局整体思路

1. 必须确定页面的版心（可视区），我们测量可知
2. 分析页面中的行模块，以及每个行模块中的列模块，其为页面布局的第一准则
3. 一行中的列模块经常浮动布局，先确定每个列的大小之后确定列的位置，页面布局第二准则
4. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要
5. 所以，先理清楚页面结构，再写代码尤为重要，这需要我们多积累

头部制作

实际开发中，我们不会直接用链接a，而是用li包含链接（li + a的做法）

• li + a 语义更加清晰，一看这就是有条理的列表型内容
• 如果直接用a。搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

导航栏注意点

• 让导航栏一行显示，给li加浮动，因为li是块元素，需要一行显示
• 导航栏可以不给宽度，将来可以继续添加其余文字
• 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度