1、在CSS中，包含块是指用来计算元素定位的参照物，元素的定位属性通常是相对于其包含块来确定的。
2、锚点：当前页面中的不同位置进行跳转。语法：超链接
<a href="#div4">跳转到下面div区域区域</a>
<div class="box1" id="div4"></div>
跳转到别的页面的目标处
<a href="./01.html#last">跳转到另一个页面的目标处</a>
<!-- 取一个id名称 -->
<div id="last"></div>
3、BFC（块级格式化上下文），他是一个独立的渲染区域。只有Block-level box（块）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
4、BFC的布局规则：I、内部的Box会在垂直方向，一个接一个地放置。II、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）。III、每个元素的margin box的左边，与包含块border box的左边相接触。IV、BFC的区域不会与float box重叠。V、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。VI、计算BFC的高度时，浮动元素也参与计算。
5、哪些元素或者属性能触发BFC：I、根元素（html）。II、float属性不为none。III、position为avsolute或者是fixed。IV、display为inline-block、table-cell、table-caption、flex、inline-flex。V、overflow不为visible。
6、表格：标签属性
<!-- 表格 table标签 tr代表行，td代表单元格（列） -->
<!-- 给表格添加边框 table后面添加border属性，边框宽度为1 -->
<!-- 单元格与单元格之间有间距，取消间距 cellspacing cellpadding -->
<!-- table（表格声明），写在table标签上面的属性 -->
<!-- border 边框宽度 数值，没有单位 -->
<!-- cellspacing 单元格与单元格之间的距离，数值，没有单位 -->
<!-- cellpadding 单元格内边距，数值，没有单位 -->
<!-- width 宽度 -->
<!-- height 高度 -->
<!-- bordercolor 表格边框颜色 -->
<!-- bgcolor 表格背景颜色 -->
<!-- align 水平对齐方式 left/center/right -->
<!-- valign 垂直对齐方式 -->
<table border="1" cellspacing="0" cellpadding="0" width="300px" height="100px" align="center" bordercolor="red" bgcolor="pink">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>2</td>
<td>sky</td>
<td>18</td>
</tr>
</table>
7、rowspan：跨行合并 属性值取决于一共要合并多少个，删除的是下一行中对应的单元格。
colspan:跨列合并
8、
/* table */
display: table;
/* tr */
display: table-row;
/* td */
display: table-cell;
9、
table{
/* border-spacing 单元格间距 */
/* border-collapse 合并单元格边框 collapse/ separate */
/* empty-cells 空单元格是否显示 hide/show */
/* table-layout: 表格布局 */
}
10、表单
<!-- 表单：收集用户信息 -->
<!-- get: 地址栏中显示数据，只是用来获取信息用get请求，安全系数低，携带的信息量小-->
<!-- post：在请求体中（控制台->network）;提交存储信息的时候；安全系数高一点；携带的信息量可以很多。 -->
<form action="后台的地址" method="get/post">
<input type="text">
<input type="password">
<input type="submit">
<input type="reset">
<!-- 单选框 radio，name值得相同才能出现互斥。checked：默认选中。enabled：是否可用 -->
<input type="radio" name="sex" checked="checked" enabled="enabled">男
<input type="radio" name="sex" disabled="disabled">女
<!-- 复选框 checkbox-->
<input type="checkbox">
<!-- 上传文件 file 只能上传一个-->
<input type="file">
删除内容 <input type="search">
<input type="number" step="" max="" min="">
<input type="color">
<!-- date 日期 -->
<input type="date">
<!-- time 时间 -->
<input type="time">
<!-- 日期加时间 -->
<input type="datetime-local">
<input type="week">
<input type="month">
<!-- email 不写不报错，格式填写错误报错 -->
<input type="email">
<!-- url网址 不写不报错，填写错误报错 -->
<input type="url">
<!-- range 滑动条，默认值是中间值，一般是0-100 step:步长 -->
<input type="range" min="-100" max="200" value="50" step="10">
<!-- tel 唤起拨号盘 手机端生效 调取键盘的数字键 -->
<input type="tel">
<input type="button">
<!-- 图标形式上传 src图片地址 带提交功能的图片按钮 -->
<input type="image" src="">
<!-- 下拉菜单 -->
<select name="" id="">
<!-- selected:默认选中 -->
<option value="" selected="selected">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<!-- 文本域 css属性resize：none规定文本域大小不能变化 -->
<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
</form>
11、字段集标签<fieldset></fieldset>
<fieldset>
<!-- lengend标签通常只有一个，但是没有明确的要求 -->
<legend>个人信息</legend>
<div>里面的内容区域</div>
</fieldset>
12、宽高自适应：确保网页内容能够根据不同设备的屏幕尺寸自动调整布局，以便更好地适应不同地显示设备。根据浏览器大小显示对应内容。
宽度自适应：所有地通栏不再给宽度，版心依然是给固定值，因为版心最大是1366，而浏览器最小的分辨率也是1366，所以内容肯定可以展示完整。就是不给确定的宽度。
高度自适应：靠子元素撑起来
13、左边固定，右边自适应
.box{
height: 500px;
background-color: palegreen;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.right{
height: 300px;
background-color: aqua;
/* 给右边的触发BFC overflow：hidden*/
overflow: hidden;
}
calc(100% -100 px):是一个计算属性，减号两边必须有空格，否则不生效。
14、三列布局：通常是左右固定，中间自适应
15、min-height：最小高度。内容的高度小于最小高度的时候，高度强制等于最小高度
内容高度大于等于最小高度的时候，自适应。
16、max-height：100px：不管内容多少，最大高度就是100px，如果内容过多，会溢出，添加overflow：hidden
17、iframe的使用：框架集标签,用于在网页中嵌入另一个独立的HTML标签，通过使用iframe，可以在一个网页中显示另一个网页的内容，就好像在一个窗口中打开了另一个网页一样。 iframe常用于后台管理系统。display：inline，行内块，可以设置宽高
18、使用iframe搭建简易后台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
float: left;
}
.left li{
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.right{
overflow: hidden;
height: 100%;
background-color: chartreuse;
float: left;
}
</style>
</head>
<body>
<!-- 点击左边只切换右边的部分内容 两列布局 -->
<div class="left">
<ul>
<li><a href="./page/news.html" target="myIframe">新闻页面</a></li>
<li><a href="./page/video.html" target="myIframe">视频页面</a></li>
<li><a href="./page/image.html" target="myIframe">图片页面</a></li>
</ul>
</div>
<div class="right">
<iframe src="./page/news.html" frameborder="0" name="myIframe"></iframe>
</div>
</body>
</html>
