学习web前端之css第四天

css布局

浮动布局

脱离文档流：

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>

定位布局

1. 作用：
   当一个元素悬挂在其他元素之上，优先考虑定位布局
   eg: 模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面
2. 定位元素的特点

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

• 参照点

• 是否脱离文档流

3. 用法：
   position:static/ relative / absolute / fixed /

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

   relative 定位元素(相对定位)
   1) 没有脱离文档流
   2) 参照点为当前元素原本的位置

   absolute 定位元素(绝对定位)
   1) 脱离了文档流
   2) 参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口

   fixed 定位元素(固定定位)
   1) 脱离了文档流
   2) 参照浏览器视口

   sticky 定位元素(粘滞定位)
   1) 不脱离文档流
   2) relative 和 fixed 的结合
   top:50px
   当前元素距离浏览器视口顶端为50px的时候，体现fixed的特点

伸缩盒布局

1. 作用：
   使得子元素在父元素中分列显示，与float的作用类似。一般用于响应式布局（手机app中）
2. 用法
   1. 父元素在主轴上一定要有一个固定的宽/高
   2. 子元素在交叉轴上默认宽/高占满父元素
   如果主轴为x轴，那么资源的默认高度占满父元素
   如果主轴为y轴，那么资源的默认宽度占满父元素
   3.

				<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：1;

3. 对亏损空间的贡献
   flex-shrink:

4. 速写
   flex: grow shrink basis;

   思维导图