宏奕第三次笔记

浮动与定位

一、元素的浮动

1.元素的浮动属性float（指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程）

注：文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。

基本语法格式：选择器{float:属性值;}

元素怎样浮动

1.水平方向浮动就只能左右移动，不能上下移动。

2.元素浮动时直到它的外边缘碰到包含框或另一个浮动框的边框停止。

3.浮动元素之后的元素将围绕它。

4.浮动元素之前的元素将不会受到影响。

5.放在一起的元素有空间将会彼此相邻。

2.清除浮动（clear属性）

基本语法格式：选择器:{clear:属性值;}

注：（1）clear属性指定元素两侧不能出现浮动元素。（2）clear属性只能清除元素左右两侧浮动的影响，并不能清除子元素浮动对父元素的影响。

三种常用的清除浮动的方法：

（1）使用空标记清除浮动：在浮动元素之后添加空标记，并对该标记应用“clear:both”样式。(空标记可以是<div>、<p>、<hr/>等)

（2）使用overflow属性清除浮动：对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。

（3）使用after伪元素清除浮动：a.必须为需要清除浮动的元素伪对象设置“height:0;”样式。

b.必须在伪对象中设置content属性，属性值可以为空。

二.overflow属性（规范盒子溢出内容的显示方式）

基本语法格式：选择器{overflow:属性值;}

三、元素的定位

1.元素的属性定位

完成元素定位的三步：a.指定定位类型。b.设置偏移量。c.设置层叠等级属性。

2.静态定位（static 遵循正常的文档流对象）

3.相对定位（relative )

a.通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

b.移动相对定位元素，但它原本所占的空间不会改变。

4.绝对定位（absolute）

a.将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据html根元素（浏览器窗口）进行定位。

b.absolute定位使元素的位置与文档流无关，不占据空间。

c.absolute定位的元素和其他元素重叠。

5.固定定位（flexed）

a.元素的位置相对于浏览器窗口是固定位置，不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

b.Fixed定位使元素脱离标准文档流的控制，因此不占据空间。

c.Fixed定位的元素和其他元素重叠。

6.粘性定位（sticky）

a.父元素不能overflow: hidden或者overflow: auto属性。
b.必须指定top,right, bottom, left4个值之一，否则只会处于相对定位。
c.父元素的高度不能低于sticky元素的高度。
d.sticky元素仅在其父元素内生效。

7.层叠等级属性 z-index（用于指定元素的堆叠顺序）

a.z-index属性仅对定位元素有效。

b.如果两个定位元素重叠，没有指定z -index，最后定位在HTML代码中的元素将被显示在最前面。

四、元素的类型与转换

1.元素的类型

（1)块元素：块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。

（2）行内元素：其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见行内元素：<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等。

2.元素的转换（display属性）

display属性常用属性值：

(1)inline：此元素将显示为行内元素（行内元素默认的display属性值）。

(2)block：此元素将显示为块元素（块元素默认的display属性值）。

(3)inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。

(4)none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

3.span标记

<span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用。当其他行内标记都不合适时，就可以使用<span>标记。

a.<span> 用于对文档中的行内元素进行组合。

b.<span>标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span>元素中的文本与其他文本不会任何视觉上的差异。

c.<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

五、Flex弹性布局

（注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效)

六大属性

1.flex-direction属性（决定主轴的排列方向）

属性值如下：

a.row（默认值）：主轴为水平方向，起点在左端。

b.row-reverse：主轴为水平方向，起点在右端。

c.colum：主轴为垂直方向，起点在上沿。

d.colum-reverse：主轴为垂直方向，起点在下沿。

2.flew-wrap属性（定义换行或不换行）

属性值如下：

a.nowrap：不换行。

b.wrap：换行，第一行在上方。

c.wrap-reverse：换行，第一行在下方。

3.flex-flow属性（flex-direction属性和flex-wrap属性的简写形式）

4.justify-content属性（定义项目在主轴上的对齐方式）

属性值如下：

a.flex-start（默认值）：左对齐。

b.flex-end：右对齐。

c.center： 居中。

d.space-between：两端对齐，项目之间的间隔都相等。

e.space-around：每个项目两侧的间隔相等。

5.align-items属性（定义项目在交叉轴上如何对齐）

属性值如下：

a.flex-start：交叉轴的起点对齐。

b.flex-end：交叉轴的终点对齐。

c.center：交叉轴的中点对齐。

d.baseline: 项目的第一行文字的基线对齐。

e.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content属性（定义了多根轴线的对齐方式）

属性值如下：

a.flex-start：与交叉轴的起点对齐。

b.flex-end：与交叉轴的终点对齐。

c.center：与交叉轴的中点对齐。

d.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

e.space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

f.stretch（默认值）：轴线占满整个交叉轴。

项目的属性

1.order属性（定义项目的排列顺序，数值越小，排列越靠前，默认为0）

2.flew-grow属性（属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）

3.flew-shrink属性（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小）

4.flex-basis属性（定义了在分配多余空间之前，项目占据的主轴空间）

5.flex属性（flex-shrink 和 flex-basis的简写）

6.align-self属性（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）