Html、CSS网页布局

⭐Html

Html常用语句

div ：块状元素，单独占一行，会换行

span ：行内元素，在一行内显示，不会换行

h1~h6：标题样式（加粗加大字体），自带边距

i：icon 自定义图标  eg.小标签 / 按钮图标 

strong：字体加粗，行内元素

a：点击触发跳转  eg.跳转到新的链接页面 <a herf="跳转到的链接"> 按钮字段 </a>

img：放入图片 eg. <img src="图片在当前文件夹的路径 / 图片文件名.jpg" alt=“”>

           #两种路径： 相对路径：相对于当前网页的路径  ( “./ ”为当前路径)

                                绝对路径：在电脑上的根路径

video ：展示视频 eg.<img src="视频在当前文件夹的路径 / 图片文件名.mp4" control><video>

                # control :视频的控件--播放键

input：表单元素，把输入的数据发给后台  eg.输入框，不同type显示出不同的形式（如：

            type=password时显示为加密）

textarea：表单域多行，可以输入多行数据

button：按钮元素

---

⭐CSS

CSS布局思路

盒子模型

## 网页的组成实际上是一个个盒子（方框）组成的 -> 盒子的嵌套和组合

盒子常用属性

        1.1 外边距 margin

        1.2 内边距 padding

        1.3 边距 border：solid（实线），dashed（虚线）

        1.4 阴影 box-shadow

        1.5 边角 box-radius

        1.6 对齐

Flex布局语法

        display：flex

        1.flex-direction ：定义排列方向 row（横向） / column（纵向）

        2. flex-wrap：定义排列方式，默认排列为一条轴线，设置如果一条轴线排不下时应如何换行

                          eg. flex-end（向右对齐），center（居中对齐），space-between（两端对齐），

                                space-around（等分间距）

        3.align-items：定义项目在交叉轴上如何对齐 

                               eg.flex-start（上面在同一轴线上）,flex-end,center,baseline（中间基线对齐）

CSS布局元素

1、宽度 width

        1.1、固定宽度百分比
        1.2、最大宽度 max-width
        1.3.最小宽度
        1.4.水平居中 margin: auto

2.高度height

        2.1.固定高度（必须设定->网页没有固定高度）
        2.2.最大高度 max-height
        2.3.最小高度
        2.4.行高对齐 line-height

3.字体

        3.1.颜色color：十六进制（#+数字）、rgb（色盘坐标）、英文单词

                                 颜色网站👉 在线调色板、颜色代码、配色方案
        3.2.大小 font-size
        3.3.粗细 font-weight ：bold（加粗），normal（正常）
4.背景
        4.1.颜色 background-color
        4.2.图片 background-img: url(...)
5.定位position
        5.1. absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
        5.2.relative：生成相对定位的元素，相对于其正常位置进行定位（上下移动行内元素的方式）
        5.3. fixed：生成固定定位的元素，相对于浏览器窗口进行定位
6. overflow滚动条： scroll（不论是否需要，用户代理都会提供一种滚动机制）

## 想找其他的属性功能的使用看这里👇

Html教程: HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！ HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器，..https://www.runoob.com/html/html-tutorial.html

Css教程:  CSS 教程 | 菜鸟教程CSS 教程 CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发..https://www.runoob.com/css/css-tutorial.html

Vue教程:  Vue.js 教程 | 菜鸟教程Vue.js 教程 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试，Vue3 请参阅 Vue3 教程。 Vue 2.0 在 2023 年 12 月 31 日停止更新。 阅读本教程前，您需..https://www.runoob.com/vue2/vue-tutorial.html