CSS精简笔记（四）------布局

chuck-Gemini

已于 2023-04-12 00:08:23 修改

阅读量285

点赞数

分类专栏： # CSS 文章标签： css css3 前端

于 2020-10-09 12:02:24 首次发布

本文链接：https://blog.csdn.net/chucksun0426/article/details/108973403

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、常规定位

1.1 种类

静态定位：position:static;盒子的默认排列方式，顺序排列
相对定位：盒子偏移，不压下面元素，不脱标，行内元素可直接设置宽高，块级元素默认内容大小
绝对定位：盒子偏移，不压下面元素，脱标，相对最近的有绝对定位的祖先盒子，行内元素可直接设置宽高，块级元素默认内容大小
固定定位：相对可视窗口位置固定，脱标

不脱标：原位置保留，移动位置相对于原位置，见相对定位图

调整叠放次序：z-index:3;，默认：auto，可正可负可零

1.2 相对定位

功能：不脱标偏移，或作为绝对定位的父元素（子绝父相）
效果

代码

<template>
  <div id="head">
  	<!-- 默认：静态定位 -->
    <div class="insider1"></div>		
    <!-- 三个100x100的盒子，此盒子相对定位，不脱标 -->	    			    
    <div class="insider2"></div>	    
    <div class="insider3"></div>
  </div>
</template>

<style  scoped>
	.insider1 {
	  /* 可用函数计算高度width: calc(100% - 30px):比父盒子小30px */
	  width: 100px;			
	  height: 100px;
	  background-color: black;
	}
	.insider2 {
	  /* 定义相对定位 */
	  position: relative;	
	  /* 距insider2原位置左边线50px */								   		
	  left: 50px;			
	  /* 距insider2原位置顶边线50px */					      
	  top:50px;										  
	  
	  width: 100px;
	  height: 100px;
	  background-color:red;
	}
	.insider3 {
	  width: 100px;
	  height: 100px;
	  background-color:yellow;
	}
</style>

1.3 绝对定位（被动常用）

功能：元素移动位置，相对他的有相对定位的祖先元素，子绝父相
脱标：跟原位置无关，绝对定位所在的坐标系为最近的具有相对定位的祖先元素
效果

css代码

#head {
  /* 绝对定位的祖先盒子需有一个相对定位，否则层层向上，最终以浏览器定位 */
  position: relative;		  
}
.insider1 {
  /* 可用函数计算高度width: calc(100% - 30px):比父盒子小30px */
  width: 100px;			  
  height: 100px;
  background-color: black;
}
.insider2 {
  /* 绝对定位：脱标，后面的会占据绝对定位元素的原位置 */
  position: absolute;	
  /* 调整本元素盒子的定位：还有right */			  
  left: 50px;		
  /* 调整本元素盒子的定位：还有bottom */												 
  top:50px;															
  width: 100px;
  height: 100px;
  background-color:red;
}
.insider3 {
  width: 100px;
  height: 100px;
  background-color:yellow;
}

1.4 固定定位（常用）

功能：以浏览器的可视窗口为坐标系，固定在一个位置
css写法：position:fixed;,用left、right、top、bottom调整位置
紧贴版心右侧：left:50%;margin-left:700px;,不会随页面缩放失真

1.5 粘性定位

功能：页面滚动到预设值，则变为固定定位
css写法：position:sticky;top:100px;

二、Flex布局（流行布局）

2.1 基本概念

适用范围：手机端和网页端应用最多的布局方式，不支持IE版本小于10的浏览器
盒子模型示图
轴
- 主轴：main axis ,部件排列方向
- 次轴：cross axis，部件副轴

2.2 flex主选项

2.2.1 主轴方向

flex-direction示例

注意：默认第一个，vertical-align会失效，注意主轴main axis方向

2.2.2 主轴布局

justify-content示例
- 功能：调整空隙宽度(父盒子宽度减去子盒子宽度之和)分配
- 默认：justify-content : flex-start，紫色为背景，黄色为flex-item元素
- 图示

2.2.3 次轴布局

align-items示例：

默认：flex-start
适用范围：单行，若存在换行，需用align-content

2.3 综合示例

CSS书写顺序一般可以按照以下方式组织：
1. 布局定位属性：display, position, float, clear, visibility等
2. 盒模型属性：width, height, margin, padding, border等
3. 字体与文本属性：font, line-height, text-align, text-decoration, text-transform, color等
4. 背景属性：background, opacity等
5. 其他属性（如：cursor, overflow, z-index, animation等）
在同一组属性中，按照字母顺序排列，这样可以方便查找和修改属性。另外，也可以根据项目需求自定义属性的排序，但应保持一致性以方便维护。
效果

代码

<template>
  <div class="about">
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
  </div>
</template>

<style scoped>
  .about{
    /* 粗调盒子：包括父盒子的定位，子盒子定位的标准 
		此处声明子元素使用flex布局
	*/
    display: flex;
        
    width: 1000px;
    height: 500px;
    /* .about盒子为body标签子元素，只能用margin调整定位，top等失效 */
    margin: 0 auto;
    background: grey;

    /* 强制子元素不换行,即使超出父盒子，默认wrap */
    flex-wrap: nowrap;
    /* 设置主轴及排序 */
    flex-direction:row-reverse;
    /* 水平分配空隙：在子元素宽度都固定情况下 */
    justify-content: space-evenly;
    /* 垂直对齐子元素：不一定总是Y向，跟flex-direction有关 */
    align-items:flex-end;

    /* 文字属性 */
    font: 30px/1.5 Arial;
    color:red;

    /* 柔性盒子阴影 */
    box-shadow: 10px 5px 5px red;
    border-radius: 2%;
  }
	
   /* 子元素写法:未写的属性可参考父盒子 */
  .box1{
  	/* 
    子盒子水平向分布：
        百分数：占父盒子宽度10%，
        整数：子盒子按权重分配
     */
    flex:0.3;
    height: 200px;
    background: #000;
  }

  .box2{
    flex:0.2;
    height: 300px;
    background: #000;
  }

  .box3{	    
    flex:0.1;
    height: 400px;
    background: #000;
    /* 此属性优先级更高，单独调子盒子属性垂直居中 */
    align-self : center;
  }
</style>