菜鸟教程

Html教程：https://www.runoob.com/html/html-tutorial.html

Css教程：https://www.runoob.com/css/css-tutorial.html

Vue教程：https://www.runoob.com/vue2/vue-tutorial.html

Html

• div
• span
• h1-h6
• i
• strong
• a
• img
• video
• input
• textarea
• button

CSS布局思路

* {
  box-sizing: border-box;
}

1. 盒子模型

1. 外边距 margin 上右下左
2. 内边距 padding 上右下左
3. 边框 border 上右下左 solid dashed (border: 1px dashed black)
4. 阴影 box-shadow: h-shadow v-shadow blur spread color inset; ( box-shadow: 0 0 10px -2px rgba(0,0,0,.5); )
5. 边角 box-radius 上右下左
6. 内容

1. css换行： word-wrap: break-word;

2. Flex布局 https://www.runoob.com/w3cnote/flex-grammar.html

1. flex-direction row column
2. flex-wrap wrap
3. justify-content flex-start | flex-end | center | space-between | space-around
4. align-items：flex-start | flex-end | center | baseline | stretch

CSS布局元素

1. 宽度 width

1. 固定宽度 百分比宽度
2. 最大宽度
3. 最小宽度
4. 水平居中 margin: auto

2. 高度 height

1. 固定高度 （必须）
2. 最大高度
3. 最小高度
4. 行高对齐 line-height

3. 字体

1. 颜色 color 十六进制、rgb、英文
2. 大小 font-size
3. 粗细 font-weight bold

4. 背景

1. https://color.d777.com/
2. 颜色 background-color
3. 图片 background-img: url(...)

5. 定位position

1. absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
2. relative 生成相对定位的元素，相对于其正常位置进行定位 （上下移动行内元素最简单的方式）
3. fixed 生成固定定位的元素，相对于浏览器窗口进行定位

6. overflow: hidden scroll