三角形的画法,一般经常使用三角形作为提示框、下拉菜单等功能。

一、CSS 画三角形实现方式

1、HTML 结构

1
2
3
4
<div class="item0"></div>
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

2、将类名为 item 的块级元素的 width、height 设置为 0

1
2
3
4
.item0 {
  width: 0;
  height: 0;
}

3、将类名为 item 的元素的 3 个 border 的颜色设置为 transparent，箭头指向的对面 border 设置颜色；

1
2
3
4
5
6
7
8
9
.item0 {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid transparent;
  border-bottom: 80px solid blue;
  background: white;
}

上面的为方向向上的三角形
4、依次类推可以画出方向向左、右、下的三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.item1 {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 80px solid green;
  border-bottom: 50px solid transparent;
  background: white;
}
.item2 {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 80px solid violet;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  background: white;
}
.item3 {
  width: 0px;
  height: 0px;
  border-left: 80px solid purple;
  border-right: 50px solid transparent;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  background: white;
}

二、网页变成灰色的方法：

1
2
3
4
5
6
7
html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

三、position 定位

static: 默认值
relative: 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中
absolute: 绝对定位 相对于最近的已定位的祖先元素
fixed: 固定定位 相对于视窗来定位

四、浮动、清楚浮动

1
2
3
display: table;
content: "";
clear: both;

一、HTML

  • 新增选择器 document.querySelector、document.querySelectorAll

  • 拖拽释放(Drag and drop) API

  • 媒体播放的 video 和 audio

  • 本地存储 localStorage 和 sessionStorage

  • 离线应用 manifest

  • 桌面通知 Notifications

  • 语意化标签 article、footer、header、nav、section

  • 增强表单控件 calendar、date、time、email、url、search

  • 地理位置 Geolocation

  • 多任务 webworker

  • 全双工通信协议 websocket

    客户端和服务端双向通信

  • 历史管理 history

  • 跨域资源共享(CORS) Access-Control-Allow-Origin

  • 页面可见性改变事件 visibilitychange

  • 跨窗口通信 PostMessage

  • Form Data 对象

  • 绘画 canvas

HTML 的语义化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<title>      <!--：页面主体内容。-->
<hn>         <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>         <!--：无序列表。-->
<li>         <!--：有序列表。-->
<header>     <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>         <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article>    <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>    <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>         <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer>     <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small>      <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>     <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>         <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>       <!--：使用黄色突出显示部分文本。-->
<figure>     <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite>       <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
<q>          <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>       <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr>       <!--：简称或缩写。-->
<dfn>       <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>    <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>        <!--：移除的内容。-->
<ins>        <!--：添加的内容。-->
<code>       <!--：标记代码。-->
<meter>      <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress>    <!--：定义运行中的进度（进程）。-->

语义化的优点：

  • 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
  • 有利于 SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
  • 有利于开发和维护，语义化更具可读性，代码更好维护，与 CSS3 关系更和谐。

二、CSS

css 的继承：

无继承性的属性：

1、display:规定元素应该生成的框的类型

2、文本属性：

​ vertical-align:垂直文本对齐

​ text-decoration:规定添加到文本的修饰

​ text-shadow:文本阴影效果

​ white-space:空白符处理

​ unicode-bidi:设置文本方向

3、盒子模型属性：

width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：

backgroun、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：

float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

其他。。。

有继承性属性

1、字体系列：

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

2、文本系列属性：

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色 a 元素除外

3、元素可见性

visibility

其他。。。

块级元素哪些属性可以继承？

text-indent、text-align、visibility、cursor

盒模型：

标准盒模型：盒子总宽度/高度 =width/height + padding + border + margin。（ 即 width/height 只是 内容高度，不包含 padding 和 border 值 ）
IE 盒子模型：盒子总宽度/高度 =width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

BFC 是什么？(边距重叠解决方案)

BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

BFC 原理？

（1）内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；
（2）Box 垂直方向的距离由 margin(外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
（3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
（5）BFC 的区域不会与 float Box 重叠（清浮动）;
（6）计算 BFC 的高度时，浮动元素也参与计算。

CSS 在什么情况下会创建出 BFC？

0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（float 的值不为 none）
2、绝对定位元素（position 的值为 absolute 或 fixed）
3、行内块（display 为 inline-block）
4、表格单元（display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性)
5、弹性盒（display 为 flex 或 inline-flex）
6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

样式优先级：

!important

内联

1000

id 选择器 #content

100

类选择器（伪类和属性选择器） .content

10

类型选择器和伪元素选择器 div p

1

通配符（*）、子选择器（>）、相邻选择器(+) 0

继承的样式没有权值

盒子塌陷

本应该在父盒子内部的元素跑到了外部。

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为 auto 时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS 高度塌陷。

解决盒子塌陷的方法：

1、设置盒子的宽高

2、给外部的父盒子也添加浮动，让其脱离标准文档流

3、父盒子添加 overflow 属性

4、父盒子最下方引入清除浮动块 clear:both

5、after 伪元素清除浮动

6、父盒子添加 border

7、父盒子设置 padding-top

伪类和伪元素的区别

伪类：

  • 其核⼼就是⽤来选择 DOM 树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。
  • ⽐如:hover :active :visited :link :visited :first-child :focus :lang 等
  • 由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。
  • 由此可以看出，它的功能和 class 有些类似，但它是基于⽂档之外的抽象，所以叫 伪类。

伪元素：

  • DOM 树没有定义的虚拟元素
  • 核⼼就是需要创建通常不存在于⽂档中的元素，
  • ⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
  • 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器

总结：

  • 伪类和伪元素都是⽤来表示⽂档树以外的”元素”。
  • 伪类和伪元素分别⽤单冒号:和双冒号::来表示。
  • 伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
  • 是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类
  • 伪类和伪元素都不出现在源⽂件和 DOM 树中。也就是说在 html 源⽂件中是看不到伪类和伪元素的。
  • 伪类其实就是基于普通 DOM 元素⽽产⽣的不同状态，他是 DOM 元素的某⼀特征。
  • 伪元素能够创建在 DOM 树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

行内元素的 margin padding

  • 水平方向：水平方向上，都有效；
  • 垂直方向：垂直方向上，都无效；（padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）

min-height 和 max-height min-width 和 max-width

  1. max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
  2. min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；

布局：

未知高度元素垂直居中、垂直居中的实现方式有哪些？

1、绝对定位+css3 transform:translate(-50%,50%)

1
2
3
4
5
6
7
8
9
.wrap {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
}

2、css 的 flex 布局

1
2
3
4
5
6
7
.wrap {
  display: flex;
  justify-content: center;
}
.child {
  align-self: center;
}

3、table 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div
  class="wrap"
  > <div
  class="child"
  > <div
  > sadgsdgasgd</div
  > </div
  > </div
  > .wrap {
  display: table;
  text-align: center;
}
.child {
  background: #ccc;
  display: table-cell;
  vertical-align: middle;
}
.child div {
  width: 300px;
  height: 150px;
  background: red;
  margin: 0 auto;
}

图片垂直居中的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// flex
<style>
  body {
    background: #999;
  }
  .flexbox {
    width: 300px;
    height: 250px;
    background: #fff;
    display: flex;
    align-items: center;
  }
  .flexbox img {
    width: 100px;
    height: 100px;
    align-items: center;
  }
</style>
<div class="flexbox">
  <img src="1.jpg" alt="" />
</div>
// 绝对定位
<style>
  body {
    background: #ccc;
  }
  .posdiv {
    width: 300px;
    height: 250px;
    background: #fff;
    position: relative;
    margin: 0 auto;
  }
  .posdiv img {
    width: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
  }
</style>

rem 适配

1
2
3
4
5
6
7
8
9
10
11
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750 //设计稿尺寸
    const setView = () => {
      document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
    }
    window.onorientationchange = setView
    setView()
  </script>
</head>

清除浮动的方法：

1、clear：both 添加了无意义的标 签，结构化比较差

2、overflow:hidden 内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。

3、伪元素：after 伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
  content: "."; /*尽量不要为空，一般写一个点*/
  height: 0; /*盒子高度为0，看不见*/
  display: block; /*插入伪元素是行内元素，要转化为块级元素*/
  visibility: hidden; /*content有内容，将元素隐藏*/
  clear: both;
}

.clearfix {
  *zoom: 1; /*  *只有IE6,7识别 */
}

4、after 伪元素空余字符法

1
2
3
4
5
6
7
8
9
10
.clearfix::after {
  content: "\200B"; /* content:'\0200'; 也可以 */
  display: block;
  height: 0;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

5、使用 before 和 after 双伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

px:绝对长度单位

em:相对长度单位 值不固定，继承父元素的字体大小 相对父元素的大小

rem：相对长度单位 相对于根元素换算