SoreyAlter's Blog

Appearance

HTML & CSS 八股 ​

CSS ​

Flex布局 ​

概念 ​

motivation：通过简单定义容器规则，尽可能不操作子元素（成为flex项目）

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

  • 子元素会默认沿着主轴方向分布
  • 父元素内放不下多个子元素时，会自动将子元素尺寸挤压变小以将所有子元素放入
  • 当子元素的宽度或高度未设置时，该子元素尺寸会默认被设置为父元素的高度/宽度

组成部分：

  • 弹性容器 - 指的是父元素
  • 弹性盒子 - 指的是子元素
  • 主轴：默认在水平方向，从左到右
  • 侧轴 / 交叉轴：默认在垂直方向，从上到下

属性 ​

容器属性(5个)

  • flex-direction 设置主轴方向
  • justify-content 设置项目在主轴上的对齐方式
  • align-items 设置多行项目在其本行内的在交叉轴上的对齐方式
    • 等同于批量设置项目的 align-self 属性
    • 可以被 flex 项目的 align-self 属性覆盖
  • flex-wrap 是否换行
  • align-content 设置项目在交叉轴上的对齐方式
    • 多行对齐方式，单行无效，用浏览器检查工具中的图案记忆其与aligni-tems的区别

项目属性(5个)

flex-grow 按给出比例瓜分本行剩余的空间拉长自己

  • 默认值：0，表示不增长

flex-shrink 按指定比例瓜分超出容器部分长度缩小自己

  • 默认值：1，表示等比例压缩本行所有的项目

flex-basis 项目初始宽度（或高度）

  • 默认值：auto，参照该项目的 width 和 height 属性

注意

当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了 height) , flex-basis 具有更高的优先级。

flex-basis:auto 的含义是 "参照我的 width 和 height 属性"。 根据内容赋予长度或者宽度的属性值是 content 属性。

order 设置项目排序位置

align-item 设置元素在自己行内的对齐方式

水平垂直居中 ​

  • 子绝父相 + 左上50%偏移 + transform: translate(-50%, -50%) 或者其他计算定位到中间
  • 子绝父相 block + 上下左右偏移0 + margin: auto
  • flex 布局: align-items: center + justfy-content: center

响应式设计（RWD） ​

RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

需要你理解的很重要的一点是响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。

现代布局技术 ​

媒体查询（@midia）

灵活网格（float）

多列布局（column-）

flex布局

CSS网格（fr单位）

响应式排版 ​

rem

vw / vh

盒子模型 ​

盒子模型是 CSS 中的一个基本概念，是 CSS 设计和布局的基础标准之一。浏览器将网页中的元素当作一个一个的矩形块计算样式，布局并渲染，也就是盒子模型。

盒模型主要包含四个部分：内容区域、内边距、外边距和边框。

盒模型按照宽高属性包含的区域分为两种标准，分别对应 box-sizing: content-box; 和 box-sizing: border-box

  • W3C 标准盒模型：width 和 height 仅包括内容区域
  • IE 怪异盒模型：width 和 height 包含内边距 padding 和边框 border

块级格式化上下文（Block Formatting Context，BFC）

是Web页面CSS 视觉渲染的一部分，是一个独立的布局环境，其中块级盒子按照一定的规则布局，并且与外部环境互不影响。也就是说 BFC 之间互相独立。

在BFC中，盒子垂直排列，并且盒子的垂直距离由 margin 决定。在BFC中，相邻的块级盒子之间的竖直外边距会发生叠加。但是，值得注意的是，在同一个BFC中的横向盒子不会合并外边距。

来自不同BFC的盒子其外边距则不会叠加。

创建 BFC 的条件包括但不限于（可以用于解决外边距合并）

  • 根元素<html>
  • 浮动元素（float 属性不是 none）
  • 绝对定位元素（absolute 或者 fixed）
  • 内联块（inline-block）
  • overflow 值不是 visible
  • flex 或 grid 容器的直接子元素
  • contain 属性为 layout、content 或者 paint 的盒子

更为直观的理解 BFC 之间的独立性：一个 BFC 不会显示到另一个 BFC 的区域中。以下是例子：

html
<style>
  .container {
    width: 100%;
    background-color: lightgray;
  }
  .float-box {
    float: left;
    width: 50%;
    height: 100px;
    background-color: coral;
  }
  .normal-box {
    height: 150px;
    background-color: lightblue;
    overflow: hidden; /* 触发BFC */
  }
</style>

<body>
  <div class="container">
    <div class="float-box"></div>
    <div class="normal-box"></div>
  </div>
</body>

效果如图。不使用 overflow: hidden; 与使用该属性的有明显的不同，蓝色区域不会侵入浮动元素所在的 BFC.

BFC

两栏布局和三栏布局 ​

三栏布局 ​

  • mid 部分放前面先渲染，优化用户体验
  • 通过浮动 + margin 负值移动 left 和 right 的位置

圣杯布局

  • 通过相对定位移动 left 和 right
  • 视图宽度太小时会导致布局混乱（left 和 right 被挤到第二行）
css
* {
  padding: 0;
  margin: 0;
}
.container {
  height: 700px;
  background-color: grey;
  padding: 0 200px;
}
.mid, .left, .right {
  float: left;
  height: 100%;
}
.mid {
  width: 100%;
  background-color: lightskyblue;
}
.left {
  margin-left: -100%;
  position: relative;
  left: -200px;
  width: 200px;
  background-color: lightpink;
}
.right {
  width: 200px;
  background-color: lightgreen;
  margin-right: -200px;
}

圣杯布局

双飞翼布局

  • 在圣杯布局之上改进，不使用相对定位，在 mid 内嵌套 inner 部分作为真正中间区域，加上内边距
  • 通过 margin-left: -100% 就可以移动到对应位置，因为这里 container 的宽度和 mid 宽度一致
  • inner 的宽度由块级元素特征自动设置
html
<style>
* {
  padding: 0;
  margin: 0;
}
.container {
  height: 700px;
  background-color: grey;
}
.mid, .left, .right {
  float: left;
  height: 100%;
}
.mid {
  width: 100%;
  background-color: lightskyblue;
}
.inner {
  background-color: lightseagreen;
  padding: 0 200px;
  height: 100%;
}
.left {
  margin-left: -100%;
  width: 200px;
  background-color: lightpink;
}
.right {
  width: 200px;
  background-color: lightgreen;
  margin-left: -200px;
}
</style>
<body>
  <div class="container">
    <div class="mid">
      <div class="inner">mid</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

HTML ​

TODO

HTML5 特性 ​

语义化标签 ​

  • header：定义文档的页眉（头部）
  • nav：定义导航链接的部分
  • footer：定义文档或节的页脚（底部）
  • article：定义文章内容
  • section：定义文档中的节（section、区段）
  • aside：定义其所处内容之外的内容（侧边）

image.png

媒体标签 ​

  • audio 音频标签
    • constrols - 控制面板
    • autoplay - 自动播放
    • loop = 'true' - 循环播放
  • video 视频标签
    • poster - 封面图链接，默认是视频第一帧
    • constrols
  • source 标签
    • 这个标签是夹在 video 标签之间，用来指定视频源

表单 ​

  • 表单类型
  • 表单属性
  • 表单事件：主要是 oninput

进度条、度量器 ​

  • progress 标签：表示任务进度
  • meter 属性：显示剩余容量

DOM 查询操作 ​

document.querySelector()

document.querySelectorAll()

Web 存储 ​

新增客户端存储方式：

localStorage - 没有时间限制的本地数据存储

sessionStorage

其他 ​

  • 拖拽
  • canvas 画布标签
  • svg
  • 地理定位
  • history API：go、forward、back、pushstate

Released under the GNU General Public License v3.0.

Copyright © 2024-present SoreyLong