Internship5

Internship5

今天所学到的知识

• 定位（position）

  如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。
  定位是难点，一定要学好

  为什么要用定位？
  那么定位，最常运用的场景再那里呢？
  如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做。

元素的定位属性

边便宜
top 顶端偏移量
bottom 低部偏移量
left 左则偏移量
right 右侧偏移量
也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值 描述
static 自动定位（默认值）
relative 相对定位（移动过后，继续占着原本位置，不脱标，相对于自己）
absoulte 绝对定位 （脱标，移动过后，不占位置，相对于定位父级）
fixed 固定定位（脱标，固定在设置过的位置上，相对于浏览器移动）

父级没有定位
若所有父元素都没有定位，以浏览器为准对齐(document文档)。
父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

**子绝父相 **

非常重要，是我们的口诀

首先，绝对定位是将元素依据最近的已经定位绝对，固定，相对的父元素(祖先)进行定位。

也就是说,子级绝对定位，父级只要是定位(除static静态定位)就可以，也就是说，子绝父绝也行

那么，为何父级要求时相对定位呢？

子级绝对定位，父级就用相对定位(最优解),因为子级时绝对定位不占位置，就可放在父级的任何位置

因为父盒子在布局时，需要占有位置，因此父级要相对定位

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

水平居中的算法:

​ 1.left 50% ，父盒子的一半大小

​ 2.再有外边距负的一半值即可

叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

1.默认值是0，取值越大，定位元素越居上

2.取值相同，看书写顺序

3.数字没有单位

4.只有定位才有该属性，浮动，标准流，静态定位都没有该属性

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

display 显示

display 设置或检索对象是否及如何显示。

none 隐藏功能

block 除了转换成块级元素外，还有显示元素功能

特点：隐藏之后，不保留位置

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点：隐藏之后，继续保留位置

overflow 溢出

/overflow: visible;/ /默认值,超出显示/
/overflow: auto;/ /自动 超出显示滚动条,不超出不显示滚动条/
/overflow: scroll;/ /一直显示滚动条/
overflow: hidden; /不显示超出的内容,超出的内容隐藏/

CSS用户界面样式

cursor : default 小白 | pointer 小手 | move 移动 | text 文本

• 我是小白
• 我是小手
• 我是移动
• 我是文本

轮廓 outline
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0

防止拖拽文本域resize
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

右下角可以拖拽：

右下角不可以拖拽：

vertical-align 垂直对齐
以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。

图片和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

有个很重要特性你要记住： 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。

2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

word-break:自动换行
normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

text-overflow 文字溢出
text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）