常见的布局方法和元素不可见的方法

一、常见的布局方法

      1.标准流布局

       又称为 文档流。标准流排版规则：块级元素：从上往下，垂直布局，独占一行；

行内元素 或行内块元素 ： 从左往右，水平布局 空间不够自动折行。

      2.浮动布局

       作用：让垂直布局的盒子变成水平布局。

       特点：浮动元素会脱离标准流.在标准流中不占位置；浮动元素比标准流多半个级别，可以覆盖标准流中的元素；浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；浮动元素可以设置宽高。

       语法：左浮动（float:left;），右浮动（float:right;）。

       注意：浮动加在元素自身上。脱标的浮动元素在父元素没有高度时撑不开父级的高度，此时需要清除浮动来消除对标准流的影响。

      3.定位布局

       作用：可以让元素自由的摆放在网页的任意位置。

       特点：定位的元素层级最高，可以层叠在其他元素之上；可以让元素始终固定在屏幕中的某个位置。

       语法：静态定位（positon:static;），相对定位（position:rerelative;），绝对定位（positon:absolute;），固定定位（position:fixed;）。

       注意：静态定位就是默认标准流，绝对定位一般和相对定位的父级一起用（子绝父相），定位的元素需要给相应的方向位移值。

子绝父相定位

 

       4.flex布局

       作用：可以灵活快速的开发网页

       特点：更加加单灵活的一种浏览器提倡的布局模型，避免了浮动脱标的问题。

       语法：display:flex;

       注意：flex布局添加到父级上。

主轴对齐方式

侧轴对齐方式

二、元素不可见的方法

       1.display:none;元素不可见，不占位。

       2.visibility:hidden;元素隐藏，但还在占位。

       3.opacity: 0;元素透明，但还在占位。

       4.transform: scale(0);元素缩小到零，但还在占位。

       5.transform: rotateY(90deg);立体呈现时旋转90度面向元素的侧面时看不见元素，但还在占位。

       6.overflow:hidden;溢出部分隐藏不可见，溢出部分不占位。