Day1—HTML基础
html相关基础
- 通过在VSCode中输入!加回车可以快速调出html网页的基本结构
- 网页的基本结构
<!DOCTYPE html> <!-- 声明代码格式 --> <html lang="en"> <!-- 声明语言 --> <head> <meta charset="UTF-8"> <!-- 声明文字编码 UTF-8代表万国码--> <!-- 汉字使用GBK或者GB2312 --> <title>网页结构</title> <!-- 网页标题 显示在网页标签 --> </head> <!-- <head>到</head>叫做头部 --> <body> <!-- 主体 各种代码主要写在这里--> </body> </html> - web组成
- HTML结构
- CSS表现
- JS行为
- HTML5是由W3C和WHATWG联合发布的，是HTML的第五次重大修改
常用标签1
也叫块状元素，独占一行，可以设置宽高，属于大盒子，可以包裹一切标签
一个开始标签和结束标签共同组成了一个元素，也可以继续用标签代指，下文可能会出现混用
标题标签
使用h1~h6表示一个标题元素，字体依次从大到小
标题标签不能互相嵌套
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
使用<p></p>表示一个段落元素，会分割两句话，段落标签会在上下行空出稍大的段间距
段落标签不能包裹任何块状元素
常用布局
使用<div></div>表示一个元素，会分割两句话，与段落标签最大的不同是没有段间距，很常用
列表（有三类）
无序列表
无序列表使用ul表示，内部每个列表清单使用li表示，无序列表可以更改type属性的属性值来更改列表清单前的小圆点样式，默认是disc实心圆，可更改circle空心圆、square方框、none去除样式，但要注意，在低版本浏览器中比如ie无法识别，后期CSS语法有列表属性来设置
<!--<标签 属性 = "属性值">-->
<ul type = "square">
<li>元素</li>
<li>元素</li>
</ul>
有序列表
有序列表使用ol表示，内部每个列表清单也是使用li表示，有序列表也是可以通过更改type属性的属性值来更改序号样式的，默认是1数字，可以更改为a小写字母、A大写字母、I大写罗马数字、i小写罗马数字。有序列表也可以通过更改start属性的属性值来决定从第几个编号开始排序
<ol type = "i" start = "3">
<!-- 小写罗马数字，从序号三开始排序 -->
<li>2401</li>
<li>2402</li>
</ol>
自定义列表
自定义列表使用dl表示，他与无序列表和有序列表不同的是他的列表清单不使用li，而是使用dt和dd，其中dt表示的是名词，dd表示的是对dt的描述，相比名词会整体向后退格
<dl>
<dt>名词</dt>
<dd>这是一个描述</dd>
<dd>这是一个描述</dd>
</dl>
单标记
单标签不需要闭合标签，但是在严格模式下（xhtml时代）也要闭合
水平线
<hr>
会显示一条水平直线强制换行
<br>
不常用，会显得low
常用标签2
除了img其他的也叫行内元素，在一行显示，默认无法设置宽高，大小是由文字内容撑开的，且无法包裹块状元素也就是常用标签1内的元素
插入图片
插入图片使用img表示，是单标签，有三个属性
src属性值填图片路径，路径格式分绝对路径和相对路径
alt在图片加载失败时显示属性值内容
title表示鼠标悬停会显示属性值内容
<img src="图片路径" alt="图片加载失败时显示" title = "鼠标悬停显示">
绝对路径
绝对路径就是src直接填入图片的网络地址或者文件的本地地址，一般情况下不要使用
<img src="https://img1.baidu.com/it/u=29352199,3455482&fm=253&fmt=auto&app=138&f=JPEG
" alt="图片加载失败时显示" title = "鼠标悬停显示">
相对路径
相对路径是文件之间的相对路径，又分三种情况
第一种情况就是图片和html文件在同一目录下，此时直接在src中填入图片.后缀名
第二种情况就是图片所在images文件夹和html文件在同一文件夹下，此时src填入图片文件夹名/图片名.后缀名
第三种情况就是图片所在images文件夹和HTML文件所在html文件夹在同一目录下，此时src填入 ../图片文件夹名/图片名.后缀，其中../表示从html文件夹返回上一级，images/表示进入images文件夹
<!-- 第一种情况 -->
<img src="1.jpg" alt="图片1加载失败" title = "鼠标悬停显示">
<!-- 第二种情况 -->
<img src="images/3.jpg" alt="图片3加载失败" title = "鼠标悬停显示">
<!-- 第三种情况 -->
<img src="../images/3.jpg" alt="图片3加载失败" title = "鼠标悬停显示">
- 图片一定要在对应站点
加粗
加粗有两种表示方式，<b></b>/<strong></strong>，一般使用b，因为短
倾斜
倾斜有三种表示方式，<i></i>/<em></em>/<var></var>，因为i一般矢量图使用，var在js中有歧义，因此em是最常用的
标签之间是可以嵌套的，比如<em><b>加粗倾斜</b></em>
文本节点
使用<span></span>表示(除了显示文字没有别的功能)
中划线/删除线
一般使用<s></s>/<del></del>表示
下划线
使用<u></u>表示
上标
使用<sup></sup>表示
效果：$2^3$
下标
用<sub></sub>
效果：$H_2 O$
文字标签
在html5中已经被废除了，可以使用css来代替，有三个属性，color表示文字颜色，size表示文字大小，face表示字体，如果浏览器没有相应字体会显示默认字体
<font>文字</font>>
<font color = "文字颜色 英文" size = "文字大小 数字" face = "字体 指定字体">文字</font>
<font color = "blue" size = "10" face = "隶书">文字</font>
转义符
分别是
| 转义符 | 名称 | 作用 |
|---|---|---|
|
占位符 | 代表一个空格大小 |
  |
全角占位符 | 代表一个文字的大小 |
  |
半角占位符 | 代表半个文字的大小 |
© |
版权所有 | 代表© |
® |
注册商标 | 代表® |
> |
大于号 | 代表> |
< |
小于号 | 代表< |
¥ |
人民币 | 代表¥ |
" |
英文双引号 | 代表”” |
超链接
超链接使用a表示
<a href="链接网址" title = "鼠标悬停显示信息" target = "如何打开">链接名字</a>
超链接有两个常用属性，一个是title属性，他表示鼠标悬停时会显示属性值内容，另一个是target属性，target属性有两种属性值，默认是_self表示在当前标签页打开超链接，可以更改为_blank表示的是另起一页标签页打开超链接
<a href="https://www.akyuu.cc" title = "个人博客" target = "_self">博客</a>
<a href="https://www.akyuu.cc" title = "个人博客" target = "_blank">博客</a>
有时候我们不希望新打开的页面会覆盖当前页面就可以使用此属性
超链接属性较常用的用法有三种
第一种就是href属性值不写任何链接，此时点击超链接会跳转到页面最上方
第二种是锚链接，href属性值只写#号，此时点击链接地址也是跳转到页面最上方，后续会和id选择器结合使用
第三种是空链接，href属性值写JavaScript:;，点击没有任何反应
<a href="">会跳转到页面最上面</a>
<a href="#">锚链接 会跳转到页面最上面</a>
<a href="JavaScript:;">没反应</a>
Day2—form表单和CSS基础
form表单
需要记住三种属性
action的属性值填数据库地址，表单中的数据最终会提交在这里。
method的属性值填写的是数据提交的方式，一共有两种方式post和get，post更安全没有数据大小限制缺点是传输速度慢，get不安全数据限制在4kb但传输速度快，两种方式的选择取决于需要传输的数据。
name的属性值填表单名字是用来给表单分类的
<form action="数据库地址" method="数据提交的方式" name="表单名字"></form>
表单控件
以下介绍的标签都是属于一行显示的，但与常用标签2不同的是他们可以设置宽高以及上、下、左、右方向的内填充padding、边框border还有外边框margin
文本框标签
表单内部可以添加本文框标签，文本框中输入的文字会明文显示，有两种属性
value属性是在文本框内部显示实心的提示信息，在点击文本框后会发现文字占位
placeholder属性是在文本框内部显示虚焦的提示信息，点击文本框后虚焦的文字会消失，比如各登录页面的请输入
<p>姓名：<input type="text"></p>
<!-- value属性 实心的提示信息 -->
<p>姓名：<input type="text" value="请输入"></p>
<!-- placeholder属性 虚焦的提示信息 -->
<p>姓名：<input type="text" placeholder="请输入"></p>
密码框标签
密码框会将所有输入的文字全部变成密文显示，也就是小圆点
<p>密码：<input type="password" placeholder="请输入"></p>
按钮
按钮分四类，普通按钮，按钮标签，重置按钮，提交按钮，按钮可以结合value属性使用来更改按钮显示内容
普通按钮没有实际功能，需要结合value使用
按钮标签也没有任何作用，点击后会跳转到表单中action属性所指的地址且不携带任何数据
重置按钮一定要放到form标签中，点击后会重置form表单中所有内容
提交按钮点击后会跳转到表单中action所指的地址且会将表单中的内容提交
<input type="button" value="普通按钮">
<button>按钮标签</button>
<input type="reset" value="一键清空">
<input type="submit" value="免费注册">
CSS基础
CSS被称为层叠样式表，他修饰标签的颜色大小等让标签更美观，格式如下
修饰元素{
属性:属性值;
属性:属性值：
}
CSS样式表及其权重
行内样式表
也叫内联样式表/内嵌样式表/嵌入样式表，特点是直接写在标签里，修饰范围仅限此标签
不建议使用
<h1 style="background-color: aqua;color: brown;">行内样式表</h1>
内部样式表
写在头部head里，先写一个style标签，然后在style标签里书写CSS语法，修饰范围仅限当前html页面，具体范围看选择器
<style>
h1{
/* 表示修饰所有h1标签 */
color: aqua;
font-size: 80px;
background-color: blue;
}
</style>
外部样式表
在CSS文件夹中单独创建CSS文件，并在需要修饰的html文件头部中进行引用声明，修饰范围谁引用就修饰谁
其中CSS文件按照css语法书写，html引用格式如下
<link rel="stylesheet" href="../css/demo.css">
其中rel属性的作用是关联样式表，href属性值的书写可以参考[插入图片]章节
三种样式表的优先级
样式表的优先级和修饰属性都遵从后来居上，也就是最后声明的最大，因此可以想到无论如何行内样式表是直接写在标签里的，他的优先级是最大的，内部样式表和外部样式表的引用谁书写在后面谁的优先级就高
<link rel="stylesheet" href="../css/demo.css">
<style>
h1{
color: blue;
color: green;
}
</style>
上例中内部样式表在后，且color属性先声明蓝色后声明绿色，因此h1标签中的文字最终会显示绿色
CSS选择器及其权重
最重要的是权重问题，低权重无法覆盖高权重
元素选择器
元素选择器用来对页面中某一标签元素全体进行统一修饰，书写格式为标签名{}
元素选择器权重为1
p{
color: blueviolet;
}
上例中就是对所有段落元素p进行统一修饰
id选择器
id具有唯一性，id名需要符合命名规范，书写格式为#id名{}
id选择器权重为100
#p3{
background-color: aqua;
}
<p id="p3">id选择器</p>
上例就是对id为p3的元素进行修饰
class类选择器
class名可以重复，class类选择器可以选择多个同名元素进行统一修饰，单一元素也可以选择多个不同class类修饰自己，书写格式为.class类名{}
class类选择器权重为10
.colorred{
color: red;
}
.bg{
background-color: blueviolet;
}
<ol>
<li class="colorred bg">第一个</li>
<li class="colorred">第三个</li>
<li class="bg">第四个</li>
<li class="colorred">第五个</li>
<li class="bg">第七个</li>
</ol>
通配符选择器
目前还不需要了解，书写格式为*{}，目前只用来去除网页空白间隙
通配符选择器权重比0大，比1小
*{
margin: 0;
padding: 0;
}
上例中的代码是用来去除页面空白间隙的，一般写在CSS最开头，至于属性值margin``padding什么意思会在后文解释
包含选择器
也叫后代选择器，用于选择一个元素中的后代元素，书写格式父元素 子元素{}
包含选择器权重为父元素和子元素的权重之和
ul li{
color: blue;
}
上例表示选择ul中的所有li元素
群组选择器
用来设置多个元素有相同样式，类似于class，书写格式为元素1,元素2,元素3{}
群组选择器权重各自看各自，以逗号为分割
#box b,i,s{
background-color: crimson;
}
上例代表选中所有的i，s标签以及id为box的元素中的所有b标签
可视为如下格式
#box b{
background-color: crimson;
}
i{
background-color: crimson;
}
s{
background-color: crimson;
}
伪类选择器
一共四种
:link 超链接初始状态:visited 超链接被点击后的状态:hover 鼠标滑过的状态:active 鼠标点击超链接时的状态
其中:link、:visited、:active只能用于超链接
:hover可以用在任何元素，设置鼠标滑过时的状态
四种的权重都为10，要配合:前的权重加和
a:link{
color: aqua;
}
a:visited{
color: brown;
}
a:hover{
color: chartreuse;
}
a:active{
color: yellow;
}
li:hover{
color: chartreuse;
background-color: violet;
}
上例中a是元素选择器权重为1，:link权重为10，故总权重为11
!important
慎用，权重为1000
CSS常见核心属性
这里仅是初步了解，知道即可，后面会对属性进行详细的介绍color文字颜色background-color背景颜色font-size文字大小width宽度height高度margin外边距
命名规范
- 不可以为中文
- 不可以为纯数字或数字开头
- 不可以为怪异符号
- 建议英文小写字母开头,可以结合数字、下划线等组合，比如colorRed、font12、head_left
Day3—CSS核心属性
文字属性
文字大小
设置文字大小使用font-size: 像素;属性
属性值为像素值数字+像素单位px，默认情况下文字大小为16px
文字大小只能设置偶数，不能设置奇数
也可以使用pt来作为单位，3pt = 4px
font-size: 40px;
font-size: 30pt;
上例中两者大小一样
文字颜色
与其他文字属性不同，直接使用color: 颜色;属性来设置
属性值可以填写颜色的英文单词，也可以填写颜色的十六进制码，格式为#+六位十六进制码，例如#FFFFFF
六位十六进制码中，前两位代表红色，中间两位代表绿色，最后两位代表蓝色，范围从0~F，颜色依次加深，例如#FF0000就代表红色，此外，格式为#AABBCC型可以简写为#ABC
color: red;
color: #0ff0fb;
color: #000000;
文字粗细
文字加粗使用font-weight: ;属性设置，此属性控制的是文字宽度，因此不止能变粗也可以变细
需要加粗文字时属性值可以设置为bold/bolder也可以设置为600/700/800/900，他们之间的区别肉眼是看不出来的
这个属性最重要的用法是将一些默认加粗的标签取消加粗，比如标题h1就默认加粗，可以使用此属性去除，此时属性值应设置为normal/500/400，他们是等价的
而文字变细是不常用的用法，此时属性值可以设置为lighter/100/200/300，他们是等价的
font-weight: 900;
/* 数字没有单位 */
/* 取消加粗 */
font-weight: normal;
font-weight: lighter;
文字倾斜
文字倾斜使用font-style: ;属性
属性值可以设置为italic/oblique，两者没有区别
和上一属性一样，此属性最常用的用法是将一些默认倾斜的标签取消倾斜，此时属性值设置为normal
font-style: italic;
/* 取消倾斜 */
font-style: normal;
文字字体
使用font-family: "字体";属性来设置
属性值直接填入字体名称，需要使用单引号或者双引号包裹，可以同时填入多个字体，需要使用逗号隔开，默认从第一个字体生效，在浏览器缺失相应字体的情况下依次顺延，在只有单个字体且是名称英文的情况下可以不使用引号
font-family:"楷体","宋体","Times New Roman";
行高
使用line-height: 像素;属性设置，属性值需设置为像素值
在单行文本情况下，设置行高=高度值可以实现垂直居中的效果
可以通过设置属性为line-height: 1;来消除页面的默认行高，他代表的是设置行高为字体大小的一倍，一般直接在CSS开头设置body样式
body{
line-height: 1;
}
属性简写
以上属性除了颜色属性，都可以同时设置，一共三种格式，但使用极少，了解即可
/* font:加粗 倾斜 文字大小/行高 "字体"; */
/* font:文字大小/行高 "字体"; */
/* font:文字大小 "字体"; */
font:italic bold 40px/100px "宋体";
文本属性
首行缩进
使用text-indent: 数值;属性
属性值可以设置为像素值，但最常用的是设置为数字+em，em是一个单位，1em永远代表一个文字大小且随当前文字像素变化
text-indent: 2em;
文本下划线
不管是下划线，上划线，中划线，都使用text-decoration: ;属性设置
下划线属性值设置为underline
上划线属性值设置为overline
中划线属性值设置为line-through
去除样式属性值设置为none，常用于去除超链接的下划线
文本水平居中
这个属性只能设置给独占一行的元素，也就是前文提到的常用标签1中的元素
使用属性text-align: 位置;来设置文本位置，文本默认为居左，可以设置为left默认居左、right表示居右、center表示居中
还有设置为justify表示水平居两端，主要用于多行英文
检索英文大小写
text-transform: ;属性，一般用不到，了解即可
属性值可以设置为lowercase表示英文全部小写、uppercase表示英文全部大写、capitalize表示单词首字母大写其余不变
还有一种更少用到的属性font-variant: small-caps;，表示将小写字母变成缩小的大写字母
列表属性
去除列表样式
格式为list-style: none;，这是列表属性中最常用的，需要记住
指定小圆圈样式
属性为list-style-type: 样式;，类似于无序列表中的type属性，默认为disc实心圆
属性值可以设置为disc实心圆、circle空心圆、square方块、none去除样式、decimal阿拉伯数字、lower-roman小写罗马、upper-alpha大写ABC等等…
指定小圆圈位置
属性为list-style-position: 位置;
属性值默认为outside外面，可以设置为inside里面
指定图片替换圆圈样式
使用list-style-image: url(图片路径);来设置，图片路径和前面学的插入图片等一样
背景属性
背景颜色
使用background-color: 颜色;来设置
属性值和上文提到的文字颜色一样，可以使用英文，也可以使用十六进制
设置背景图和平铺
背景除了可以设置各种颜色还可以设置成图片，属性为background-image: url(图片路径);
在我们将背景设置为图片后会发现图片重复的平铺在了元素内，此时我们就需要使用属性background-repeat: ;来设置是否平铺，属性值默认为repeat平铺，可以更改为repeat-x横向平铺、repeat-y纵向平铺或者no-repeat不平铺
背景图位置
如果我们需要背景图的位置发生变化时可以使用属性background-position: 水平位置 竖直位置;来设置，这个属性可以拆分开单独书写为background-position-x: 水平位置;和background-position-y: 竖直位置;
| 属性值 | 作用 | 限制 |
|---|---|---|
| left | 左 | 仅水平 |
| center | 中 | 不限 |
| right | 右 | 仅水平 |
| top | 上 | 仅竖直 |
| bottom | 下 | 仅竖直 |
| 像素值px | 看属性值位置 | 不限 |
| 百分比% | 看属性值位置 | 不限 |
在使用像素值或者百分比时，固定将第一个数值识别为水平位置
除了可以调整位置背景图还可以进行固定，使用属性background-attachment: fixed;，此时背景图不是以元素为参照固定的，而是根据浏览器固定的，如果我们对页面放大或者缩小会发现背景图相对于浏览器的位置上是始终不变的，在我们使用背景图固定时是不设置div的宽度的，此时div就是占满一行，图片会相对浏览器居中
背景属性的简写
上述背景属性中除了背景图固定，其余属性都可以合并在一个属性内background: ;，具体格式为
background: 背景颜色 url(图片路径) 是否平铺 水平位置 竖直位置;
background: red url(../images/0.jpg) no-repeat right bottom;
属性值位置可以适当调整，但在背景图位置设置为像素值或者百分比时默认前一个数值为水平位置
图片属性
这个属性只对行内元素、行内块元素和表格单元格元素生效，对于其他标签失效
img标签的几个特点
- 图片底边默认是有3px的空白缝隙
- 图片虽然属于一行显示的标签 ，但可以直接设置宽高以及内填充、边框和外边距
- 图片有自己的宽高比，只设置具体宽度或高度任一项 ，另一项高度或宽度会自动等比缩放
图片与其他元素对齐方式
图片与其他元素的对齐方式有四种，使用属性vertical-align: 位置;设置
默认属性值为baseline，代表着基于图片底端3px区域与其他元素对齐，这也是图片底端默认会有3px空白的主要原因
属性值可以设置为bottom``middle``top，分别代表着底端、中间与顶端
图片如何垂直水平居中于一个div
首先通过上文学习我们知道想让文本水平居中我们可以使用text-align: center;，然后垂直位置使用行高设置line-height: div高度值;，这样图片就垂直居中了，但此时我们会发现img图片并非居中，是因为图片默认以底边3px为对齐点，因此使用vertical-align: middle;来设置图片对齐点为中心，同时注意此属性只对img标签生效
.box{
width: 400px;
height: 1400px;
background-color: violet;
text-align: center;
line-height: 1400px;
}
img{
vertical-align: middle;
}
Day4—盒模型和浮动
盒模型广泛用于页面布局等，是由中心内容区、内填充padding、边框border和外边距margin组成的，同时内填充和边框是属于元素内的一部分，他们变大会导致元素也变大，也就是在一个宽高200px的元素在四周设置10px的内填充padding或者边框border之后元素尺寸会变成220px，而外边距margin变大并不会改变元素大小，元素仍是200px
形象一点比喻，元素就是整个快递包装，内容区就是要快递的东西，内填充padding就是防止东西磕坏的泡沫板，边框border就是快递盒本身，在内容区不变的情况下，内填充增大也就是增加泡沫板的厚度，边框增大就是快递盒厚度增加，这两者无疑都会导致最后的快递体积增大，而外边距是快递外的东西，他只会让别人无法靠近元素，但不会增大元素体积
需要注意的是，只有块状元素也就是常用标签1中的标签可以设置上下左右的内填充padding、边框border和外边距margin，而行内元素也就是常用标签2中的标签是只能设置左右而无法设置上下padding、border和margin的，除了个别特别的，比如img、input和button，强行设置上下属性会发现标签之间发生了重叠
内填充padding
如上图所示，内填充padding是内容区(蓝色部分)到边框border的距离，在设置了内填充的情况下可以做到让两个元素的内容之间产生空隙，但他的增大会导致元素本身的大小增大，原理已经在上文讲过了，因此如果我们设置了边框颜色我们会发现两个元素的边框仍然是紧贴着的，仅仅是内容之间分开了。就像两个快递挨着摆放但因为有泡沫板隔挡导致内容分开
| 属性格式 | 属性值 | 作用 |
|---|---|---|
padding-top:像素值; |
像素 | 顶部内填充 |
padding-right:像素值; |
像素 | 右侧内填充 |
padding-bottom:像素值; |
像素 | 底部内填充 |
padding-left:像素值; |
像素 | 左侧内填充 |
padding:像素值; |
像素 | 简写，上下左右均相同 |
padding:上下 左右; |
像素 | 简写，上下相同，左右相同 |
padding: 上 左右 下; |
像素 | 简写，上下不同，左右相同 |
padding:上 右 下 左 ; |
像素 | 简写，上下左右均不同 |
padding有四种简写方式，也就是同时设置多个方向，但并不常用，至于上下相同左右不同则没有简写，原因从第四种简写中能看出来，padding对于元素值的识别顺序是上右下左，因此无法做到在下元素值空着的情况下设置左侧元素值
行内元素无法设置上下padding，会导致标签之间的位置发生侵占
padding不支持负值
边框border
如盒模型所示，边框border本身也属于元素内的一部分，他的外侧就是元素的边界，因此边框的粗细同样会影响到元素大小，且和padding一样行内元素无法设置上下边框
边框border常用简写来同时设置多个方向，格式为border: 边框大小 边框线型 边框颜色;，其中边框大小就是元素值，边框线性有solid实线、dotted点状线、dashed虚线、double双实线，边框颜色和上文提到的颜色设置方式一样
除了简写，边框border可以单独设置各个方向，格式为上方border-top: 边框大小 边框线型 边框颜色;、下方border-bottom: ;以及左右border-left和border-right，也可以单独设置粗细border-width: 像素值;、线型border-style: 线型;、颜色border-color:颜色;，还可以两种结合，单独设置一个边的一个元素，如左侧颜色border-left-color: 颜色;
当我们直接设置border: 0;时，意味着将边框去掉了，这一点在一些自带边框的标签上很有用，比如input文本框
在我们给四个方向的边框设置不同颜色时我们会发现，在边框交汇的地方是类似于画框那样的斜角，因此我们可以将元素大小设置为0，同时将其他三条边框的颜色设置为透明，此时我们会发现我们画出了一个三角形
.box2{
width: 0;
height: 0;
border: 50px solid transparent;
/* transparent是透明色 */
border-bottom-color:red;
}
外边距margin
如盒模型所示，外边距margin不属于元素内的一部分，因此它的大小并不会影响到元素大小，仅仅是使元素外围产生与其他元素相隔的边距，与padding和border一样行内元素无法设置上下边距
margin常常是单独设置某一边，格式为上边距margin-top: 元素值;、下边距margin-bottom、左边距margin-left和右边距margin-right，margin的简写规则和padding是一样的，因为margin也是上右下左的解析顺序
margin有一个特性是对两个左右摆放的元素分别设置边距时，他们两个之间的距离是各自边距之和，而如果是上下摆放的元素，他们的边距会重合距离是两个边距中最大的那个
如果我们有一个div元素，里面包裹一个p标签，在我们给p设置margin-top时会发现div元素和p标签一同移动了，这个问题的原因是父元素和子元素共用了一条边，因此第一种解决方案是给父元素设置padding-top:1px;，第二种解决方案是给父元素设置border-top:1px solid transparent;，这两种解决方案原理是相同的，缺点是都会撑大元素，还有一种最常用也比较重要的解决方案是设置overflow:hidden;，原理后期会讲
margin支持负值，当设置负值时，元素会向相反的方向移动，在布局中较为常用
盒模型应用
通过学习我们也能知道前文提到的在通配符选择器中设置的margin: 0;和padding: 0;是什么意思了，他代表着外边距和内填充都设置为0，这就是盒模型在去除页面空隙上的应用
上文还提到过有宽度的div水平居中浏览器使用margin:0 auto;，他的意思是上下外边距设置为0，左右外边距自动调整，左右都是自动不就居中浏览器了吗
在我们前文提到的input文本框在我们点击的时候会出现一个聚焦框，通过设置outline: 0我们可以去掉聚焦框
浮动float
在我们设置块状元素时会发现他们都是独占一行从上而下的排列的，这被称为文档流，因此我们想让他们在一行显示就可以使用浮动
在一般使用中我们常使用两种浮动，分别是左浮float: left;和右浮float: right;，前者一般用来让块状元素在一行显示，而后者是用来让元素出现在右侧显示的
同时我们要注意，在我们设置浮动后，margin:0 auto;会失效，以及img设置浮动后，他专属的vertical-align失效，因此我们在给元素设置margin:0 auto;后不允许再设置浮动
