css入门学习day03笔记

css布局

一、思维脑图

使用块元素搭建页面框架

• 块元素独占一行空间
  布局的本质就是让块元素在一行中显示

二、浮动布局

		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>
   

三、定位布局

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

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

2. 用法：
   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. 可以使用描述当前元素位置的属性 top、right、bottom、left

2. z-index

3. 参照点

4. 是否脱离文档流

四、 伸缩盒布局

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

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
   

3. 对亏损空间的贡献

   				flex-shrink:
   

4. 速写

   				flex: grow shrink basis;