CSS

使用方式

行内添加定义style属性值
页面头部内嵌调用：页面载入时同时加载

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

外面链接调用：页面载入后加载（CSS2）（淘宝）

<style type="text/css" media="screen"> @import url("CSS文件"); </style>

伪类\伪元素

:focus、:hover
::before、::after

移动端适配

流式布局（通过 viewport + flex + px）
rem布局（rem 单位）
响应式布局（利用媒体查询，即 media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局）

<meta name=”viewport” content=”width=device-width; initial-scale=1” />
widow.onload = function(){
        let dpr = win
}
@media all and (max-width:319px){} 宽度小于320px 
@media all and (min-width:320px) and (max-width:359px){} 在320~360之间 
@media all and (-webkit-device-pixel-ratio:2){} 二倍屏

常见尺寸单位

px
em 相对单位长度当前对象内的字体尺寸（通常1em=16px）
rem 只相对HTML根元素

position

绝对定位：absolute相对父.relative和.absolute定位
相对定位：relative
固定定位：fixed 相对浏览器，视觉上在固定位置上不变动
默认值：static

BFC概念及特性：BFC（Block Formatting Context）‘块级格式上下文’

实现自适应两栏布局（BFC内部的Box会在垂直方向一个接一个地放置，不会与float box重叠）

.container {}
.left { float: left }
.right { overflow: hidden }

解决垂直方向上兄弟元素的margin重叠
（Box垂直方向的距离由margin决定，同一个BFC下相邻两个Box的margin会发生重叠）
使用不同的BFC包裹兄弟元素
解决父元素高度塌陷（BFC区域高度会包含浮动的子元素，即闭合浮动，原本浮动元素应该是脱离文档流的）
```
.father{ overflow: hidden / display：inline-block }
.father：after{ clear:both }
.son{ clear:both } // 新增子元素
```

盒模型(box-sizing：content-box（标准）/ border-box（怪异）)

盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成
chorme：W3C标准的标准盒
IE：怪异盒（IE 盒子模型的宽，包含了 border 和 pading）
弹性盒：flexbox（display:flex）

content-box
padding-box
border-box
background-image: url(‘img/bg.png’)
background-origin: content-box
image默认从padding-box开始布局，修改origin可重设布局位置

CSS选择器优先级

!important
id
class
元素标签选择
通配符*
浏览器自带的默认属性

CSS选择器

*[title] {color: red;} a[href][title] {color: red;}

CSS modules/scoped

事件流机制

捕获/目标/冒泡 => 事件代理/事件委托
document => 页面
document. documentElement => html标签
document.body => body标签

event.stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播
event.preventDefault() 取消默认事件(router-link=>a标签，取消跳转的默认行为)
vue中的修饰符 .once .stop .prevent

getElementById 动态集合
querySelector 静态集合

preload/prefetch

defer/async

css、js解析顺序与相互阻塞；引出

<body>
	<div></div>
	<script defer/async src=”./script2.js”> // 延时2s执行完
	<script defer/async src=”./script1.js”> // 延时1s执行完
	<div></div>
</body>

文档解析/脚本加载/脚本执行/DOMContentLoaded 普通

defer

async

Canvas/SVG

Canvas 通过 JavaScript 来绘制 2D 图形依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG 使用 XML 描述 2D 图形的语言不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

HTML5与浏览器兼容问题

使用document创建标签使用html5shim：在中调用以下代码：

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
.<![endif]-->

使用kill IE6: 在之前调用以下代码：

<!--[if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->

DIV

height=width/2 margin: 0 10px; padding: 25% 0;

品字布局

div { height: 100px; width: 100px; border: solid 1px #000000; }
.d1{ margin: 0 auto; }
.d3{ display: inline-block;(float: left;) margin-left: -200px; }
.d2{ display: inline-block;(float: left;) margin-left: 50%; }
</style>
<body>
<div class="d1">上</div>
<div class="d2">右</div>
<div class="d3">左</div>
</body>

div实现textarea

div class="textarea" contenteditable="true"></div>
.textarea{
    width: 400px;
    min-height: 100px;
    max-height: 300px;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto; //超过最大高度就出现滚动条
}

Demo

<style>
    html {
        background-color: aqua;
    }
    body {
        background-color: #fff;
    }
    .block {
        background-color: #000;
        width: 100px;
        height: 100px;
    }
    #id1 {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 10px 20px 30px 40px;
    }
    #id2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    #id3 {
        display: flex;
        justify-content: center;
        align-items: center
    }
    .container {}
    .left {
        height: 100px;
        width: 100px;
        background-color: blue;
        float: left;
    }
    .right {
        height: 120px;
        width: 200px;
        background-color: lightblue;
        /* overflow: hidden; */
    }
    .father {
        border: 5px solid #000;
        /* overflow: hidden; */
        /* display: inline-block; */
    }
    .son {
        width: 200px;
        height: 200px;
        background: yellowgreen;
        float: left;
    }
    /* .fkson {
        clear: both;
    } */
    /* .father:after {
        content: "";
        display: block;
        clear: both;
    } */

    .top {
        width: 200px;
        height: 200px;
        background: red;
        margin-bottom: 40px;
    }
    .bottom {
        width: 200px;
        height: 200px;
        background: blue;
        margin-top: 60px;
    }
    .box {
        overflow: hidden;
    }
</style>

<body>
    <div>
        <div id="id1" class="block"></div>
        <div style="height:100px"></div>
        <div style="position: relative;">
            <div id="id2" class="block"></div>
        </div>
        <div style="height:100px"></div>
        <div id="id3">
            <div class="block"></div>
        </div>
    </div>

    <div style="height:100px"></div>

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div id="s"></div>

    <div style="height:100px"></div>

    <div class="father">
        <div class="son"></div>
        <div class="fkson"></div>
    </div>

    <div style="height:100px"></div>

    <div class="top"></div>
    <div class="box">
        <div class="bottom"></div>
    </div>
</body>

HTML+CSS知识点

CSS