CSS layoutBlog

布局的入门知识，盒子模型：

盒子的高级属性：

1.设置宽高的约束：

width：70%
max－width：1280;
min - width:480px;
margin:0 auto;
##
dispaly:block;
margin:0 auto;
max-wdith:100%;
#前两条样式展示行为像一个块级元素并且在父容器内居中，真正神奇的是第三条——这个限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小

盒子的dispaly展示类型

1.block box:
定义为堆放在其它盒子之上的盒子（即盒子之前以及之后的内容出现在不同的行上），并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。
2.inline box:(跟块盒相反)
它跟随文档的文本流堆放（即，它会与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行）。宽度和高度设置对行内盒无效；在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置
3.inline-block box:()
介于前两者之间： 它会像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；不过，它可以像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行（对于一行文本容纳不下的行内盒，会落到第二行上，因为第一行上没有足够的空间容纳它，并且不会跨两行换行）
4.一些不常见的布局：table,flex,grid.

布局中的的属性:

浮动float，
定位position：
static：默认的行为，按照原来排列的方式
relative：用到属性盒子属性的top，left，right，bottom
absolute:绝对定位
定位上下文：故用到position的relative，absolute属性。
z-index:
“z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）
一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0
固定定位：
还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
position：sticky。

1.左右布局

链接
左右布局，假设有两个div，使用float浮动：第一个设置为left；

2.左中右布局

使用三个div，使用float浮动：前两个是设置使用left

3.Horizontally center

inline,inline-elements.

直接借用元素text-align:center;

block-elements:

使用margin：0 auto;

one more than block-elements:

使用两种方式居中：
1.对于每个div使用dispaly：inline-block，
同时多个div框起来的div使用：text-align:center;
2.对于使用display：flex；
同时使用justify-content: center；

4.Vertically Center：

4.1inline,inline-elements:

1.padding－top：30px;padding-bottom:30px;

4.2如果出于某种原因没有填充选项，并且您正在尝试将一些您知道不会换行的文本居中，那么有一个技巧是使行高等于将文本居中的高度:

将height与line-height等高：

4.3 multiple lines:

两种方式：一种是用pading，二：使用 vertical-align：链接
4.4block-level:
4.4.1知道高度时：
使用position：relative，position：absolute.
同时使用高度链接

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

4.4.2不知道高度时：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4.4使用fexlbox:is easy!

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

5.水平与垂直居中;

5.等其他小技巧

待定。