本篇文章适合基础薄弱想笼统学习的童靴们，因为我就是从零自学开始的，把我学习中常用到的知识点整理一下以后常常温故一下。
案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss
其它Web文章
HtmlCss基础学习第一章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5+Flex布局使用总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......
本编文章会讲到的知识点
- 引入CSS样式表
- 标签显示模式
- CSS复合选择器
- CSS 背景(background)
- CSS 三大特性
- 盒子模型
引入CSS样式表
行内式（内联样式）
通过 标签style属性 设置样式。
语法中，style是标签的属性，属性和值的书写规范与CSS相同，行内式只对 其所在的标签 及嵌套在其中的子标签起作用。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
内嵌式（内部样式表）
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
外链式（外部样式表）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内式 | 书写方便 权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内嵌式 | 一定程度的实现了 结构样式分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外链式 | 完全实现结构样式分离 | 需要引入 | 最多，强烈推荐 | 可控制多个页面（多） |
CSS样式表案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.inline-p {
font-size: 30px;
height: 100px;
background-color: rgb(202, 184, 21)
}
</style>
</head>
<body>
<p style="font-size: 30px; height: 100px; background-color: blue">我是行内式css</p>
<p class="inline-p">我是内嵌式css</p>
<p class="outside-p">我是外链式css</p>
</body>
</html>
标签显示模式（display）
在html中，元素主要分为行内元素和块级元素、行内块元素。
块级元素(block-level)
每个块元素通常都会独自占据一整行，可设宽度、高度、对齐等，常用于网页布局结构搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
- 独占一整行
- 可设宽高，行高、外边距以及内边距都可设。
- 宽度默认撑满父级
- 可以容纳任何其他标签
行内元素(inline-level)
行内元素（内联元素）由内容撑开，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。
行内元素的特点：
- 一行排多个。
- 不能设宽高，但水平的padding和margin可以设置，垂直的无效。
- 被内容撑开
- 行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
- 只有 文字才 能组成段落，因此 p 里面不能放块级元素，
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。 - 链接里面不能再放链接。
#######行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img>、<input>、<td>，
可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
- 一行多个
- 默认宽高内容撑开
- 宽高，外边距以及内边距都可设
三种显示模式转换
- 块 => 行内 display: inline;
- 行内 => 块 display: block;
- 行内 => 行内块 display: inline-block;
标签显示模式案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 50px;
width: 200px;
background-color: pink;
/* display:inline 转成 行内元素*/
display: inline;
}
.sp-block {
width: 200px;
height: 50px;
background-color: rgb(23, 33, 179);
/* display:inline-block 可以转成 行内块元素 */
display: inline-block;
}
.sp-inline{
height: 50px;
width: 100%;
background-color: rgb(155, 22, 28);
/* display:block 转成 块级元素 */
display: block;
}
</style>
</head>
<body>
<div>我是div</div>
<span class="sp-block">我是块级span</span>
<span class="sp-inline">我是行内span</span>
</body>
</html>
CSS复合选择器
复合选择器是由 两个 或 多个基础选择器 组合而成的,目的是为了可以更准确的选择目标元素。
交集选择器
交集选择器由两个选择器构成，两个选择器之间不能有空格。
交集选择器 是 并且的意思，即...又...的意思。
必须两个条件同时满足，才能作用。
如果有 标签选择器 要放在最前面！
/* 类名既有tall 又有mm */
.tall.mm {
background-color: red;
}
/* 首先是p标签 并且类名是sg */
p.sg{
color: red
}
并集选择器
并集选择器（CSS分组选择器），逗号连接。
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
并集选择器的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。
/*
* p标签选择器 zxy类选择器 gfc ID选择器，
* 这三个选择器都会执行颜色为红色
*/
p, .zxy, #gfc{
color: red;
}
后代选择器
后代选择器，用来选择元素的后代。.father .son。
写法就是把 外层标签写在前面，内层标签写在后面，中间用空格分隔。
子孙后代都可以选中。
/* ul下子孙li都会变红 */
ul li {
color: red;
}
/* ul下类名为other的li变黑 */
ul li .other{
color: #000000;
}
子元素选择器
子元素选择器，只能 作用于 子元素。 父 > 子
规范：> 左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
/*
* box下子一级（儿子）的p标签才会变蓝色，
* 一级以下的都不会变（孙子）
*/
.box > p {
color: blue;
}
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
/* 选择器[属性名] : 只要包含该属性即可被选中; */
li[type] {
color: blue;
}
/*
选择器[属性名="属性值"]：
属性值必须完全相同才会被选中 */
li[type="meat"] {
color: red;
}
/*
选择器[属性名*="属性值"]
只要包含该属性值就可以被选中
*/
li[type*="hot"] {
color: green;
}
/*
选择器[属性名^="val"]
当该元素属性值以这个 val 开头时作用
^: 表示以 .... 开头 ;
*/
li[type^="dr"] {
color: blue;
}
/*
$：表示以 ... 结尾
选择器[属性名$="val"]
当该元素属性值 以 val 结尾时起作用
*/
li[type$="t"] {
color: red;
}
/*
找到 type,对属性值进行分析，按照空格分隔匹配，
必须与分隔出来的属性值完全相等，才起作用
*/
li[type~="hot"] {
color: blue;
}
/* 跟 * 区别， *是只要包含，就能生效，不管有没空格，不管什么位置 */
/*
推测：
先找 price，根据空格分隔所有的属性值,
中间只要有类似于 very 和 very- 就可以被选中
可以选中 very very-...
这是不对的
结果：
E[属性|="val"] 必须以 val 开头
1. 只是 val 可以被选中
2. val-...
*/
伪元素选择器
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
- E::before和E::after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
选择器::first-letter
选中段落中的第一个字
*/
p::first-letter {
color: red;
font-size: 50px;
font-weight: bolder;
}
/*
选择器::first-line
选中段落中的第一行
*/
p::first-line {
color: green;
}
/*
选择器::selection
控制选中内容的样式
*/
p::selection {
background-color: rgb(236, 19, 63);
color: blue
}
/*
选择器::before
可以给当前元素最前面 加 内容
最关键属性 content 不能少
*/
p::before {
content: "￥";
height: 50px;
width: 50px;
display: inline-block;
background-color: blue;
background-image: url(08.gif);
}
/*
选择器::after
可以给当前元素 最后面 添加 内容
最关键属性 content 不能少
行内元素的效果
*/
p::after {
content: "------你个损塞";
}
</style>
</head>
<body>
<p>
英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月，因吴亦凡屡次提起而火遍网络。 吴亦凡爆红的freestyle，其实是嘻哈选手的基本功，也是《中国有嘻哈》节目中的一个环节名称。 发展经过编辑 从吴亦凡口里说出来，freestyle就变得很魔性了，因为他见人都会问一句，你有freestyle吗？两个选手难以选择，还是这句，“你们有freestyle吗”？
</p>
</body>
</html>
CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
- 背景颜色: background-color
- 背景图片地址: background-image
- 是否平铺: background-repeat
- 背景位置: background-position
- 背景固定还是滚动: background-attachment
背景图片(image)
语法：background-image : none | url (url)
参数：
none : 无背景图（默认的）
url : 使用绝对或相对地址指定背景图像
图片覆盖不到地地方都会被背景色填充。
背景平铺（repeat）
语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y
默认就是 repeat
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
背景位置(position)
语法：
- background-position : length || length
- background-position : position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
background-position: center center;
背景附着
语法：background-attachment : scroll | fixed
参数：
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
背景简写
background 属性值的书写顺序，没有强制标准的。
但为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
同样， 可以给 文字和边框透明 都是 rgba 的格式来写。
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
背景缩放
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
- 可以设置长度单位(px) 或 百分比（设置百分比时，参照盒子的宽高）
- 设置为cover时，必须填满。覆盖整个父容器，不会失去原来的比例，按照原来比例撑满整个父容器
- 设置为contain, 必须完整。必须保证原有比例的前提，进行尽可能的放大。默认会居中
div {
height: 400px;
background: url("0 8.gif") no-repeat center top;
background-color: rgba(0,0,0, 0.7);
/* background-size: 100% 400px; */
/*覆盖整个父容器，不会失去原来的比例，按照原来比例撑满整个父容器*/
/* background-size: cover; */
/* 必须保证原有比例的前提，进行尽可能的放大。默认会居中 */
/* background-size: contain; */
}
多背景
以逗号分隔可以设置多背景，可用于自适应布局
background-image: url('images/a.jpg'), url('images/b.png');
CSS 背景(background)案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 1000px;
width: 100%;
background-color: pink;
background-image: url("0 8.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
/*background 连写*/
background: pink url("0 8.gif") no-repeat fixed center center;
/* 背景透明 */
background: rgba(0,0,0, 0.5) url("0 8.gif") no-repeat fixed center center;
/* 设置图片大小 */
background-size: contain;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
CSS 三大特性
CSS 三大特性：层叠性 继承性 优先级
层叠性
层叠性 指 CSS样式冲突产生的 叠加现象,出现样式冲突，才会触发层叠。
- 样式冲突，就近原则。
- 样式不冲突，不会层叠
继承性
继承性：子标签 继承 父标签的某些样式，如文本颜色和字号等。恰当地使用继承可以简化代码，降低CSS样式的复杂性。
哪些样式可继承？: text-，font-，line-开头，以及color，可继承
CSS优先级
两个或更多规则应用于同一元素上，会出现优先级问题。
考虑权重时，应注意：
- 继承权重为0。
- 行内优先。大于所有选择器，小于!important
- 权重相同，就近原则。
- !important 最大优先级
CSS权重计算公式(0, 0, 0, 0) :
- !important 1,0,0,0
- id 选择器 0,1,0,0
- 类选择器,伪元素,伪类选择器 0,0,1,0
- 标签选择器 0,0,0,1
- 行内样式不参与权重计算，比选择器大，比 !important小
发生样式冲突时，比较权重:
先比第一个：谁大，优先级就高
第一个一样，就比第二个：谁大，优先级就高
第二个一样，就比第三个：谁大，优先级就高
第三个一样，就比第四个：谁大，优先级就高
比完发现都一样，权重相同，就近原则（层叠性）
注意：
- 继承的 权重是 0。
- 基本优先级： !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
- 权重相同，就近原则
盒子模型
盒子模型就是把 页面元素 看作是一个矩形的盒子。
每个盒子 由 内容(content)、内边距（padding）、边框（border）和外边距（margin）四大部分组成。
每一个盒子都由四部分组成: content padding border margin。
盒子边框（border）
设置盒子在外层的一层皮，可以设置皮的宽度、样式、颜色。
语法：
border : border-width || border-style || border-color
border: 1px solid red;
border-style 边框样式常用属性：
- none：没有边框
- solid：单实线(常用)
- dashed：虚线
- dotted：点线
- double：双实线
盒子边框写法总结:
上边框:
border-top-style 样式
border-top-width 宽度
border-top-color 颜色
连写：
border-top: 宽度 样式 颜色
border-top: 1px solid blue;
下边框 border-bottom-...
左边框 border-left- ...
右边框 border-right- ...
合并边框border-collapse：
当边框重叠时，会增加边框的宽度、颜色重度。可以使用border-collapse属性合并边框。
border-collapse:collapse; //表示边框合并在一起。
圆角边框
语法：
border-radius: 左上 右上 右下 左下;
border-radius: **px;
border-radius: **%;
- 可以分别为左上 右上 右下 左下设置圆角。
- 可以简写一次性设置四条边。
- 可以写百分比。
内边距（padding）
padding: 内边距。 指 边框与内容之间的距离。
- padding-top:上内边距
- padding-right:右内边距
- padding-bottom:下内边距
- padding-left:左内边距
- padding: 上 右 下 左;
外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
- margin-top: 上外边距
- margin-right: 右外边距
- margin-bottom:下外边距
- margin-left: 左外边距
- margin:上 右 下 左;
注意：
给行内元素 设置 垂直外边距margin 会无效
所以不要给 行内 设 margin-top 和 margin-bottom
给行内元素 设置 垂直 内边距 padding 也会有问题
所以不要给 行内 设 padding-top 和 padding-bottom
如果想设置上下内外边距，先转为块级元素。
外边距实现盒子居中
左右外边距设 auto, 实现盒子水平居中
需要满足两个条件：
- 必须是块级元素。
- 设了宽度（width）
.header{ width:660px; margin:0 auto;}
图片在盒子中居中的两种方式
- 方式一：父盒子，设置 text-align: center
- 方式二：转成块, display:block; 设宽 , margin: 0 auto;
文字盒子居中区别，图片和背景区别
- 文字内容居中是 text-align: center
- 盒子居中 左右margin 改为 auto （块级元素，要有宽度）
- 插入img，用的最多。比如产品展示类
- background-image 小图标或者 超大背景可以用到
清除元素的默认内外边距
为更方便控制网页元素，可清除默认内外边距：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
外边距合并
margin定义 块元素 垂直外边距时，很可能出现 外边距合并。
相邻块元素垂直外边距的合并:
上下相邻两个块元素相遇，若上面设margin-bottom，下面设 margin-top。
他们垂直间距不是 margin-bottom 与 margin-top 之和，而是较大者。
嵌套块元素垂直外边距的合并:
嵌套关系的块元素，父元素 margin-top 可能会与子元素的 margin-top 合并，合并成较大者。
且子元素并没和父元素 margin开。
解决方案：
- 为父元素定义 1px 的上边框。
- 为父元素定义 1px 上内边距。
- 父元素添加 overflow:hidden （触发BFC 后再会讲）。
- 浮动，定位（触发BFC 后再会讲）。
盒子实际宽度和高度
在页面中占据的空间 margin + border + padding + content
注意：
1、width 和 height 对块级有效，对行内无效（ img 标签和 input除外，因为他们是行内块）。
2、计算总高度时，应考虑 垂直外边距 合并问题。
3、如果盒子没给宽度, 继承父亲的宽度，则 padding 一般不会影响盒子大小。
