html
标签
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
1.加了标题的文字会变粗，字体变大
2.独占一行
段落和换行标签
<p>段落标签</p>
可以把文档分为若干段
文本格式化标签
<strong>加粗</strong> <b>加粗</b>
<em>倾斜</em> <i>倾斜</i>
<del>删除线</del> <s>删除线</s>
<ins>下划线</ins> <u>下划线</u>
常用标签
div和span标签
<div></div> <span></span>
1.两者都没有语义，他们就是一个盒子，用来装内容
2.一行只能放一个
3.一行能放多个，小盒子
图像标签
<img scr="图像URL" />
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须填写 |
| alt | 文本 | 图像不能显示时代替图片的文本 |
| title | 文本 | 提示文本，鼠标放到图片上显示文本 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像的边框粗细 |
1.图像标签可以有多个属性，必须写在标签名的后面
2.属性之间不分先后顺序，以空格分开
超链接标签
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 指定链接目标的URL，必须填写 |
| target | 指定打开方式，self为默认值，直接在本页面打开，blank在新页面打开 |
链接分类
1.外部链接：
<a href="https://www.baidu.com">百度</a>
必须要加上https
2.内部链接：
<a href="index.html">首页</a>
网站内部之间的页面相互链接
3.空链接
<a href="#">1</a>
用于没有确定连接目标时
4.下载链接：如果href里面的地址是一个文件或压缩包，则会下载这个文件
5.网页中的文本，图像，表格，音频等都可以添加超链接
6.锚点链接
<h3 id="two">第二集</h3>
<a href="#two">第二集</a>
点击这个链接可以快速定位到页面的某个位置
- 要在目标位置的标签中添加id属性
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ± | 正负号 | ± |
| * | 乘号 | × |
| / | 除号 | ÷ |
| 摄氏度 | ° | |
| 二次方 | ² |
- 代码后面都要加；号
表格
<table>
<tr>
<th>1</th>
</tr>
<tr>
<td>2</td>
</tr>
</table>
语法
1.
是用于定义表格的标签2.用于定义表格中的行
3.用于定义表格的单元格
- 表头单元格 - 包含表头信息（由 th 元素创建）
- 标准单元格 - 包含数据（由 td 元素创建）
属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 规定表格元素对齐方式 |
| border | 1或” “ | 规定是否有边框，默认为” “，表示无边框 |
| cellpadding | 像素值 | 边框与内容之间的距离，默认为1像素 |
| cellspacing | 像素值 | 单元格之间的距离，默认为2像素 |
| width | 像素值 | 规定表格宽度 |
合并单元格
1.跨行合并：rowspan=“合并单元格的个数”（将某行与其相邻行的单元格合并）
2.跨列合并：colspan=“合并单元格的个数”（将某列与其相邻列的单元格合并）
列表
| 标签名 | 定义 | 说明 |
|---|---|---|
|
| 无序标签 | 里面只能包含
|
|
| 有序标签 | 里面只能包含
|
|
| 自定义标签 | 里面只能包含
|
- dt在第一行使用，dd在其下面
表单
<form>
<input type="text">
</form>
input表单元素
属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | ||
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 定义input元素的值 |
| checked | checked | 定义此input元素自动选中 |
| maxlength | 正整数 | 规定输入字段中的字符串的最大长度 |
- name和value是每个表单元素都有的属性值，主要给后台人员使用
- name表单元素的名字要求：单选按钮和复选框要有相同的name值
type属性
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段字符被遮掩 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，清除表单数据 |
| submit | 定义提交按钮，将表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可输入文本，默认宽度：20字符 |
select表单元素
<select>
<option>选项一</option>
<option>选项二</option>
</select>
- 在中定义selected=”selected“时，当前选项为默认选中项
textarea表单元素
<textarea rows="3" clos="20">
文本内容
</textarea>
- 通过textarea可以创建多行文本输入框
- cols=”每行的字符数“ ， rows=”显示列数“
label标签
<label for="sex">男</label>
<input type="radio" id="sex" />
css
- css由两部分构成：选择器和一条或多条申明
- css写在head中的style中,对body里的标签进行申明
<head>
<style>
p {
color: red;
font-size: 12px; 文字大小（像素）
}
</style>
</head>
<body>
<p>666</p>
</body>
选择器
选择器的作用
选择器就是根据不同的需求把不同的标签选出来，简单来说就是选择标签
基础选择器
标签选择器
标签选择器是指用html标签名称作为选择器，按标签名称分类。为页面中某一类标签指定统一的CSS样式
作用
把某一类标签全部选出来
优点
能快速为页面中同一类的标签统一设置样式
缺点
不能设置差异化样式，只能选择全部的当前标签
类选择器
可以单独选择一个或几个标签
.类名(自己取) {
属性1: 属性值;
...
}
例如
.red {
color: red;
}
<div class="red">变红色</div>
定义了一个类后，在使用时需要用class属性来调用
样式点(.)定义 结构类(class)调用 可多次调用
类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。
- 多类名之间必须用空格分开
.box {
width: 100px;
height: 100px;
}
.red {
background: red;
}
<div class="box red">0.0</div>
目的：
- 把一些标签元素相同的样式（共同的部分）放到一个类里
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 可以节省CSS代码，统一修改也十分方便
id选择器
id选择器可以为标有特点id的HTML元素指点特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
#id名 {
属于1： 属性值1；
...
}
<div id="id名">0.0</div>
样式#定义 结构id调用 只能调用一次 别人切勿使用
id选择器和类选择器的区别
- 类选择器好比人的名字，一个人可以有多个名字，一个名字也可以被多个人使用
- id选择器好比人的身份证号，全中国是唯一的，不能重复
- 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JS搭配使用
通配符选择器
在CSS中，统配符选择器使用“*”来定义，它表示选取页面中所有元素（标签）
* {
属性1： 属性名1；
...
}
- 不需要取名字，只要一个*
- 不需要被调用，自动就给所有的元素使用
- 特殊情况下才使用
清除所有元素标签的内外边距：
* {
margin: 0;
padding: 0;
}
复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
- 复合选择器可以更准确，更高效的选择目标元素
- 复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素
元素1 元素2 {样式申明}
例如：
ul li {样式申明} 选择ul里的所有li标签
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子也可以是孙子，只要是元素1的后代即可
子选择器
子选择器只能选择作为某元素的最近一级子元素
元素1>元素2{样式声明}
例如：
div>p {样式声明} 选择div里所有最近一级p标签
- 元素1和元素2之间用>隔开
- 元素2必须是子级
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
元素1，元素2 {申明样式}
例如：
ul,div，.way {color: red;} 选择ul和div标签并且定义了way这个类
<p class="way">0.0</p>
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
伪类选择器用：表示， 比如 ：hover
伪类选择器有链接伪类，结构伪类等
链接伪类
a:link 表示所有未被访问的链接
a:visited 表示所有已被访问的链接
a:hover 表示鼠标指针位于其上的链接
a:active 鼠标按下还未松开的链接
a:link {
color: black;
}
a:visited {
color: red;
}
<a href="#">0.0</a>
注意事项：
- 必须按照顺序声明，link，visited，hover，active
- a链接在浏览器中具有默认的样式，在对a的样式修改时要单独指定样式，不能使用body修改
focus伪类选择器
：focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下input类表单元素才能获取
input:focus {
background-color: red;
}
CSS字体属性
字体系列
css用font-family属性定义文本的字体系列
- 各种字体之间必须使用逗号隔开
- 一般情况下，如果有多个空格隔开的单词组成的字体，加引号
body(font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";)
字体大小
css使用font-size属性定义字体大小
p {
font-size: 20px;
}
p {
font-size: 20px/30px;(后面的/30px是定义行高)
相当于：
font-size:20px;
line-height:30px;
}
- px(像素)大小是网页的最常用的单位
- 不同浏览器默认显示的字体大小不一致，谷歌为16px，我们尽量给一个明确的大小值，不要默认大小
字体粗细
css使用font-weight属性定义字体粗细
p {
font-weight: bold;
}
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗） |
| 100-900 | 400相当于normal，700相当于bold，数字后不跟单位 |
字体样式
css使用font-style属性定义字体样式
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 显示斜体的字体样式 |
可以将倾斜的字体改为不倾斜
字体复合属性
可以把上面的属性综合来写，节约代码
body {
font: font-style font-weight font-size font-family;
}
例如：
body {
font: italic 700 20px "Microsoft Yahei";
}
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性间用空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用
CSS文本属性
cssText（文本）属性可以定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等
文本颜色
color属性用于定义文本的颜色
div {
color: red;
color: #ff0000;
color: rgb(255,0,0)
}
| 表示方式 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue等 |
| 十六进制 | #FF0000，#FF6600等 |
| RGB代码 | rgb（255,0,0）或rgb（100%,0%,0%） |
对齐文本
text-align属性用于设置元素文本内容的水平对齐方式
div {
text-align: 属性值;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
装饰文本
text-decoration属性规定添加到文本的修饰
div {
text-docoration: underline;
}
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
div {
text-indent: 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，可以为负值
div {
text-indent: 2em;
}
em是一个相对单位，就是当前元素1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
行间距
line-height属性用于设置行间距离（行高），可以控制行与行之间的距离
p {
line-height: 26px;
}
行间距=文字高度+上间距+下间距
上间距=下间距
CSS引入方式
按照css样式书写位置，css样式表可以分为三大类：
- 内部样式表（嵌入式）
- 行内样式表（行内式）
- 外部样式表（链接式）
内部样式表
内部样式表是写到html页面内部，时将所有的css代码抽取出来放在
- style标签理论上可以放在HTML文档的任何地方，但一般会放在文档的标签中
- 通过这种方式，可以方便控制当前整个页面中的元素样式设计
- 代码结构清晰，但是并没有实现结构与样式完全分离
行内样式表
行内样式表是在元素标签内部的style属性中设置css样式，适合于修改简单样式
<div style="color: red; font-size: 12px;">
0.0
</div>
- style其实就是标签的属性
- 在双引号中间，写法要符合css规范
- 可以控制当前的标签设置样式
外部样式表
样式单独写在css文件中，之后把css文件引入到HTML页面中使用
引入外部样式表分为两步：
- 新建一个后缀名为css的样式文件，把所有的css代码都放入此文件中
- 在HTML页面中，使用标签引入这个文件
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
Emmet语法
可以快速生成HTML结构
- 生成标签：直接输入标签名再按tab 比如 输入div后按tab，就可生成
- 如果想要生成多个相同的标签 加上*就可以了 比如 div * 3（没有空格）就可以生成3个div
- 如果有父子级关系的标签，可以用> 比如ul>li
- 如果有兄弟关系的标签，用+ 比如 div+p
- 如果生成带有类名或者id的直接用 标签名.类名 标签名#id
div.demo加tab 可得
<div class="demo"></div>
div#two加tab 可得
<div id="two"></div>
6.如果生成的div类名是有顺序的，可以用自增符号$
div.deo$*5 加tab 可得
<div class="deo1"></div>
<div class="deo2"></div>
<div class="deo3"></div>
<div class="deo4"></div>
<div class="deo5"></div>
7.如果想要在生成的标签内部写内容可以用{}表示
div{111} 加tab 可得
<div>111</div>
CSS的元素显示模式
元素显示模式就是元素以什么方式进行显示，比如div自己占一行，比如一行可以放多个span
HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有：h1~h6，p，div，ul，ol，li等
块元素的特点：
- 自己独占一行
- 高度，宽度，外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器，盒子，里面可以放行内元素或块级元素
注意：
- 文字类的元素内不能使用块级元素
- p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
- 同理h1~h6都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有：a，strong，b，em，i，del，s，ins，u，span等
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高，宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签img，input，td，他们同时具有块元素和行内元素的特点
特点：
- 和相邻行内元素在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度，行高，外边距和内边距都可以控制（块元素特点）
元素显示模式转化
特殊情况下，我们需要元素模式的转换。
也就是一个模式的元素需要另外一种模式的特性
比如：想要增加a标签的触发范围，a标签为行内元素，无法设置高宽，想要增加触发范围，就要让a拥有块元素的特点，才能对其设置高宽，从而增加a标签的触发范围
转换为块元素：display：block
转换为行内元素：display：inline
转换为行内块：display：inline-block
a {
width： 100px；
display： block；
}
<a href="#">0.0</a>
使单行元素垂直居中
css中没有直接的代码可以实现，但我们可以使用一个小技巧
解决方法： 让文字的行高等于盒子的高度
div {
height: 40px;
line-height: 40px;
}
<div>我要垂直居中</div>
CSS的背景
通过CSS背景属性，可以给页面元素添加背景样式
背景颜色
background-color属性定义了元素的背景颜色
background-color: 颜色值；
一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色
背景图片
background-image属性描述了元素的背景图片，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
background-image: none
background-image: url(使用绝对或相对地址指定背景图像)
| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认） |
| url | 使用绝对或相对地址指定背景图像 |
背景图片大小
background-size:宽度 高度；
| 取值 | 含义 |
|---|---|
| 数字+px | 自己设置大小 |
| 百分比 | 相当于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图案在横向和纵向上平铺（默认） |
| no-repeat | 背景图案不平铺 |
| repeat-x | 背景图案在横向上平铺 |
| repeat-y | 背景图案在纵向上平铺 |
背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一样
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
参数是精确单位
- 如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定了一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，那么第一个肯定是x坐标，第二个一定是y坐标
背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者附着页面的其他部分滚动
background-attachment: scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background：balck url no-repeat fixed center top;
背景色半透明
background: rgba(0,0,0,0.3)；
- 最后一个参数是alpha透明度，取值范围在0~1之间
- 我们习惯把0.3的0省略，写为background: rgba(0,0,0,.3)；
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS的三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式
层叠性主要解决样式冲突的问题
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
div {
color: red;
font-size: 18px;
}
div {
color: blue;
}
这里只有颜色样式重叠，所以颜色样式取离结构近的
字体样式并没有重叠，所以取上面的
继承性
子标签会继承父标签的某些样式，如：文本颜色和字号
- 恰当的使用继承可以简化代码
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color）
行高的继承
body {
font: 12px/1.5
}
-
行高可以跟单位也可以不跟单位
-
不跟单位的话：就是指字体大小的x倍（这里为1.5）
-
如果子元素没有设置行高，则会继承父元素的行高1.5
优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器 伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=“ ” | 1，0，0，0 |
| ！important重要的 | 无穷大 |
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
- div ul li ---------> 0,0,0,3
- .nav ul li ---------> 0,0,1,2
- a:hover ---------> 0,0,1,1
- .nav a ---------> 0,0,1,1
盒子模型
盒子模型的组成
所谓盒子模型就是把html页面中的布局元素看作是一个矩形的盒子，也就是盛装内容的容器
它包括：边框，外边距（盒子的边框之间的距离），内边距（边框和内容之间的距离）和实际内容
边框
border可以设置元素的边框
边框由三部分组成：边框宽度（ border-width），边框样式（border-style），边框颜色（border-color）
border: border-width || border-style || border-color
border: 1px soild red; 没有顺序
边框分开写发：
border-top：1px soild red； 只设定上边框
border-style
| 参数 | 含义 |
|---|---|
| none | 无边框 |
| hidden | 隐藏边框 |
| dotted | 点线 |
| dashed | 虚线 |
| soild | 实线 |
| double | 双线，两条线之间的距离等于border-width的值 |
注意：
- 如果提供四个参数，将按照上-右-下-左的顺序作用于四个边框
- 如果只提供一个参数，将作用于四条边框
- 如果只提供两个参数，第一个用于上-下，第二个用于左-右
- 如果提供三个参数，第一个用于上，第二个用于左-右，第三个用于下
- 要使用该属性，必须先设定对象的height或width属性
border-collapse
border-collapse属性控制描绘边框的方式，它控制相邻单元格的边框
border-collapse:collapse;
- collapse是合并的意思
- border-collapse:collapse;表示相邻的边框合并在一起
注意
边框会额外增加盒子的实际大小
即盒子的实际大小为边框的大小加上盒子的大小
内边距
padding属性用于设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| 值的个数 | 表达意思 |
|---|---|
| padding：5px； | 1个值，代表上下左右的内边距都为5 |
| padding：5px 10px； | 2个值，代表上下的内边距为5，左右的内边距为10 |
| padding：5px 10px 20px； | 3个值，代表上为5，左右为10，下为20 |
| padding：5px 10px 20px 30px； | 4个值，上为5，右为10，下为20，左为30，顺时针 |
- padding会影响盒子的实际大小
- 如果盒子已经有宽度和高度，再指定内边距，会撑大盒子
- 即，如果要盒子和效果图大小一致，则width/height要减去多出来的内边距
- 但如果盒子本身没有指定width/height属性，此时padding不会撑大盒子
外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
- margin简写的方式（值的个数）代表的意思和padding完全一致
外边距的应用
外边距可以让块级盒子水平居中，但要满足以下条件：
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为auto
常见的写法，以下三种都可以：
- margin-left：auto； margin-right：auto；
- margin：auto；
- margin：0 auto；
注意：
以上方法是让块级元素水平居中，而块级元素中的行内元素或行内块元素并没有居中
要行内元素或行内块元素居中，只要给其父元素添加text-align：center即可
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
即：对于两个嵌套关系（父子级）的块元素，父元素和子元素有上边距，此时父元素会塌陷相对较大的外边距值（即父元素的外边距变为了父元素和子元素外边距中较大的值），而子元素没有实现上外边距效果。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow：hidden
清除内边距
网页元素很多都带有默认的内外边距，且浏览器不同默认值也不同，所以我们在布局前，要先清楚网页元素的内外边距
* {
padding: 0; 清除内边距
margin: 0; 清除外边距
}
注意：
行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距
但转换为块级和行内块元素就可以了
圆角边框
border-radius属性用于设置元素的外边框圆角
border-radius: length;
- 参数值可以是数值也可以是百分比的形式
- 比如：将一个正方形设置成一个圆，length写为50%即可
- 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角
- 分开写：border-top-left-radius（bottom，right）
阴影
盒子阴影
box-shadow属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必填，水平阴影位置，允许为负值 |
| v-shadow | 必填，垂直阴影位置，允许为负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影（outset）改为内部阴影 |
注意：
- 默认是外部阴影（outset），但是不能写这个单词，否则会导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列
文字阴影
text-shadow属性为文本添加阴影
box-shadow: h-shadow v-shadow blur color ;
| 值 | 描述 |
|---|---|
| h-shadow | 必填，水平阴影位置，允许为负值 |
| v-shadow | 必填，垂直阴影位置，允许为负值 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
浮动
float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及另一个浮动框的边缘
选择器 {float：属性值；}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动特性
- 脱离标准普通流的控制，移动到指定位置（俗称脱标）
- 浮动的盒子不再保留原先的位置
- 设置了浮动的元素会漂浮在普通的盒子上面，不占位置
- 如果多个盒子都设置了浮动，则它们会相互贴靠在一起（不会有缝隙），如果父级宽度装不下这些盒子，多出的会另起一行
- 任何元素都可以浮动，浮动的元素会具有行内块元素的特性
浮动的使用
为了约束浮动元素的位置，我们一般：
先用标准流的父元素排列上下位置，之后内部子元素用浮动排列左右位置
清除浮动
在父盒子不方便给高度时，子盒子浮动又不占有位置，最后会使得父盒子的高度为0
就会影响网页的布局，所以要清除浮动
方法
额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；（不推荐）
直接闭合浮动
选择器 {clear： 属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左浮动的影响） |
| right | 不允许右侧有浮动元素（清除右浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
.clear{
clear:both;
}
<div class="clear">额外标签法</div>
-
优点：书写方便，简单易懂
-
缺点：添加许多无意义的标签，结构化较差
-
注意：要求新的空标签必须是块级元素
父级添加overflow
可以给父级元素添加overflow属性，将其属性值设置为hidden，auto或scroll
.fahter{
overflow: hidden;(建议使用hidden)
}
- 优点：代码简洁
- 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
after伪元素法
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
直接使用，对要清除浮动的直接加上class=“clearfix”就行了
双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
直接使用，对要清除浮动的直接加上class=“clearfix”就行了
css属性书写顺序
1.定位属性：position display float left top right bottom overflow clear z-index
2.自身属性：width height padding border margin background
3.文字样式：font-family font-size font-style font-weight font-varient color
4.文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5.css3中新增属性：content box-shadow border-radius transform……
定位
定位就是将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
定位模式：指定元素在文档中的定位方式
边偏移：决定了该元素的最终位置
定位和浮动的区别：
浮动可以让多个块级盒子一行没有缝隙排列显示，常用于横向排列盒子
定位则是可以让盒子自由的出现在某个盒子内移动位置或者固定在屏幕中的的某个位置，可以压住其他盒子
边偏移
边偏移就是定位盒子移动到的最终位置
| 属性 | 示例 | 描述 |
|---|---|---|
| top | top：80px | 顶端偏移量，元素相对于其父元素上边线的距离 |
| bottom | bottom：80px | 底部偏移量，元素相对于其父元素下边线的距离 |
| left | left：80px | 左侧偏移量，元素相对于其父元素左边线的距离 |
| right | right：80px | 右侧偏移量，元素相对于其父元素右边线的距离 |
定位模式
定位模式由css的position属性来设置
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
静态定位static
选择器 {position： static；}
- 静态定位按照标准流特性摆放位置，它没有边偏离
- 很少用到
相对定位relative
相对定位是元素在移动位置的时候，是相对它原来的位置来说的
选择器 {position： relative；}
特点：
- 他是相对自己原来的位置移动的
- 原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它（不脱标，继续保留原来位置）
绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
选择器 {position： absolute；}
特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置（脱标）
子绝父相
意思就是：子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何地方，不会影响其它盒子
- 父盒子需要加定位，来限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位
总结：
父级需要占有位置，所以用相对定位。子盒子不需要占位置，用绝对定位
固定定位fixed
固定定位是元素固定于浏览器的可视区的位置
比如：在浏览器页面滚动时元素位置不会改变
选择器 {position： fixed；}
特点：
- 以浏览器的可视窗口为参照点
- 跟父级元素没有任何关系
- 不随滚动条滚动
- 不占有原先的位置
固定定位也是脱标得到，可以看成是特殊的绝对定位
小技巧：固定在版心的右侧
- 让固定定位的盒子left：50%，走到浏览器可视区域的一半位置
- 让固定定位的盒子margin-left：版心宽度的一半，夺走版心宽度的一半
粘性定位sticky
粘性定位可是看为是相对定位和固定定位的混合
选择器 {position： sticky；top: 10px;}
特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 会随滚动而变化，直到与浏览器的距离达到指定值开始固定
- 就比如上面这个例子：开始会随滚动而滚动，当于浏览器上端距离10px时固定
- 占有原先的位置（相对定位特点）
- 必须加top，left，right，bottom中的一个才有效
定位叠放次序z-index
使用定位时，可能会出现盒子重叠的情况
此时，可以用z-index来控制盒子的前后次序（z轴）
选择器 {z-index：1；}
- 数值可以为正整数，负整数或0，默认为auto，数值越大盒子越靠上
- 如果属性值相同，则按书写顺序，后来者居上
- 数字后不能加单位
- 只有定位的盒子才有z-index属性
让绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0 auto 水平居中，要用以下方法：
- left：50%：让盒子的左侧移动到父级元素的水平中心位置
- margin-left：-自身宽度的一半：让盒子向左移动自身宽度的一半
定位的特殊特性
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
- 块级元素添加绝对定位或固定定位，如果不给宽度或高度，默认大小为内容大小
脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位的元素都不会触发外边距合并的问题
绝对定位（固定定位）会完全压住盒子
浮动元素只会压住他下面的标准流的盒子，但不会压住这些盒子里的文字，图片
但绝对定位（固定定位）会压住下面标准流所有的内容
- 浮动之所以不会压住文字，是因为浮动最初产生的目的就是做文字环绕效果
元素的显示和隐藏
类似一些网页的广告，当我们关闭就不见了，但再次刷新又会出现
本质：让一个元素在页面中隐藏或者显示出来
- display显示隐藏元素，但是不保留位置
- visibility显示隐藏元素，但是保留原来的位置
- overflow 溢出显示隐藏，只对溢出部分处理
display属性
- display：none；隐藏对象
- display：block；除了转化为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不在占有原来位置
visibility可见性
visibility: inherit | visible | collapse | hidden
| 属性值 | 描述 |
|---|---|
| inherit | 继承上一个父元素的可见性 |
| visible | 对象可视 |
| collapse | 对象隐藏 |
| hidden | 主要用来隐藏表格的行或列 |
visibility隐藏元素后，继续占有原来的位置
overflow溢出
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超出部分的内容 |
| scroll | 不管是否超出，总是会显示滚动条 |
| auto | 超出自动显示滚动条，不超出则不显示 |
- 如果是有定位的盒子，请慎用overflow：hidden，因为它会隐藏多余的部分
精灵图
- 采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
- 在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
- 使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能。
核心原理：将页面的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
精灵图的使用
- 将多个小背景图片整合到一张大图中，大图被称为精灵图
- 创建小盒子来放我们的小背景图片，
- 用这张大图当背景图片，移动背景图片的位置，用background-position
- 移动的距离就是目标图片的x，y坐标，将我们需要的部分移动到盒子中
- 一般情况都是往上往左移动，所以数值是负值
字体图标
使用场景：主要用于显示网页中通用，常用的一些小图标
精灵图有很多的优点，但是缺点也很明显
- 图片文件还是比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完成想要更换非常复杂
所以就需要字体图标来解决这些问题
字体图标可以为前端工程师提供一种方便高效的图标使用方式
展示的是图标，本质属于字体
字体图标的优点
- 轻量级：一个字体图标要比一系列的图像要小，一旦字体加载了图标马上就会渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以随意地改变颜色，产生阴影，透明效果，旋转等
- 兼容性：几乎支持所有的浏览器
注意：字体图标不能替代精灵技术，只是对图标部分技术的提升和优化
总结：
- 如果遇到一些结构和样式比较简单的小图标，就用字体图标
- 如果遇到一些结构和样式复杂一点的小图片，就用精灵图
字体图标的下载
https://www.iconfont.cn/
字体图标的引入
下载完后，将下载包里的fonts文件夹放到自己页面的根目录下
再在css样式里全局声明字体
再将下载包中的css中的部分内容写入样式中
比如：
<style>
@font-face {
font-family: "iconfont"; /* Project id 3272961 */
src: url('../fonts/iconfont.woff2?t=1648085640271') format('woff2'),
url('../fonts/iconfont.woff?t=1648085640271') format('woff'),
url('../fonts/iconfont.ttf?t=1648085640271') format('truetype');
</style>
span {
font-family:'iconfont';
}
CSS三角
网页中常见的一些三角形，可以直接使用css画出
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border 50px soild transparent;
border-left-color: pink;
}
其实就是定义一个盒子，没有大小，只有边框，将其他三个边框都设置成透明色
在对另一个边框设置成想要的颜色，就可以制作出一个三角形
用户界面样式
鼠标样式cursor
li {cursor: pointer;}
| 属性值 | 描述 |
|---|---|
| default | 默认光标，箭头 |
| pointer | 小手 |
| move | 表示可以移动鼠标下方的对象 |
| text | 表示可以选择的文本 |
| not-allowed | 禁止 |
轮廓线outline
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
- outline-color 颜色
- outline-style（必需） 样式
- outline-width 宽度
p{
outline:#00FF00 dotted thick;
}
给表单添加outline： 0；或outline： none；后，就可以去掉默认的蓝色边款
防止拖拽文本域
让文本域的右下角不可被拖拽
textarea{resize: none;}
vertical-align属性应用
图片或表单和文字的对齐
vertical-align：baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把元素放置在父元素的中部，垂直居中对齐 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
解决图片底部默认空白缝隙问题
图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
解决办法：
- 给图片加vertical-align： top | middle | bottom
- 把图片转换为块级元素
溢出的文字用省略号显示
一行文本溢出显示省略号
1.先强制一行内显示文本
while-space： nowrap；（默认为normal，为自动换行）
2.超出部分隐藏
overflow： hidden；
3.文字用省略号代替超出的部分
text-overflow： ellipsis；
多行文本溢出显示省略号
overflow： hidden；
text-overflow： ellipsis；
弹性伸缩盒子模型显示
display： -webkit-box；
限制一个块级元素显示的文本的行数
-webkit-line-clamp：2；
设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient： vertical；
html5
新增的语义化标签
<header>头部标签</header>
<nav>导航标签</nav>
<alticle>内容标签</alticle>
<setion>定义文档的某个区域</setion>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>
新增的多媒体标签
视频video
<video src="文件地址" controls="controls"></video>
常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频缓冲就绪后马上播放（谷歌需要添加muted） |
| controls | controls | 向用户显示控件，比如播放按钮 |
| height | px、100% | 设置视频播放器的高度 |
| width | px、100% | 设置视频播放器的宽度 |
| loop | loop | 当媒体文件播放完后再次播放（循环播放） |
| preload | auto（预先加载）none（不加载） | 规定是否预加载（如果使用了autoplay，则忽略该属性） |
| src | url | 视频地址 |
| poster | lmgurl | 加载等待的图片画面 |
| muted | muted | j静音播放 |
音频audio
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 向用户显示控件 |
| loop | loop | y音频结束时重新开始 |
| src | url | y音频地址 |
新增input类型
| 属性值 | 描述 |
|---|---|
| type=“email” | 限制用户输入必须为email类型 |
| type=“url” | 限制用户输入必须为url类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 电话号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
新增的表单属性
| 属性 | 值 | 描述 |
|---|---|---|
| required | required | 拥有该属性，表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息 |
| autofocus | autofocus | 自动聚焦，自动点击该位置 |
| autocomplete | ooff/on | on为显示之前输入过的值，off为不显示 |
| multiple | multiple | 可以选择多个文件提交 |
css3
新增的选择器
属性选择器
通过属性来选择
权重为10
| 选择符 | 描述 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att='‘val’] | 选择具有att属性且属性值为val的E元素 |
| E[att^=“val”] | 选择具有att属性且属性值以val开头的E元素 |
| E[att$=“val”] | 选择具有att属性且属性值以val结尾的E元素 |
| E[att*=val"] | 选择具有att属性且属性值中含有val的E元素 |
结构伪类选择器
| 选择符 | 描述 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 匹配父元素中E的第一个 |
| E:last-of-type | 匹配父元素中E的最后一个 |
| E:nth-of-type(n) | 匹配父元素中E的第n个 |
n是从0开始的
n可以是数字也可以是公式
也可以为关键字：even 偶数，odd 奇数
伪元素选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- 这两个创建的元素是行内元素
- 必须有content属性
- 权重为1
css3盒子模型
可以通过box-sizing来指定盒子模型
有两个值：content-box，border-box
- box-sizing：content-box则盒子实际大小为width+padding+border（以前默认的）
- box-sizing：border-box则盒子实际大小为width
如果使用了box-sizing：border-box，那padding和border就不会撑大盒子（但padding和border不超过width）
其他特性
filter属性将模糊或颜色偏移等图形效果应用于元素
filter： 函数（）
比如：filter：blur（5px）； blur数值越大越模糊
calc函数
calc函数可以对属性值进行计算
width：calc（100%-80px）;
css3过渡
过渡动画：从一个状态渐渐的过度到另一个状态
经常和：hover一起搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始；
- 属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以
- 花费时间：单位为秒，单位必须写，如：0.5s
- 运动曲线：默认为ease（可省略）
- 何时开始：单位为秒 单位必须写，可以设置延迟触发 默认为0s
2D转换之移动translate
可以改变元素在页面中的位置，类似定位
transform: translate(x,y);也可以分开写
transform: translateX(n);
transform: translateY(n);
重点：
- 沿着x和y轴移动
- 不会影响其他元素的位置
- 可以用百分比 相当于自己 translate(50%,50%)
- 对行内标签没有效果
2D转换之旋转rotate
让元素进行旋转
transform: rotate(度数)
重点：
- rotate里面跟度数，单位是deg
- 角度为正，顺时针 负，逆时针
- 默认旋转的中心点是元素的中心点
变换中心点
transform-origin: x y;
重点：
- x和y之间用空格隔开
- 默认为中心点50% 50%
- 还可以给x y设置方位名词（top，bottom，left，right，center）
2D转换之缩放scale
可以控制元素放大或缩小
transform: scale(x,y);
注意：
- x y之间用逗号隔开
- x，y是倍数的意思 （2，2）即宽和高都放大两倍
- x，y只写一个参数时，则第一个和第二个一样
- 可以设置转换中心点放缩，且不影响其他盒子
2D转换综合写法
同时使用多个转换时，其格式为：
transform：translate（） rotate（） scale（）…
顺序会影响效果
当我们同时有位移和其他属性时，要将位移放到最前面
动画
动画序列
- 0%是动画的开始，100%是动画的完成
- 在@keyframes中规定css样式设计动画
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-time: 持续时间;
}
动画常见属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计 |
| animation-timing-function | 规定动画的速度曲线 |
| animation-delay | 规定在动画开始之前的延迟 |
| animation-iteration-count | 规定动画应该播放的次数 默认为1 |
| animation-direction | 规定是否应该轮流反向播放动画 默认为normal altermate逆播放 |
| animation-fill-mode | 规定动画在执行后状态，保持forwards，回到起始backwards |
| animation-play-state | 规定动画是正在运行还是暂停 |
速度曲线
animation-timing-function规定动画的速度曲线
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 默认，以低速开始，然后加速，在结束前变慢 |
| ease-in | 以低速开始 |
| ease-out | 以低速结束 |
| ease-in-out | 以低速开始和结束 |
| steps（） | 指定了时间函数中的间隔数量（步长） |
扫一扫
1619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
