HTML & CSS

一、HTML

1. HTML语义化

HTML结构，是用有一定语义的英文字母标签表示的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写，别人看你的代码和结构也容易理解。

2. HTML5新特性

(1) 语义化标签，废除标签
(2) 音频和视频

<audio controls autoplay>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

(3) Canvas绘图

<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "rgb(200,0,0)"
ctx.fillRect (10, 10, 55, 50)

3. data-

data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取。

当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

4. a 标签 target 属性

blog.csdn.net/BOKEhhh/art…

_blank。在新窗口中打开被链接文档。
_self。默认。在相同的框架中打开被链接文档。
_parent。在父框架集中打开被链接文档。
_top。在整个窗口中打开被链接文档。

5. iframe

定义: iframe元素会创建包含另一个文档的内联框架

缺点:

(1) iframe会阻塞主页面的 Onload 事件。 (2) 搜索引擎的检索程序无法解读这种页面，不利于 SEO。 (3) iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

二、CSS

1. 盒模型

box-sizing: content-box / border-box

标准盒模型：内容宽度 = content

IE 盒模型：内容宽度 = content + padding + border

2. css优先级

important > 内联 > id > class > 标签

3. 居中

上下居中：

// 绝对定位
.center-me {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}

// flex
.parent {
  display:flex;
  align-items: center;
}

// padding line-height

// vertical-align: middle

左右居中：

.center-me {
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

// flex
.parent {
  display: flex;
  justify-content: center;
}

// margin
.center-me {
  width: 固定;
  margin: 0 auto;
}

// text-align: center;

4. display，postion

// 换行, 宽度, margin padding 上下
display: inline, block, inline-block, flex,none

// 自身, 最近的非static, 窗口, static + fixed
position: static, relative, absolute, fixed, sticky

display: none, visibility: hidden, opactiy: 0 的区别

(1) 是否占据空间
display: 隐藏之后不占位置。
visibility, opacity: 隐藏后任然占据位置。

(2) 子元素是否继承
display: 父元素都不存在了，子元素也不会显示出。
visibility: 通过设置子元素visibility:visible来显示子元素。
opacity: 会被子元素继承，但是不能设置子元素opacity来重新显示。

(3) 事件绑定
display: 无法触发它绑定的事件。
visibility: 不会触发它上面绑定的事件。
opacity: 元素上面绑定的事件是可以触发的。

(4) 过渡动画
display: transition对于display是无效的。
visibility: transition对于visibility是无效的。
opacity: transition对于opacity是有效。

5. CSS3新特性

(1) rgba, 透明度
(2) background-image / size / repeat
(3) text-shadow
(4) font-face
(5) border-radius, border-shadow
(6) 媒体查询

6. CSS3三角形

div{
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-top: 40px solid transparent;
  border-top: 40px solid transparent;
  border-top: 40px solid red;
}

7. BFC 和 IFC

BFC（块级格式化上下文）

触发条件：
(1) body
(2) float 不为 none
(3) display 为 inline-block
(4) overflow 不为 visible
(5) position 为 absolute 和 fixed

举例:
某个 float 元素脱离了文档流，兄弟元素和父元素触发BFC

奇技淫巧：

display: flow-root

IFC（内联格式化上下文）

触发条件：
块容器盒里只有行内元素时自动生成IFC。

IFC的特性：
让元素尽可能在同一行，内部元素都是内联元素，包含a b span I b em img input select strong。

IFC的用途：
比如水平居中，设置text-align:center，垂直居中设置其vertical-align:middle。

FFC（自适应格式化上下文）

GFC（网格布局格式化上下文）

8. 清除浮动

.clearfix::after{
  content:"";
  clear:both;
  display:block
}

9. 两栏 / 三栏布局

float/absolute + margin

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.left{
  float:left;/* position:absolute; */
  width:100px;
}
.right{
  margin-left:100px;
}

flex

.contain{
  display:flex;
}
.left{
  width:100px;
}
.right{
  flex:1;  
}

9. CSS 常用单位

(1) px, cm, mm, %
(2) vh / vw : 相对于视口的高度/宽度。视口被均分为100单位
(3) rem: 1rem 等于 html 根元素设定的 font-size 的 px 值
(4) em: 相对于元素父元素的font-size

10. 响应式布局

10.1 meta viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport是指web页面上用户的可见区域，viewport的大小是和设备相关的。
(1) width：控制viewport的宽度大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度。
(2) height：与width相对应，指定viewport高度。
(3) initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
(4) maximum-scale：允许用户缩放到的最大比例。
(5) minimum-scale：允许用户缩放到的最小比例。
(6) user-scalable：是否允许用户手动缩放。

10.2 媒体查询

@media (max-width: 400px) { ... }

10.3 rem, vh, vh

11. flex

.parent {
  display: flex
  justify-content: flex-start|flex-end|center|space-between|space-around; // 左右对齐
  align-items: stretch|center|flex-start|flex-end|baseline; // 上下对齐
  flex-direction: row|row-reverse|column|column-reverse; // 横向竖向正向反向排列
  flex-wrap: flex-wrap: nowrap|wrap|wrap-reverse; // 换行
  flex-flow: flex-wrap + flex-direction;
  align-content: stretch|center|flex-start|flex-end|baseline; // flex-wrap 存在时的 align-items
}
.son{
  order: 0, 1, 2...;  // 排序
  align-self: stretch|center|flex-start|flex-end|baseline; // 自身上下对齐
}

12. 动画

p {
  animation: slidein 3s;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

13. CSS 画一条0.5px的线

1 meta viewport

 <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

2 transform: scale()

transform: scaleY(0.5);
transform-origin: 50% 100%;

14. link 标签和 import 标签的区别

(1) link 是 HTML 标签；@import 属于 CSS 范畴。
(2) link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
(3) link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
(4) link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

15. 省略号

单行元素溢出显示省略号

{
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

多行元素溢出显示省略号

{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

16. 外边距折叠

块级元素的上外边距和下外边距有时会合并为一个外边距，其大小取其中的最大者，这种行为称为外边距合并。

(1) 设置 padding 或者 border
(2) 将它们放置在不同的 BFC 容器中

17. 两列等高

为了实现两列等高，可以给每列加上 padding-bottom:9999px 和 margin-bottom:-9999px，同时父元素设置overflow:hidden。

<div class ="container">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.container{
  width:200px; /*设置元素宽度*/
  overflow:hidden;
}
.left{
  float:left;
  width:100px;
  padding-bottom:9999px;
  margin-bottom:-9999px;
}
.right{
  width:100px;
  display:flow-root;
  padding-bottom:9999px;
  margin-bottom:-9999px;
}

18. 伪类和伪元素

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。:link :hover
伪元素本质上是创建了一个有内容的虚拟容器。::before ::after

区别

(1) 可以同时使用多个伪类，而只能同时使用一个伪元素。
(2) 伪类存在DOM文档中，无标签，找不到，只有符合触发条件时才能看到。伪元素不存在在DOM文档中，是虚拟的元素，是创建新元素。这个新元素是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

HTML 和 CSS