HTML+CSS基础知识内容
HTML+CSS学习——基础知识点
- HTML
-
- 基础
-
- 发展历史
- 网页组成
- 基本结构
- 标签结构
- 字符编码
- 标签
-
- 常用标签
-
- 1、文本标题 h1-h6
- 2、段落文本 p
- 3、换行 br
- 4、水平线 hr
- 5、加粗 strong
- 6、倾斜 em
- 7、删除线 del
- 8、下划线、上下标
- 9、div和span
- 10、列表
- 11、图片 img
- 12、超链接 a
- 13、表格 table
- 14、表单 form
- 15、音频 audio
- 16、视频video
- 其他
-
- 1、特殊符号
- 2、路径
- 3、长度单位
- CSS
-
- 基础
-
- CSS基本语法
- 内部样式
- 外部样式
- 行内样式
- 样式表的优先级
- 常用标签及属性
-
- 0、语义化标签
-
- 含义
- 语义化容器
- 块级元素和内联元素
- 1、选择器
-
- 各类选择器
- 选择器的权重
- 2、字体文本属性
-
- 常用属性
- 样式的优先级
- 3、列表样式
- 4、背景属性
- 5、浮动
- 6、Flex布局
- 7、盒子模型
-
- 内边距
- 边框
- 外边距
- 盒子内容溢出
- 垂直外边距合并问题
- 8、display
- 9、定位 position
- 10、垂直对齐 vertical-align
- 11、过渡 transition
- 12、透明度 opacity
- 13、光标类型 cursor
- 注意
-
- 清除默认样式
- 影响html元素位置的因素
- 定位元素重叠
- CSS精灵
- 字体图标
- 网页头部SEO三大标签
- Favicon图标
- 版心文件
- 项目目录结构
HTML
HTML是用来描述网页的一种语言
- HTML指的是超文本标记语言（Hyper Text Markup Language）
- HTML不是一种编程语言，而是一种标记语言（markup language）
- 标记语言是一套标记标签（markup tag）
基础
发展历史
发展初期，标记语言在各个浏览器上出现不兼容问题，需要一个标准.
查看不同标记语言标签在不同浏览器上是否兼容：caniuse.com
W3C（World Wide Web Consortium）万维网联盟
W3C制定了标记语言的标准，所以html在各个浏览器上都可以展示
网页组成
- HTML 结构：W3C制定了结构HTML的语法、标准
- CSS 表现：W3C制定了表现CSS的语法、标准
- JS 行为：W3C、ECMA制定了行为标准（W3C DOM，ECMAScript）
基本结构
<html>
<head>
<title>标题title>
head>
<body>
<P>
Hello World
P>
body>
html>
标签结构
1、常规标记（双标记）
<标记>
<标记 属性 = “属性值” 属性=“属性值”>
例如：
注意属性和属性值相同时，可以省略属性值
等同于
2、空标记（单标记）
<标记>
<标记 属性 = “属性值” 属性=“属性值” />
字符编码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
DOCTYPE ***> 按照特定的HTML格式来解析代码
<html lang="**"> 告诉浏览器文本中的语言是英文
en 英文
zh-CN 中文
ja-jp 日文
<meta charset="**"> 字符编码集
ASCII 美国标准信息交换码
GB2312 汉字编码字符集
UTF-8 万国码字符编码
标签
常用标签
1、文本标题 h1-h6
<h1>一级标签h1>
<h2>一级标签h2>
<h3>一级标签h3>
<h4>一级标签h4>
<h5>一级标签h5>
<h6>一级标签h6>
文本标签自带加粗，默认一行，独占一行，有默认间距
2、段落文本 p
<p>段落文本内容p>
标识一个段落（段落与段落之间有段间距）
3、换行 br
<br>
换行是一个空标记（强制换行）
4、水平线 hr
<hr>
水平分割线，空标记
<hr 属性 = "值">
<hr color="green"> //颜色
<hr width="500"> //宽度
<hr width="600" align="left"> //水平位置
<hr noshade="noshade"> //去掉默认的阴影
5、加粗 strong
<b>加粗内容b>
<strong>强调的内容strong>突出的文本 （推荐）
6、倾斜 em
<em>强调文本em> （推荐）
<i>倾斜文本i>
7、删除线 del
<s>文本s>
<del>文本del> （推荐）
8、下划线、上下标
<u>文本u>下划线
<sub>sub>下标
<sup>sup>上标
9、div和span
div标签，没有具体的含义，用来划分页面的区域，独占一行
span标签，也没有具体意义，主要应用于对于文本独立修饰的时候，大小取决于文本内容
10、列表
无序列表
<ul>
<li>li>
<li>li>
<li>li>
ul>
注意：
1、ul里面只能放li，li里面可以放其他标签
2、默认的是黑色的实心圆
属性：
type 类型
disc 实心（默认）
circle 空心
square 方形
none 去除
有序列表
<ol>
<li>li>
<li>li>
<li>li>
ol>
注意：
1、ul里面只能放li，li里面可以放其他标签
2、数字自动生成
属性：
<ol type=""> 取值有1、a、Ⅰ等，表示排序号码，默认数字
<ol start=""> 取值是数字，表示从即开始计数
自定义列表
<dl>
<dt>dt>
<dd>dd>
dl>
<dl>
<dt>dt>
<dd>dd>
dl>
多用于图文混排
11、图片 img
<img src="" alt="">
标签：
src 图片路径
相对路径
绝对路径，不推荐，http请求访问本地的不显示
alt 图片未加载时显示的文本内容
title 鼠标悬停上去之后的提示信息
width px，宽度
height px，高度
若高宽单写任意一个，会等比缩放
12、超链接 a
<a href="">
href 路径
title 鼠标悬停上去之后的提示信息
target 跳转方式
_self 当前页面，默认
_blank 新窗口打开
链接到其他资源
1、链接到图片
<a href="xx.jpg">链接图片默认在浏览器中打开图片a>
2、链接到图片下载，download属性指定下载文件名
<a href="xx.jpg" download="yy.jpg">添加download属性可以下载链接的资源a>
3、链接到其他类型的文件
<a href="测试文件.txt">可以链接到其他类型文件a>
<a href="测试文件.txt" download="其他文件">添加download属性可以下载链接到其他类型文件a>
4、链接调用邮箱客户端发送邮件
<a href="mailto:[email protected]">发送邮件到[email protected]a>
5、链接到拨打电话
<a href="tel:18407850471">拨打电话a>
5、链接到调用qq
<a href="http://wpa.qq.com/msgrd?v=3&uin=换成你自己的QQ号&site=qq&menu=yes">调用qq对话a>
13、表格 table
<table>
<th>
<td>td>
<td>td>
th>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
table>
table只能放tr，tr里只能放td，td里可以放任意
表格 table 属性
宽度：width
高度：height
边框：border
边框颜色：bordercolor
背景颜色：bgcolor
水平对齐：align=“left / right / center”
cellspacing = “单元格与单元格之间的间距”
cellpadding = “单元格与内容之间的间隙”
行 tr 属性
高度：height
背景颜色：bgcolor
文字水平对齐：align=“left / center / righ”
文字垂直对齐：valign=“top / middle / bottom”
单元格 td 属性
宽度：width 如果一个单元格设置宽度，影响的是这一列的宽度
高度：height 同理给一个单元格设置高度，影响一行的高度
背景颜色：bgcolor
文字水平对齐：align=“left / center / righ”
文字垂直对齐：valign=“top / middle / bottom”
水平合并：colspan
垂直合并：rowspan 合并并不是取代，而是挤掉，挤出去
14、表单 form
表单的作用：收集用户信息
表单的应用：各种登录界面，个人信息提交
<form method="get/post" action="">
<input />
form>
form属性
method 提交表单的方式
get
post
action 向何处发送表单数据
input属性
type：
text 文本框
password 密码框
number 数字
date 日期
datetime-local 时间
file 上传文件
hidden 隐藏
radio 单选框（同一组的name属性值必须相同）
checkbox 复选框（同一组的name属性值必须相同）
submit 提交框（等同于）
button 按钮框
reset 重置框（清空效果）
cheked 默认（可用于单选框默认勾选）
placeholder 描述输入字段预期值的简短的提示信息。兼容到E8以上
name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
value 描述 例如："submit" value="登录">
button按钮
type：
submit 提交
reset 清除重置
button 按钮
select下拉列表
textarea多行文本
rows属性用于设置行数
cols属性用于设置可见宽度，以平均字符宽度为单位
Form当中method的post和get的区别？
-
get是从服务器上获取数据，post是向服务器传送数据。
-
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
-
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
-
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
-
get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
15、音频 audio
<audio src="">audio>
controls 显示音频面板
loop 循环播放
autoplay 禁用自动播放
16、视频video
<video src="">video>
controls 显示控制面板
loop 循环播放
muted 静音
autoplay 自动播放
其他
1、特殊符号
| 特殊符号 | 解释 |
|---|---|
| 尖角号 | < 左尖角号 < |
| > 右尖角号 > | |
| 空格 | 该空格占据宽度受【字体】影响，明显而强烈 |
| 占据的宽度正好是1个中文宽度，且不受字体影响 | |
| 版权 | © © |
| 商标 | ™ ™ |
| ® ® |
受语法印象，特殊符号无法在页面展示，需要用特殊字符
2、路径
相对路径
图片相较于当前文件夹下的位置
./ 表示当前文件夹
…/ 表示上一级文件夹
绝对路径
在硬盘上的位置
3、长度单位
默认是px，单位可写可不写
%，相当于父元素的百分比
CSS
Cascading Style Sheets 层叠样式表
用于渲染HTML元素标签的样式
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0
基础
CSS基本语法
1、每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2、属性必须放在花括号中，属性与属性值用冒号连接。
3、每条声明用分号结束。
4、当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5、在书写样式过程中，空格、换行等操作不影响属性显示。
语法定义：
选择器(选择符) {属性:属性值; 属性:属性值;}
内部样式
定义在标签里面
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
h1{
color: aqua;
}
style>
head>
<body>
<h1>0000000h1>
<h2>1111111h1>
body>
html>
外部样式
html文件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<style>
@import url(./css/index.css);
style>
head>
<body>
<h2>外部样式h1>
body>
html>
css文件
h2{
color:red;
}
link和import两种引用的区别？
①差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
②差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
③差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
行内样式
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div style="height: 200px; width: 200px;">我是一个divdiv>
body>
html>
样式表的优先级
根据html页面加载的顺序，后面加载的会覆盖前面的
一般情况下：行内>内部>外部
特殊情况可以选择优先级：!important 加载哪个样式上哪个优先级高
常用标签及属性
0、语义化标签
HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
含义
大部分html标签本身自带语义
选取合适的标签，编写语义化的网页，通过标签本身向使用者表达某种含义
例如：表示一篇文章标题就选用合适的标题标签，而不是选用段落标签
作用：
开发者-理解和维护代码
搜索引擎-收录网页、提取关键词、排序
屏幕阅读器-给盲人读取页面内容
语义化容器
html提供了一些自带语义的容器类标签，通过这些标签，我们可以非常快速的了解一个网页的结构。
<body>
<header>页眉header>
<main>
<article>
<section>
<h1>标题一h1>
<p>。。。p>
section>
<section>
<h1>标题二h1>
<p>。。。p>
section>
....
....
article>
main>
<footer>页尾footer>
body>
header：<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面
main：<main>标签表示页面的主体内容，一个页面只能有一个<main>，且直接嵌套于body中。功能性区块（比如搜索栏）不适合放入<main>中，除非当前页面就是搜索页面
footer：<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息
article：<article>标签表示页面里面一段完整的内容独立结构，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）
section：<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能、按主题（比如迷你地图、一组文章标题和摘要、文章章节等）分块。比如<article>可以包含多个<section>
aside：<aside>标签通常用来呈现一些与主内容间接相关或者形成补充的信息（术语条目、作者简介、相关链接、标注等）。网页级别的<aside>，可以用来放置侧边栏，文章级别的<aside>通过用来放置标注
nav：nav是navigate的简写，<nav>标签用于放置主要导航信息，可以是网站级别的导航，也可以网页级别的文章导航
块级元素和内联元素
html标签可分为两类，块级元素和内联元素
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
div , form , h1 , h2 , h3 , h4 , h5 , h6 ,address , blockquote , center , dir , dl , fieldset , hr , isindex ,menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
1、选择器
为什么要用选择器？
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
各类选择器
① 元素选择器/类型选择器 （element选择器）
语法：元素名称{属性: 属性值;}
如：div{width: 100px; height:200px}
说明
a、元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符，例如body、div、p、img、span…等
b、所有的页面元素都可以作为选择符
用法：
a、改变某个元素的默认样式时，可以使用类型选择符（比如改变一个div、p的样式等）
b、当统一文档某个元素的显示效果时，可以使用类型选择器（改变所有p段落样式）
② class选择器/类选择器
语法：.class{属性: 属性值}
说明：
a、当我们使用class选择符时，为每个元素定义一个class名称
b、class选择符的语法格式是：
.top{width:200px; height:300px}
用法：
class选择符更适合定义一组样式，class值相同
③ id选择器
语法：#id名{属性: 属性值}
说明：
a、使用id选择符时，应该为每个元素定义一个id属性
b、id选择符的语法格式时"#"加上自定义的id名
#box{background: green;}
用法：
一个id名称只能对应文档中单一的元素对象使用，id值唯一
④ * 通配符/通配选择器
语法：*{属性: 属性值;}
说明：
通配选择符的写法是 * ，其含义是所有元素
* {margin: 0; padding:0;} 表示清除所有元素的默认边距值和填充值
⑤ 属性选择器
标签[属性=“属性值”]{属性: 属性值;}
说明:
属性选择器会匹配存在指定属性或指定属性等于特定属性值的元素
用法：
<h2 title="第一章">第一章h2>
<h2>第二章h2>
<a href="home.html">首页a>
<a href="about.html">关于a>
<br>
<input type="text">
<input type="password">
[title] {
color: orange;
}
a[href="home.html"]{
color: red;
}
intput[type="password"]{
background-color: coral;
}
⑥ 子元素选择器
语法：父元素选择器 >子元素选择器{属性: 属性值;}
说明：
通过父类元素选择器找到父元素，再通过父元素的子元素选择器找到子元素
用法：
<ul class="menu">
<li>大虾li>
<li>小鱼li>
ul>
.menu>li{color: red;}
⑦ 包含选择器/后代选择器
语法：选择符1 选择符2{属性: 属性值;}
说明：
操作外层元素内的里层元素属性，可以有多个层级
用法：
当某一元素存在父级元素时，在不想另加选择符的情况下操作元素属性，可用包含选择器
<ul class="list">
<li>li>
<li>li>
<li>li>
ul>
.list li{background: red;}
⑧ 伪类选择器
语法：
a:link{属性: 属性值} 超链接的初始状态
a:visited{属性: 属性值} 超链接被访问后的状态
a:hover{属性: 属性值} 鼠标悬浮状态
a:active{属性: 属性值} 鼠标点击状态
说明：
当这4个超链接伪类选择符联合使用时，应注意顺序，link-visited-hover-active，错误的顺序有时会使超链接的样式失效
/* 初始状态 */
a:link{
color:yellow;
}
/* 访问之后 */
a:visited{
color: red;
}
/* 鼠标以上 */
a:hover{
color:orange;
}
/* 点击激活 */
a:active{
color:green;
}
⑨ 伪元素选择器
伪元素最常用的是 ::before伪元素和 ::after伪元素
说明：
在指定内容前面或后面添加内容，该内容不在页面源码上，仅在页面展示，在css的content标签里书写内容
用法：
<p>
火车车厢-火车车厢-火车车厢
p>
p::before{
content: "火车头";
}
p::after{
content: "火车尾";
}
页面：
火车头 火车车厢-火车车厢-火车车厢 火车尾
⑩ 群组选择器
语法：选择符1, 选择符2, 选择符3…{属性: 属性值;}
说明：
当有多个选择符应用相同的声明时，可以将选择符用 逗号 分隔开，合并为一组
div, #box, .top{width:100px; height:200px;}
选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
| 个数 | 选择器 | 权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0 |
|---|---|---|
| 1 | 类型(元素)选择器 | 0001 |
| 2 | Class选择器（类选择器 | 0010 |
| 3 | id选择器 | 0100 |
| 4 | 包含选择符 | 为包含选择符的权重之和 |
| 5 | 内联样式 | 1000 |
| 6 | !important | 10000 |
| CSS选择器解析规则1： | 当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式 | |
| CSS选择器解析规则2： | 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。 |
2、字体文本属性
常用属性
文本缩进
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度,缩进值值可以是正数、负数、百分数
text-indent:
32px;
2em;
10%;
文本对齐
通过text-align属性来设置html元素内容的对齐方式，常用的属性值包括left（靠左对齐）、right（靠右对齐） 和 center（居中对齐）
text-align:
center;
left;
right;
justify; 两端对齐
字体
由于在不同操作系统、不同游览器里面默认显示的字体是不一样的，不同计算机安装支持的字体也不一 定相同，所以一般定义字体样式会定义一系列的字体
字体名如果包含空格、#、$等特殊符号时，需要用引号包裹起来
font-family:
“黑体”;
“宋体”;
…
/*通用写法*/
p {
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
/*
Helvetica Neue:一种用于苹果系统的西文字体，是Helvetica的改良版本
Helvetica: 一种用于苹果系统的西文字体
Arial: Win平台上默认的无衬线西文字体
PingFang SC: 苹果为中国用户打造了一款全新中文字体
Hiragino Sans GB: 冬青黑体
Heiti SC: 黑体-简 苹果简体中文系统界面默认字体 苹果生态最常用的字体之一，包括iPhone、
iPad等设备用的也是这款字体
Microsoft YaHei: 微软雅黑
WenQuanYi Micro Hei: 文泉驿微米黑 用于Linux操作系统
sans-serif: sans-serif表示一个字体族系列，当以上字体都匹配不到时，就从这个字体族里面找第一个匹配的
*/
字体样式
字体展示的样式，正常、倾斜等
font-style:
normal; 正常
italic; 倾斜
字体加粗
设置文本的粗细
font-weight:
normal; 标准
bold; 粗体
bolder; 比所继承值更粗的一个字体加粗
lighter; 比所继承值更细的一个字体加细
100-900; 必须是整百、值越大，字体越粗，400=normal、700=bold
字体尺寸
font-size 属性可设置字体的尺寸,我们可以通过small、medium、large等一些英文关键字来表示字体的尺寸大 小，但更常用的方法的是给font-size设置一个数值，数值可以是有不同的单位，也可以是百分数
font-size:
12px; 谷歌浏览器最小展示的大小
1.4em;
字体颜色
通过color来设置字体颜色
color:
red;
#0099ff;
#09f;
rgb(255,255,0); RGB表达式，0~255
rgba(255,0,255,0.5); RGBA，最后一个值0~1区间，为透明度
text-shadow
用于指定文本阴影效果，一般至少包括四个部分，分别表示
阴影水平偏移距离、
垂直偏移距离、
模糊半径、
阴景颜色
text-shadow:
5px 5px 5px #f00;
text-decoration
我们可以通过text-decoration 属性来给元素文本加一些装饰，包括：
none 无装饰
underline 下划线
overline 上划线
line-through 贯穿线
text-decoration:
none;
width和height
宽度和高度，用于设置块级元素
width: 300px;
height: 100px;
line-height行高
用于设定一行文本占据浏览器区域的高度，一般用来设置垂直居中
line-height: 14px; 要居中，值就默认和行高一致
样式的优先级
匹配到相同html元素的不同类型的选择器定义的css声明都会作用于被匹配的元素上
当匹配到相同html元素的不同类型选择器中存在相同css属性时，最终起作用的声明遵循以下原则：
a、选择器匹配范围越小越精确，优先级越高，常见选择器优先级如下：
!important>内联样式>id选择器> 类选择器>继承样式>浏览器默认
b、如果上一条原则无法比较出优先级，则就近原则，即代码书写位置越靠后，优先级越高
3、列表样式
list-style-type
定义列表符合样式
list-style-type:
disc; 实心圆
circle; 空心圆
square; 实心方块
none; 去除样式
list-style-image
将图片设置为列表符合样式，要使每个li的图片都不同，就要设置在li属性里
list-style-image:
url();
list-style-position
设置列表项标记的放置位置
list-style-position:
outside; 列表的外面 默认值
inside; 列表的里面
list-style
简写，复合写法
list-style:
none inside;
4、背景属性
background-color
背景颜色
background-color:
yellow;
background-image
背景图片
background-image:
url();
background-repeat
背景图片的平铺
background-repeat:
no-repeat; 不平铺
repeat; 默认，平铺
repeat-x; x轴平铺
repeat-y； y轴平铺
background-position
背景图片的定位，两个值，水平（距离左边） 垂直（距离上面）；可以给负值
background-position:
30px -40px;
10% 10%;
left center;
center;
background-size
调试背景图片的大小，以适应父元素，两个值：水平和垂直
background-size:
100px 200px;
100% 100%;
auto; 以背景图片的比例缩放背景图片
cover; 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain; 缩放背景图片以完全装入背景区，可能背景区部分空白
background-attachment
背景图片的固定，固定在浏览器上，相对整个窗口，不在相对容器了
background-attachment :
scroll (滚动)
fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）;
5、浮动
浮动：float
属性值：left 左浮
right 右浮
none 不浮动
注意：
1、先浮动的在里面，后浮动的靠在先浮动的后面
2、一行未满是不会进入下一行
3、容器内的文字不会上面浮动的元素覆盖，文字会被挤出来
清除浮动：clear
属性值：none 允许浮动
left 不允许前面有左浮动
right 不允许前面有右浮动
both 不允许前面有浮动
注意：
1、清除浮动只是相对后面容器不想被影响的容器而言，高度塌陷会影响页面布局。
2、前面的浮动依旧是漂浮的，后面的容器却不会再自动移入浮动的元素下方
注意：
可利用伪元素选择器实现为后面元素清除浮动
父元素选择器::after{
display:block;
content:“”;
clear:both
}
另一种清除浮动影响的方法
overflow: hidden;
引发bfc，使浮动元素也计算高度
在父元素中添加overflow属性后，不论该父元素中的子元素如何浮动，都不会影响后面元素
6、Flex布局
Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力
Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活
设置方式：
给父元素设置display：flex，子元素可以自动挤压或拉伸
组成部分：
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向上，也就是即便是块级元素也会水平排列
- 侧轴/交叉轴：默认在垂直方向
- 主轴方向尺寸靠内容撑开，侧轴默认拉伸，前提是自己不设置尺寸。
常用样式
- 主轴对齐方式：justify-content
- flex-start：默认值，弹性盒子从起点依次排列
- flex-end：弹性盒子从终点开始依次排列
- center：弹性盒子沿主轴居中排列
- space-between：弹性盒子沿主轴均匀排列，空间间距均分在弹性盒子之间
- space-around：弹性盒子沿主轴均匀排列，空间间距均分在弹性盒子两侧
- space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
- 侧轴对齐方式：align-items
- stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸也是默认默认拉伸）
- center：弹性盒子沿侧轴居中排列
- flex-start：弹性盒子从起点开始依次排列
- flex-end：弹性盒子从终点开始依次排列
- 某个弹性盒子侧轴对齐方式：align-self
- 属性和align-items相同，一个用于弹性容器，一个用于弹性盒子
- 修改主轴方向：flex-direction
- row：水平方向，从左往右（默认）
- column：垂直方向：从上到下
- row-reverse：水平方向，从右到左
- column-reverse：垂直方向，从下到上
- 弹性伸缩比：flex（控制弹性盒子的主轴尺寸）
- 整数数字，表示占用父级剩余尺寸的份数
- 弹性盒子换行：flex-wrap
- wrap：换行
- nowrap：不换行（默认），内部盒子会自动压缩变形
- 行对齐方式：align-content（每一行，设为一个弹性盒子，注意：只有单行则该属性无效）
- flex-start：默认值，弹性盒子从起点依次排列
- flex-end：弹性盒子从终点开始依次排列
- center：弹性盒子沿主轴居中排列
- space-between：弹性盒子沿主轴均匀排列，空间间距均分在弹性盒子之间
- space-around：弹性盒子沿主轴均匀排列，空间间距均分在弹性盒子两侧
- space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
7、盒子模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
内边距
内边距也称作填充，和border不一样的是，内边距只能设置宽度值
padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。
填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法：
1）用来调整内容在容器中的位置关系
2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值
属性值的4种方式：
四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;/定义元素四周填充为2px/
说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
边框
border:边框宽度 边框风格 边框颜色;
边框宽度：border-width:
边框颜色：border-color:
边框圆角：border-radius:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
简写：border：30px solid blue; 参数的顺序可以随意调换
单边框设置：上边框 border-top：30px blue solid; 下 border-bottom 左 border-left 右 border-right
外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以 为负。设置负值会导致和其他内容重叠。
margin的使用方法
边界：margin,在元素外边的空白区域，被称为边距。
margin-left:左边界 margin-right:右边界 margin-top:上边界 margin-bottom:下边界
属性值的4种方式：margin可以给负数
四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右
一个值：四个方向 margin:2px;/定义元素四边边界为2px/
margin:0 auto; 一个有宽度的元素在浏览器中横向居中。
盒子内容溢出
利用overflow属性控制溢出元素的内容的显示方式
overflow:
hidden 溢出隐藏
scroll 溢出滚动（无论是否溢出，都显示滚动条）
auto 自动（溢出显示滚动条，没溢出则不显示）
垂直外边距合并问题
外边距合并指的是，当两个垂直外边距相遇时，它们将合并成一个外边距。合并后的外边距的高度等于两个发 生合并的外边距的高度中的较大者。
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
- 当一个元素包含在另一个元素中时（假设父元素没有内边距或边框把两者的外边距分隔开），它们的上 外边距也会发生合并、
- 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了 一起，它们会发生合并
- 上面这类，如果这个外边距遇到另一个元素的外边距，它还会发生合并
8、display
我们可以通过display属性来变更元素的显示类型，即把块级元素变更为内联元素，或者把内联元素变更为块级元素
display常用属性：
none 隐藏元素
inline 设置内联元素
block 设置为块级元素
inline-block 设置为行内块
内联元素默认display属性为inline ，块级元素默认display为block
9、定位 position
CSS position属性用于指定一个元素在文档中的定位方式。结合top，right，bottom 和 left属性一起决定了该元 素的最终位置。定位类型包括：
静态定位（static) 默认值
相对定位（relative)
绝对定位（absolute)
固定定位（fixed)
top、bottom、right、left分别表示元素与参照元素的上下左右之间的距离。
static 静态定位
静态定位为HTML 元素定位的默认值
即没有定位，遵循正常的文档流对象，一般不会去写
relative 相对定位，指的是元素本身定位
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。移动元素会导致它覆盖其它框
1.元素不会脱离文档流；
2.可以给元素设置top、bottom、left、right值；
3.可以给元素提升一个层级；
4.设置了相对定位元素，原来是内联元素现在还是内联元素，原来是块状元素，现在还是块状元素。
absolute 绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素进行定位
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块进行定位，最初包含块一般即为html元素
1.设置position:absolute的元素会脱离文档流
2.会提升一个层级，遮住其他元素
3.设置top、bottom、left、right时偏移量是相对于最近的一个父元素偏移
4.会将内联元素变成块状元素。
fixed 固定定位
相对于浏览器窗口固定定位
无论怎么滚动滚动条，设置了position：fixed的元素总是在距离浏览器窗口固定位置。
10、垂直对齐 vertical-align
由于浏览器会把行内块、行内标签当作文字处理，默认按基线对齐
用来调整内容垂直方向得对齐方式
vertical-align
baseline 基线对齐（默认）
top 顶部对齐
middle 居中对齐
bottom 底部对齐
11、过渡 transition
作用：可以为一个元素在不同状态之间切换得时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡得属性 花费时间(s)
注意：
- 过渡的属性可以是具体得CSS属性
- 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
- transition 设置给元素本身（谁做过渡给谁加）
12、透明度 opacity
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0-1 完全透明-不透明
13、光标类型 cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值：
default：默认，箭头
pointer：小手，提示用户点击
test：工字型，提示用户可以选择文字
move：十字光标，提示用户可以移动
注意
清除默认样式
许多标签都带有默认的缩进、换行之类的属性，当我们不需要时，统一删除
* {
margin: 0;
padding: 0;
}
影响html元素位置的因素
到目前为止，我们所学css相关知识中，会影响html元素位置的因素包括：
1. 文档流
1. 块级元素独占一行
2. 内联元素不换行
3. 元素总是根据编写顺序按照从上到下、从左往右的顺序排列
2. 浮动
1. 通过浮动设置元素靠一边显示
2. 通过浮动设置元素并排显示
3. 通过浮动设置更复杂布局
3. 元素之间的外边距 除了文档流、浮动、外边距外，还可以通过css定位相关属性来改变html元素的位置。
定位元素重叠
元素设置定位属性后，会覆盖正常的文档流元素
如果要修改定位元素的显示层级，我们可以通过z-index属性来设置
z-index属性指定了一个元素的显示优先级，值可以为正数或负数，值越大，显示优先级越高。
默认情况下，设置了定位属性的元素显示在普通文档流上层
可以设置了z-index为负数，使有定位属性的元素显示在普通文档流下层
只有设置了定位属性的元素设置z-index属性才起作用
CSS精灵
CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式。
把网页中一些背景图片整合到一张图片文件中，再用background-position精确的定位出背景图片的位置
我们常见网页上的很多图标都是整合到一张图片上
优点：减少服务器被请求的次数，减轻服务器的压力，提高页面加载速度
字体图标
字体图标：展示的是图片，本质是字体
作用：在网页中添加简单的、颜色单一的小图标
优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染块、降低服务器请求次数
- 兼容性：几乎兼容所有地主流浏览器
- 使用方便：先下载再使用
下载字体
iconfont图标库：https://www.iconfont.cn/
下载字体：
素材库-官方图标库-进入图标库-选图标
加入购物车-购物车
添加至项目，确定-下载至本地
使用字体
① 将下载地文件夹解压放入项目目录下
② 引入字体样式表（iconfont.css)
③ 标签使用字体图标类名
Ⅰ iconfont：字体图标基本样式（字体名，字体大小等等）
Ⅱ icon-xxx：图标对应得类名（在下载目录下得html文件中，font class找自己要用的）
<html>
<head>
<title>使用字体图标title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont {
font-size:200px;
color:red;
}
style>
head>
<body>
<span class="iconfont icon-icon-test3">span>
body>
html>
上传字体
上传矢量图到网站
项目特有得图标上传到iconfont图标库，生成字体
网页头部SEO三大标签
SEO：搜索引擎优化，提升网站搜索排名
提升SEO的常见方法：
1、竞价排名
2、将网页制作成html后缀
3、标签语义化（在合适的地方使用合适的标签）
…
网页头部SEO标签：
1、title：网页标题标签
2、description：网页描述
3、keywords：网页关键词
<meta name="description" content="描述">
<meta name="keywords" content="关键词">
<title>标题title>
Favicon图标
Favicon图标：网页图标，出现在浏览器标题栏，增加网站辨识度
图标：favicon.ico，一般存放在网站的根目录里面
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
版心文件
一般网页采用统一的规格版心样式
比如在common.css文件中加入以下：
/*头尾各个页面相同的样式*/
/*版心*/
.wrapper {
margin:0 auto;
width: 1240px;
}
项目目录结构
项目
——images文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
——uploads文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
——iconfont文件夹：字体图标素材
——css文件夹：存放CSS文件（link标签引入）
————base.css：基础公共样式
————common.css：各个网页相同模块的重复样式，例如：头部、底部
————index.css：首页CSS样式
——index.html：首页文件
…