网页常见的布局方式
1.标准流
- 块级元素独占一行——>垂直布局
- 行内元素/行内块元素一行显示多个——>水平布局
块级元素
-
自己独占一行
-
高度，宽度、外边距以及内边距都可以控制。
-
宽度默认是容器（父级宽度）的100%
-
是一个容器及盒子，里面可以放行内或者块级元素。
注意：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p标签不能放div。同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
行内元素
-
相邻行内元素在一行上，一行可以显示多个。
-
高、宽直接设置是无效的。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或则其他行内元素。
注意: -
链接里面不能再放链接。
-
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
行内块元素
-
和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
-
默认宽度就是它本身内容的宽度。
-
高度，行高、外边距以及内边距都可以控制。
2.浮动
- 可以让原本垂直布局的块级元素变成水平布局
- 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
3.定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的
层叠情况
定位常见应用场景
- 解决盒子与盒子之间的层叠问题
- 定位之后的元素层级最高，可以层叠在其他盒子上面
- 可以让盒子始终固定在屏幕的某个位置
定位的步骤
- 设置定位方式
- 属性名: position
- 常见属性值
- 静态定位：static(默认值，无需设置)
- 相对定位：relative
- 绝对定位：absolute
- 固定定位：fixed
- 设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则
- 可以使用%做单位
若四个偏移量都设置了值，水平方向以left为准，垂直以top为准
相对定位
- 相对于自己之前的位置进行移动
- 特点：
- 需要配合方位属性实现移动
- 相对于自己原来的位置进行移动
- 仍在页面中占位置(没有脱离标准文档流)，自身本来所在的地方不会被别的元素占用。
- 不会让元素的显示模式改变，块级元素仍会独占一行
- 应用场景：
- 配合绝对定位组CP(子绝父相)
- 用于小范围的移动
绝对定位
- 相对于里自己最近的非静态定位的父元素进行定位，若父级均为静态定位，则以浏览器窗口定位(html元素)
- 脱离标准流，不再占位置。(初始位置和定位后位置都不占位置)
- 改变标签的显示模式特点：具备了行内块的显示特点(可同处一行，宽高生效)
- 绝对定位的盒子无法使用margin左右auto进行居中
- 解决方式：
-
left：50%;margin-left:- (weight/2)px
-
left:50%;transform:translate(-50%,-50%)(位移自身宽度，高度的一半)
-
- 解决方式：
固定定位
- 相对于浏览器的可视区域进行定位
- 需要配合方位属性实现移动
- 在页面中不占位值，脱离标准流
- 应用场景
- 让盒子固定在屏幕中的某个位置
元素的层级关系
-
不同布局方式元素的层级关系
- 标准<浮动<定位
-
不同定位之间的层级关系
- 相对，绝对，固定默认层级相同
- 此时，在html文件中，写在下面的代码层级更高，会覆盖上面的元素(后来者居上)
