才吹小雨又须晴 BlogMyTags
CSS布局

布局中的尺寸与位置

一. CSS盒模型组成

  1. 组成：content，padding，border，margin。把盒模型堪称一个包裹，content是物品，padding是填充物，border是盒子边，margin是盒子外面环境。

  2. 注意点：padding不能负值，margin可以

  3. 背景色可以平铺到margin区域，margin-top有传递问题。

二. 块级盒子和内联盒子

  1. 块级盒子：div，p；特性：独占一行。支持所有样式。不写宽度时和父容器的宽度相同，
  2. 内联盒子：span；特性：不会换行。有些样式不支持，比如宽高。宽高由content决定的。所占的区域不一定是矩形。内联标签之间有空隙，连成一行就没有了。
  3. 做布局一定用块级盒子，做修饰用内联盒子。内联盒子加浮动，绝对定位可以支持所有样式

三. 自适应盒模型特性：不写宽度的时候，content会进行重新的计算，盒子在添加padding，margin时，盒子会缩小。

四. 怪异盒模型

  1. 好处：直接量取盒子宽高不用计算一些padding或border；解决一些需要设置百分比和盒模型值。

五. 浮动注意点：只会影响后面的元素；文本不会被浮动元素覆盖；有内联盒子的特性，宽度由内容决定；内联盒子加浮动就可以设置宽高；父容器内浮动放不下会自动换行。

六. 绝对定位盒子：脱离了文档流；宽高由内容决定，支持所有样式。

七. 固定定位（fixed）与绝对定位相似，不同点是固定定位不受祖先元素影响

Flex弹性布局

一. 主轴和交叉轴

  1. 改变轴方向：flex-direction（row-reverse 翻转轴），换行 flex-wrap
  2. 主轴对齐：justify-content （space-between）
  3. 交叉轴对齐：align-content（在换行的情况下才能使用）；align- item：每一行对齐

二. 子盒子上下左右居中

.box1{
     width: 100px;
     height: 100px;
     background: green;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .box1 div{
     width: 50px;
     height: 50px;
     background: pink;
 }

三. 不定项居中布局，即轮播图上面的小圆点

.box1{
      width: 300px;
      height: 200px;
      background: green;
      display: flex;
      justify-content: center;
      align-items: flex-end;
  }
  .box1 div{
      width: 30px;
      height: 30px;
      background: pink;
      border-radius: 50%;
      margin: 10px;
  }

四. 均分列布局

  1. 即页面底部的导航栏
.box1{
     height: 200px;
     background: green;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 10px;
 }
 .box1 div{
     width: 30px;
     height: 30px;
     background: pink;
     border-radius: 50%;
 }

五. 子项分组布局

  1. flex-grow ，flex-shrink ，flex-basis 指定flex元素在主轴方向上的初始大小 。flex:1;包括grow，shrink，basis。

六. 等高布局

.box1{
     width: 500px;
     background: green;
     display: flex;
     justify-content: space-between;
 }
 .box1 div{
     width: 100px;
     background: pink;
 }

图片

七. 两列，三列布局：左边定宽，右边自适应

八. 溢出项布局

.box1{
      height: 100px;
      width: 200px;
      background: green;
      display: flex;
      align-items: center;
  }
  .box1 div{
      width: 50px;
      height: 80px;
      margin-right: 10px;
      background: pink;
      flex-shrink: 0;
  }

grid网格布局

一. 定义网格及fr单位，二维布局，gird容器属性：

  1. 基于网格的行和列，定义网格线的名称和网格轨道的尺寸大小
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 1fr 1fr;
  1. 使用命名方式定义网格区域，子项需配合grid- area使用
grid-template-areas: 
            "a1 a1 a2"
            "a1 a1 a2" 
            "a3 a3 a3";

  1. 用于设置元素行列之间的间隙大小，gap: 20px 30px;

  2. 指定子项在网格中的对齐方式，默认值：stretch

/* 行 垂直对齐 水平对齐 */
            place-items: end start;
/* 整体 垂直对齐 水平对齐 */
            place-content: end start;
  1. 隐式网格：指定在现实网格之外的隐式网格，如何排列及尺寸大小
/* 可以调节产生隐式网格的高度 */
grid-auto-rows: 100px;
/* 列方向上产生隐式网格 */
grid-auto-columns: 100px;

二. grid子项属性：

  1. 基于线的元素放置，表示grid子项所占据的区域的起始和终止位置，包括水平和垂直。
/* 列 第二列开始，第四列结束 */
            grid-column-end: 2;
            grid-column-start: 4;
/* 占两列 span是表示数字 */
            grid-column-start: 2;
            grid-column-end: span 2;

缩写方式，通过 / 作为分割

grid-row: 2 / 3;
/* 行列起始的集合 */
grid-area: ;
  1. repeat()，指定课选重复值

三. 多个方块组合排列

.box{
     display: grid;
     grid-template-columns: repeat(3,1fr);
     grid-template-rows: repeat(3,1fr);
     gap: 5px;
 }
 .box div{
     background: green; 
 }
 .box div:nth-of-type(1){
     /* span 占几个格 */
     grid-area: 1/1/span 2/span 2;
 }

四. 栅格布局：一个网页会分成12个栅格

移动端适配布局

一.

  1. px to rem的插件。ps中量取的是物理像素，css中设置的是逻辑像素，所以对量取的值除以2

响应式布局

一. 媒体查询

  1. 添加到样式表的底部
  2. min-width方式：移动优先原则，先编写移动端设备，然后响应式过度到PC端。

二. 响应式交互实现

  1. 利用 :checked 伪类
  2. 利用JS脚本。
flexgrid响应式动画sass