HTML5+CSS3基础
前端
- 基础知识
-
- HTML5首先知道
-
- 1.标签成对
- 2.必有代码
关于HTML5的知识
* 1.标题部分
* 2.水平线部分
* 3.按钮设置
* 4.输入框设计
* 5.图片标记配置
* 6.音频元素的添加
* 7.超链接设置
* 8.特殊字符支持
* 9.内联结构实现
* 10.表格框架构建
* 11.表格属性配置
* 12.单元格合并操作
* 13.列表项的添加
* 14.表单组件开发
* 15.labeled标签应用
* 16.select元素配置（下拉表单）
* 17.文本域设置（输入区域）
关于CSS3的知识，
* 第1部分是关于.css格式的说明：
* 第2点涉及css的选择机制。
- 最常用的类选择器。
- 唯一性的id类型选件。
- 应用于页面所有类型的通配符选件。
- 后代选件的概念介绍。
- 子选件的应用场景说明。
- 综合选件的作用原理阐述。
- 第三方字体
- 文本内容
- Emmet语法（便捷指令）
- 格式化文件
- CSS前缀选择器（施加独特样式效果）
- focus CSS前缀选择器
- 显式显示状态设置
-
一. 块级元素（包括：h1, p, div, ul, ol, li等）
-
二. 行内元素（包括：a, strong, b, em, i, del, s, ins, u, span等）
-
三. 行内块元素（如img, input, td等实例展示）
-
四. 显式显示状态转换设置
* 10.背景属性 * 11.cursor（设置光标形状） * 12.取消列表前面的点 * 13.CSS三个特性
- 盒状结构
- 深入了解框相关技术内容
- 网页布局的核心概念
- 盒模型组成部分
- 边界距离
- 内边界间距
- 外边界间距
- 系统默认补充内边界间距与外边界间距
- 盒状元素水平居中处理方式
- 布局理论基础
- 圆角边框应用方法
- 盒子阴影效果设置
- 文本阴影效果实现方法
- 结构式伪类选择器应用方法
- 通用伪元素选择器设置规范
- 网页布局的核心概念
- 深入了解框相关技术内容
十二.布局的三大方式：第一部分为标准流程；第二部分主要涉及float属性的应用；第三部分则以position属性为核心展开讨论。在此基础上依次展开相关操作：首先需清除flow属性；其次需明确元素间的叠放顺序；再次需掌握absolutely positioned下的居中策略；最后还需特别注意位置设置的具体细节；此外还需学习如何创建带圆角的长方形框以及如何生成圆形标记；最后还需掌握显示或隐藏元素的基本方法
- 未解决的事情
基础知识
HTML5首先知道
1.标签成对
<head>
<title> </title>
<body></body>
</head>2.必有代码
<!DOCTYPE html>申明类型标签
<html lang="en"> 语言为英语
<html lang="zh-CN"> 语言为中文
<html lang="fr"> 语言为法语
<meta charset="UTF-8">保存文字类型（简、繁体）
<!-- 关键字 -->
<meta name="keywords" content="关键字">
<!--3秒之后刷新页面-->
<meta http-equiv="refresh" content="3;http://www.baidu.com" />
<!-- 页面描述 -->
<meta name="description" content="详情页" />
<!-- Link标签引入外部资源 -->
<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" type="image/x-icon" />HTML5知识
1.标题
<!--标题独占一行-->
<h1></h1> ~ <h6></h6>2.水平线
<hr>
# 修改水平线颜色
<style>
border: none; //去掉边框遮掩
height: 1px; //一定要设置水平线的大小
background-color: #ccc; //再设置颜色
</style>3.设置按钮
<button>搜索</button>4.输入框
<input type="text" value="请输入..." class="...">5.图像标签
<img src="(指定图像的路径与文件名,必须与网页文件夹放在一起)"
alt="(当src无效时，显示alt)"
title="(鼠标放在图像上时，提示的文字)"
width="500" height="500"
width 与 height任意选择一个设置，则保持比例缩放，都更改容易改变比例
/>① 相对路径
相对于网页文件夹，图片与网页同文件夹：
<img src="img.jpg"/>相对于网页文件夹，图片在下级文件夹：
<img src="...（图像文件夹名）/img.jpg"/>相对于网页文件夹，图片在上级文件夹：
<img src="../img.jpg"/>② 绝对路径
<img src="D:\...\..."/>（不同电脑路径不同，跨电脑一般不建议使用）6.插入音频
<!--
标签默认不允许用户控制，加入 controls 后用户就可以自主控制了
加入 autoplay 后，自动播放（但是大部分浏览器不支持自动播放）
加入 muted 后，默认静音播放（配合 autoplay 后就可以自动静音播放了）
加 loop 后，设置为循环播放-->
<audio controls,autoplay,muted,loop>
无法播放：
浏览器检测到<audio>标签，则播放，如果检测不到，则浮现这里的文字
<source src="xxx.mp3">
</audio>
<!--
视频标签中 controls autoplay loop 同上
不同的是，视频建议自动播放的同时，默认带上 静音播放：muted
-->
<div class="video">
<video src="picture/WLOP/WLOP.mp4"
style="width:100%;height:100%;object-fit:fill"
controls
autoplay
muted
loop></video>
</div>视频通常会预设宽度和高度的比例；如需调整，则可在video标签中添加style="width:100%;height:100%;object-fit:fill"
否则默认加上width:100%自适应即可
7.超链接
<a href="跳转目标" target="目标弹出方式">
超链接对象
</a>① 这里的 href 链接的
- 当使用网页时，则采用与图片相同的连接方式进行操作（即类似图片的方式），具体操作路径为: 选择对应的资源并拖拽至目标位置或直接拖拽到编辑区域打开资源。
- 在HTML中使用#标签将不会生成任何内容。
- 在在线编辑器中输入文字时, 如果遇到需要插入图片的情况, 可以直接将图片拖拽至编辑区域即可实现插入功能。
②
target="_self" 当前页面打开（默认）
"_blank" 开新页③ 锚点链接（定位至页面中的某位置）
<!--需要该定位一个id名字，才可被定位-->
<h3 id="this"> 标题 </h3>
<a href="# this"> 文本 </a>④ 想要更改超链接的样式，直接在 a 标签上面更改，父盒子更改容易无效
⑤ 去除超链接下面的下划线：
a {
text-decoration: none;
}8.特殊字符
① 空隙 和  
② 小于号 <
大于号
>
③ 与运算符&
④ 日元货币符号 ¥¥
⑤ 注册商标符号 ©©
商标 ®
⑥ 注册 ®
商标 ®
⑦ 摄氏度单位符号 °
度数 °
⑧ 正负号 ±
正负 ±
⑨ 乘法运算符 ×
乘法 ×
⑩ 除法运算符 ÷
除法 ÷
² 平方数上标数字 2
³ 立方数上标数字 3
9.内联框架
<iframe src="网址" width="500" height="500" frameborder="边框粗细">10.表格框架
<table>
<tr>每一行，有几个<tr>标签对就有几行
<th>表头单元格</th>
<td>
行中的每一格，有几个<th>标签对，就有几格
中间插入图片与链接，正常嵌入即可
</td>
</tr>
</table>11.表格属性
<!--居中-->
<table align="center">
<!--边框-->
<table border="1" 有
border="0" 无>
<!--文本与框的距离-->
<table cellpadding="2">
<!--单元格之间-->
<table cellspacing="2">
<!--高度、宽度-->
<table width="600" height="400">属性一般用CSS设置
可以使用 CSS 函数来设置，如：
设置表格边框
展开折叠设置
调整间距参数
调整整体尺寸
设置内边距值
实现文本对齐
确保垂直排列
添加悬停效果（悬停效果）
指定单元格背景色
定义空单元格显示
/* 1、添加边框 */
table, th, td {
border: 1px black solid;
}
/* 2、折叠边框 */
table {
border-collapse: collapse;
}
/* 3、调整边框间距 */
table {
border-spacing: 10px(左右) 10px(上下);
}
/* 4、调整表格的宽度和高度 */
table {
width: 100%;
}
th {
height: 30px;
}
/* 5、表格内边距 */
th, td {
padding: 10px;
}
/* 6、水平对齐文本 */
th {
text-align: left;
}
td {
text-align: center;
}
/* 7、垂直对齐文本 */
td {
height: 40px;
vertical-align: bottom;
/*vertical-align 属性用于指定 <th> 或 <td> 标记中内容的垂直对齐方式。
默认情况下，属性的值设置为middle，这意味着内容垂直对齐到单元格的中间。*/
}
/* 8、添加鼠标悬停（悬停）功能 */
tr:hover {
background-color: lightgray;
}
/* 9、定义单元格颜色 */
th {
background-color: gray;
color: white;
}
/* 10、定义空单元格的显示方式 */
table {
empty-cells: hide;（hide：隐藏背景颜色和边框。show：显示背景颜色和边框。）
border-collapse: separate;（外边框折叠）
}
/* 11、水平边框（边框只出现在单元格底部） */
th, td {
border-bottom: 1px solid black;
}
/* 12、灰白条纹斑马表格 */
tr:nth-child(even) {
background-color: lightgray;
}12.合并单元格
① 跨列 . colspan (左右)
eg.首行2,3列合并，则在第2个<th>上改成
<td clospan="2"> </td>然后删除第三个<td>即可
② 跨列 . rowspan (上下)
eg.某列的第2,3行合并，则在第2个<td>上改成
<td rowspan="2"> </td>然后删除第三个<td>即可
③ 跨列＋跨列 (上下左右合并)
eg. 2*2 单元格合并，则在最左上角的<td>上改成
<td rowspan="2" clospan="2"> </td>然后删除对应被合并的<td>即可
13.列表标签
各种列表之间可以互相嵌套
① 无序列表
<ul>
<li>任意</li>
<li>任意</li>
</ul>② 有序列表
<ol>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ol>③ 自定义列表
<dl>
<dt>首行</dt>
<dd>下拉选项</dd>
<dd>下拉选项</dd>
</dl>列表前面的点可以在样式表中加上list-style: none;
14.表单
收集信息：表单域、表单控件和提示信息组成
① 表单域（保存数据）
<form action="url地址" method="提交方式" name="名称">
各控件
</form>② 表单控件（元素）
xxx<input type="属性值">
name：名字 value：默认值
1.<!--文本输入框-->
<input type="text" maxlength="最长输入x字符" placeholder="表单默认内容，但并不记录">
2.<!--密码框-->
<input type="password" maxlength="最长输入x字符">
3.<!--单选框（圆框）-->
xxx<input type="radio" name="名字要相同，才变成单选" value="返送值，该选项代表的值">
4.<!--复选框（方形框）-->
xxx<input type="checkbox" value="返送值，该选项代表的值">
<!--3单选框与4复选框加 checked="checked" 默认打开网页则选中带checked属性的选项-->
5.<!--提交-->
<input type="submit" value="无值默认显示提交">
6.<!--重置-->
<input type="reset" value="无值默认显示重置">
7.<!--按钮-->
<input type="button" value="无值默认不显示">
8.<!--上传文件-->
<input type="file" value=无值默认显示“选择文件”>
9.<!--隐藏输入字段-->
hidden
10.<!--图像形式提交按钮-->
image15.label标签
用于把其他区域与选项关联起来
<label for="名字">...</label>
<input type="属性" id="名字">
<input type="radio" name="sex" id="nan">
<label for="nan">
<img src=光莲.jpg width="20">男</label>16.select下拉表单元素
<select>
<option selected="selected"加上后默认选择>...</option>
<option>...</option>
</select>17.文本域
<textarea cols="每行中字符数" rows="显示行数">
......
</textarea>CSS3知识
1.css格式：
四种引用 css 样式方式：
在局部或特定情况下进行调整，则可直接进行元素的调整作为基本的修改手段
<h1 style="color: maroon; margin-left: 40px">内联式</h1>2、内嵌式：（写在页面头部中）
<!--基本格式-->
<head>
...
<style>
（区域名）{规则1；规则2；......}
</style>
</head>3、外部引用式：（使用 link 标签引用外部 css 文件）
<link rel="stylesheet" href="index.css">4、总分式外部引用： （首先导入总体的 style.css 文件，并随后通过@import引入外部 style.css 文件中的具体 CSS 文件）
<link rel="stylesheet" href="style.css">style.css ：
@import "1.css";
@import "2.css";
@import "3.css";
@import "4.css";2、css选择器：
① 类选择器（最常用）
1、请避免使用特定标签来命名
2、建议采用英文命名法
3、请在多个选择器之间以空格分隔
.name1{...}
.name2{...} <div class="name1">...</div>
<div class="name1 name2">...</div>② id选择器（只能被调用一次）
#name1{...} <div id="name1">...</div>③ 通配符选择器（应用于页面内的所有标签）
*{...}④ 后代选择器
一、空格隔开
二、可以多级定位，从大到小排列
eg.ol>li，ul>li，ul>li三组并存，找到最后一个 ul>li 设置。
<style>
.nav li a{...}
</style>
<ol> <li> ...</li> </ol>
<ul><li><a> ...</a></li></ul>
<ul class="nav">
<li><a> ... </a></li>
<ul>⑤ 子选择器
一、就近原则
二、只选择最近的一个选择器
三、必须用“>”隔开
<div class="nav">
<a href="#" class="nav2">测试文字1（影响了这一行）</a>
<p>
<a href="#">测试文字2</a>
</p>
</div> .nav > a{
text-decoration: none;
}
⑥ 并集选择器
可以不同标签同时改
div,p,pig li{ ...} <div> 被影响 </div>
<p> 被影响 </p>
<ul class="pig">
<li> 被影响 </li>
<ul>3.字体
.name{
字体样式 font-family:"微软雅黑";
字体大小 font-size:12px;
字体粗细 font-weight:normal; 正常
bold; 粗体
bolder; 特粗
lighter; 细体
800; 数字自定义大小
行高 line-height:24px; 带单位的是高度
1.5; 不带单位的是倍速
斜体 font-style:italic;
综合复写顺序：斜体 粗体 字体大小写/行高 [字体样式（务必要有）]
eg.font: italic 700 16px/20px "微软雅黑";
}4.文本
.name{
颜色 color:red;/#FF0000;/rgh(200,0,0);
水平对齐 text-align:center; 居中
left; 靠左
right; 靠右
垂直居中：使文字行高等于盒子高度
若行高<盒子高度 = 文字偏上
若行高>盒子高度 = 文字偏下
line-height:12px;
height:12px;
文本装饰 text-decoration:underline; 下划线
overline; 上划线
line-through; 删除线
none; 取消装饰
文本缩进 text-indent:20px 20像素
2em 2文字（常用）
行间距 line-height:20px;
}如果仅进行基本的文本样式调整，则不会对其他文本设定产生影响也不会造成全局性的影响。
可以直接通过标记语言实现这些效果而无需额外应用CSS样式。
这种方式不仅能够提高页面加载效率还能简化开发流程。例如加粗可采用或标签。
斜体可使用或标签。删除线可选择
或标签。下划线则需要配合< ins >与< u >组合使用以达到预期效果。
在文本中出现一种情形：中文能够自行完成段落分隔；然而对于英文来说则会超出指定边界范围。
具体原因在于由于英文的分隔方式不同；过长的英文会被系统误认为是一个单一字符实体而无法实现段落分隔。
解决方案如下：
将输入文本分割成多个短语块以避免长字符串被当作单一字符实体处理；
通过这种处理方式应能有效防止过长英文被视为单一字符实体从而影响段落分隔功能。
div {
1、word-break: break-all （截断单词换行）
2、word-break:break-word （保留最后的长单词整体移到下一行）
}5.Emmet语句（便捷语句）
① 多标签
xxx*2 => <xxx> ... </xxx>
<xxx> ... </xxx>② 多包含
ul>li => <ul>
<li></li>
</ul>③ 并列
div+p => <div></div>
<p></p>④ 带类名
.deme => <div class="deme"></div>
#nav => <div id="nav"></div>带约束
p.one => <p class="one"></div>
ul>li#two => <ul>
<li id="two"> </li>
</ul>⑤ 带顺序的类名
.demo$*2 => <div class="demo1">
<div class="demo2">⑥ 生成标签里面直接带有文字
div{ ... } => <div> ... </div>⑦ 简写形式+tab 就是Emmet语法：w200,lh26
w200 => width:200px;
lh26 => line-height:26px;6.格式化文档
-
文件路径中的首选项设置
-
通过搜索关键词"emmat.include"进行定位
-
配置文件位于settings.json中
-
在配置文件中添加以下参数：
① "editor.format OnType" 设置为true；
② "editor.format OnSave" 设置为true。 -
保存即可
7.伪类选择器（添加特殊效果）
不同于上一种选择器的是这一种多选式行为按钮选择器它支持为单个或多个元素配置特殊效果其中
name:hover{ ... }
.父盒子:hover .子盒子{ ... }第④步：当鼠标保持按下状态时，默认应用name:active{ ... }样式。
请注意，在网页开发过程中，请确保将链接按照以下顺序设置样式：link、visited、hover和active；建议每个链接都独立配置好以上四种状态的样式
a{ ... }
a:link{ ... }8.focus 伪类选择器
用于选取获得焦点，光标在哪，该位置改变样式（表单）
input:focus{ ... }9.元素显示模式
一、块元素（常见：h1、p、div、ul、ol、li等）
特点：
① 独立占用单行
② 其宽度、高度及内外边距均可自由设置（即使非常宽也不会影响排版）
注意：
① 在文本内容区域不可嵌入块级元素（如 <p><h1>）
二、行内元素（常见：a、strong、b、em、i、del、s、ins、u、span等）
特点：① 在同一行呈现多个对象
② 宽度和高度无法预先指定；图像大小由内容决定
③ 内容仅限于文本或其他行内元素
注意：<a>里面可以有块元素，但需要给<a>转换块级模式最安全
三、行内块元素（例img、input、td）
特点：① 一行可以有多个，中间有空隙
② 默认宽高随内容
可另外设置宽高
四、元素显示模式转换
该模式中的元素必须具备另一种模式的特性（例如<a>链接从行内元素获取块元素的特征以扩大触发范围）
<style>
a{ ...
display:block; 行内元素 -> 块元素
:inline; 块元素 -> 行内元素
:inline-block;} ->转行内块元素
</style>
......
<a href="#"> ... </a>10.背景属性
① 背景默认：
background-color:transparent(透明)② 背景图片：
backborad-image:url(引入方式同图像插入);③ 背景平铺：
background-repeat:repeat;平铺默认
no-repeat;不平铺
repeat-x;横平铺
repeat-y;纵平铺④ 背景图片位置：
background-postion:x y;（精准定位位置,第四象限xy轴分布）
top; 顶
center; 中
botton; 底
left; 左
right; 右
top left; 左上（可以混合使用）⑤ 背景图片固定（不随鼠标滚动）
background-attachment:scroll（默认滚动）
fixed（固定）⑥ 通常设定排列规则（复合属性）
background - 颜色值与链接路径；图片放置位置；平面布局；动态更新状态；布局位置
⑦ 景观透光度较高的效果
background:rgba( 0, 0, 0, 0.3 )
红，绿，蓝，透明度（0~1）⑧ 背景图缩放
background-size:contain（把图片放大到某一边触碰盒子边缘，可能会留白）
cover（把图片放大到完全覆盖盒子，会导致图片部分看不见）
background-size: 90%（百分比缩放）
500px（缩放到数字大小）11.cursor（设置光标形状）
设置定义鼠标放在范围内所显示的光标形状
cursor: auto; //默认样式
pointer; //出现一只手
url("xxx.jpg"); //自定义光标形状
（# 需要在末端始终定义一种普通的光标，以防没有url定义的可用光标）
default; //默认光标（箭头）
crosshair; //呈现为十字线
move; //此光标指示某对象可被移动12.取消列表前面的点
list-style:none;13.CSS三个特性
一、层叠性
如有样式冲突、遵循就近原则（后来居上，覆盖）
二、继承性（简化复杂性）
子标签会继承父标签的某些样式（文字相关：text-，font-，line开头）
三、优先级
① 选择器相同，考虑层叠性
② 选择器不同，考虑选择器权重
③ 继承时如果没有指明，则始终为权重0（包括 !important）
④ <a>链接特殊：浏览器自带指定，权重值大于继承的权重
⑤ 权重可以叠加
复合选择器 ul li { ... }
0001（ul）+0001（li）=0002 > 普通选择器
⑥ 权重有0 0 0 10（叠加不会进位）
⑦ 直观(0,0,0,1)分别代表：
（行内样式，id，类 / 伪类，标签） / （style=“” , #id , .class / a: , h1）
| 选择器 | 权重 |
|---|---|
| 继承 或 * | 0 0 0 0 |
| 元素选择器 | 0 0 0 1 |
| 类选择器、伪类选择器 | 0 0 1 0 |
| ID选择器 | 0 1 0 0 |
| 行内样式 或 style=“…” | 1 0 0 0 |
| ! important （加在任何选择器的最后，视最优先级 ） | ∞ 无穷大 |
盒子框架
关于框架的相关知识
1.网页布局的本质
① 网页元素主要以盒模型为基础设计。
② 为各个元素设定样式规范后，并按需求安排布局结构。
③ 为内容提供明确的显示区域。
④ 通过结合CSS与盒模型技术构建网页布局方案。
2.盒子模型组成(Box Model)
边框，内容，内边距，外边距
3.边距(border)
① 粗细
border-width:2px;② 样式（不写就可能没有实际边框）
border-style:solid;（实线）
dashed（虚线）
dotted（点线）③ 颜色
border-color:red;④ 复合型简写
border:1px solid red;（无顺序）
border-top:1px;
border-botton:1px;表格中的细线条边框在两单元格连接时会显示为双层加粗中线与细线条边框紧密合并
border-collapse:collapse;（相邻边框会合并）⑥ 边框 会影响盒子实际大小
4.内边距(padding)
① 基础写法：
padding-left:20px;（左边距）② 简写法：
padding:5px;
上下左右都5px
padding:5px 10px;
上下5，左右10
padding:5px 10px 20px;
上5，左右10，下20
padding:5px 10px 20px 30px;
上5，右10，下20，左30（顺时针）③ 内边距也会影响盒子大小（扩增）
计算宽度需要考虑边框！
eg.标题栏不同模板不同字数布局方法
使用padding内边距设定，不设定每一个盒子的宽度，文字自动识别撑开模板即可。
如果盒子本身没有指定宽度，则不会撑开盒子。
☆ 自动计算内边距方法（内减方式）：
box-sizing: border-box;5.外边距（margin）
盒间间距设置如下：
① margin-left:20px;指定左侧外边距为20像素
② 在网页布局中，默认情况下实现块级元素的水平居中显示
1）宽度设定时左右两边均设置了auto值（上下端点是否设置不影响当前效果）
行内元素及紧随其后的行内块元素采用中心对齐方式显示（text-align属性设置为此效果）
③ 相邻盒子间外边距合并时会自动融合在一起
解决方法：只需在单个盒子里指定外边距参数即可实现整体效果的统一管理（无需在每个盒子里单独配置）
④ 子盒子与父盒子的上边距容易发生合并导致塌陷现象
即子盒子有上部边缘的同时父盒子也会在其上方预留相应空间以避免两者重叠的情况
子父层叠结构下这种塌陷现象较为常见且难以察觉
解决方法 ：1）给父元素增加边距；
2）设置父元素内边距；
3）设置父元素overflow属性为hidden
PS：当进行定位操作后，则不会出现塌缩现象
6.清除内外边距（网页会默认添加内外边距）
（全页面清除）CSS第一行代码
*{
padding:0;
margin:0;
}行内元素具备兼容性，在设计边距时一般只设定左右内外四周边距而避免设定上下两个方向的间距
7.盒子水平居中
margin；0px auto;(第一个参数是垂直高度)8.布局思想
将整个页面想象为一个专门的收纳空间。
采用分栏排版方式, 首先按照n行进行布局规划, 然后每一行都划分成若干个独立的小格子。
使用HTML构建清晰的框架结构, 并添加必要的元素完成界面设计。
在编写CSS代码时, 尽量保持代码整洁有序, 同类功能符号应集中在一起, 不同类型的元素则按层次分布。
对于同一类功能使用相同的标签名称以提高代码可读性。
在不影响整体美观的前提下, 可以适当增加宽度而不引起视觉上的注意。
9.圆角边框
border-radius:10px;
border-radius:10px/5px;（水平半径，垂直半径）（这里数值的大小越大, 圆角弧度也会随之增大, 但必须确保其值不会超过矩形较短一边的一半长度；如果恰好达到了这个极限值, 则两边实际上形成了一个圆形）
border-radius:（顺时针顺序：左上，右上，右下，左下）
（某一个角没有数值则默认对角数值）
单独设置一个角：（先上下 后左右）
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;圆角计算方式示意图：border-radius:200px/100px
百分比的计算方法： （水平 / 垂直）
一般不超过50%
border-radius: 30%
border-radius: 20%/30%（长边为a，短边为b）
水平百分比为：0.5b / a _100%
垂直百分比为：0.5b / b_100%
CSS支持使用border-radius关键字来指定边角的半径值，默认情况下会基于计算盒子模型（CBM）进行处理。具体而言，在某些情况下可能会先执行一个整数化步骤（integerization），以确保结果符合预期的数值范围要求。随后会对结果进行渐近展开（asymptotic expansion），这一过程能够有效地将复杂的几何运算转化为简单的算术操作从而提高性能表现并保证几何精度。通过这种方式border-radius属性能够高效地渲染出高质量的矩形形状其优化后的实现方案不仅降低了空间复杂度还显著提升了运行效率
10.盒子阴影
先横后竖，右上为正，距离大小颜色内外 看需求。
box-shadow:h-shadow v-shadow blur spread color (inset)；
h-shadow：水平阴影位置，正值往右，负值往左（必需）
v-shadow：垂直阴影位置，正值往下，负值往上（必需）
blur：阴影模糊的距离
spread：阴影的尺寸大小
color：阴影的颜色
inset：写上了就改成内部阴影，一半不写默认外阴（outset）
如果outset写上，则会导致阴影失效
eg.
box-shadow:10px 10px 10px 10px black (inset)11.文字阴影
先横后竖，右上为正，距离颜色 看需求。
text-shadow:h-shadow v-shadow blur color;
h-shadow：水平阴影位置，正值往右，负值往左（必需）
v-shadow：垂直阴影位置，正值往下，负值往上（必需）
blur：阴影模糊的距离
color：阴影的颜色
eg.
text-shadow: 10px 10px 20px gray;12.结构伪类选择器
比如，在页面布局中存在四个小li元素时 ，我们可以利用结构选择器快速定位到目标元素 ，无需手动设置class或id属性。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>分别有
/*找到第一个li*/
li:first-child {
background-color: red;
}
/*找到最后一个li*/
li:last-child {
background-color: blue;
}
/*找到第2个li*/
li:nth-child(2) {
background-color: green;
}
/*公式找一定规律的li*/
（偶数/ 奇数 / 5的倍速 / 5之后的数 / 5之前的数）
li:nth-child(2n / 2n+1;2n-1 / 5n / n+5 / 5-n){
background-color:yellow;
}这里的 li 可以替换为其他元素标签
13.伪元素选择器
创建虚拟元素（无法设置实际标签），用来摆放装饰性的内容
E::before（在E元素 里面 的 最前面 添加一个伪元素）{
content: "xxx";
}
E::after（在E元素 里面 的 最后面 添加一个伪元素）{
content: "xxx";
}attr() 属性
（可以调用 E元素本身带有的属性，例如 a标签的链接地址）
/* a href="https://www.baidu.com/">百度地址</a> */
E::after {
content: ' → ' attr(href); /* 在 href 前显示一个箭头 */
content: "【" attr(href) "】";
}url() 属性
（引用图片装饰）
/* <a href="https://www.baidu.com/">百度地址</a> */
a::before{
content: url("img/baidu_jgylogo3.gif");
}注意
1）URL不应被置于引号内。如果将URL用引号括起来，则会导致它被当作字符串插入文本“url(image.jpg)”，而不是实际的图像链接。
2）当直接在content属性中插入图片时，默认无法调整其尺寸；
3）可以这么解决：
解决方案如下：
建议采用外部标记语言（如HTML中的<img>标签）来控制图片的尺寸。
/*伪元素添加图片：*/
.wrap:after{
/*内容置为空*/
content:"";
/*设置背景图，并拉伸*/
background:url("img/06.png") no-repeat center;
/*必须设置此伪元素display*/
display:inline-block;
/*必须设置此伪元素大小（不会被图片撑开）*/
background-size:100%;
width:100px;
height:100px;
}必须指定```content:" """ 属性以定义伪元素的内容，默认情况下若未提供该属性则双引号可被忽略
十二.布局的三大方式：
1.标准流
就是普通标签的默认排序
2.浮动
设置一个滑动框，并将其移动到左侧边缘或右侧边缘的位置；当遇到窗口边缘或相邻的滑动框时停止。
设置一个滑动框，并将其移动到左侧边缘或右侧边缘的位置；当遇到窗口边界或相邻的滑动框时停止。
float:left / right;① 当使用浮块时，在原始位置上方会产生一个标准流顶部占位符；
② 浮动元素会自动将自身顶端与前一个元素的底部对齐；
③ 在加入浮块后，则无需额外设置内部转换层即可直接指定其高度与宽度；
④ 浮动元素仅会影响后续的标准流内容，并不会干扰到先前的内容。
3.定位（position）
① 相对定位：相对该盒子原来的位置进行挪动定位
position: relative;
top: 120px;
顶部下移120px特点：1、相对于原来的位置移动
2、移动后原来的空缺继续保留
② 绝对定位：相对某父级定位或者是浏览器窗口进行挪动定位
position: absolute;
top: 120px;
顶部下移120px特点：
1、无父元素或无定位时，默认基于浏览器窗口定位。
2、若父元素具有定位，则子元素将基于最近的具有定位的一级父元素进行定位（通常为子节点直接对应的父节点）。（其中"父相"的原因通常是：为了占用空间）
3、当使用绝对定位并脱离后，默认不再占用原位置。
固定定位技术：基于指定位置实现的定位方式，并不受滚动条移动的影响
position: fixed;
top: 120px; left:120px;
顶部下移120px，左边偏移120px请说明如何实现版心右侧的小盒子固定。答：请详细说明以下步骤以达成目标布局：首先将小盒子设置为left:50%，使其居中；然后反向添加margin-left等于其宽度一半的距离即可到达版心右侧。（类似的方法可推导出其他组合布局的效果）
④ 粘性定位：以可视窗口为基准，四个方向至少加一个才有效。
position:sticky;
top:10px;（当上边缘为10px时，固定住不动）13.清除浮动
当子盒子全部实现浮动状态时，在父盒子的高度难以确定的情况下，则需要取消浮动状态，并使父盒子能够适应相应的高度
选择器{clear:left;清除左侧浮动块
right;清除右侧浮动块
both;清除两边浮动块（比较常用）
}清除浮动方法：
- 外标签法（隔离墙技术）
- 在父级设置overflow属性
- 在父级添加after伪元素
- 在父级附加双层伪元素
1、额外标签法
.clear{ clear:both; } <div class="clear"></div>
（放在最后一个浮动块的后面）2、父级添加 overflow
在父级元素的样式里面添加
overflow:hidden / auto / scroll;
（但是溢出的部分会被隐藏）3、父级添加 after 伪元素
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
/*IE6、7专有*/
*zoom:1;
} <div class="xx clearfix"></div>4、父级添加双伪元素
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clear:after{
clear:both;
}
.clearfix{
*zoom:1;
} <div class="xx clearfix"></div>14.定位叠放次序
{z-index:xx 数值越大，盒子越高 }15.绝对定位居中算法
left:50%
margin-left: -xxpx; --> xx为小盒子的一半宽
top:50%
margin-top: -xxpx; --> xx为小盒子的一半高16.定位注意
行内元素通过显式指定height和width即可实现absolute或fixed定位效果。
块状元素采用上述两种布局方式时，默认行为是取其内容区域的尺寸。
外边距不会发生塌陷现象。
使用flexbox布局时会影响盒子及其内部文本的位置分布，
而使用absolute定位将直接遮蔽文本内容。
17.圆边长条框 / 圆点制作
圆边长条框
border-radius:50%;
圆点：
高宽一致
border-radius:50%18.元素显示隐藏
①
display:block;转成块元素，显示元素
inline;转成行内元素
none;隐藏对象，隐藏后不再占用位置②
visibility:visible;元素显示
hidden;隐藏对象，隐藏后仍然占用位置 overflow:visible;默认显示，直接把字显示出来
hidden;溢出的部分隐藏（也会把定位部分隐藏）
scroll;溢出部分显示滚动条（就算不超出也有）
auto;自动识别，超过就显示滚动条，没有超过就不显示未解决的事情
一、多个盒子具有一致的样式设计，则如何在同一行内编写多个盒子的名称以避免编写重复的代码块？解决方案：编写一个通用的标签名称，则后续的所有盒子都可以使用这个统一的标签名称。
二、为什么有时候盒子里面有一个凭空的空位阻挡？
三、