菜鸟教程
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;
}
- 盒子模型
- 外边距 margin 上右下左
- 内边距 padding 上右下左
- 边框 border 上右下左 **solid ** dashed (border: 1px dashed black)
- 阴影 box-shadow: h-shadow v-shadow blur spread color inset; ( box-shadow: 0 0 10px -2px rgba(0,0,0,.5); )
- 边角 box-radius 上右下左
- 内容
- css换行: word-wrap: break-word;
-
Flex布局
https://www.runoob.com/w3cnote/flex-grammar.html
- flex-direction **row ** column
- flex-wrap wrap
- justify-content flex-start | flex-end | center | space-between | space-around
- align-items:flex-start | flex-end | center | baseline | stretch
CSS布局元素
- 宽度 width
- 固定宽度 百分比宽度
- 最大宽度
- 最小宽度
- 水平居中 margin: auto
- 高度 height
- 固定高度 (必须)
- 最大高度
- 最小高度
- 行高对齐 line-height
- 字体
- 颜色 color 十六进制、rgb、英文
- 大小 font-size
- 粗细 font-weight bold
- 背景
- https://color.d777.com/
- 颜色 background-color
- 图片 background-img: url(…)
- 定位position
- absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
- **relative ** 生成相对定位的元素,相对于其正常位置进行定位 (上下移动行内元素最简单的方式)
- fixed 生成固定定位的元素,相对于浏览器窗口进行定位
- overflow: hidden scroll