历史
1 .table布局
2 .float布局
3 .fllex布局
默认:正常流布局
1 .在不对页面进行任何布局控制时，浏览器默认的HTML布局方式
2 .HTML元素完全按照源码中出现的先后次序，按照自身是块级元素还是内联元素进行显示
3 .当你使用css创建一个布局的时候，你正在离开正常布局流。但是对于页面上的大多数元素，正常布局流完全可以创建想要的布局。所以结构良好的HTML元素文档是非常重要的
常规流中的块和内联布局
1 .常规流中的任何一个盒子总是某个格式区域的一部分。块级各自是在块级格式区域（BFC）中工作的盒子
1 .在一个块级格式区域中，盒子会从包含块的顶部开始.按照垂直排列。同级盒子间的垂直距离会由margin属性决定。
2 .相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。一个有下边距，一个有上边距，会折叠
3 .在块级格式化区域内，每个盒子的左外边缘会与包含块做边缘重合
2 .内联盒子在内联格式区域中工作
1 .在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。
2 .只有水平外边距，边框，内边距被保留
3 .这些盒子以不同的方式在垂直方向上对齐。可以底部对齐或者顶部对齐，或者按照文字底部进行对齐.
4 .包含一串盒子的矩形区域称为一个线条框
常规流布局中的溢出
1 .当容器中的内容超过可容纳的范围时，就会发生溢出
2 .必须有固定宽度和大小
3 .控制溢出的overflow属性默认值是visible。所以默认溢出内容可以被看到
内联溢出
1 .基本都是省略号
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
流布局书写模式
1 .https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
2 .里面讲的目前没在网站上面用到过，估计要做国际化才会遇到，竖排文字
display属性
1 .可以设置元素的内部和外部显示类型.元素的外部显示类型将决定该元素在流式布局中的表现是块级元素还是内联元素。元素的内部显示类型用来控制子元素的布局，主要是flex属性
2 .在css中实现页面布局的主要方法是设定display属性的值.这个属性允许我们修改默认的显示方式。
3 .正常流中的所有内容都有一个display的值，用作元素的默认行为方式。
4 .可以更改任何元素的display值，这意味着可以根据他们的语义选择html元素，而不必关系外表，因为样子是完全可以改变
浮动
1 .使用float:left能够让块级元素互相排成一行，而不是一个堆叠在一个上面
position
1 .可以让你精准的设置盒子中的位置，正常的布局流中，默认为static，使用其他值会引起元素的不同布局方式，比如fixed可以让元素固定在浏览器的视口左上角
网友评论