CSS布局

本文章记于2021.04.23

1.布局

正常布局流，display属性，弹性盒子，网格，浮动，定位，css表格布局，多列布局
正常布局流：在不对页面进行任何布局控制时，浏览器默认的HTML布局方式
position：正常布局流中，默认为 static
元素默认为display:inline

元素默认为display:block

（1）flex

flex-direction的初值是row
父元素上align-items属性的初值是stretch，意味着所有的子元素都会被拉伸到它们的flex容器的高度，在这个案例里就是所有flex项中最高的一项

（2）grid

Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐
分别使用 grid-template-rows和grid-template-columns两个属性定义了一些行和列的轨道

（3）float属性有四个可能的值：

• left — 将元素浮动到左侧
• right — 将元素浮动到右侧
• none — 默认值, 不浮动
• inherit — 继承父元素的浮动属性

（4）position

有五种主要的定位类型需要我们了解：
静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”
相对定位(Relative positioning)允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上
绝对定位(Absolute positioning)将元素完全从页面的正常布局流(normal layout flow)中移出，类似将它单独放在一个图层中，我们可以将元素相对于页面的 元素边缘固定，或者相对于该元素的最近被定位祖先元素(nearest positioned ancestor element)
固定定位(Fixed positioning)与绝对定位非常类似，但它是将一个元素相对浏览器视口固定，而不是相对另外一个元素
这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用
粘性定位(Sticky positioning)是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位

使用CSS表格来进行布局，在现在这个时间点应该被认为是一种传统方法，它通常会被用于兼容一些不支持Flexbox和Grid的浏览器

（5）多列布局

把一个块转变成多列容器(multicol container)，我们可以使用 column-count属性来告诉浏览器我们需要多少列，也可以使用column-width (en-US)来告诉浏览器以至少某个宽度的尽可能多的列来填充容器

2.默认的，一个块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致

内联元素的height width与内容一致

3.flexbox

弹性盒子是一种用于按行或按列布局元素的一维布局方法
设置行内元素为 flexible box，也可以置 display属性的值为 inline-flex
flex-flow缩写

flex-direction: row;
flex-wrap: wrap;
//等价于
flex-flow: row wrap;

flex缩写

flex-grow
flex-shrink
flex-basis

flex 项默认的 order值是 0
order 值大的 flex 项比 order 值小的在显示顺序中更靠后
order 值一样，源顺序中排在后面更靠后
假如不支持 弹性盒子功能就会完全打破布局，使其不可用

4.grid

后续补充