随笔3

Posted 2021-03-22 wyee

让一个不定宽高的 DIV，垂直水平居中?

1.使用Flex

  只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

2.position 几个属性的作用

  position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用。

     **static:默认位置。**在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。
     **relative:相对定位。**相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。
     **absolute:绝对定位。**设置为 absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
     **fixed:固定定位。**位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3.浮动相关知识

float属性的取值；left：元素向左浮动；right：元素向右浮动；none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

浮动的特性：浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则：

浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性
如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素
浮动元素会尽可能地向顶端对齐、向左或向右对齐
重叠问题

行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上
clear属性clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。取值：left、right、both