css(7)

学习目标

理解定位的使用场景（盒子之间的层叠）

能够说出相对定位的特点（相对于自己原来的位置定位移动）

能够说出绝对定位的特点（相对于非静态定位的父元素定位移动）

能够说出固定定位的特点（相对于浏览器进行定位移动）

能够理解子绝父相（子盒子绝对定位，父盒子相对定位，布局中会经常使用到）

能够实现z-index控制元素的层级（数值越大，层级越高）

能够说出vertical-align属性的使用（设置文本于行内（图片）的垂直对齐方式）

能够说出三种隐藏元素的区别（超出隐藏、元素看不见、元素不存在）

。。。。。。

定位

解决了盒子与盒子之间的层叠问题

**问题：**现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半

初体验：

position：absolute； 设置定位

默认情况下，我们发现
left 是定位后相对于浏览器左边框的距离
top  是定位后相对于浏览器上边框的距离
right 是定位后相对于浏览器右边框的距离
bottom  是定位后相对于浏览器下边框的距离

static：静态定位（默认型）（有争议的）

页面中的元素默认都是静态定位，所有标准流中的元素都是静态定位

代码： position: static; （默认值）静态定位

**面试时候回答：**三种定位还是四种定位呢？

relative：相对定位（自恋型）

盒子相对于自己之前的位置定位移动（红绿蓝）

代码：position: relative； 相对定位

使用的时候，要配合 top，left，right，bottom 来使用
特点：如果设置了相对定位并且设置了 trbl 属性， 那么将来盒子会以盒子原本的位置发生偏移

特点：

• 要配合 trbl使用，不然无法移动

• 相对于自己原来的位置进行偏移

• 设置了相对定位的元素在页面上占据了位置（没有脱标）

总结：自恋型

**场景：**一般情况下应用于自己小范围的移动

一个文字旁边有个img太高了，可以移动到下面

absolute：绝对定位（拼爹型）

盒子相对于非静态定位的父元素进行定位移动

代码：position: absolute; 绝对定位

使用的时候，要配合 trbl 属性来使用

特点：

-----------------------------

• 绝对定位相对谁移动？？（判断有没有父元素， trbl 相对于谁？）
  • 没有父元素-》相对于浏览器进行移动
  • 有父元素（判断父元素有没有定位（三种，非static））
    • 父元素没有定位-》相对于浏览器进行移动
    • 父元素有定位-》相对于有定位的父元素进行移动
• 绝对定位的元素在页面中不占位置**（脱标）**

总结：拼爹型

场景： 子绝父相应用场景

将来在写页面的时候，用的最多的既不是绝对定位，也不是相对定位，而是绝对定位与相对定位一起配合使用：
（口诀）子绝父相（用的最多） 子绝父绝也可以（遇到父元素已经是绝对定位）

<div class="father">
    <div class="son">
        <div class="sunzi"></div>
    </div>
</div>

ヾ(๑╹◡╹)ﾉ"子绝父相定位居中案例

如果小盒子在大盒子（1）水平居中（2）水平垂直都居中

• 先 left：50%， 将小盒子在大盒子平移大盒子的一半

• 再设置 margin-left：-（小盒子自身宽高的一半），注意一定是负数， 那么将来小盒子就可以水平居中了

• 但是子盒子大小变化会出问题，margin-left：50%也是相对父元素的不行，所以要使用transform：translateX（-50%） 此时相对的是子盒子的50%

  .father : 600*400
  .son : 100*40 
  

ヾ(๑╹◡╹)ﾉ"课堂练习：网站头部

-----------------------------

fixed：固定定位 （死心眼型）

盒子相对于浏览器进行定位移动

代码：position: fixed; 固定定位

使用的时候，也要配合 trbl 属性来使用

特点：

• 不管页面有多大， trbl 永远是相对于浏览器的边框来的
• 固定定位的元素也不在页面中占据位置（脱标）

总结：死心眼型

注意的是：定位后的元素相当于行内块元素的特点

ヾ(๑╹◡╹)ﾉ"课堂练习：新浪网页

四种定位总结

是否脱标占有位置	定位模式	是否移动	移动位置基准
不脱标，正常模式	静态static	不可以	正常模式
不脱标，占有位置	相对定位relative	可以	相对自身位置移动
完全脱标，不占有位置	绝对定位absolute	可以	相对于定位的父级移动位置
完全脱标，不占有位置	固定定位fixed	可以	相对于浏览器移动位置

元素的层级问题（z-index）

设置页面中元素的层级关系，数值越大，层级越高

**取值：**正整数

注意：

• 标准流、浮动、定位之间的层级关系

  两个盒子之间的比较

  三种层叠关系：
  定位 > 浮动 > 标准流
  定位：相对定位、绝对定位、固定定位
  

• 定位之间的层叠问题：

  • 三者的层叠关系一样，写在下面的覆盖上面的

  • 可以手动设置定位元素的层级关系

    如果需要手动设置定位的层级关系，可以通过z-index属性设置层级
    z-index：数值;  后面的数值越大  层级越高
    
    

vertical-align（垂直对齐方式）

设置行内块元素（图片）的垂直对齐方式，优先給图片设置

问题： 图片和文字之间的距离

如果文本与图片在同一行中显示，那么将来文字和图片的默认对齐方式是文字的基线对齐图片的底线
vertical-align: 可以设置文本与行内块（图片）的垂直对齐方式

取值: 
	baseline 基线对齐（默认值）
	top	   顶线对齐
	middle 让中线对齐
	bottom 底线对齐

---

练习：

• 场景1 : input[text] 和 input[button]
• 场景2 : input 和 img
• 场景3 : div 里放一个input 无法靠顶
• 场景4 : line-height + img 垂直居中，还需要一个 vt:middle
• 场景5 : div下让一个img自动撑起来， 底下有间隙， 设置img middle（vertical-align给img设置！！！）

-----------------------------

overflow：溢出

设置盒子内容超出盒子大小时的展示效果

取值：

visible  超出不裁剪（默认值）
hidden   如果盒子中的内容超出盒子范围，就隐藏
scroll   显示滚动条
auto     根据具体的情况，判断是否要添加滚动条（不超出没有，超出有）

元素的隐藏区别

隐藏元素的几种方式的区别（大小盒子嵌套）

overflow:hidden；（超出隐藏）

隐藏超出部分

visibility：hidden；（元素看不见）

隐藏元素，将元素看不见，但是在页面中还是占位置！！

display：none；（元素不存在）

隐藏元素，将元素看不见，但是在页面中不占位置！！

<div class="one">测试隐藏</div>
<div class="two"></div>

html 标签中的嵌套关系（规范）

块级元素一般用于布局

行内元素用于放文字

标签之间是不能随意嵌套的，我们编写时遵循下面几条：

1. 行内元素里面一般放文字或者行内元素（少）(a标签不能互相嵌套：会解析成两个a)
2. 块级元素里面可以放行内元素和块级元素 (p标签里不能包div标签)
3. 只有文字才能组成段落, 所以p标签里面不要放块级元素, 类似的还有h系列,dt

总结：

看语义
1. p(段落) h(标题) span(文字) a(超链接) 一般都是放文字或者行内标签
   加粗标题 => h
   独占一行的段落文字 => p
   一行多个  => 可以点击 => a
            => 不可以点击  => span
2. div 里面可以放任意 
3. img+backgrond 有时可以混用（注意使用图片的时候，出现了bug很可能就是需要加上vertical-align：~）

ヾ(๑╹◡╹)ﾉ"考试题目bug（p标签不能嵌套div）

margin：0 auto；（了解）

块级元素默认有：margin-right: auto;

margin-left: auto;
margin-right: auto;

auto 的意义, 在于将 margin 值自动平均分配（加弹簧）

使用margin：0 auto居中：

• 有自己的宽高
• 是块级元素
• 有可均分的margin

**记忆：**有宽度的盒子

**注意：**所有固定定位，绝对定位的元素，都不能通过margin: 0 auto;居中。因为他们没有可供分配的 margin 值，它就像 line-block 一样

不能进行margin：0 auto分配的：

• 行内元素
• 行内块元素
• 浮动
• 定位（绝对和固定不行）

拓展

属性选择器

E[att=“val”] 选择具有att属性且属性值等于val的E元素。 input[type=“text”]

练习: 

1. <input type="text">
2. <input type="password">

结构伪类选择器 -child系列

• E:first-child 匹配父元素的第一个子元素E

  首先找到li 
  找li标签的父元素
  找父元素第一个子元素
  看这个子元素是不是li 是 加样式  不是  不加样式
  

• E:last-child 匹配父元素的最后一个子元素E

• E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效

n是从0开始 但是 nth-child是从第1个开始

练习:

 ul :   
 	width: 400px;  
 	height：400px；
 li:48*48px  36个

1. 第一行变成红色
2. 最后一行变成红色
3. 倒数第二行变成红色
4. 前4个变成红色