CSS.3（笔记）

11 CSS浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 { float: 属性值; }

浮动特性（重难点）

1. 浮动元素会脱离标准流(脱标) 

脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）

2. 浮动的元素会一行内显示并且元素顶部对齐 

浮动的盒子不再保留原先的位置

注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

3. 浮动的元素会具有行内块元素的特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

l 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

l 浮动的盒子中间是没有缝隙的，是紧挨着一起的

l 行内元素同理

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

11.1 清除浮动

选择器{clear:属性值;}

清除浮动方法

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。

2. 父级添加 overflow 属性

3. 父级添加after伪元素

4. 父级添加双伪元素

清除浮动 —— 额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如<divstyle=”clear:both”></div>，或者其他标签（如<br />等）。

注意： 要求这个新的空标签必须是块级元素。

清除浮动 —— 父级添加 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

清除浮动 —— :after 伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

清除浮动 —— 双伪元素清除浮动

也是给给父元素添加

清除浮动总结

为什么需要清除浮动？

① 父级没高度。

② 子盒子浮动了。

③ 影响下面布局了，我们就应该清除浮动了。

12 定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移 。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

 

12.1 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：

选择器 { position: relative; }

相对定位的特点：（务必记住）

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

12.2 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

选择器 { position: absolute; }

绝对定位的特点：（务必记住）

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3. 绝对定位不再占有原先的位置。（脱标）

所以绝对定位是脱离标准流的。

12.3 固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 { position: fixed; }

固定定位的特点：（务必记住）

1. 以浏览器的可视窗口为参照点移动元素。

l 跟父元素没有任何关系

l 不随滚动条滚动。

2. 固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧： 固定在版心右侧位置。

小算法：

1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。

2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

12.3 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

2. 粘性定位占有原先的位置（相对定位特点）

3. 必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

定位的总结

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：

选择器 { z-index: 1; }

l 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

l 如果属性值相同，则按照书写顺序，后来居上

l 数字后面不能加单位

l 只有定位的盒子才有 z-index 属性

定位的拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动自身宽度的一半。

2.定位特殊特性

绝对定位和固定定位也和浮动类似。

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3. 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

4. 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1. display 显示隐藏

2. visibility 显示隐藏

3. overflow 溢出显示隐藏

display 属性

display 属性用于设置一个元素应如何显示。

l display: none ；隐藏对象

l display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

l visibility：visible ; 元素可视

l visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置， 就用 visibility：hidden

如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。

1. display 显示隐藏元素 但是不保留位置

2. visibility 显示隐藏元素 但是保留原来的位置

3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理

13 CSS高级技巧

13.1 精灵图

主要借助于背景位置来实现---background-position 。

13.2 字体图标

span {

font-family: "icomoon";

}

13.2 CSS三角

13.3 用户界面样式

鼠标样式 cursor

li {cursor: pointer; }

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {outline: none; }

防止拖拽文本域 resize

textarea{ resize: none;}

13.3 溢出的文字省略号显示

单行文本溢出显示省略号--必须满足三个条件

/*1. 先强制一行内显示文本*/

white-space: nowrap; （ 默认 normal 自动换行）

/*2. 超出的部分隐藏*/

overflow: hidden;

/*3. 文字用省略号替代超出的部分*/

text-overflow: ellipsis;

多行文本溢出显示省略号

overflow: hidden;

text-overflow: ellipsis;

/* 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 限制在一个块元素显示的文本的行数 */

-webkit-line-clamp: 2;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;

 

13.4 布局技巧

1. margin负值运用

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

2. 文字围绕浮动元素

3. 行内块巧妙运用

页码在页面中间显示:

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;

2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

4. CSS 三角强化

width: 0;

height: 0;

border-color: transparent red transparent transparent;

border-style: solid;

border-width: 22px 8px 0 0;