CSS基础(二)|青训营笔记

Raften
157 阅读4分钟

CSS基础(二)|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

一、行元素与块元素

1.块元素 (block)

  • 独占一行
  • 高度，高度、外边距以及内边距都可以控制
  • 宽度默认是父级宽度的100%
  • 是一个容器及盒子，

2.行内元素 (inline)

  • 相邻的元素在一行上，一行可以显示多个
  • 高、宽直接设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素

3.行内块元素 (inline-block)

  • 可以直接设置宽度
  • 一行可以放多个

二、CSS盒模型

1.盒子属性

  • Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.

  • Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。

  • Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

  • Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。


2.盒模型类别

2.1 标准盒模型

  • width = (width+padding+margin+border)
  • height = (height+padding+margin+border)

2.2 替代盒模型(IE)

  • 所有的宽高都是可见宽高 可见width = width 可见height = height
    也就是说 真实的width = 设定的width - pading - border - margin
  • 可以通过 box-sizing: border-box 来进行修改
  • 如果希望所有元素都使用替代模型可以使用如下代码 
    html {
box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

2.3 比较两种盒模型

<style>
.box {
      background-color: plum;
      width: 200px;
      height: 200px;
      margin: 50px;
      padding: 50px;
      border: 5px solid #bfc;
    }
.af {
  box-sizing: border-box;
}
</style>
<div class="box">我是标准盒模型</div>
<div class="box af">我是替代盒模型</div>

图片如下

三、CSS布局

1.IFC与BFC

1.1 IFC

  • Inline Formatting Contexts，也就是“内联格式化上下文”。
  • 形成条件: 当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC 
    <span>行内元素
  <div>套块级元素</div>
  会怎么样
</span>

1.2 BFC

  • BFC是一种规则,BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性
  • 清除外边距
  • 清除浮动
  • 阻止元素被浮动元素覆盖
  • 形成BFC:
    • html 根元素
    • 设置浮动，不包括none
    • 设置定位，absoulte或者fixed
    • 行内块显示模式，inline-block
    • 设置overflow，即hidden，auto，scroll
    • 表格单元格，table-cell
    • 弹性布局，flex

2. flex布局

弹性容器

  • display: flex; // 定义弹性布局
  • flex-direction: row/column/column-reverse // 排列方向
  • 内部元素换行:
    • flex-wrap: wrap; // 元素溢出的时候换行
    • flex-wrap: wrap-reverse; // 反向折行
  • flex-flow: row wrap; // 同时选择方向和折行
  • justify-content: //控制主轴
    • flex-start; // 主轴的开始
    • flex-end; // 主轴的结束
    • center; // 居中
    • space-between; // 左右靠边，平均分布
    • space-around; // 左右两边也有边距，是中间的1/2
    • space-evenly; // 完全平均分布
  • align-items: //控制交叉轴
    • flex-start; // 交叉轴的开始
    • flex-end; // 交叉轴的结束
    • senter; // 交叉轴的中心
    • stretch; // 拉伸(优先级不高)
  • align-content: // 多行控制交叉轴
    • flex-start; // 多行控制交叉轴的开始
    • flex-end; // 多行控制交叉轴的结束
    • senter; // 多行控制交叉轴的中心
    • 分配方式也一样

弹性元素

  • align-self: // 单个元素的交叉轴进行控制
  • flex-grow: 1; // 分配剩余空间
  • flex-shrink: 0; // 缩小的比例
  • flex-basis: ; // 基准尺寸 优先级大于 width/height
  • flex: a b c; // a放大 b缩小比例 基准尺寸
  • order: num; // num越大越靠后面

3.grid布局

网格布局

  • display: grid;
  • grid-template-columns: repeat(4,100px); //宽度
  • grid-template-rows: repeat(3,100px); //行高
  • grid-template: repeat(3,100px) / repeat(4,100px) // 行/列
  • grid-template-areas:
    "header header header header"
    "xx xx xx xx"
    "xx xx xx xx"
    "yy yy yy yy"
    ;直接布局
  • column-gap: 列间隔;
  • row-gap: 行间隔;
  • gap: ;
  • justify-items: center; // 水平居中 (start、end)
  • align-items: center; // 垂直居中
  • justify-content: center; // 整个网格的水平方向
  • align-content: center; // 整个网格的垂直方向

子元素

  • grid-column-start:1;
  • grid-column-end:3 (span 2); // 占据两列 从start(1) 占据到 end(3) -1就是一整行
  • grid-column: 1 / -1 (span num);
  • grid-row: ; // 横跨多行
  • grid-area: 父元素areas中的xx yy

4. 绝对布局

  • position:absolute
  • 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（inital container block, 初始包含块）。

5. 浮动

  • CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性
  • 清除浮动:
    • clear
    • BFC
    • 伪元素
avatar
文章
阅读
粉丝