前端
HTML
BFC
-
定义:
- Block formatting context ,直译为"块级格式化上下文"。
- 是一个独立的渲染区域,只有Block-level box参与
- 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
-
特性
-
BFC内的容器在垂直方向依次排列
- 类似正常情况下块元素在垂直方向上依次排列,较易理解。
- 类似正常情况下块元素在垂直方向上依次排列,较易理解。
-
属于同一个BFC的两个相邻容器的上下margin会重叠(相邻两容器上下外边距会发生重叠)
-
渲染前
-
渲染后
-
-
计算BFC高度时浮动元素也参于计算(overflow: hidden;能解决父元素高度塌陷)
-
渲染前
-
渲染后
-
-
BFC的区域不会与浮动容器发生重叠(在布局上实现自适应两栏(三栏))
-
渲染前
-
渲染后
-
-
元素的margin-left与其包含块的border-left相接触
-
BFC是独立容器,容器内部元素不会影响容器外部元素
-
-
解决问题
- 解决两个相邻元素的上下margin重叠问题
- 解决高度塌陷问题
- 实现多栏布局(两栏、三栏、圣杯、双飞翼等)
-
触发条件
- 根元素()
- float值非none
- overflow值非visible
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- position值为absolute、fixed
-
Box:CSS布局的基本单位
- 一个页面是由很多个 Box 组成
- 元素的类型和 display 属性,决定了这个 Box 的类型
- 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器)
-
Formatting Context
- 它是页面中的一块渲染区域
- 它决定了其子元素将如何定位,以及和其他元素的关系和相互作用
- 最常见的 有 BFC 和IFC
IFC
-
定义:
- inline Formatting Contexts直接翻译为“内联格式化上下文”
- IFC的高度由其包含行内元素中最高的实际高度计算而来的(不受竖直方向上的padding/margin影响)
- 内部的元素从包含块的顶部开始,从左到右(默认)排列成一行形成一个矩形盒子叫做line box
-
布局规则
- line box的宽度由浮动情况和他包含的块决定的
- line box 的高度由line-height的计算结果决定
- 在一行上的所有元素会在该区域形成一个框
- 行宽的高度为包含框的高度,高度为行框中最高元素的高度
- 浮动的元素不会在行框内,并且浮动的元素会压缩行框的宽度
- 行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框
- 行框的元素遵循text-align和vertical-align
块级元素与行内元素
-
块级元素
-
每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。
-
常见元素
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
-
特点
- 独占一行
- 高度,行高,外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他的块级元素
-
-
行内元素
-
不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度,高度以及对齐等属性。
-
常见元素
<a>,<strong>,<b>,<em>,<del>,<span>等
-
特点
- 和相邻的行内元素在一行上
- 高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效
- 默认的宽度就是它本身的宽度
- 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)
-
-
相互转换
- 块转行内:display-inline;
- 行内转块:display:block;
- 块,行内元素转换为行内块:display:inline-block
html5新增内容
-
新增标签
Audio
Video
Canvas
<summary>
<source>
-
提供两种在客户端存储数据的新方法
- localStorage -没有时间限制的数据存储
- sessionStorage -针对一个session的数据存储
-
新的Input类型
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
-
新的表单元素
- datalist
- keygen
- output
-
新的form属性
- autocomplete
- novalidate
-
新的input属性
- autocomplete
- autofocus(input类型元素)
- form
- form overrides (formaction, formenctype, formmethod,formnovalidate, formtarget)
- height和width
- list
- min, max和step
- multiple
- pattern (regexp)
- placeholder
- required
CSS
media
- all-- 用于所有设备类型
- aural-- 用于语音和音乐合成器
- braille-- 用于触觉反馈设备
- embossed-- 用于凸点字符(盲文)印刷设备
- handheld-- 用于小型或手提设备
- print-- 用于打印机
- projection-- 用于投影图像,如幻灯片
- screen-- 用于计算机显示器
- tty-- 用于使用固定间距字符格的设备。如电传打字机和终端
- tv-- 用于电视类设备
animation
-
动画属性
-
animation-name
- 规定需要绑定到选择器的 keyframe 名称。
-
animation-duration
- 规定完成动画所花费的时间,以秒或毫秒计。
-
animation-timing-function
- 规定动画的速度曲线。
-
animation-delay
- 规定在动画开始之前的延迟。
-
animation-iteration-count
- 规定动画应该播放的次数。
-
animation-direction
- 规定是否应该轮流反向播放动画。
-
-
实例
transform
-
定义
- transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
-
功能
-
none
- 定义不进行转换
-
matrix(n,n,n,n,n,n)
- 定义 2D 转换,使用六个值的矩阵。
-
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
- 定义 3D 转换,使用 16 个值的 4x4 矩阵。
-
translate(x,y)
- 定义 2D 转换
-
translate3d(x,y,z)
- 定义 3D 转换
-
translateX(x)
- 定义转换,只是用 X 轴的值。
-
translateY(y)
- 定义转换,只是用 Y 轴的值。
-
translateZ(z)
- 定义 3D 转换,只是用 Z 轴的值。
-
scale(x[,y]?)
- 定义 2D 缩放转换。
-
scale3d(x,y,z)
- 定义 3D 缩放转换。
-
scaleX(x)
- 通过设置 X 轴的值来定义缩放转换。
-
scaleY(y)
- 通过设置 Y 轴的值来定义缩放转换。
-
rotate(angle)
- 定义 2D 旋转,在参数中规定角度。
-
rotate3d(x,y,z,angle)
- 定义 3D 旋转。
-
rotateX(angle)
- 定义沿着 X 轴的 3D 旋转。
-
rotateY(angle)
- 定义沿着 Y 轴的 3D 旋转。
-
rotateZ(angle)
- 定义沿着 Z 轴的 3D 旋转
-
skew(x-angle,y-angle)
- 定义沿着 X 和 Y 轴的 2D 倾斜转换。
-
skewX(angle)
- 定义沿着 X 轴的 2D 倾斜转换。
-
skewY(angle)
- 定义沿着 Y 轴的 2D 倾斜转换。
-
perspective(n)
- 为 3D 转换元素定义透视视图。
-
盒子模型
-
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
-
标准盒模型和IE盒模型
-
标准盒子模型:width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
-
IE盒子模型:width 和 height 指的是内容区域+border+padding的宽度和高度。
-
实现垂直居中
-
组合使用display:table-cell和vertical-align、text-align
-
注意事项:table-cell容易被float,position:absolute这些css属性破坏可以考虑为之增加一个父div定义float等属性。) ;设置了table-cell的元素对宽度和高度敏感(在父元素上设置table-row等属性,也会使其不感知height。),对margin值无反应,响应padding属性
-
<style>
.father{width:400px; height:200px; border:1px solid #000;display:table-cell; text-align:center;vertical-align:middle;}
.son{width:200px; height:100px; background:red;display:inline-block;}
</style>
<div class="father">
<div class="son">
display:table-cell;</br>text-align:center;</br> vertical-align:middle
</div>
</div>
-
display:flex-box
- 注意:这个方法只能在现代浏览器上有效,IE10+、chrome、Safari、Firefox。1.设置container的display的类型为flex,激活为flexbox模式。
2.justify-content定义水平方向的元素位置。3.lign-items定义垂直方向的元素位置
- 注意:这个方法只能在现代浏览器上有效,IE10+、chrome、Safari、Firefox。1.设置container的display的类型为flex,激活为flexbox模式。
<style>
.father{width:400px; height:200px; border:1px solid #000;display:flex; align-items:center;justify-content:center;}
.son{width:200px; height:100px; background:red;}
</style>
<div class="father">
<div class="son">
display:flex;</br>align-items:center;</br> justify-content:center;
</div>
</div>
-
display:inline-block +伪元素生成content内容
- 利用inline-block的vertical-align: middle去对齐before伪元素,before伪元素的高度与父对象一样,就实现了高度方向的对齐。居中块的尺寸可以做包裹性、自适应内容,兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白(代码换行符遗留问题。)。(宽度是已知的,高度可以是未知的)
```c
```html
<style>
.father{width:400px; height:200px; border:1px solid #000;text-align:center;}
.father:before{content:".";display:inline-block; vertical-align:middle; height:100%;}
.son{width:200px; height:100px; background:red;display:inline-block; vertical-align:middle;}
</style>
</head>
<body>
<div class="father">
<div class="son">
display:inline-block;</br>伪元素生成content内容</br>
</div>
</div>
-![在这里插入图片描述](https://img-blog.csdnimg.cn/20210701091640544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F2d3Zx,size_16,color_FFFFFF,t_70#pic_center)
-
绝对定位+transform反向偏移。position:absolute; transform:translate(-50%,-50%);
- 由于top、left偏移了父对象的50%宽度高度,所以需要利用transform反向偏移居中块的50%宽高
<style>
.father{width:400px; height:200px; border:1px solid #000;position:relative;}
.son{width:200px; height:100px; background:red;position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
</style>
<div class="father">
<div class="son">
position:absolute;</br>left:50%;top:50%;</br>transform
</div>
</div>
- 绝对定位+margin:auto(position:absolute; left:0; top:0; right:0; bottom:0; margin:auto)都要写
<style>
.father{width:400px; height:200px; position:relative; border:1px solid #000;}
.son{width:200px; height:100px; background:red; position:absolute; left:0; top:0; bottom:0; right:0; margin:auto;}
</style>
- <div class="father">
<div class="son">
position:absolute;</br> left:0; top:0;</br> right:0; bottom:0; </br>margin:auto
</div>
</div>
绝对定位+margin反向偏移
position:absolute; top:50%; left:50%; margin-left:-(width+padding)/2+‘px’; margin-top:-(height+padding)/2+‘px’;
- 注意:margin值的设置不能使用百分比哦,因为margin是基于父元素的宽度来计算百分比的;由于top、left偏移了父对象的50%宽度高度,所以需要利用margin反向偏移居中块的50%宽高
<style>
.father{width:400px; height:200px; position:relative; border:1px solid #000;}
.son{width:200px; height:100px; background:red; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px;}
</style>
- <div class="father">
<div class="son">
position:absolute;</br> left:50%; top:50%;</br>margin-left/top
</div>
</div>
flex
-
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
-
行内元素也可以使用 Flex 布局。display: inline-flex;
-
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
-
容器的属性
-
flex-direction
-
决定主轴的方向(即项目的排列方向)。
-
flex-direction: row | row-reverse | column | column-reverse;
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
-
-
flex-wrap
-
如果一条轴线排不下,如何换行。
-
flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
-
-
flex-flow
- 是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
-
justify-content
-
定义了项目在主轴上的对齐方式。
-
justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
-
-
align-items
-
定义项目在交叉轴上如何对齐。
-
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
-
-
align-content
-
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
-
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
-
-
-
项目的属性
-
order
- 定义项目的排列顺序。数值越小,排列越靠前,默认为0
- order: ;
-
flex-grow
-
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
-
flex-grow: <number>; /* default 0 */
- 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
-
-
flex-shrink
-
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
-
flex-shrink: <number>; /* default 1 */
- 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效
-
-
flex-basis
- 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex-basis: <length> | auto; /* default auto */
- 它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
-
flex
- 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
- flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
- 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
-
align-self
- 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
-
position
-
absolute
- 描述:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位
-
relative
- 描述:生成相对定位的元素,相对于其在文档流正常位置进行定位
-
fixed
- 描述:生成绝对定位的元素,相对于浏览器窗口进行定位。
-
static
- 描述:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
-
inherit
- 描述:规定应该从父元素继承 position 属性的值。
响应式布局
-
直接在CSS文件中使用
@media 类型 and (条件1) and (条件二){
css样式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}
-
使用@import导入
@import url("css/moxie.css") all and (max-width:980px);
-
直接使用link连接
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”></div>
计算机网络
tcp,udp
http1/1.1/2/3
get,post
https
强缓存与协商缓存
三次握手,四次挥手
常见状态码
浏览器相关
输入url到页面渲染完成过程
- dns解析
- tcp三次握手
- 浏览器解析渲染页面流程
cookie
localstorage
sessionstorage
框架
Vue
- 响应式原理
- 虚拟dom,diff算法
- 插槽
- css scoped
- vue-router
- vuex
React
JS&ES6
let,const,var
promise
iterator
模块化
作用域
原型链
event loop
dom操作
arguments
原生ajax
变量提升,函数声明
数据类型
冒泡,捕获
常见手写
- bind、apply、bind
- promise
- new
- instanceof
- jsonp
- 节流,防抖
- ajax