定位与布局

不念不忘少年蓝@ 2022-05-22 06:12 266阅读 0赞

1.        默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。

2.        默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。

3.        内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

4.        position: static; 静态定位是每个元素获取的默认值——它只是意味着将元素放入它在文档布局流中的正常位置。静态定位是默认行为。

5.        position: relative; top,bottom, left, 和 right 来精确指定要将定位元素移动到的位置。

6.        position: absolute; 定位的元素应该在文档流中的间隙不再存在，绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。top，bottom，left和right以不同的方式在绝对定位。它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。

7.        （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下，网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

8.        position: fixed; 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。

9.        position: sticky; 基本上是相对位置和固定位置之间的混合，其允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点，之后它变得固定。

10.    cursor CSS属性定义鼠标指针悬浮在元素上方显示的鼠标光标。

11.    Transitions是一个有意思的特性，允许你在状态改变的时候平滑的过渡，而不是粗暴的“开”或“关”。

12.    display: flex; 我们需要给这些flexible 元素的父元素 display 设置一个特定值。我们的多列布局具有大小相等的列，并且列的高度都是一样。设置了 display: flex 的父元素（在本例中是 <section>）被称之为 flex 容器。在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）。

13.    flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）—它默认值是 row。

14.    flex-wrap: wrap; 子代确实超出了它们的容器。 解决此问题的一种方法。

15.    应当注意到存在着 flex-direction 和 flex-wrap —的缩写 flex-flow。

16.    align-items 控制 flex 项在交叉轴上的位置。justify-content控制 flex 项在主轴上的位置。

17.    所有 flex 项默认的 order 值是 0。order 值大的 flex 项比 order 值小的在显示顺序中更靠后。你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。

18.    display:none 通常被JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

19.    相对定位相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

20.    被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

21.    清除浮动的推荐做法

22.    水平居中的方法：

l  行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素。

l  当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。 margin: 0 auto;

l  “不定宽度的块级元素”设置居中，可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block。

23.    垂直居中的方法（父元素是盒子容器且高度已经设定）

l  子元素是行内元素，高度是由其内容撑开的。这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中。

l  子元素是块级元素但是子元素高度没有设定。通过给父元素设定display:table-cell;vertical-align:middle来解决。

l  子元素是块级元素且高度已经设定。计算子元素的margin-top或margin-bottom，计算方法为(父元素高度-子元素高度)/2。

24.    水平垂直居中的方法

l  水平对齐+行高。text-align+ line-height实现单行文本水平垂直居中

l  水平+垂直对齐。在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle。

l  相对+绝对定位。使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto。

25.    七种实现左侧固定，右侧自适应两栏布局的方法

l  双inline-block方案。width:calc(100% - 140px)。为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。

l  双float方案。由于浮动的block元素在有空间的情况下会依次紧贴，排列在一行，所以无需设置display: inline-block;，自然也就少了顶端对齐，空格字符占空间等问题。

l  float+margin-left方案。利用了block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。

l  使用absolute+margin-left方法。若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

l  使用float+BFC方法。

l  flex方案.最好的方案。

l  grid方案。

26.    圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。写结构的时候要注意，父元素的的三栏务必先写中间盒子。

27.    需要设置其左边距为负的中间盒子的宽度，也就是.left \{margin-left:-100%;\}。这样左盒子才可以往最左边移动。

28.    需要设置其左边距为负的自己的宽度，也就是.right \{margin-left：-200px;\}。这样右盒子才可以在一行的最右边显示出自己。

29.    首先:利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。.container\{ padding: 0 200px;\} 其次:给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。.left\{ position: relative; left: -200px;\} .right\{position:relative;right: -210px;

30.    浮动 float，负边距 negative margin，相对定位 relative position，这是实现布局的三个最基本的原子技术。

31.    BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

32.    我们对BFC声明家族大致过了一遍，能担任自适应布局重任的也就是：overflow:auto/hidden IE7+，display:inline-blockIE6/IE7，display:table-cell IE8+。

33.    有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

34.    一定要border的样式，宽度，颜色都要设置才可以生效的，单独设置无效。