HTML页面布局

HTML页面布局

布局【*】

使用块元素搭建页面框架

块元素独占一行空间

布局的本质就是让块元素在一行中显示

1. 浮动布局

• float:left/right

• 脱离文档流：

  1. 宽度高度默认由内容决定

  2. 原先所在位置就会被其他块元素抢占

  3. 浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行

• 应用：

  1. 全部浮动（2+ 列）

                ul::after {
					display:block;
					content:"";
					clear:both;
				}
				ul> li {
					float:left;
					with:计算
				}
				
                 <ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>

2. 左侧浮动，右侧不浮动（2列）

                .content > .left{
					float:left;
					width:220px;
				}
				.content > .right {
					margin-left:230px;
				}

				<div class="content">
					<div class="left"></div>
					<div class="right"></div>
				</div>

2. 定位布局

1. 作用：当一个元素悬挂在其他元素之上，优先考虑定位布局

• eg: 模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面

1. 用法：

• position:static/ relative / absolute / fixed /

• static 默认 静态布局，默认文档流中，非定位元素

• relative 定位元素(相对定位)

  1. 没有脱离文档流

  2. 参照点为当前元素原本的位置

• absolute 定位元素(绝对定位)

  1. 脱离了文档流

  2. 参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口

• fixed 定位元素(固定定位)

  1. 脱离了文档流

  2. 参照浏览器视口

• sticky 定位元素(粘滞定位)

  1. 不脱离文档流

  2. relative 和 fixed 的结合

     top:50px

     当当前元素距离浏览器视口顶端为50px的时候，体现fixed的特点

• 定位元素的特点

  • 可以使用描述当前元素位置的属性 top、right、bottom、left

  • z-index

  • 参照点

1. 是否脱离文档流

   3. 伸缩盒布局

1. 作用：使得子元素在父元素中分列显示，与float的作用类似。一般用于响应式布局（手机app中）

2. 用法

1. 父元素在主轴上一定要有一个固定的宽/高

2. 子元素在交叉轴上默认宽/高占满父元素

   如果主轴为x轴，那么资源的默认高度占满父元素

   如果主轴为y轴，那么资源的默认宽度占满父元素

                <ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>

				ul {
					display:flex;
				}

• ul 伸缩盒

1. 设置父元素为伸缩盒 (display)

   flex

2. 主轴 （flex-direction）

• 主轴 默认情况下为x轴

  • row 【左中右】/column【上中下】

• 交叉轴 默认情况下为y轴

• 元素沿着伸缩盒的主轴排列的

3. 伸缩盒自动换行（flex-wrap）

• 子元素宽度和大于父元素的时候是否换行

  • nowrap 默认值，不换行

  • wrap 换行

• li 伸缩盒的元素

1. 基础值

• flex-basis 主轴上元素的基础值(宽/高)

2. 对盈余空间的分配

• flex-grow

3. 对亏损空间的贡献

• flex-shrink:

4. 速写

• flex: grow shrink basis;