小白做毕设——网页布局（概览）

菜鸟教程

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;

1. 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