自省系列-2

发表于 | 分类于 ， ，

HTML中常用行内,块级元素

行内元素

  • a—超链接
  • b—粗体(不推荐使用)
  • br—换行
  • i–区分普通文本,通常斜体
  • span
  • strong—粗体显示
  • input
  • select
  • button
  • form
  • label
  • textarea

块级元素

  • div
  • p
  • h1~h6
  • ol
  • ul
  • li
  • table
  • td,tr,thead,tbody
  • dl,dt,dd
  • section —h5新增
  • header,footer—h5新增
  • article,aside,nav,menu –同上

CSS3新增的特性

边框

  • border-radus:水平半径 垂直半径—边框圆角
1
2
3
4
5
6
7
8
> border-radius: 1em/5em;
> 
> /* 等价于： */
> border-top-left-radius:     1em 5em;
> border-top-right-radius:    1em 5em;
> border-bottom-right-radius: 1em 5em;
> border-bottom-left-radius:  1em 5em;
>
  • box-shadow:水平阴影位置 | 垂直阴影 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 |inset(将外部阴影 (outset) 改为内部阴影)–添加阴影
  • border-image

背景

  • background-size:contain|cover|120px|120px 200px–背景图片尺寸
  • background-origin:border-box|centent-box|padding-box–背景图片定位区域
  • background-clip:border-box|centent-box|padding-box–设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

渐变

  • linear-gradient:渐变方向|开始颜色| 颜色 40%(增加中间渐变)|结束颜色–线性渐变
  • radial-gradient–径向渐变

文本效果

  • word-break:normal | break-all | keep-all | break-word–规定非中日韩文本的换行规则
  • word-wrap:normal|break-word–允许对长的不可分割的单词进行分割并换行到下一行
  • text-overflow:clip|ellipsis|string–文本溢出当前元素的操作
  • text-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影颜色–文本阴影

2D/3D转换

  • transform–2D/3D转换
    • none
    • matrix/matrix3d
    • translate/translate3d
    • translateX/translateY/translateZ
    • scale/scale3D
    • scaleX/scaleY/scaleZX/scaleY/scaleZ —缩放
    • rotate/rotate –旋转
    • rotateX/rotateY/rotateZ
    • skew/skewX/skewY –倾斜转换
    • perspective–3D元素定义透视图

过渡

  • transition–过渡属性
  • transition-property–规定设置过渡效果的 CSS 属性的名称
  • transition-duration–完成过渡效果需要多少秒或毫秒
  • transition-timeing-function–速度效果的速度曲线
  • transition-delay–过渡效果何时开始

动画

  • @Keyframes
  • animation

隐藏元素的方法

回流: 当render tree因为宽高,布局,显示隐藏等引起页面布局发生变化会触发回流

重绘:当只是改变了元素的外观风格,不会造成布局变化会触发重绘

回流必定触发重绘,重绘不一定会回流

占位

  • visibility:hidden–会触发重绘
  • margin-left:-100%—触发回流
  • opacity–不会触发回流和重绘
  • transform:scale(0)—不会触发回流和重绘

不占位

  • display:none –回流
  • width:0;height:0;overflow:hidden—重绘

CSS选择器

  • 通用选择器: *

  • 类选择器: .class

  • ID选择器: #id

  • 标签选择器: div

  • 后代选择器: div p

  • 子选择器: div>p

  • 群组选择器: div,p

  • 相邻同胞选择器: div+p

  • 伪类选择器:

    1
    2
    3
    4
    5
    6
    7
    > :link,:visited,:hover,:active,:focus,:fist-child
    > /*cs系新增*/
    > :fist-of-type,:last-of-type,:only-of-type,:only-child
    > :nth-child(n),:nth-last-of-type(n),:last-child
    > :not(selector),:root
    > :target,:checked,:disabled,:empty,:enable
    >

  • 属性选择器

    • [attribute]
    • [attribute=value]
    • [attribute~=value]
    • [attribute|=value]
    • [atribute*=value]
    • [attribute^=value]
    • [attribute$=value]

border创建图形

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border</title>
</head>
<style>
    /*圆形*/
    .circle{
        margin-bottom: 20px;
        width: 100px;
        height: 100px;
        background-color: orange;
        border-radius: 50%;
    }
    /*上半圆*/
    .top {
        width: 100px;
        height: 50px;
        border-radius: 50px 50px 0 0;
    }
    /*右半圆*/
    .right {
        width: 50px;
        height: 100px;
        border-radius: 0 50px 50px 0;
    }
    /*左半圆*/
    .left {
        width: 50px;
        height: 100px;
        border-radius: 50px 0 0 50px;
    }
    /*下半圆*/
    .bottom {
        width: 100px;
        height: 50px;
        border-radius: 0 0 50px 50px;
    }
    /*左上扇形*/
    .quarterCircle  .top {
        width: 100px;
        height: 100px;
        border-radius: 100px 0 0 0 ;
    }
    /*右上扇形*/
    .quarterCircle .right {
        width: 100px;
        height: 100px;
        border-radius: 0 100px 0 0;
    }
    /*右下扇形*/
    .quarterCircle .bottom {
        width: 100px;
        height: 100px;
        border-radius: 0 0 100px 0;
    }
    /*左下扇形*/
    .quarterCircle .left {
        width: 100px;
        height: 100px;
        border-radius: 100px 0 0 0 ;
    }
    /*三角形*/
    .triangle {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px solid red;
        border-bottom: 100px solid transparent;
    }
</style>
<body>
    <div class="circle border-circle"></div>
    <div class="circle top"></div>
    <div class="circle right"></div>
    <div class="circle left"></div>
    <div class="circle bottom"></div>

    <section class="quarterCircle">
        <div class="circle top"></div>
        <div class="circle right"></div>
        <div class="circle bottom"></div>
        <div class="circle left"></div>
    </section>
    <div class="triangle"></div>
</body>
</html>

BFC

BFC全程”块级格式化上下文”(Block Formatting Context)

形成条件(任意一条)

  • html根元素
  • float不是none
  • position不是static或relative
  • display是inline-block,table-inline-block,table-cell,table-caption,flex,inline-flex

特性

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

应用场景

  • 解决浮动子元素导致父元素高度坍塌问题,因为在BFC中计算告诉是包含浮动元素的高度在内的
  • 解决文字环绕在float周围
  • 解决margin重叠问题,BFC中的垂直的两个元素,margin不重叠

示例

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    p {
        color: turquoise;
        background: yellow;
        width: 200px;
        text-align: center;
        margin: 30px;
    }
    .bfc-2 {
        overflow: hidden;
    }
    .bfc-3 {
        width: 100%;
        position: relative;
    }
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background: gray;
    }
    .right {
        overflow: hidden;
        height: 100px;
        background: greenyellow;
    }
    .bfc-3 {
        margin-top: 20px;
        width: 300px;
        border: 2px solid greenyellow;
        /* 如果不是BFC情况下,div高度坍塌 */
        overflow: hidden; 
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        border: 2px solid yellow;
    }
</style>
<body>
    <!-- 跟元素是HTML 两个p是形成了一个bfc,同属于一个bfc,margin会重叠 -->
    <p>margin-30px</p>
    <p>margin-30px</p>
    <!-- 新建一个bfc,margin都会生效 -->
    <div class="bfc-2">
        <p>margin-30px</p>
    </div>

    <div>
        <!-- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此 -->
        <!-- left是一个BFC float浮动触发 -->
        <div class="left">left</div>
        <!-- right是一个BFC overflow触发 BFC的区域不会与float的元素区域重叠-->
        <div class="right">right</div>
    </div>

    <!-- 计算BFC的高度时，浮动元素也参与计算 -->
    <div class="bfc-3">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

iframe框架优缺点

优点

  • 内嵌第三方内容,比如广告
  • 可以将嵌入的网页完全展现出来
  • 如果iframe被多个网页引用,当你修改的时候iframe的时候,可以同步每个网页引用的iframe都被修改
  • iframe跨域(存在安全问题)
  • 方便制作统一头部,底部

缺点

  • SEO不友好,不利于SEO优化
  • iframe页面多的情况下,会增加服务器的http请求,每一个iframe都对应着一个页面，也就意味着多余的 css, js 文件的载入,会增加请求的开销
  • 会产生很多页面,不容易管理

清除浮动的方式

为什么要清除浮动

当内部元素float:left时,会从标准文档流中抽出,这样在文档流中父级下没有内容填充,导致父级的高度坍塌

清除浮动方式

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        border: 2px solid green;
        margin-bottom: 20px;
    }
    .child {
        float: left;
        width: 50px;
        background: gray;
        border: 1px solid yellow;
    }
    .clear {
        clear: both;
    }
    .box1 {
        width: 200px;
        border: 2px solid green;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .box2 {
        width: 200px;
        border: 2px solid green;
        margin-bottom: 20px;
    }
    /* bootstrap 清除浮动 */
    .clearfix {*zoom: 1;}
    .clearfix::after,.clearfix::before{display: table;line-height: 0;content: "";}
    .clearfix::after{clear: both;}
</style>
<body>
    <div class="box">
        <div class="child">child</div>
        <div class="child">child</div>
        <!-- 新增元素 清除浮动 造成元素冗余 -->
        <div class="clear"></div>
    </div>

    <!-- div增加overflow属性 激活为BFC 但是如果内容多的话会隐藏不展示 -->
    <div class="box1">
        <div class="child">child</div>
        <div class="child">child</div>
    </div>

    <div class="box2 clearfix">
        <div class="child">child</div>
        <div class="child">child</div>
    </div>
</body>
</html>

浏览器不同标签页之间通信

localStorage

  • A标签页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>storage</title>
    </head>

    <body>
        <input id="name" value="" type="text">
        <input type="button" id="btn" value="提交">
    </body>
    <script type="text/javascript">
        let btn = document.getElementById("btn");
        btn.addEventListener('click',function(event) {
            let val= document.getElementById("name").value;
            localStorage.setItem("name",val);
        })
        </script>
    </html>

  • B标签页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>storage</title>
    </head>
    <body>
        
    </body>
    </html>
    <script>
        window.addEventListener('storage',function(event) {
            console.log(event.newValue);
        })
    </script>

sharedWorker

  • sharedWorker可以备多个window共同使用,但必须保证这些标签页是同源(协议,主机,端口相同)

  • 新建worker.js,放到服务器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let data = "";
    onconnect = function (e) {
      let port = e.ports[0];

      port.onmessage = function (e) {
        if (e.data === "getMessage") {
          port.postMessage(data);
        } else {
          data = e.data;
        }
      };
    };

  • 页面注册sharedWorker,与worker进行连接,监听onmessage事件,如果有标签页发送message时,会触发这个事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //注册sharedWorker
    if (typeof Worker === "undefined") {
      alert("当前浏览器不支持sharedWorker");
    } else {
      //注册
      let worker = new SharedWorker("worker.js");
      worker.port.addEventListener(
        "message",
        (e) => {
          console.log("来自worker的数据", e.data);
        },
        false
      );
      //连接
      worker.prot.start();
      window.worker = worker;
    }
    //使用postMessage通信,获取和发送 getMessage是约定的获取消息的key
    window.worker.port.postMessage("getMessage");
    window.worker.port.postMessage("发送消息");