HTML基础

个人软件推荐

1、VSCode：轻量级编辑器，更适合入门级的修行者，需要下载很多插件（暂时免费）

2、WebStorm：企业级开发工具，个人更喜欢，和JAVA的IDEA工具同源，做项目更爽（收费，试用30天但可无限30天）

个人资料网站推荐

1、哔站：（1）程序员鱼皮，有强大的学习路线；（2）尚硅谷。音质感觉很好，听起来很舒服。

2、菜鸟程序员：菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com) ，入门查资料用起来很爽

3、MDN：MDN Plus (mozilla.org)，进阶查资料网站

ps：个人建议先看视频，网站用来巩固知识。

一、第一个html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!--<!DOCTYPE html> 声明为 HTML5 文档-->
<!--<html> 元素是 HTML 页面的根元素-->
<!--<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。-->
<!--    <title> 元素描述了文档的标题-->
<!--        <body> 元素包含了可见的页面内容-->
</body>
</html>

ps：只需要了解

二、html认识

<!-- html 注释：Ctrl+/ 不会渲染在浏览器--><!--双标签：-->
<strong></strong>
<!--单标签：-->
<br>
<hr/>
<!--父子关系（嵌套关系）：<head><title></title></head>
-->
<!--兄弟关系（并列关系）:<head></head><body></body>
-->

ps：主要记住父子关系和兄弟关系

三、元素

<开始标签>元素类容<结束标签>

元素分类

<!--
块元素：block特点：独占一行,可以包含其他块元素或行内元素常见：h1,p,p元素里不放块元素
行内元素：inline
特点：不独占一行
常见：b，u，i
行类块元素：inline-block
特点：独占一行，可以设置宽高
-->

ps：可以改变元素的类型，css中使用display属性

四、属性

属性是在html标签中附加的信息；一般将属性加在开始标签中；键值对形式 name="value"。例如<a href=""></a>,href就是属性名

五、修改文本的标签

1、标题标签

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!--独占一行、文本加粗、文字逐渐减小-->

2、文本标签

<p>第一段</p>
<p>第二段</p>
<!--段落之间存在间隙；独占一行-->

3、换行标签

<!--1.3.1换行标签-->
<br>

4、水平分割线

<!--1.4.1水平分割线-->
<hr>

5、文本格式化标签

<!-- strong，ins，em，del 强调语气更强烈--><b>加粗</b>
<strong>加粗</strong><u>下划线</u>
<ins>下划线</ins><i>倾斜</i>
<em>倾斜</em><s>删除线</s>
<del>删除线</del>

6、span标签

<!--
本身没有语义，常用来帮助处理文本
-->
<span style="color: red">这是span标签</span>

ps：以上标签主要用于修改文本，适用于类似新闻页面文字部分。

六、转义字符

<!--
转义字符：
语法：&字符名字
常用的：空格：&nbsp
-->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这是一段内容</p>

ps：更多符号实体：HTML 符号实体参考手册 | 菜鸟教程 (runoob.com)

路径问题

<!--绝对路径：从盘符开始；相对路径：从当前文件开始-->
<!--./：当前文件；../从当前文件返回到上一级目录-->

七、图片标签

<!--图片标签：-->
<!--src：图片的路径；
alt：替换文本，当图片加载失败，显示alt的文本；
title：当鼠标悬停的时候才显示的文本属性名：width和height。如果只设置了其中的一个，没设置的会自动等比例缩放
-->
<img src="" alt="图片加载失败" title="这是图片的提示文本"  width="200px" height="200px">

八、音频标签

<!--src：音频路径 ； controls：显示播放控件  ；autoplay：自动播放（部分浏览器不支持）；loop：循环播放 -->
<body>
<audio src="./mp3/谢谢你的爱.m4a" controls autoplay loop></audio>

九、视频标签

<!--谷歌浏览器可以自动播放视频，但是必须设置为静音状态：muted-->
<div>
<video src="./mp4/薛之谦-天外来物(蓝光).mp4" controls style="width: 600px" autoplay muted></video>
</div>

十、列表

<!--
列表:无序列表 ulli标签表示列表项无序列表前是项目符号可以通过ul的type属性修改项目符号disc实心圆点 默认空心圆circle空心圆square正方形有序列表 ol可以通过ul的type属性修改序号自定义列表 dl dtdt表示术语,标题dd表示对术语的解释-->
<ul type="square"><li>富强</li><li>自由</li><li>爱国</li>
</ul><ol type="I"><li>富强</li><li>自由</li><li>爱国</li>
</ol><dl><dt>和谐</dt><dd>富强</dd><dd>自由</dd><dd>爱国</dd>
</dl>

十一、超链接

<!--a标签:
href:定义超链接跳转的路径
target:定义跳转的方式;属性值:_blank:另起一个窗口;_self:在当前窗口跳转(默认值);_parent 在父页面的窗口显示
-->
<!--
锚点:定位的点
要定位的标签设置id属性,a的href的值为要定位的标签id-->
<!--<a href="" target="_self">跳转</a>-->
<p id="top">顶部</p>
<a href="#p1">段落1</a>
<a href="#p2">段落2</a>
<a href="#p3">段落3</a><p id="p1" style="height: 600px">这是段落1</p>
<p id="p2"  style="height: 600px">这是段落2<a href="#top">顶部</a></p><p id="p3" style="height: 600px">这是段落3<a href="#top">顶部</a></p>

十二、表格

<!--
table:
tr（table row）一行
td （table data）一个单元格
th （table header cell）表头单元格，有加粗效果
table常用属性：
border表格的边框，值是数字
cellspacing 单元格之间的空隙，值是像素px
cellpadding 单元格的内边距，值是像素px
align 控制表格位置
--><table border="1" cellspacing="0" width="800px" cellpadding="20px" align="center"><tr><th>序号</th><th>姓名</th><th>毕业时间</th><th>最高学历</th><th>毕业院校</th><th>专业</th><th>CSDN网址</th><th>现住址</th></tr><tr><td>1</td><td>小明</td><td>2022.6</td><td>本科</td><td>重科</td><td>软工</td><td>www.xxx</td><td>重庆</td></tr><tr><td>2</td><td>小明</td><td>2022.6</td><td>本科</td><td>重科</td><td>软工</td><td>www.xxx</td><td>重庆</td></tr></table>

表格结构

<!--thead、tbody、tfoot 顺序不一样，但是页面显示还是一样，头部还是头部，身体还是身体-->
<table border="1" width="200px"><thead><tr><th>姓名</th><th>性别</th></tr></thead><tbody><tr><td>小明</td><td>男</td></tr></tbody><tfoot><tr><td colspan="2">总人数</td></tr></tfoot>
</table>

十三、单元格合并

<!--
合并单元格：
rowspan 合并行 rowspan="2" 合并两列，保留目标单元格数据
colspan 合并行 colspan="2" 合并两列，保留目标单元格数据
--><table border="1" cellpadding="5px"><tr><td rowspan="2">1</td><td colspan="2">2</td></tr><tr><td>2</td><td>3</td></tr>
</table>

十四、表单

<!--
表单域 form
name:表单域的名字，一个页面可以有多个表单域，通过名字进行区分
action：设置服务器地址url
method:提交方式，常用：
get：提交参数会附在提交的url的地址后面，会显示在地址栏
post：提交的参数在表单体中，不会显示在地址栏
-->
<form name="form1" action="" method=""></form>
<form name="form2">

十五、表单元素

<!--
表单元素input
表单元素放在表单域中
属性：
type:文本输入框
password：密码框
radio：单选框
checkbox：复选框
--><form action="" method="get"><input type="text"><input type="password"><input type="radio">单选框<input type="checkbox">复选框<input type="date"><input type="month"><input type="color"><input type="file"><input type="button" value="按钮"><input type="submit" value="按钮"><input type="reset" value="重置">
</form>

十六、input其他属性

<!--
name:
value:
placeholder：输入框中的提示文字
required必填项
checked：选中
readonly:只读
disabled:设置元素为不可用-->
<form action="" method="get"><input type="text" name="user" value="234" placeholder="请输入用户名" readonly><input type="password" name="password"><input type="submit"><input type="radio" name="1" checked><input type="radio" name="1"><button disabled>验证</button>
</form>

十七、lable标签

<!--
label：为元素设置标注
用for属性绑定input标签的id值，没有#号，
-->
<form><label for="user">用户：</label><input type="text" name="user" pattern="输入用户名" id="user"><label for="user">密码：<input type="text" name="pwd" pattern="输入密码" ></label>
</form>

ps:两种用法，实际开发中，密码框type=password

十八、select标签

<!--
select标签
定义一个下拉列表
选项是option标签-->
<form action="" method="get"><select name="select"><option disabled selected>请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="submit">
</form>

十九、文本域标签

<!--
多行文本框
rows：显示多少行
cols：显示多少列
-->
<textarea rows="30" cols="10">
</textarea>

二十、内联框架

<!--
内联框架 iframe：
在页面中嵌入另一个页面
属性：
src 设置嵌入页面的url地址
-->
<!--
实现局部更换页面：
a链接的target属性=iframe的name属性
a链接的href中写要显示的页面链接
-->
<a href="18select标签.html" target="content">i1页面</a>
<a href="11表格.html" target="content">i2页面</a><iframe name="content" width="800px" height="500px"></iframe>

二十一、div标签

<!--
div标签：
块元素，相当于一个透明的盒子，常用于页面布局
-->
<div>

二十二、单选按钮

<!--name:分组，相同那么属性值的单选按钮为一组，只能有一个被选中;;checked：默认选中-->
性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女

二十三、选择文件标签

<!--文件选择多个文件-->
<input type="file" multiple>

二十四、button按钮

<!--常用于控制表单，提交和重置
type:button/submit/reset-->
<button type="reset"></button>

CSS基础

一、css认识

<!-- 通过引入外部文件 --><link rel="stylesheet" href="css/01.css"><!-- 通过style标签来写 -->
<style>h2{/* 设置内部文字的颜色 */color: rebeccapurple;}</style>
<!-- css:页面样式css语法规范：样式属性:样式属性值选择器{样式属性:样式属性值}--><h1 style="text-align: center; color: red">这是h1标签</h1><h2 style="text-align: center;">这是h2标签</h2><h3 style="text-align: center;">这是h3标签</h3>

二、css选择器

<!--
id选择器：必须唯一
用法：在样式中写选择器的位置
-->
<!--<h1 id="h1">这是第1个</h1>-->
<!--<h1 id="h2">这是第2个</h1>-->
<!--
class选择器：对拥有相同样式的某一类小团体进行样式设置
.class属性名{样式属性:样式属性值;
}
-->
<!--
标签选择器；
标签{样式属性:样式属性值;
}通配符选择器：（会选择所有元素）
*{
}
--><h1 class="hh">这是第一个h1</h1>
<h2 class="hh">这是第一个h2</h2>

三、复合选择器

    <style>/*h1,.tit1{*/
/*    color: red;*/
/*}*/
h1.tit1{color: red;
}</style>
<!--
复合选择器
交集选择器--必须满足多个条件
并集选择器--只要满足其中一个条件
用法：
选择器1,选择器2{}
用法：
-->
<h1 class="tit1">h1标签</h1>
<h1 class="tit2">h2标签</h1>
<h3>h3标签</h3>

四、派生选择器

 <style>/* 派生选择器 *//* 在基础选择器的基础上衍生出来的选择器 *//* 后代选择器选择后代元素的选择器*//* 语法 selector selector selector ... *//* form div label input {border: 5px solid violet;} *//* html body form div input {border: 5px solid black;} *//* .form-item input {border: 5px solid black;}form div input {border: 5px solid violet;} *//* 子代选择器选择子代元素的选择器*//* 语法：selector>selector ...  *//* label>input {border: 5px solid violet;} *//* form>div {border: 5px solid green;}form>div>label>input {border: 5px solid violet;} *//* 混合使用派生选择器 *//* 选择body标签中的后代的label的子代的input */body label>input {border: 5px solid gold;}/* 兄弟选择器选择复合条件的兄弟级别的下一个元素*//* 语法：selector+selector *//* .item2+.item1 {border: 5px solid gold;} *//* 选择所有的兄弟节点 *//* 选择class为item2的标签的兄弟标签，且该兄弟标签出现在item2后面，且是所有的class为item1的标签 */.item2~.item1 {border: 5px solid gold;}/* 类选择器的派生 */.box {width: 100px;/* 宽 */height: 50px;/* 高 */border: 5px solid blue;}/* 选择一个class中即存在box又存在active的元素 */.box.active {border: 5px solid greenyellow;}</style>
<form><div class="form-item"><label>姓名：<input /></label></div><div><label>性别：<input /></label></div><div><label>年龄：<input /></label></div></form><ul><li><div class="item1">1</div><div class="item2">2</div><div class="item1">3</div><div class="item1">4</div></li><li><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item1">4</div></li><li><div class="item1">1</div><div class="item2">2</div><div class="item1">3</div><div class="item1">4</div></li></ul><div><div class="box">1</div><div class="box active">2</div></div>

五、属性选择器

 <style>/* 属性选择器 *//* 语法: selector[attrname=value] *//* 从左到右读选择器，该选择器的含义为：input标签中含有name属性且属性值为name的标签 */input[name='name'] {border: 5px solid pink;}/* 选择input标签中包含name属性，且属性值以ag开头的所有标签 */input[name^='ag'] {border: 5px solid rgb(0, 238, 255);}/* 选择input标签中包含name属性，且属性值以end结尾的所有标签 */input[name$='end'] {border: 5px solid rgb(255, 153, 0);}/* 若同为属性选择器，优先级取决于前面的selector的基础选择器类型 */.de[name*='good'] {border: 5px solid rgb(245, 11, 11);}/* 选择input标签中包含name属性，且属性值包含good的所有标签 */input[name*='good'] {border: 5px solid rgb(245, 11, 225);}/* 优先级相同的选择器，写在后面的样式会覆盖前面的样式 *//* input[name^='good'] {border: 5px solid rgb(11, 245, 42);} */</style><form><div><label>姓名：<input name="name" /></label></div><div><label>age：<input name="age" /><input name="agc" /><input name="agb" /></label></div><div><label>班级：<input name="legend" /><input name="agend" /><input name="lagend" /></label></div><div><label>部门：<input name="goodfoot" /><input class="de" name="handgood" /><input name="hegoodad" /></label></div></form>

五、伪类选择器

style>/* 伪类选择器伪类指的是一类标签但是，这类标签不一定需要具备class属性*//* hover: 鼠标悬停时的伪类 *//* 语法：selecor:hover */.box {border: 5px solid black;width: 200px;height: 100px;}/* 当鼠标悬停到.box上的选择器 */.box:hover {border: 5px solid pink;}/* link 元素中的连接样式，这里指的是a标签中的文本 */.baidu:link {/* 去掉a标签的底部装饰线 */text-decoration: none;background-color: green;}.baidu:visited {color: pink;}.baidu:hover {color: gold;}/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited *//* visited 的样式有所限制，可以查看mdn了解详情 */.bsite:visited {color: red;}/* active 元素激活时的伪类(鼠标点住不放) */.baidu:active {background-color: indigo;}.box:active {background-color: gold;}/* 使用注意：对于a标签链接的处理，active必须在hover后，hover必须在link和visited后 *//* nth-child(n) 选择某个选择器所指标签的指定位置的子标签 *//* 该函数的参数，代表第几个子节点 *//* ul li:nth-child(2) {color: gold;} *//* first-child 第一个子节点 *//* ul li:first-child {color: red;} *//* last-child 最后个子节点 *//* ul li:last-child {color: red;} *//* nth-of-type(n) 第几个指定类型的节点 *//* ul li:nth-of-type(2) {color: blue;} *//* nth-child 和 nth-of-type 的区别 *//* nth-child 先找到指定位置的节点，再判断节点是否是指定类型 *//* nth-of-type 先找指定类型的元素，再判断位置是第几个节点 *//* nth-child 和 nth-of-type 可以使用n来代表所有的子元素 */ol li:nth-child(2n-1) {color: greenyellow;}/* empty 代表空元素（标签体是空的标签） */div:empty {background-color: black;}/* 根节点 也就是 html 标签 */:root {border: 10px solid goldenrod;}</style><div class="box">hello world</div><div><a class="baidu" href="https://www.baidu.com">百度</a><a class="bsite" href="https://www.bilibili.com">b站</a></div><ul><li>1</li><div>2</div><li>3</li><li>4</li></ul><ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ol><div class="box">hello</div><div class="box"></div><div class="box">world</div>

ps:

伪类选择器hover，想要改变同级的标签元素，需要将:hover放在父元素上。

常见样式

六、背景

<style>.box {border: 50px solid #000;padding: 30px;width: 300px;height: 200px;/* 背景色 */background-color: #ff0000;/* 背景图 */background-image: url(../img/1.jpg);/* 背景图的重复方式 *//* 待选项：no-repeat: 不重复repeat: 横纵方向都重复repeat-x: 横向重复repeat-y: 纵向重复round: 让图片正好填充满整个背景，但图片可能被拉伸space: 有间距的铺满背景，但图片不会拉伸也不会被裁剪*/background-repeat: no-repeat;/* 背景图尺寸 *//* 待选项：auto: 保持图片原始大小cover: 让图片完整覆盖整个背景，但宽高比不变contain: 让背景完全包含整个图片，但宽高比不变*//* background-size: contain; *//* 图片左上角对齐的位置 *//* 待选项：content-box: 图片左上角对齐内容区域的左上角padding-box: 图片左上角对齐内边距的左上角border-box: 图片左上角对边框的左上角若不设置概述性，默认情况是padding-box*//* background-origin: border-box; *//* 设置背景图的裁剪区域，超过该区域的不部分将被裁剪掉 *//* 待选项：content-box: 超出内容区域的部分将被裁剪掉padding-box: 超出内边距区域的部分将被裁剪掉border-box: 超出边框区域的部分将被裁剪掉*//* background-clip: border-box; *//* 设置背景图在背景中的位置 *//* 待选项：top: 向上对齐左右居中bottom: 向下对齐左右居中left: 向左对齐上下居中right: 向右对齐上下居中center: 居中数字：第一个数字代表图片左上角x坐标，第二个数字代表图片左上角y坐标*/background-position: center center;background-position: 50px 100px;/* 背景是个复合属性，可以添加多个值 */background: #00ff00 url(../img/1.jpg) no-repeat center center;}</style><div class="box"></div>

七、大小单位

    <style>* {margin: 0;}.bg {background-color: #f00;}.container {height: 100px;}.box1 {/* px: 像素值 */width: 100px;height: 100px;}.box2 {/* 百分比: 相对父元素的百分比 */width: 50%;height: 33%;}.box3 {width: 100px;/* height: 100px; *//* em: 当前元素的字符宽度 1em = 1个字符宽 *//* rem: 根节点(html元素)的字符宽 1rem = html元素的一个字符宽 */text-indent: 2em;text-indent: 2rem;/* ex: 当前元素字符的半高 2ex = 1个字符高 *//* height: 2ex; */white-space: nowrap;line-height: 6ex;}.container {background-color: #0f0;/* vh(viewport-height): 相对于视口高度的百分比 */height: 100vh;/* vw(viewport-width): 相对于视口宽度的百分比 */width: 50vw;}</style>
<div class="container"><div class="box1 bg"></div><div class="box2 bg"></div><div class="box3">htllo</div></div>

八、盒模型

 <style>/* 什么是盒模型盒模型是浏览器对html元素的宽高大小 元素间间距的解析方式*//* 盒模型的解析方式:1. ie 盒模型: ie浏览器解析盒模型的方式，解析方式为: width height 设置的宽高为 内容 + 内边距2. 标准盒模型: width height 解析为 内容宽高*//* 盒模型由四个部分组成内容 content内边距 padding 内容区域到边框的距离边框 border外边距 margin*/.box1 {background-color: #ff00ff;/* 内容 */width: 100px;height: 50px;/* 内边距 *//* 当设置一个值的时候代表每一边内边距都为 30px */padding: 30px;/* 第一个值代表上下内边距 第二个值代表左右内边距 */padding: 20px 50px;/* 设置 上 右 下的内边距 左侧内边距等于右侧内边距 */padding: 10px 20px 30px;/* 设置上右下左的四边内边距 *//* padding: 10px 20px 30px 40px; *//* 单独设置一边的内边距 */padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}.box2 {width: 300px;height: 300px;/* 设置四边的边框 */border: 20px solid #00ffff;/* 以下边框属性都可以设置多个参数 *//* 边框宽度 */border-width: 10px 20px 30px 40px;/* 边框样式值类似于文本装饰线soliddoublegrooveridgedasheddottednone: 没有边框*/border-style: solid dashed double dotted;/* 边框颜色 */border-color: #ff0000 #ffff00 #0000ff #00ff00;/* 指定单独一边的样式 */border-top: 50px ridge #7ece23;/* 边框弧度 */border-radius: 20px;}.box3 {border: 5px solid #000000;width: 100px;height: 100px;/* 外边距设置方法和内边距完全一样*/margin: 50px;margin: 30px 20px;margin: 10px 20px 30px;margin: 10px 20px 30px 40px;/* 单独设置一边的外边距 */margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;}.box4 {width: 200px;height: 200px;background-color: #ff0000;/* box-sizing 用于规定 width 和 height 属性如何解析待选项:content-box: 内容盒border-box: 边框盒*/box-sizing: content-box;border: 20px solid #000000;}.inline-el {width: 100px;height: 100px;padding: 30px;margin: 30px;border: 10px solid #000;}</style><div class="box1">hello</div><div class="box2">world</div><div class="box3">!!!</div><div class="box4"></div><!-- 行内元素内外边距问题 行内元素无法设置宽高，且宽高由内容决定行内元素上下内外边距设置无效，左右内外边距有效--><div><span class="inline-el">hello world</span></div>

九、计算函数

 <div class="container"><div class="box"></div></div>
<style>html,body {height: 100%;padding: 0;margin: 0;}.container {/* calc() 计算函数函数中可以由任意单位的尺寸进行运算请注意计算的符号左右有空格*//* 计算属性常用于设置元素宽高 或 设置元素位置 *//* 设置元素宽度 */width: calc(100% - 4em);height: 100%;border: 1px solid black;margin: 0 auto;box-sizing: border-box;position: relative;}.box {width: 100px;height: 100px;background-color: red;position: absolute;/* 使用计算函数设置位置 */left: calc(50% - 100px / 2);}</style>

十、定位

 <style>/* 定位 *//* 什么是定位？ *//* 定位是css中用于确定元素位置的属性 *//* 定位的类型有以下几种:1. 绝对定位2. 相对定位3. 固定定位4. 粘性定位*//* 如何修改定位的层叠关系 */.box {width: 100px;height: 100px;}.box1 {background-color: #f00;/* 1. 绝对定位参考系: 默认参考视口(viewport)绝对定位的元素将浮出文档流*/position: absolute;/* 可以通过 top bottom left right 来设置坐标他们表示元素离视口 上下左右 距离多少*//* top: 100px;left: 200px; *//* 若元素宽度为自动 */width: auto;/* 那么设置互斥的定位信息，可以用于确定元素的大小 */left: 100px;right: 200px;}.box2 {background-color: #0f0;/* 2. 相对定位参考系: 自己*/position: relative;/* top bottom left right 代表的含义为 相对自己的上边缘下边缘左边缘右边缘多少距离 */left: 100px;}.box-container {width: 400px;height: 400px;background-color: #ff0;/* 绝对定位的参考系 可以修改给绝对定位元素的先祖元素添加一个 非 static 的定位就可以将该先祖变成参考系static 就是没有定位的意思*//* 给父元素添加定位属性 */position: relative;}.box3 {background-color: #f00;position: absolute;/* left: 100px; */bottom: 0;}.content {height: 3000px;width: 3000px;}.box4 {background-color: #00f;/* 3. 固定定位参考系: 视口该定位方式，当滚动条发生变化时，位置不会变化*/position: fixed;bottom: 64px;right: 64px;}.box5 {background-color: #f0f;/* 4. 粘性定位 */position: sticky;top: 100px;}.content2 {width: 500px;height: 500px;border: 5px solid #000;position: relative;}.box6 {background-color: #0f0;position: absolute;left: 200px;top: 200px;/* z-index: 用于修改定位元素的重叠关系数字越大越叠在上面*/z-index: 999;}.box7 {background-color: #f00;position: absolute;left: 150px;top: 150px;z-index: 0;}</style>
<div class="content"><div class="box box1"></div><div class="box box2"></div><div class="box-container"><div class="box box3"></div></div><div class="box box5"></div><div class="box box4"></div><div class="content2"><!-- 定位元素的层叠关系: 默认情况写在后面的内容会盖住前面的内容 --><div class="box box6"></div><div class="box box7"></div></div></div>

十一、鼠标形状

<style>input[name=name] {/* cursor 鼠标形状鼠标样式来自于系统样式*//* 待选项:default: 系统默认样式move: 移动样式，是一个十字not-allow: 禁止符号pointer: 小手指wait: 等待符号text: 文本编辑光标*/cursor: move;}</style><input name="name" type="text">

十二、浮动

 <style>.box {width: 100px;height: 100px;}.red {background-color: #f00;/* 浮动待选项：left: 浮动到左侧right: 浮动到右侧*/float: right;}.green {background-color: #0f0;float: right;}.blue {background-color: #00f;}
<div class="container"><!-- 流式布局 --><!-- 会自适应窗口大小进行一个有序的排列，一行排满后会自动换行 --><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box red"></div><div class="box green"></div><div class="box blue"></div></div>

十三、清除浮动

  <style>.container {/* 由于container下所有子元素都浮动出去了，所以导致父元素高度坍塌(高度为零) *//* 给高度坍塌的父元素添加 overflow: hidden 可以恢复高度 */overflow: hidden;}.box {width: 100px;height: 100px;}.red {background-color: #f00;float: left;}.green {background-color: #0f0;/* 清除浮动，用于清除浮动元素的父元素对下一个元素的影响 */clear: both;}/* 总结：清除浮动对元素影响的方法：1. 给高度坍塌的父元素添加 overflow: hidden2. 给高度坍塌的父元素的下一个元素添加 clear: both*/</style><div class="container"><div class="box red"></div><div class="box red"></div><div class="box red"></div></div><div class="box green"></div>

十四、flex布局

父元素上的属性

<style>.box {width: 100px;height: 100px;background-color: #f00;color: #fff;font-size: 32px;}.container {width: 500px;height: 400px;border: 5px solid #000;/* 必须在父元素上写display:flex 来开启flex功能 */display: flex;/* 规定主要轴 *//* 默认情况，主要轴就是横轴 *//* 待选项：row: 默认值，规定横向为主轴column: 规定纵向为主轴row-reverse: 规定横向为主轴，同时反向column-reverse: 规定纵向为主轴，同时反向*/flex-direction: row;/* 设置换行方式 *//* 待选项：wrap: 换行nowrap: 不换行wrap-reverse: 换行且反向*/flex-wrap: wrap;/* 这个属性是 flex-direction + flex-wrap *//* flex-flow: nowrap column; *//* 定义元素在主要轴上的排列方式 *//* 待选项：flex-start: 对齐主轴起始点flex-end: 对齐主轴结束点center: 在主轴上居中space-around: 每个子元素两侧的间隔相等space-between: 两端对齐，中间平均分布space-evenly: 平均分布*/justify-content: flex-start;/* 定义元素在交叉轴上的排列方式 *//* 待选项：flex-start: 对齐次要轴起始点flex-end: 对齐次要轴结束点center: 在次要轴上居中居中baseline: 根据子元素中的文本进行文本高度对齐stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器*/align-items: flex-start;/* 使用条件：子元素在主轴上必须换行 *//* 作用：多行子元素在交叉轴上的对齐方式 *//* 待选项和 justify-content 相同 */align-content: center;}</style><div class="container"><div class="box">1</div><div class="box" style="height: auto; line-height: 100px;">2</div><div class="box" style="height: auto;">3</div><div class="box">4</div><div class="box">5</div><div class="box">6</div></div>

子元素上的属性

  <style>/* 参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html */.box {width: 100px;height: 100px;background-color: #f00;color: #fff;font-size: 32px;border: 5px solid #000;box-sizing: border-box;}.container {width: 450px;height: 500px;border: 5px solid #000;/* 必须在父元素上写display:flex 来开启flex功能 */display: flex;justify-content: space-evenly;align-items: center;}.box1 {/* 排序数字越小越靠近主要轴的起始位置*//* order: 3; *//* flex-grow: 1; *//* 设置元素在flex容器中的宽度或高度 *//* 待选项：0: 不设置元素宽或高auto: 元素本身的宽或高其他长度: 设置元素宽或高，优先级高于width或height*//* 在flex当中直接将其作为宽或高使用即可 */flex-basis: 200px;}.box2 {/* order: 1; *//* 当主要轴上没有铺满时 设置flex-grow的元素会填满剩余区域 flex-grow 的值代表撑宽之后的元素 占主要轴大小的比例值，数字越大比例越大*//* flex-grow: 2; *//* 当元素占满整行时才能看出效果 *//* 该属性的效果是当元素沾满整行时压缩元素 *//* 值为0: 不压缩 *//* 大于零的值，元素将被压缩，且值越大压缩得越厉害 */flex-shrink: 2;/* 设置子元素在交叉轴上的排布方式 *//* 其待选项和 align-items 相同 */align-self: flex-end;}.box3 {/* order: 2; *//* flex-grow: 3; *//* flex 复合属性，代表了 flex-grow; flex-shrink; flex-basis *//* 赋值顺序不可调换 *//* 待选项:auto: (1 1 auto)none: (0 0 auto)任意其他值 */flex: 1 0 auto;}</style><div class="container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><!-- <div class="box">4</div><div class="box">5</div><div class="box">6</div> --></div>

十五、grid布局

  <style>/* 知识点https://www.w3schools.com/css/css_grid.asphttps://developer.mozilla.org/zh-CN/docs/Web/CSS/grid基本用法display: gridgrid-template-rowsgrid-template-columns通过网格线设置单元格位置和大小grid-row-startgrid-row-endgrid-rowgrid-column-startgrid-column-endgrid-column通过命名区域的方式进行布局grid-template-areasgrid-area网格间距row-gapcolumn-gapgap*/.grid-container {background-color: blue;height: calc(100vh - 16px);/* 父元素上使用 display: grid 开启网格布局 */display: grid;/* 行高每个参数代表每行的高度参数的个数代表有多少行单位 fr 代表 一行或一列 占总长度的多少份*/grid-template-rows: 1fr 1fr;/* 列宽每个参数代表每列的宽度参数的个数代表有多少列*/grid-template-columns: 1fr 1fr 1fr;/* 网格区域图 . 点运算符代表空单元格*//* grid-template-areas: 'Aa Aa Aa Dd . ''Aa Aa Aa Dd .''Ee Ee .  Dd Cc'; *//* 行间距 */row-gap: 20px;/* 列间距 */column-gap: 40px;/* 行列间距第一个参数是行间距第二个参数是列间距*/gap: 10px 50px;}.grid-item {border: 5px solid #000;background-color: aqua;}.f {/* 网格线的起始行线 */grid-row-start: 2;/* 网格线的结束行线 */grid-row-end: 3;/* 网格线的起始列线 */grid-column-start: 3;/* 网格线的结束列线 */grid-column-end: 4;}.b {/* 同时设置网格线的起始和结束行线 */grid-row: 1/3;/* 同时设置网格线的起始和结束列线 */grid-column: 2/3;}.a {/* 给单元格取名，用于填充 grid-template-areas 中划分的区域 */grid-area: Aa;}.c {grid-area: Cc;}.d {grid-area: Dd;}.e {grid-area: Ee;}</style><div class="grid-container"><!-- <div class="grid-item a">A</div><div class="grid-item b">B</div><div class="grid-item c">C</div><div class="grid-item d">D</div><div class="grid-item e">E</div><div class="grid-item f">F</div> --><div class="grid-item">A</div><div class="grid-item">B</div><div class="grid-item">C</div><div class="grid-item">D</div><div class="grid-item">E</div><div class="grid-item">F</div></div>

华清远见重庆中心-HTML+CSS技术总结（基础部分）相关推荐

华清远见-重庆中心-框架阶段技术总结/知识点梳理
文章目录华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结框架 Java主流框架 Spring 概念组成名词解释 IOC DI Spring控制台应用 1.创建一个普通的Maven项目 ...
华清远见-重庆中心-前端阶段技术总结
华清远见-重庆中心-前端阶段技术总结 HTML Hyper Text Markup Language 超文本标记语言超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等. 标记:也 ...
华清远见-重庆中心-前端阶段技术总结/个人总结
目录认识前端客户端/服务器模式使用方法特点浏览器/服务器模式使用方法特点学习前端的重要性浏览器作用主流/推荐的浏览器前端学习网站推荐编写软件 HTML部分定义标签标 ...
华清远见-重庆中心-框架阶段技术总结
框架一套规范. 实际是他人实现的一系列接口和类的集合.通入导入对应框架的jar文件(maven项目导入对应的依赖),进行适当的配置,就能使用其中的所有内容. 开发者可以省去很多模板代码,如dao中的 ...
华清远见重庆中心—JS阶段技术总结/个人总结
目录简单的案例 1.制作简易的课程表 2.制作一个几乎包揽html全部所学知识的简易网页 3.简易的登录界面 Js企业面试题 1.javascript基本数据类型? 2.浅谈javascript中变 ...
华清远见-重庆中心-JavaWeb阶段技术总结/知识点梳理/个人总结
文章目录 JavaWeb B/S与C/S模式网站网页网络服务器 Tomcat 下载目录结构 Maven 使用IDEA创建基于Maven的Web项目 1.新建webapp模板 2.设置项目名称和 ...
华清远见-重庆中心-数据库阶段技术总结
JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模式用户只需要一个浏览器即可访问服务器 C/S:Cl ...
华清远见-重庆中心-数据库阶段技术总结/知识点梳理/个人总结/面试题解析
目录 Java Web阶段核心内容 (一)初识Web 1.JavaWeb定义 2.B/S与C/S模式 3.网站与网页 4.Tomcat服务器 5.Maven 6.常见的Http状态码 7.Servle ...
华清远见-重庆中心-JavaWeb阶段技术总结和知识点梳理
JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模式用户只需要一个浏览器即可访问服务器 C/S:Cl ...

华清远见重庆中心-HTML+CSS技术总结（基础部分）