布局与事件_html盒子大小计算需要计算margin-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46262422/article/details/127478645

布局

1. 盒模型宽度的计算

普通盒模型
- 默认盒子属性：box-sizing: content-box;
- offsetWidth = (width + padding + border) 不算margin
怪异盒模型
- 设置语句：box-sizing: border-box;
- offsetWidth = width padding和border都挤压到内容里面

2. margin纵向重叠

margin纵向重叠取重叠区最大值，不进行叠加

3. margin负值问题

margin-top和margin-left 是负值，元素会向上或者向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom负值，下侧元素上移，自身不受影响

4. BFC

Block Format Context ：块级格式化上下文
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的条件
- float 不设置成none
- position 是absolute或者fixed
- overflow 不是visible
- display是flex或者inline-block 等
应用：
- 清除浮动

5. float

5.1 圣杯布局和双飞翼布局

5.1.1 作用

实现pc端三栏布局，中间一栏最先渲染
实现两边宽度固定，中间自适应
效果图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3oQNIpZ0-1666522428494)(img\image-20210524144236366.png)]$

5.1.2 圣杯布局

为了让中间盒子最先渲染，所以中间盒子放在三个盒子的第一个位置
左中右盒子全部浮动
防止中间内容被两侧覆盖，一个用padding
两侧使用margin负值，分别放置左右两边
- 左边margin-left: -100%
- 左边平移padding宽度，right：200px；
- 右边盒子margin-right : -200px (设置成自身宽度，且是负值，平移到上一行)

5.13 双飞翼布局

中间盒子最先渲染
全部浮动
为了不让左右盒子覆盖中间盒子内部，中间盒子内部设置margin
左边盒子设置margin-left: -100%;
右边盒子设置 margin-left： -200px ；和圣杯布局设置不一样原因是圣杯布局的margin是放在同一个外层盒子中，而双飞翼布局是三个独立的盒子，右盒子是被挤下去的

5.2 手写clearfix

.clearfix::after {
	content: '';
	display: table;
	clear: both;
}
/* 兼容IE低版本 */
.clearfix {
	*zoom: 1;
}

6. flex布局

6.1 flex基本了解

元素结构：容器内部放子元素,容器设置display：flex
布局思想：
- 设置主轴方向控制子元素排列方向，
- 设置容器相关属性控制子元素布局
- 设置子元素相关属性控制子元素布局
容器样式属性
- flex-direction
- justify-content
- align-items
- flex-wrap
子元素
- align-self

6.2 实现骰子三点

容器设置：flex，justify-content: space-between
2,3子元素，设置align-self

7. 元素居中

7.1 定位回顾

relative相对自身定位
absolute 依据最近的一层的定位元素定位
- 定位元素：设置了absolute、relative、fixed
- 找不到最近定位元素，依据body

7.2 行内元素水平垂直居中

水平居中： text-align: center
垂直居中： line-height：盒子高度

7.3 块级元素水平垂直居中

水平居中:
- margin : 0 auto;
水平垂直都居中
- position：absolute; top： 50%；left： 50%；transform：translate（-50%，-50%）
- position：absolute; top： 0；left： 0；right: 0; bottom: 0; margin: auto;
- 容器设置：display：flex ； justify-content: center; align-items: center
- 容器：display:table-cell; text-align:center; vertical-align: middle; 子元素：display: inline-block;

8. 样式单位

em：相对于自身字体大小的单位
rem：相对于html标签字体大小的单位
vh：相对于视口高度大小的单位，20vh == 视口高度/100*20
vw：相对于视口宽度大小的单位, 20vw == 视口宽度/100*20

9. 移动端布局方案

9.1 流式布局（百分比）

不能改变字体大小，可改变元素尺寸，高度固定

9.2 flex （弹性盒）

使用方便，通常配合其他方案一起使用

9.3 rem + 媒体查询/flexible.js

9.4 rem + vw

兼容性不如前面的

10. 样式预处理器

10.1 sass是什么? 样式预处理

CSS 本身可能很有趣，但是样式表正变得越来越大、越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。 Sass 为你提供了 CSS 中还不存在的特性，例如变量、嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得再次有趣。

10.2 sass和scss的区别

CSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

先来看一个示例：

Sass 语法：

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法：

$font-stark Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 SCSS。大部分扩展，例如变量、parent references 和指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。例如，以下这段简单的 Sass 代码：

#sidebar
  width: 30%
  background-color: #faa

只需添加花括号和分号就能转换为 SCSS 语法：

#sidebar {
  width: 30%;
  background-color: #faa;
}

另外，SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子：

#sidebar {width: 30%; background-color: #faa}

10.3 sass 的作用

变量

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

模组

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@import 'base';

.inverse {
  background-color: 'green';
  color: white;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

混合（mixin）

要创建一个mixin，您可以使用@mixin指令并为其命名。我们将其命名为mixin transform。我们还在$property括号内使用了变量，因此我们可以传递任何所需的变换。创建混入之后，您可以将其用作CSS 声明@include，以混入的名称开头。
```
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
```
```
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
   transform: rotate(30deg);
}
```

操作符 ±*/

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

11. iconfont

11.1 字体图标的优势劣势

优势

**轻量级：**一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。
灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！
兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。

劣势

图标字体只能被渲染成单色，或者是CSS3的渐变色
版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。
当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

11.2 字体图标库都有哪些

I confont-阿里巴巴矢量图标库

官网：http://iconfont.cn/

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

Icons - Material Design

官网：https://material.io/icons/

Google 设计团队出品，用于常见操作和项目。在桌面上下载，在Android，iOS和Web的数字产品中使用它们。

Ionicons

官网：http://ionicons.com/

高级设计的图标，用于Web，iOS，Android和桌面应用程序。支持SVG和Web字体。完全开源，MIT由Ionic Framework团队授权和构建。

LivIcons Evolution

官网：https://livicons.com/

真正的动态 SVG 图标。这是面向 Web 开发人员和网站所有者的产品。 LivIcons Evolution 是经典 LivIcons 包的下一代现代产品，带有交叉浏览器矢量图标，每个都有独立的迷你动画。它们基于由 JavaScript 驱动的 SVG（可缩放矢量图形），适用于所有现代浏览器，在任何设备上都看起来很完美。是的，Retina 也是。

Fontello

官网：http://fontello.com/

可以根据您的需求很轻松地制作自定义图标 webfont。

Font Awesome

官网：https://fontawesome.com/

一套绝佳的图标字体库和 CSS 框架。 Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

11.3 I confont-阿里巴巴矢量图标库的使用

创建线上图标库的使用方法

登录：https://www.iconfont.cn/
选中图标添加购物车
点击最右侧购物车图标，创建项目
分三种使用方式 unicode 、fontclass、symbol

注意：使用unicode，静态页使用浏览器访问，要+http前缀

阿里图标三种模式

unicode 模式

它本身和引用外部自定义字体没有区别。只是一个表现出来是图形，另一个是文字。对系统来说，没有区别。
引用 iconfont 和引用自定义字体，使用的代码是一样
定义字体族

@font-face {
    font-family: 'iconfont';  /* 自定义字体族名，可以是任意名， */
    src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot'); /* 字体描述文件链接 */
    src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot?#iefix') format('embedded-opentype'), /* 兼容 IE9 */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff2') format('woff2'), /* 兼容 IE6-IE8 */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff') format('woff'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.ttf') format('truetype'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1357308_kygursq6jw.svg#iconfont') format('svg'); /* 兼容 iOS 4.1及以上 */
}
复制代码

使用字体族（无论是文本还是icon）

.iconfont {
    font-family: "iconfont" !important; /*使用自定义字体或者icon*/
    /* 上面一句，和我们平时定义「微软雅黑」（font-family: "Microsoft YaHei", sans-serif;）字体是同样的语法 */
    /* 只是「微软雅黑」在大部分电脑都会自带有，浏览器能直接找到系统的「微软雅黑」字体描述文件，不需要我们自己定义字体族，不需要使用外部的字体描述文件 */
}
复制代码

「&#」的意思，「&#」开头的是HTML实体。所有 html 显示的内容，都可以通过 &# 的形式表述。例如，汉字的HTML实体由三部分组成，&#(中文对应ASCII码);。例如，把“最新” 转换成“最新”
为什么中英文能直接显示，不需要使用「&#」形式表示呢？因为中英文有 ASCII 进行自动转义。而 iconfont 不在 ASCII 中定义。是自定义的。
iconfont 相当于使用了剩余的 unicode 编码，将自定义的图标描述通过 &# 开头的 HTML 实体的形式表现出来。
以「&#」开头的后接十进制数字，以「&#\x」开头的后接十六进制数字

Font class
- 该模式和 unicode 模式是同样的原理，通过 unicode 编码保存。只是使用方式不同。
- unicode 是直接将内容写到 innerHTML 中转义，而 font class 则是通过 css 的 :before 伪类，将通过 content 来定义。
- 在 font class 中，「&#\x」被转义符「\」替换，因为「&#\x」是 html 实体字符，只会被 html 解析，不能在 css 中被解析。
- 通过阿里iconfont 给出的 css 链接，在浏览器中直接查看该文件可以看到其定义
Symbol
- 该模式和上述二者有本质区别，Symbol 模式是通过 svg 技术来描绘图标，没有运用到 unicode 编码
- 即通过不同的 svg 标签来描绘不同的图标。
- 由于使用的是 svg 技术，属于图形，而不仅仅是字符。所以该模式支持彩色图标。
- 通过阿里 iconfont 给出的 js 链接，在浏览器中直接查看该文件可以看到其定义

不同文件后缀的含义

EOT（Embedded Open Type）是微软创造的字体格式。在 IE 系列的浏览器下使用。
SVG（Scalable Vector Graphics (Font)）是一种用矢量图格式改进的字体格式。注意这里的 svg 与 symbol 的 svg 是两个概念。前者是 svg 类型的字体描述，后缀是直接描述svg 图形。该模式在 ios 移动端中才支持
OTF（OpenType Font）和 TTF（TrueType Font）是 Apple 公司和 Microsoft 公司共同推出的字体文件格式,随着 windows 的流行,已经变成最常用的一种字体文件表示方式。目前主流浏览器都支持该模式。
WOFF（Web Open Font Format），WOFF字体通常比其它字体加载的要快些，使用了 OTF 和 TTF 字体里的存储结构和压缩算法。目前主流浏览器都支持该模式
其具体兼容性情况，我们可以通过打开 iconfont 的 Font class 链接，通过备注信息得知。