一、html
1、文档声明与字符编码
* <!DOCTYPE html>：特殊且固定的文档声明标签
* <html lang="en">：搜索引擎优化和浏览器有帮助
- lang：文件使用的语言。浏览器的翻译此页功能与此相关
* <meta charset="UTF-8">：
- charset：浏览器解码文件的方式。开发者编码文件的方式应与其一致
2、常用语义标签
a、常用语义标签
* 文本标题
- <h1></h1> ~ <h6></h6>
* 段落文本
- <p></p>
* 换行
- <br>
* 水平线
- <hr>
* 加粗
- <b></b>
- <strong></strong>（推荐）
* 倾斜
- <em></em>（推荐）
- <i></i>
* 删除线
- <s></s>
- <del></del>（推荐）
* 下划线
- <u></u>
* 下标
- <sub></sub>
* 上标
- <sup></sup>
b、hr标签
<!-- 标签的属性和值一样时，可省略赋值 -->
<hr color="red" width="300" align="left" noshade="noshade">
3、特殊符号
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| < | 小于号 | < |
| > | 大于号 | > |
| 非间断空格 | | |
| em空格 |   | |
| © | 版权所有 | © |
| ® | 注册商标 | ® |
| ™ | 商标 | ™ |
4、常用标签
a、div和span标签
<!-- 没有具体含义，用来划分页面的区域，独占一行 -->
<div></div>
<!-- 没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离 -->
<span></span>
b、ol-li有序列表
<!--
- type：默认值1，可取值1、a、A、i、I
- start：默认值1，列表开始值
-->
<ol type="a" start="27">
<li>黄婷婷</li>
<li>孟美岐</li>
<li>张婧仪</li>
</ol>
c、ul-li无序列表
<!--
- type：
disc：默认值，实心圆
circle：空心圆
square：实心方块
none：空
-->
<ul type="none">
<li>黄婷婷</li>
<li>孟美岐</li>
<li>张婧仪</li>
</ul>
d、dl-dt-dd自定义列表
<dl>
<dt>黄婷婷</dt>
<dd>孟美岐</dd>
</dl>
e、img标签
<!--
1、路径：
- 相对路径：./、../
- 斜杠路径：http://localhost:63342/
- 绝对路径：file:///C:/
-->
<img src="./gongping.png"
title="鼠标悬停上去之后的提示信息"
alt="图片不显示之后（加载失败）的提示信息"
width="200px"
height="200px">
f、a标签
<!--
- target：
_self：默认值
_blank：新窗口打开
-->
<a href="https://www.baidu.com" target="_self"></a>
g、table表格
<!--
* table：
- width：宽度（px、百分比）
- height：高度
- border：边框
- bordercolor：边框颜色
- bgcolor：背景颜色
- align：水平对齐，可取值left、right、center
- cellspacing：单元格与单元格之间的间距
- cellpadding：单元格与内容之间的空隙
* tr：
- height：高度
- bgcolor：背景颜色
- align：水平对齐，可取值left、right、center
- valign：垂直对齐，可取值top、middle、bottom
* td：
- width：宽度
- height：高度
- bgcolor：背景颜色
- align：水平对齐，可取值left、right、center
- valign：垂直对齐，可取值top、middle、bottom
- colspan：合并列
- rowspan：合并行
-->
<table width="100%"
height="200px"
border="10"
bordercolor="red"
bgcolor="green"
align="center"
cellspacing="10"
cellpadding="10">
<tr height="200px"
bgcolor="blue"
align="left"
valign="top">
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td width="200px"
height="200px"
bgcolor="yellow"
align="right"
valign="bottom">黄婷婷
</td>
<td colspan="2" rowspan="2">18</td>
</tr>
<tr>
<td>无锡</td>
</tr>
</table>
h、form表单
<!--
- method：可取值GET、POST
-->
<form action="http://www.baidu.com" method="GET">
用户名：<input type="text" name="username" placeholder="用户名"><br>
密 码：<input type="password" name="password" placeholder="密码"><br>
<button type="submit">提交</button>
<input type="reset">
<input type="button" value="注册">
</form>
二、css
1、样式表
<!--
1、样式表分类
- 外部样式表：@import、link
- 内部样式表：style标签
- 行内样式表：元素标签
2、@import和link对比
- @import：页面加载完毕，再加载样式表。
- link：页面加载完毕，同时样式表也加载完毕。兼容性好。可以dom操作（推荐）
-->
<style>@import url("./index.css");</style>
<link rel="stylesheet" href="./index.css">
2、选择器
<!--
1、选择器分类
- 通配符选择器：*
- 标签选择器：div
- class属性选择器：.box
- id属性选择器：#app
- 群组选择器：div,span
- 后代选择器：div span
- 子代选择器：div>span
- 伪类选择器：span:hover
-->
<div class="box" id="app">
<span>这是一段中文</span>
</div>
3、选择器的权重
* 选择器的权重
- 标签选择器：1
- class属性选择器：10
- id属性选择器：100
- 包含选择器：选择器权重之和
- 内联样式：1000
- !important：10000
* 优先级
- 权重不同：高权重选择器 > 低权重选择器
- 权重相同：后面的样式 > 前面的样式
4、文本属性
| 属性 | 描述 | 说明 |
|---|---|---|
| font-size | 字体大小 | 浏览器默认16px |
| font-family | 字体 | 字体中有空格，需加双引号。 字体以逗号分隔，按从左往右顺序解析，直到有字体 |
| color | 颜色 | red #ff0000 rgb(255,0,0) |
| font-weight | 加粗 | bolder bold normal lighter 100-900 |
| font-style | 倾斜 | italic：倾斜 oblique：更倾斜 normal |
| text-align | 文本水平对齐 | left right center justify：两端对齐，多行起作用，英文效果明显 |
| line-height | 行高 | line-height=height：文本垂直居中 |
| text-indent | 首行缩进 | 只对第一行起作用 |
| letter-spacing | 字间距 | 英文单词间距使用word-spacing属性 |
| text-decoration | 文本修饰 | none underline overline line-through 可多值同时设置 |
| text-transform | 文本变换 | capitalize：英文首字母大写 uppercase lowercase none |
| font | 文字简写 | font: font-style? font-weight? font-size/line-height? font-family; 顺序固定 |
5、列表属性
| 属性 | 描述 | 说明 |
|---|---|---|
| list-style-type | 定义列表符合样式 | disc circle square none |
| list-style-image | 将图片设置为列表符合样式 | url("") |
| list-style-position | 设置列表项标记的放置位置 | outside：默认值 inside |
| list-style | 简写 | list-style: list-style-type? list-style-image? list-style-position?; none：去除列表符号 |
6、背景属性
| 属性 | 描述 | 说明 |
|---|---|---|
| background-color | 背景颜色 | red #ff0000 rgb(255,0,0) |
| background-image | 背景图片 | url("") |
| background-repeat | 背景图片的平铺 | no-repeat repeat repeat-x repeat-y |
| background-position | 背景图片的定位 | background-position: 水平位置 垂直位置; |
| background-attachment | 背景图片的固定 | scroll：随元素滚动 fixed：相对浏览器窗口固定（视觉差案例） |
| background | 简写 | background: background-color? background-image? background-repeat? background-position? background-attachment?; 未取值的会取默认值，要注意放后面会覆盖前面的值 |
| background-size | 背景图片的尺寸 | px、百分比 cover：宽高比例不变，元素覆盖 contain：宽高比例不变，元素留白 |
7、浮动属性
- float
* 可取值：left、right、none
* 作用：
- 使文本围绕该元素显示
- 竖排列变横排列
* 横排列原则（B元素的上一个元素是A元素，高于且最接近A元素的是C元素，最高元素是D元素，B是浮动的）：
- A不是浮动的，则B在A的下面
- A也是浮动的，则B在A的后面，放不下则挤到下一行，
挤到下一行的B顶部与A底部对齐，B左部与C右部对齐，放不下则挤到下一行
挤到下一行的B顶部与D底部对齐
- clear
* 可取值：left、right、both、none
* 清楚浮动原则：
- float元素会脱离文档流，所以在父元素中不会占据高度
- 清除浮动只改变元素自身的排列方式（换行，顶部与已排列最高元素的底部对齐）
* 浮动塌陷问题解决方式
- 浮动元素后面补一个块元素设置clear: both;
- overflow: hidden;bfc方式让浮动元素计算高度
8、盒子模型
- padding
* padding取值方式
- 一个值：上下左右
- 两个值：上下 左右
- 三个值：上 左右 下
- 四个值：上 右 下 左
* 单一方向取值：padding-top、padding-right、padding-bottom、padding-left
* 背景会蔓延到内边距
- border
| 属性 | 描述 | 说明 |
|---|---|---|
| border-width | 边框宽度 | 可以一个值、两个值、三个值、四个值 |
| border-color | 边框颜色 | 可以一个值、两个值、三个值、四个值 |
| border-style | 边框风格 | 可以一个值、两个值、三个值、四个值 可取值：solid、double、dashed、dotted |
| border | 简写 | border: border-width? border-color? border-style; 单一方向取值：border-top、border-right、border-bottom、border-left 背景会蔓延到边框 |
- margin
* margin取值方式
- 一个值：上下左右
- 两个值：上下 左右
- 三个值：上 左右 下
- 四个值：上 右 下 左
* 单一方向取值：margin-top、margin-right、margin-bottom、margin-left
* 背景不会蔓延到外边距
* 支持取负值
* 水平居中：margin: 0 auto;
* 特性问题
+ 盒子是兄弟关系
- 垂直方向：取相邻外边距最大值
- 水平方向：取相邻外边距之和
+ 盒子是父子关系
- 垂直方向：子盒子外边距会传递给父盒子。解决方式：
~ 父盒子：border: 1px solid transparent;
~ 父盒子或子盒子：float: left;
~ 父盒子：overflow: hidden;
- 水平方向：子盒子外边距不会传递给父盒子
9、溢出属性
- overflow
* 可取值：
- visible：默认值，溢出显示
- hidden：溢出隐藏
- scroll：滚动
- auto：溢出滚动
- inherit：继承父元素
* Y轴溢出滚动，X轴溢出隐藏：overflow-y: auto;overflow-x: hidden;
- white-space
* 可取值：
- normal：默认值
- nowrap：文本不换行，直到遇到<br>
- pre：显示空格，显示回车，不自动换行（<pre></pre>：预格式化文本标签）
- pre-wrap：显示空格，显示回车，自动换行
- pre-line：不显示空格，显示回车，自动换行
- inherit：
- text-overflow
* 可取值：
- clip：默认值
- ellipsis：显示省略号
* 文本溢出显示省略号：width: ;overflow: hidden;white-space: nowrap;
text-overflow: ellipsis;
10、元素显示类型
| 分类 | 特性 | 举例 | display |
|---|---|---|---|
| 块元素 | 纵向排列 可以设置宽高 p元素不可以作为块级元素的容器 |
div、p、ul-li、ol-li、dl-dt-dd、h1~h6 | block、list-item |
| 行内元素 | 横向排列 不可以设置宽高 盒子模型：左右支持，上下不支持 |
a、b、em、i、span、strong | inline |
| 行内块元素 | 横向排列 可以设置宽高 |
img、input | inline-block |
| 隐藏元素 | 不显示且脱离文档流 | 所有 | none |
11、定位
- position
* 可取值：
- static：默认值
- absolute：绝对定位，脱离文档流。相对于定位的父元素位置，没有定位的父元素则相对于body元素位置
- relative：相对定位。相对于自身的初始位置
- fixed：固定定位，脱离文档流。相对于浏览器窗口位置
- sticky：粘性定位。可以做吸顶效果
* 配合属性：
- top：px、百分比
- right：px、百分比
- bottom：px、百分比
- left：px、百分比
* 行内元素转块元素：
- display: block;
- float: left;
- position: absolute;
- z-index
* 兄弟元素层级优先级
- 定位元素与未定位元素之间，z-index大于等于0，则定位元素层级高于未定位元素，否则反之
- 定位元素与定位元素之间，z-index数值越大层级越高。z-index可取负值
- 定位元素与定位元素之间，z-index数值相同，后面元素的层级高于前面元素
* 父子定位元素层级优先级
- 子定位元素z-index小于0，则父定位元素层级高于子定位元素
12、属性补充
| 属性 | 描述 | 说明 |
|---|---|---|
| outline | 轮廓，复合属性 | none：无轮廓 |
| opacity | 透明度 | 0~1 |
三、案例
1、锚点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点</title>
<style type="text/css">
html {
/* 平滑方式滚动 */
scroll-behavior: smooth;
}
body {
margin: 0;
}
.win {
position: fixed;
right: 0;
}
#a, #b, #c {
height: 500px;
width: 50%;
color: white;
}
</style>
</head>
<body>
<div class="win">
<div><a href="#a">黄婷婷</a></div>
<div><a href="#b">孟美岐</a></div>
<div><a href="#c">姜贞羽</a></div>
</div>
<div id="a" style="background: red;">黄婷婷</div>
<div id="b" style="background: green;">孟美岐</div>
<div id="c" style="background: blue;">姜贞羽</div>
</body>
</html>
2、精灵图
* 将多张照片合并成一张照片，利用background-position使背景图在元素中显示想要的部分
3、宽高自适应
* width: auto;相当于width: calc(100% - (外边距 + 边框 + 内边距));
* height: auto;表示高度由内容撑开
* 配合属性：
- min-width
- max-width
- min-height
- max-height
4、伪元素
- 常用伪元素
* ::first-letter：第一个字母
* ::first-line：第一行
* ::before：容器前的内容
* ::after：容器后的内容
* 配合属性：
- content: "" 或 url("");
* display: none;和visibility: hidden;对比
- 前者脱离文档流，后者没有脱离文档流
- 清楚浮动最优方案
浮动元素容器::after {
content: "";
clear: both;
display: block;
}
5、窗口自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口自适应</title>
<style type="text/css">
html, body, #app {
height: 100%;
}
body {
margin: 0;
}
#app {
overflow: auto;
}
</style>
</head>
<body>
<div id="app">
<div style="height: 5000px;background: linear-gradient(to bottom,red,green)"></div>
</div>
</body>
</html>
6、两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style type="text/css">
html, body, #app {
height: 100%;
}
body {
margin: 0;
}
#app {
overflow: auto;
}
</style>
<!-- 方式一 -->
<!--
<style>
.left {
width: 200px;
height: 100%;
float: left;
background: red;
}
.right {
height: 100%;
margin-left: 200px;
background: green;
}
</style>-->
<!-- 方式二 -->
<style>
.left {
width: 200px;
height: 100%;
float: left;
background: red;
}
.right {
width: calc(100% - 200px);
height: 100%;
float: left;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
7、三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style type="text/css">
html, body, #app {
height: 100%;
}
body {
margin: 0;
}
#app {
overflow: auto;
}
</style>
<!-- 方式一 -->
<!--
<style>
.left {
width: 200px;
height: 100%;
float: left;
background: red;
}
.center {
height: 100%;
margin: 0 200px;
background: green;
}
.right {
width: 200px;
height: 100%;
float: right;
background: blue;
}
</style>-->
<!-- 方式二 -->
<style>
.left {
width: 200px;
height: 100%;
float: left;
background: red;
}
.center {
width: calc(100% - 400px);
height: 100%;
float: left;
background: green;
}
.right {
width: 200px;
height: 100%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
8、圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style type="text/css">
html, body, #app {
height: 100%;
}
body {
margin: 0;
}
#app {
overflow: auto;
}
</style>
<style>
.top, .bottom {
height: 50px;
background: red;
}
.middle {
height: calc(100% - 100px);
}
.left, .right {
width: 200px;
height: 100%;
float: left;
background: green;
}
.center {
width: calc(100% - 400px);
height: 100%;
float: left;
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
四、表单
1、单选框
<form>
<label><input type="radio" name="gener" checked> 女</label>
<label><input type="radio" name="gener"> 男</label>
</form>
2、复选框
<form>
<label><input type="checkbox" name="friends" checked> 黄婷婷</label>
<label><input type="checkbox" name="friends"> 孟美岐</label>
<label><input type="checkbox" name="friends"> 姜贞羽</label>
</form>
3、上传文件和隐藏字段
<form action="">
<!-- 1、上传文件 -->
<label>附件：<input type="file" name="file"></label><br>
<!-- 4、只读 -->
<label>姓名：<input type="text" name="name" readonly value="黄婷婷"></label><br>
<!-- 3、隐藏表单 -->
<input type="hidden" name="age" value="18">
<!-- 2、图片提交按钮和禁用 -->
<input type="image" disabled src="submit.jpg">
</form>
4、下拉菜单
<form>
<!--
1、select属性
- size：显示的选项数
- multiple：多选
-->
<select name="girls" size="3" multiple>
<!--
2、option属性
- value：值
- selected：默认选中
-->
<option value="黄婷婷" selected>黄婷婷</option>
<option value="孟美岐" selected>孟美岐</option>
<option value="鞠婧祎">鞠婧祎</option>
<option value="张婧仪">张婧仪</option>
<option value="姜贞羽">姜贞羽</option>
<option value="佟丽娅">佟丽娅</option>
</select>
</form>
5、文本域
<form>
<!--
* cols和rows针对的是英文字符，所以通常是设置css的width和height
* placeholder：提示文本
* textarea标签不要换行，否则默认值会有空格
-->
<textarea name="" cols="30" rows="10" placeholder="请输入你的理想">房子车子票子</textarea>
</form>
<style>
textarea {
width: 220px;
height: 60px;
/*
resize属性：
- none：无法调整元素尺寸
- both：可调整元素的高度和宽度
- horizontal：可调整元素的宽度
- vertical：可调整元素的高度
*/
resize: none;
}
</style>
6、字段级
<fieldset>
<legend>黄婷婷</legend>
</fieldset>
五、html5
1、新增语义化标签
* section：表示页面中的一个内容区块
* article：表示一块与上下文无关的独立的内容
* aside：在article之外的，与article内容相关的辅助信息
* header：表示页面中一个内容区块或整个页面的标题
* footer：表示页面中一个内容区块或整个页面的脚注
* nav：表示页面中导航链接部分
* figure：表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
* main：表示页面中的主要的内容（ie不兼容）
2、音频标签
<!--
- autoplay：自动播放
- controls：控制台
- loop：循环播放
- muted：静音
-->
<audio src="./horse.mp3" autoplay controls loop muted></audio>
3、视频标签
<!--
- autoplay：自动播放
- controls：控制台
- loop：循环播放
- muted：静音
- poster：海报
- width：宽度
- height：高度
-->
<video src="./movie.mp4" autoplay controls loop muted></video>
4、input
<form action="">
<label>颜色选择：<input type="color" name="color"></label><br>
<label>邮箱：<input type="email" name="email"></label><br>
<!-- 完整地址 -->
<label>url地址：<input type="url" name="url"></label><br>
<!-- 移动端弹出数字按键 -->
<label>电话号码：<input type="tel" name="tel"></label><br>
<!-- step：步长 -->
<label>滑块效果：<input type="range" name="range" value="50" min="0" max="100" step="10"></label><br>
<label>数字类型：<input type="number" name="number" value="50" min="0" max="100" step="10"></label><br>
<label>搜索：<input type="search" name="search"></label><br>
<label>日期选择：<input type="date" name="date"></label><br>
<label>月份选择：<input type="month" name="month"></label><br>
<label>周数选择：<input type="week" name="week"></label><br>
<label>本地时间：<input type="datetime-local" name="datetimeLocal"></label><br>
<input type="submit">
</form>
5、数据列表
<form action="">
<input type="text" list="person_list">
<datalist id="person_list">
<option value="黄婷婷" label="黄婷婷"></option>
<option value="孟美岐" label="孟美岐"></option>
<option value="姜贞羽" label="姜贞羽"></option>
</datalist>
</form>
6、属性
<form action="">
<!--
- required：必填项
- autofocus：自动获取焦点。当设有多个，则只有第一个生效
- multiple：允许多个值，以英文逗号隔开
- pattern：正则验证
-->
<label>用户名：<input type="text" name="username" required pattern="^\w+$" autofocus></label><br>
<label>密 码：<input type="password" name="password" required></label><br>
<label>亲 属：<input type="text" name="family" multiple></label><br>
<input type="submit">
</form>
六、css3
1、层级选择器
* div>span：div子代span
* div+span：div后兄弟第一个span
* div~span：div后兄弟所有span
2、属性选择器
* div[class]：div，有class属性
* div[class="item"]：div，有class属性，且值为item
* div[class~="item"]：div，有class属性，且值（以空格隔开的词列表）中的一项是item
* div[class^="item"]：div，有class属性，且值以item开头
* div[class$="item"]：div，有class属性，且值以item结尾
* div[class*="item"]：div，有class属性，且值包含item字符串
3、结构伪类选择器
/* :root等价html */
:root {
overflow: hidden;
}
/* #app子代第一个div */
#app > div:first-child {
}
/* #app子代最后一个div */
#app > div:last-child {
}
/* #app子代偶数位div（可取值：数字、偶数even或2n、奇数odd或2n+1） */
#app > div:nth-child(even) {
}
/* #app子代只有一个div */
#app > div:only-child {
}
/* #app子代没有内容的div（空格也算内容） */
#app > div:empty {
}
4、目标伪类选择器
<!-- 手风琴效果案例 -->
<div>
<a href="#htt">黄婷婷</a>
<div id="htt" class="content">黄婷婷</div>
</div>
<div>
<a href="#mmq">孟美岐</a>
<div id="mmq" class="content">孟美岐</div>
</div>
<div>
<a href="#jzy">姜贞羽</a>
<div id="jzy" class="content">姜贞羽</div>
</div>
<style>
.content {
display: none;
}
.content:target {
display: block;
}
</style>
5、ui状态伪类选择器
/* 可用状态的input */
input:enabled {
}
/* 禁用状态的input */
input:disabled {
}
/* 焦点状态的input */
input:focus {
}
input[type="checkbox"] {
appearance: none; /* 去掉默认样式 */
width: 16px;
height: 16px;
border: 1px solid black;
border-radius: 4px;
}
/* 选中状态的input */
input:checked {
background: green;
}
/* p选中状态的内容 */
p::selection {
}
6、否定和动态伪类选择器
/* 1、否定伪类选择器 */
/* #app子代有内容的div */
#app > div:not(:empty) {
}
/* 2、动态伪类选择器 */
/* 未访问过的a */
a:link {
}
/* 已访问过的a */
a:visited {
}
/* 激活状态的a */
a:active {
}
/* 鼠标悬停的a */
a:hover {
}
7、文本阴影
/*
1、X轴 Y轴 阴影程度 阴影颜色
2、可设多个阴影
*/
p {
text-shadow: 0 16px 1px red, 0 -16px 1px green;
}
8、盒子阴影
/*
1、X轴 Y轴 模糊距离 阴影大小 阴影颜色 内阴影
2、可设多个阴影
*/
div {
box-shadow: 0 0 8px 0 black inset;
}
9、圆角边框
/*
1、可取值：px、百分比
2、取值方式：
- 一个值：四个角
- 两个值：左上右下 右上左下
- 三个值：左上 右上左下 右下
- 四个值：左上 右上 右下 左下
- 水平/垂直：8px 8px 8px 8px/4px 4px 4px 4px
3、单方向取值（不支持水平/垂直）：
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
4、圆：盒子（border+padding+content）的一半（50%）
*/
div {
border-radius: 8px 8px 8px 8px;
}
10、字体引入
@font-face {
font-family: LdcD;
src: url("./LcdD.ttf");
}
.content {
font-family: LdcD;
}
11、怪异盒模型
/*
- content-box（标准盒模型）：默认值，width = content
- border-box（怪异盒模型）：width = border + padding + content
*/
div {
box-sizing: border-box;
}
12、弹性盒
- 容器对齐方式
<div class="content">
<div style="background: red"></div>
<div style="background: orange"></div>
<div style="background: yellow"></div>
<div style="background: green"></div>
<div style="background: blue"></div>
<div style="background: indigo"></div>
<div style="background: purple"></div>
</div>
<style>
.content {
width: 500px;
height: 500px;
border: 1px solid black;
/*
1、display: flex;影响：
- 子元素默认从左往右排列
- 行内元素会变成块级元素
- 只有一个子元素的时候，子元素设置margin: auto;则水平垂直居中
*/
display: flex;
/*
2、主轴方向：
- row（默认值）：从左往右
- column：从上往下
- row-reverse：从右往左
- column-reverse：从下往上
*/
flex-direction: row;
/*
3、主轴对齐方式：
- flex-start：主轴开始位置对齐
- flex-end：主轴结束位置对齐
- center：中间位置对齐
- space-between：两端对齐
- space-around：距离环绕对齐
*/
justify-content: center;
/*
4、侧轴对齐方式：
- flex-start：侧轴开始位置对齐
- flex-end：侧轴结束位置对齐
- center：中间位置对齐
*/
/* align-items: center; */
/* 5、折行 */
flex-wrap: wrap;
/*
6、控制折行后行间距：
- flex-start：侧轴开始位置对齐
- flex-end：侧轴结束位置对齐
- center：中间位置对齐
- space-between：两端对齐
- space-around：距离环绕对齐
*/
align-content: space-around;
/*
7、复合属性：
- flex-direction：主轴方向
- flex-wrap：折行
*/
/* flex-flow: row wrap; */
}
.content > div {
width: 100px;
height: 100px;
}
</style>
- 项目对齐方式
<div class="content">
<div style="background: red"></div>
<div style="background: orange"></div>
<div style="background: yellow"></div>
</div>
<style>
.content {
width: 500px;
height: 500px;
border: 1px solid black;
display: flex;
}
.content > div {
width: 100px;
height: 100px;
/*
1、align-self可取值：
- flex-start：侧轴开始位置
- flex-end：侧轴结束位置
- center：侧轴中间位置
- baseline：
- stretch（默认值）：拉伸，与width或height不能同时使用
*/
/* align-self: stretch; */
/*
2、order：用于调整项目顺序。默认值0，可取负值。沿主轴方向从小到大排列
*/
/* order: 0; */
/*
3、flex：简写。用于给项目分配空间
- flex-grow flex-shrink flex-basis：扩展的量 收缩的量 项目的长度
- auto：1 1 auto
- none：0 0 auto
- initial（默认值）：0 1 auto
- inherit：继承
*/
flex: 1;
}
</style>
