前端学习笔记之CSS(3)

Css浮动：

传统网页布局的三种方式：普通流（标准流）、浮动、定位

标准流（普通流/文档流）：标签按照规定好默认方式排列。

 

 什么是浮动？

 

 

 浮动的特性：

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

如果多个盒子都设置了浮动，他们会按照属性值一行内显示并且顶端对齐排列。

浮动的元素是紧紧贴在一起的，如果父级元素装不下这些盒子，就会另起一行对齐。

浮动元素具有行内块元素的特性。

但是如果不给父盒子高度，孩子加了浮动之后，父盒子的高度就变成零，出现问题。这时候就需要清除浮动。

清除浮动的本质：

 

清除浮动的方法：

1.额外标签法，也成为隔墙发，W#C推荐的做法；(新添加的必须是块级元素)

2.父级添加overflow属性；

3.父级元素添加after伪元素；

4.父级添加双伪元素。

CSS定位：

 定位=定位模式+边偏移

定位模式：通过position属性来设置，有四个值。

 边偏移：

 

 静态定位static(了解)：默认定位方式，无定位的意思。

 

 相对定位relative（重要）

 

 绝对定位absolute(重要)

 

 

 子绝父相：如果子级使用绝对定位，父级就要使用相对定位

 固定定位fixed(重要)：将元素固定于浏览器可视区的位置。应用场景：浏览器滚动页面时元素的位置不变。

 

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

 粘性定位sticky(了解)：相对定位和固定定位的混合。

 

 

定位总结：

 定位的叠放次序z-index

 

 定位的拓展

（1）绝对定位的盒子居中

 （2）定位的特殊性：

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

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

 如果一个盒子既有left属性又有right属性，默认执行left属性。

 元素的显示与隐藏：

★(1)display显示隐藏

display用于设置一个元素应如何显示，隐藏元素后，不再占有原来的位置。

 (2)visibility（可见性）显示隐藏隐藏之后，继续占有原来的位置。

 (3)overflow溢出显示隐藏

 

 CSS用户界面样式：

(1)更改用户的鼠标样式cursor

 

 (2)表单轮廓outline

 

 (3)防止表单域拖拽resize

Vertical-align属性应用：经常用于设置图片或者表单（行内块元素）和文字垂直居中

 

解决图片底部默认空白缝隙问题

Bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

 溢出的文字显示省略号

(1)单行文本溢出显示省略号：必须满足三个条件

 

 (2)多行文本溢出显示省略号