浮动和定位、背景图片和精灵图相关

• 网页的布局方式
  • 网页布局方式就是指浏览器是如何对网页中的元素进行排版的

• 标准流(文档流/常规流)排版方式
  • 浏览器默认的排版方式就是标准流
  • 在标准流中有两种排版方式,一种是垂直排版,一种是水平排版
    • 垂直排版:如果是块级元素,那么就会垂直排版
    • 水平排版:如果是行内元素/行内块级元素,那么就水平排版

 

---

• 浮动流排版方式
  • 浮动流是一种"半脱离标准流"的排版方式
  • 浮动流只有一种排版方式,就是水平排版,它只能设置某个元素左对齐或右对齐
  • 注意点
    • 浮动流中没有居中对齐,也就是说没有center这个取值
    • 在浮动流中不可以使用margin:0 auto;
  • 特点:
    • 在浮动流中是不区分块级元素/行内元素/行内块级元素的,无论是块级/行内/行内块级都可以水平排版
    • 在浮动流中无论是块级/行内/行内块级元素都可以设置宽高
    • 综上所述,浮动流中的元素和标准流中的行内块级元素很像
  • 什么是浮动元素的脱标
    • 当某一个元素浮动后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标
  • 浮动元素脱标之后有什么影响
    • 如果前一个元素浮动了,而后一个元素没有浮动,那么这个时候前面的一个元素就会盖住后面的一个元素
  • 浮动元素排序规则
    • 相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素显示在后面
    • 不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动
    • 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定
  • 浮动元素的贴靠现象
    • 如果父元素的宽度能够显示所有浮动元素,那么浮动的元素会并排显示
    • 如果父元素的宽度不能显示所有浮动元素,那么会从最后一个元素开始往前贴靠
    • 如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或右边
  • 什么是浮动元素的字围现象
    • 浮动元素不会遮挡住没有浮动元素中的文字,没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
  • 清除浮动
    • 给不需要浮动的属性添加clear:both;
    • 值的取值有none,left,right,both,一般都用both,表示两边都不要浮动元素

 

 

---

定位

定位流

• 相对定位
• 绝对定位
• 固定定位
• 静态定位

---

相对定位

• 相对定位语法
  • position:relative;
  • top:30px;
  • letf:30px;
  • 注意点,在position:relative;下面要写上相应的定位方向和像素.
• 什么是相对定位
  • 相对定位就是相对于自己以前在标准流中的位置来移动
• 相对定位的注意点
  • 相对定位是不脱离标准流的,会继续在标准流中占用一份空间
  • 在相对定位中同一个方向上的定位属性只能使用一个
  • 由于相对定位是不脱离标准流的,所以相对定位中是区分块级元素/行内元素/行内块级元素的
  • 由于相对定位是不脱离标准流的,所以相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局
• 相对定位的应用场景
  • 用于对元素微调
• 单独使用相对定位的弊端
  • 相对定位不会脱离标准流,会继续在标准流中占用一份空间,所以不利于布局界面

---

绝对定位

• 绝对定位语法
  • position:absolute;
  • top:30px;
  • left:30px;
  • 注意点,和相对定位一样,在position:absolute;下面要跟上相应的定位方向和像素
• 什么是绝对定位
  • 默认情况下,所有的绝对定位流元素,无论有没有祖先元素,都会以body作为参考点
• 绝对定位注意点
  • 绝对定位的元素是脱离标准流的
  • 绝对定位的元素是不区分块级元素/行内元素/行内块级元素,都可以给元素设置宽高
  • 如果一个绝对定位元素是以body为参考点,那么其实是以网页首屏的宽度和高度做为参考点,而不是以整个网页的宽度和高度作为参考点.也就是说当网页有滚动条时,拉动滚动条,绝对定位的元素会跟随滚动条的滚动而移动,而不是始终显示在某一个固定的地方.
  • 一个绝对定位的元素会忽略祖先元素的padding
• 绝对定位的参考点
  • 如果一个绝对定位元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
    • 只要是这个绝对定位元素的祖先都可以,不一定必须是父元素
    • 这里的定位元素指的是相对定位/绝对定位/固定定位都可以,但静态定位不行
  • 如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流,那么这个绝对定位元素会以离它最近的那个定位流的祖先元素为参考点
• 单独使用绝对定位的弊端
  • 默认情况下绝对定位的元素会以body作为参考点,所以会随着浏览器的高度宽度变化而变化

 

 

---

固定定位

固定定位语法

• position:fixed;
• bottom:50px;
• right:50px;
• 和绝对定位一样,要在position:fixed;下面添加相应的方向和像素.

 

固定定位注意点

• 固定定位可以让某个盒子不随滚动条的滚动而滚动
• 固定定位的元素是脱离标准流的,不会占用标准流的空间
• 固定定位和绝对定位一样不区分行内/块级/行内块级,都可以给元素设置宽高

 

 

 

---

子绝父相

• 绝对定位和相对定位一般不单独使用,单独使用哪种都会有缺点,所以要配合使用
• 把要调整位置的元素设置为绝对定位,再把他的父元素设置为相对定位,简称"子绝父相"

 

如何让绝对定位的元素水平居中

1. 设置绝对定位元素的left:50%;
2. 设置绝对定位元素的margin-left:-元素宽度的一半px;

 

---

z-index属性

• 语法: z-index:0~99;
• 设置元素的重叠顺序,值越大,越靠上
• 取值范围:0~任意整数,默认值为0,一般不用负数
• 如果两个元素z-index属性的值相同,后加载的靠上

 

背景图片和精灵图

• 设置背景颜色
  • background-color:red;
• 设置背景图片
  • background-image:url(img/abc.png);
• 图片的显示方式
  • 当图片尺寸小于其父标签的长宽时的显示方式
    • background-repeat:no-repeat;
      • 不重复
    • background-repeat:repeat-x;
      • 横向重复
    • background-repeat:repeat-y;
      • 纵向重复
    • background-repeat:repeat;
      • 全部重复(默认选项)
• 背景图片的位置
  • background-position:right bottom;
    • 第一个参数:左右对齐方式
    • 第二个参数:上下对齐方式
  • background-position:center;
    • 图片居中显示
  • background-position:70px 70px;
    • 图片左上角距离父元素左上角的距离
    • 第一个参数为x轴,第二个参数为y轴
• 图片是否随之滚动
  • background-attachment:scroll;
    • 跟随滚动(默认选项)
  • background-attachment:fixed;
    • 不跟随滚动
• 简写方式
  • background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
  • 注意点,背景的任何一个属性都可以省略
• 注意点
  • 同一个标签可以同时设置背景颜色和背景图片,并且背景图片会覆盖背景颜色
• 背景图片和插入图片(img标签)的区别
  • 区别1

• • • 背景图片仅仅是一个装饰, 不会占用位置
    • 插入图片会占用位置
  • 区别2
    • 背景图片有定位属性, 所以可以很方便的控制图片的位置
    • 插入图片没有定位属性, 所有控制图片的位置不太方便
  • 区别3
    • 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

 

 

 

 

---

 

什么是精灵图

• CSS精灵图是一种图像合成技术

 

精灵图的作用

• 可以减少请求的次数,以及可以降低服务器处理压力

 

如何使用精灵图

• CSS精灵图需要配合背景图片和背景定位来使用