HTML和CSS

2020-06-30 本文已影响0人前端咸蛋黄

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)

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

5. CSS3新特性

rgba, 透明度
background-image / size / repeat
text-shadow
font-face
border-radius, border-shadow
媒体查询

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（块级格式化上下文）

触发条件：

body
float 不为 none
display 为 inline-block
overflow 不为 visible
position 为 absolute 和 fixed

举例:

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

奇技淫巧：

display: flow-root

8. 清除浮动

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

9. 两栏 / 三栏布局

// float/absolute + margin
<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
</div>
<style>
.left{
  float:left;/* position:absolute; */
  width:100px;
}
.right{
  margin-left:100px;
}
<style>
<style>
.contain{
  display:flex;
}
.left{
  width:100px;
}
.right{
  flex:1;  
}
</style>

9. CSS 常用单位

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

10. 响应式布局

10.1 meta viewport

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

viewport是指web页面上用户的可见区域，viewport的大小是和设备相关的。

width：控制viewport的宽度大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度。
height：与width相对应，指定viewport高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
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%;
  }
}