009-Web前端-CSS基础理论-浮动与定位

浮动与清除，Display属性，Position定位，Z-index方位

#6.1 我 节日快乐

---

Def：定义元素框相对于其正常位置应该出现的位置

分类：

普通流定位 浮动定位 相对定位 绝对定位 固定定位

---

浮动定位：

将元素排除在普通流之外，元素将不在页面中占据空间，将浮动元素放置在包含框的左边或者右边，浮动元素依旧位于包含框之内，浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素的外边缘不会超过其父元素的内边缘

浮动元素不会互相重叠

浮动元素不会上下浮动

行内元素浮动后会变为块级元素

语法：float:none/left/right;

清除浮动：

清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。

属性：clear

值：left、right、both

清除浮动的常用方式：

1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）

2.浮动元素的父级div定义 伪元素::after

3.浮动元素的父级div定义 overflow:hidden

#6.8注：overflow必须要height width定义才有意义，否则拿什么溢出？所以会为父元素自动定义高度。

4.浮动元素的父元素定高

---

display属性

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。

display常见属性值：

1.none：隐藏对象

（且不占空间visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在    display:none 隐藏元素，不保留物理空间）

2. inline：指定对象为内联元素

3. block：指定对象为块元素

4. inline-block：指定对象为内联块元素/行内块元素，即在同一行显示，又可以设置宽高，margin和padding可以设置四周（注意：识别代码之间的空白）

<div>块内的

<div></div> <div></div> <div></div>与<div></div> <div></div> <div></div>的不同

5. table-cell：指定对象作为表格单元格（一列一列的）

6. flex：弹性盒

---

position定位

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

1.静态定位static

对偏移量不起作用。一般应用于去除定位

2.relative相对定位(自恋型)

相对于自己来偏移位置（相对于原来左上角的基点来便偏移）

通过便偏移来移动位置，但是原来所占的位置 继续占有

3.absolute绝对定位

相对于整个浏览器来边偏移

如果发生边偏移，那么它 不再占有空间

4.fixed固定定位

#6.4 添

position: absolute;的元素会相对于第一个设置了position: relative;的祖先元素进行定位

---

文档流

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。
 

---

居中

1.内容水平居中 text-align:center

2.一行文字垂直居中 line-height=height

3.盒子水平居中 margin: 0 auto;

4.子元素在父元素中居中

    1)弹性盒子 2)table-cell 3)绝对定位

---

Z-index堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠

可以使用z-index属性来控制元素框出现的重叠顺序

z-index 仅能在定位的元素 上生效

z-index属性：

值为数值，数值越大表示堆叠顺序越高，即离用户越近

可以设置为负值，表示离用户更远 ，一般不要设置

---

#CSS理论部分/完

世界巨大，我以渺小来爱它，时间悠长，我以短暂来爱它。

——海桑《不如让每天发生些小事情》