CSS学习笔记

Posted 2021-06-29 coderkey

十，CSS浮动

1，传统网页布局的三种方式

普通流（标准流/文档流）、浮动和定位。

1.1，标准流（文档流/普通流）

（1）含义：

所谓的标准流：就是标签按照规定好默认方式排列。

（2）区别：

块级元素和行内元素都属于标准流。

（3）注意：

实际开发中，一个页面基本都包含了这三种布局方式，后面移动端学习新的布局方式。
网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找标准流浮动。

1.2，浮动

（1）含义：

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

（2）语法：

选择器 { float: 属性值；}

（3）属性值：

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2，浮动特性

2.1，浮动元素会脱离标准流（脱标）

（1）特点：

脱离标准流的控制（浮）移动到指定位置（动），俗称脱标。
浮动的盒子不再保留原先的位置。

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

（1）特点：

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

（2）注意：

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

2.3，浮动元素具有行内块元素特性

（1）特点：

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

（2）注意：

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据其内容来决定。
浮动的盒子中间是没有缝隙的，是紧挨在一起的。

2.4，浮动元素经常和标准流父级搭配使用

（1）方法：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。如：盒一和盒三不浮，中间盒二浮

3，清除浮动

3.1，清除浮动本质

（1）问题：

清除浮动的本质是清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

（2）语法：

选择器 { clear: 属性值; }

（3）属性值：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响。

4，清除浮动方法

4.1，额外标签法

（1）含义：

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

（2）方法：

额外标签法会在浮动元素末尾添加一个空标签。

（3）注意：

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

4.2，父级添加overflow

（1）方法：

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

4.3，:after伪元素法

（1）方法：

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

（2）语法：

  .clearfix: after {
      content:  "";    //必须写
      display:  block;
      height:  0;
      clear:  both;
      visibility:  hidden;
}
.clearfix  {   /*IE6、7专有 */
     *zoom:  1;
  }

4.4，双伪元素清除浮动

（1）方法：

也是给父元素添加。

（2）语法：

   .clearfix: before,
  .clearfix: after {
      content:  "";    
      display:  table;       
   }
  .clearfix: after {
          clear:  both;
   }
  .clearfix  {   
     *zoom:  1;
   }

5，常见的图片格式

5.1，jpg图像格式

（1）含义：

JPEG（JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的。

5.2，gif图像格式

（1）含义：

GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保留透明背景和动画效果。实际经常用于一些图片小动画效果。

5.3，png图像格式

（1）含义：

png图像格式是一种新兴的网络格式，结合了GIF和JPE的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式。

5.4，PSD图像格式

（1）含义：

PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点是可以直接从上面复制文字，获得图片，还可以测量大小和距离。

---

十一，CSS定位

1，CSS定位的组成

1.1，定位组成

（1）含义：

将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。左偏移则决定了该元素的最终位置。

1.2，定位模式

（1）含义：

定位模式决定元素的定位方式，它通过CSS的position属性来设置。

（2）属性：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.3，边偏移

（1）含义：

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

（2）属性：

边偏移	举例	描述
top	top: 80px	顶端偏移量。定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量。定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量。定义元素相对于其父元素左边线的距离
right	right: 80px	右侧偏移量。定义元素相对于其父元素右边线的距离

（3）注意：

可以为负数。

2，定位属性的参数值

2.1，静态定位

（1）含义：

静态定位是元素的默认定位方式，无定位的意思。

（2）语法：

选择器 { position: static; }

（3）注意：

静态定位按照标准流特性摆放位置，它没有边偏移。

2.2，相对定位

（1）含义：

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

（2）语法：

选择器 { position: relative; }

（3）特点：

1，它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当参照物。

2.3，绝对定位

（1）含义;

相对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

（2）语法：

选择器 { position: absolute; }

（3）特点：

1，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
2，如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。
3，绝对定位不再占有原先的位置。（脱标）

2.4，固定定位

（1）含义：

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

（2）语法：

选择器 { position: fixed; }

（3）特点：

1，以浏览器的可视窗口为参照物点移动元素。跟父元素无关，不随滚动条滚动。
2，固定定位不在占有原先的位置。（脱标）

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

1，让固定定位的盒子left: 50%。先走到浏览器可视区（也可以看做版心）的一半位置。
2，让固定定位的盒子margin-left: 版心宽度的一半距离。然后再走版心宽度的一半距离。

2.5，粘性定位

（1）含义：

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

（2）语法：

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

（3）特点：

1，以浏览器的可视窗口为参照点移动元素（固定定位特点）。
2，粘性定位占有原先的位置（相对定位特点）。
3，必须添加top、 left、 right、 bottom其中一个才有效。兼容性较差，IE不支持。

2.6，定位叠放次序z-index

（1）含义：

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

（2）语法：

选择器 { z-index: 1 ; }

（3）注意：

1，数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
2，只有定位的盒子才有z-index属性。
3，数字后面不能加单位。
4，如果属性值相同，则按照书写顺序，后来居上（层叠性）。

3，典型应用

3.1，绝对定位的盒子居中

（1）问题：

加了绝对定位的盒子不能通过margin: 0 auto水平居中。

（2）方法：

1，left: 50%;先让盒子的左侧移动到父级元素的水平中心位置。
2，margin-left;取负值让盒子向左移动自身宽度的一半。
3，top:50%;（垂直居中做法一样）
4，margin-top:

3.2，定位特殊特性

（1）含义：

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

（2）特点：

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是自身内容的大小。

3.3，绝对定位（固定定位）会完全压住盒子

（1）特点：

1，浮动元素不同，只会压住它下面标准流盒子，但不会压住下面标准流盒子里面的文字或者图片。
2，但绝对定位（固定定位）会压住下面标准流所有的内容。

（2）原因：

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

4，元素的显示与隐藏

4.1，display属性

（1）含义：

display属性用于设置一个元素应如何显示。本质：让一个元素在页面中隐藏或者显示出来。

（2）语法：

display: none; 隐藏对象
display: block; 除了转换为块级元素之外，同时还有显示元素的意思。

（3）特点：

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

4.2，visibility 可见性

（1）含义：

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

（2）语法：

visibility: visible; 元素可见
visibility: hidden; 元素隐藏

（3）特点：

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

4.3，overflow 溢出显示隐藏

（1）含义：

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

（2）属性值：

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管是否超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

（3）注意：

如果有定位的盒子，请慎用overflow: hidden因为它会隐藏多余的部分。

---