# 内容概述
## 一. css特性
+ 继承
+ 层叠
### 1. CSS属性的继承
CSS中有些属性是可继承的，何为属性的继承？
+ 一个元素如果没有设置某属性的值，就会跟随父元素的值
+ **当然，一个元素如果有设置某属性的值，就优先使用自己设置的值**
比如color、font-size等属性都是可以继承的
究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案
官方文档全是英文,推荐使用mdn文档,跟官网几乎没啥差别
+ https://developer.mozilla.org/zh-CN/
不能继承的属性，一般可以使用inherit值强制继承
浏览器的开发者工具也会标识出哪些样式是继承过来的
点击元素可以查看它继承了谁的元素
在开发中我们应该善用浏览器调试工具
img标签无法继承
如果想图片和父元素一样宽度时需要设置100%或者使用inherit值强制继承
### 2. 继承的注意事项
**CSS属性继承的是计算值，并不是当初编写属性时的指定值（字面值）**
div3是继承了50%经过计算的值,而不是原值,如果是原值就变成了12.5px
### 3. CSS属性的层叠
3.1基本选择器:
+ 当选择器一样时,最后一个执行的会生效
CSS允许多个相同名字的CSS属性层叠同在一个元素上
+ 层叠后的结果是：只有一个CSS属性会生效,
浏览器的开发者工具非常清晰地显示了哪个CSS属性会生效
被划掉的一般是两个原因
+ 注释
+ 被层叠掉的css设置
哪个CSS属性会生效，取决于CSS属性所处环境的优先级高低
### 4. CSS属性的优先级
按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
+ !important：10000 在设置css的时候直接在后面加上即可
+ 内联样式：1000
+ id选择器：100
+ 类选择器、属性选择器、伪类：10
+ 元素选择器、伪元素：1
+ 通配符：0
**比较优先级的严谨方法**
从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
+ 如果数量相同，比较下一个较小的权值，以此类推
+ 如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”
思考：为什么会出现以下结果
解析:
1. a标签没有继承是因为,自己本身已经有属性了
2. p标签不能包含div,这样html结构会乱掉,导致div不在p标签里所以,css设置不上
### 5. CSS属性使用经验
**为何有时候编写的CSS属性不好使，有可能是因为**
+ 选择器的优先级太低
+ 选择器没选中对应的元素
+ CSS属性的使用形式不对
+ 元素不支持此CSS属性，比如span默认是不支持width和height的
+ 浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
+ 被同类型的CSS属性覆盖，比如font覆盖font-size
**建议**
+ 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
## 二. HTML-列表元素
**列表在网页中非常常见**
**HTML提供了3组常用的用来展示列表的元素**
+ 有序列表：ol、li
+ 无序列表：ul、li
+ 定义列表：dl、dt、dd
li是块元素,前面的数字或者符号是不包含在块里
### **2.1 有序列表** **–** ol、li
ol（ordered list）
+ 有序列表，直接子元素只能是li
li（list item）
+ 列表中的每一项
### 2.2 无序列表：ul、li
ul（unordered list）
+ 无序列表，直接子元素只能是li
li（list item）
+ 列表中的每一项
**li一定要是ul或者ol的直接子元素,虽然里面可以放别的元素,但不推荐**
### 2.3 定义列表：dl、dt、dd
dl（definition list）
+ 定义列表，直接子元素只能是dt、dd
dt（definition term）
+ 列表中每一项的项目名
dd（definition description）
+ 列表中每一项的具体描述，是对 dt 的描述、解释、补充
+ 一个dt后面一般紧跟着1个或者多个dd
dt、dd常见的组合
+ 事物的名称、事物的描述
+ 问题、答案
+ 类别名、归属于这类的各种事物
### 2.4 列表相关的CSS属性
**列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style**
+ 它们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素
**list-style-type：设置li元素前面标记的样式**
+ disc（实心圆）、circle（空心圆）、square（实心方块）
+ decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）
+ lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
+ none（什么也没有）
**list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置**
**list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值**
+ outside表示序号在内容的外边
+ insider表示序号在内容开始的位置
**list-style：是list-style-type、list-style-image、list-style-position的缩写属性**
+ **list-style**: **outside** **url**(**"images/dot.png"**);
+ **一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none;**
## 三.HTML-表格元素
### 1.使用介绍
table
+ 表格
tr
+ 表格中的行
td
+ 行中的单元格
### 2. table的常用属性
| border | 边框的宽度 |
| :---------: | :-------------------------------------: |
| cellpadding | 单元格内部的间距 |
| cellspacing | 单元格之间的间距 |
| width | 表格的宽度 |
| align | 表格的水平对齐方式 left、center、right |
### 3. tr、th、td的常用属性
**tr常用属性:**
valign:设置整行垂直方向
align : 设置整行水平对齐方向
| valign | 行的垂直对齐方式 top、middle、bottom、baseline |
| :----: | :---------------------------------------------: |
| align | 行的水平对齐方式 left、center、right |
**td常用属性:**
对单元格进行单独设置
width和height进行设置后这一列的单元格全会跟着改变
rowspan colspan:合并单元格
| valign | 单元格的垂直对齐方式 top、middle、bottom、baseline |
| :-----: | :-------------------------------------------------: |
| align | 单元格的水平对齐方式 left、center、right |
| width | 单元格的宽度 |
| height | 单元格的高度 |
| rowspan | 单元格可横跨的行数 |
| colspan | 单元格可横跨的列数 |
### 4. 细线表格的实现
**table** { **border-collapse**: **collapse**; }
+ 合并单元格的边框,经常用到
+ 在开发中一般很少用到上面的属性,会和html代码区分快
效果图:
### **5. 其他元素**
tbody
+ 表格的主体,内容
caption
+ 表格的标题
thead
+ 表格的表头
+ 表格的第一行
tfoot
+ 表格的页脚,
+ 开发中很少用到,因为跟tr元素没差别
th
+ 表格的表头单元格
+ 一般配合thead使用
### 6. 单元格的合并
**单元格合并的要领:**
找对对应的行写上colspan或rowspan="2"
删掉被覆盖的td元素,不删除则会向右挤一格
### 练习
页面效果:
### CSS属性- border-spacing
**单元格和单元格之间是有间距的**
**border-spacing用于设置单元格之间的水平、垂直间距，比如**
+ 2个值分别是cell之间的水平、垂直间距
+ 如果只设置1个值，同时代表水平、垂直间距
页面效果:
## 四. HTML-表单元素
### 4.1 常用元素
form
+ 表单
+ 一般情况下，其他表单相关元素都是它的后代元素
input
+ 单行文本输入框、单选框、复选框、按钮等元素
textarea
+ 多行文本框
select、option
+ 下拉选择框
button
+ 按钮
label
+ 表单元素的标题
fieldset
+ 表单元素组
legend
+ fieldset的标题
### 4.2 input的常用属性
type：input的类型
+ text：文本输入框（明文输入）
+ password：文本输入框（密文输入）
+ radio：单选框
+ checkbox：复选框
+ button：按钮
+ reset：重置
+ submit：提交表单数据给服务器
+ file：文件上传
maxlength：允许输入的最大字数
placeholder：占位文字
readonly：只读
disabled：禁用
checked：默认被选中
+ 只有当type为radio或checkbox时可用
autofocus：当页面加载时，自动聚焦
name：名字
+ 在提交数据给服务器时，可用于区分数据类型
value：取值
form：设置所属的form元素（填写form元素的id）
+ 一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器
**使用细节**
**1.name值相同的radio才具备单选功能**
**2.属于同一种类型的checkbox，name值要保持一致**
**3.去除input的Tab键选中效果**
**当我们按下tab键的时候会自动跳转到文本框上,这时候文本框有一条蓝色的线,可以使用outline把它去掉**
**或者将tabindex属性值设置为-1,这个是表示不能使用tab键进行跳转**
**textarea**
textarea的常用属性
+ cols：列数
+ rows：行数
缩放的CSS设置
+ 禁止缩放：**resize**: **none**;
+ 水平缩放：**resize**: **horizontal**;
+ 垂直缩放：**resize**: **vertical**;
+ 水平垂直缩放：**resize**: **both**;
**select和option**
option是select的子元素，一个option代表一个选项
select常用属性
+ multiple：可以多选
+ size：显示多少项
option常用属性
+ selected：默认被选中
fieldset和legend
**form的常用属性**
action
+ 用于提交表单数据的请求URL
method
+ 请求方法（get和post），默认是get
target
+ 在什么地方打开URL（参考a元素的target）
enctype
+ 规定了在向服务器发送表单数据之前如何对数据进行编码
+ 取值有3种
+ application/x-www-form-urlencoded：默认的编码方式
+ multipart/form-data：文件上传时必须为这个值，并且method必须是post
+ text/plain：普通文本传输
accept-charset：规定表单提交时使用的字符编码
### 4.3 布尔属性（booleanattributes）
布尔属性可以没有属性值，写上属性名就代表使用这个属性
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
如果要给布尔属性设值，值就是属性名本身
### 4.5 综合演练:
**效果图**
### **4.6 按钮**
**普通按钮（type=button）：使用value属性设置按钮文字**
**重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）**
**提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）**
**另外一种写法 button元素**
**使用button元素也能实现按钮，功能效果跟input一样**
### 4.7 inpu和label的关系
label元素一般跟input配合使用，用来表示input的标题
labe可以跟某个input绑定，点击label就可以激活对应的input
### 4.8 表单提交
表单提交有两种方式
### 传统表单提交的方式
#### get和post
提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择
get
+ 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
`http://ww.test.com/login?phone=123&password=234&sex=1`
+ 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
post
+ 发给服务器的参数全部放在请求体中
+ 理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）
get请求
post请求
**post请求我们可以去f12network点击请求,点击header查看**
## 五. 元素类型
### 5.1 块级丶行内级元素
**根据元素的显示（能不能在同一行显示）类型，HTML元素可以主要分为2大类**
+ 块级元素（block-level elements）
+ **独占父元素一行**
+ 比如**div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr**等
+ 行内级元素（inline-level elements）
+ 多个行内级元素可以在父元素的同一行中显示
+ 比如**a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio**等
### 5.2 替换和非替换类型
根据元素的内容（是否浏览器会替换掉元素）类型，HTML元素可以主要分为2大类
- 替换元素（replaced elements）
- 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
- 比如**img、input、iframe、video、embed、canvas、audio、object**等
- **现阶段常用到只有img，input**
- 非替换元素（non-replaced elements）
- 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
- 比如**div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label**等
### 5.3 元素的分类和总结
块级元素没有替换元素，只要是块元素都是非替换元素，所以只有行内元素才去区分替换和非替换
**行内元素：**
**替换元素都是行内元素，行内元素的替换元素式可以设置宽高的**
**之前所说的行内元素不能设置宽高不是很严谨，正确来说是**
**行内元素的非替换元素，都是不能设置宽高的**
**只有行内元素的替换元素可以设置宽高，目前所学只有`img` `input` `iframe`**
### 5.4 CSS属性-display
CSS中有个display属性，能修改元素的显示类型，有4个常用值
+ block：让元素显示为块级元素
+ 浏览器默认给div/p/h1..元素设置了display
+ inline：让元素显示为行内级元素
+ none：隐藏元素
+ 不占据空间
+ inline-block：(比较特殊)
+ 可以让元素同时具备块级、行内级元素的特征
+ 跟其他行内级元素在同一行显示
+ 可以随意设置宽高
+ 宽高默认由内容决定
可以理解为
+ 对外来说，它是一个行内级元素
+ 对内来说，它是一个块级元素
常见用途
+ **让行内级非替换元素（比如a、span等）能够随时设置宽高**
+ **让块级元素（比如div、p等）能够跟其他元素在同一行显示**
**display补充(基本不使用,了解即可)**
### display 练习
~~~html
<style>
/* 样式重置 */
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
/* 整体的样式 */
.email {
width: 100px;
border: 2px solid #999;
text-align: center;
}
/*设置鼠标放上去的时候才会显示*/
.email:hover ul {
display: block;
}
/* 局部: header */
/* .header:hover+ul {
display: block;
background-color: #f00;
} */
.header {
background-color: #999;
color: #fff;
}
/* 局部: 邮箱列表 默认不显示 */
.email ul {
display: none;
}
/*鼠标放到a标签的时候,改变颜色*/
.email ul li a:hover {
background-color: skyblue;
}
/*因为a标签是行内元素,只占内容的宽度,为了用户体验更好将其设为块级元素,独占一行*/
.email ul li a {
display: block;
}
</style>
</head>
<body>
<div class="email">
<div class="header">邮箱</div>
<ul>
<li><a href="#">QQ邮箱</a></li>
<li><a href="#">163邮箱</a></li>
<li><a href="#">139邮箱</a></li>
</ul>
</div>
<div class="product">
<ul class="list">
<li></li>
</ul>
</div>
</body>
~~~
我们在做项目的顺序一定要规划好
+ 结构
+ 基本css配置
+ 全局css配置
+ 局部css
#### 2.练习
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1.样式的重置 */
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #0000cc;
}
/* 2.整体样式 */
/* 3.每一个li的样式 */
.page ul li {
display: inline-block;
}
.page ul li a {
display: inline-block;
width: 34px;
height: 34px;
border: 1px solid #e1e2e3;
font-size: 14px;
/* 调整间距 */
margin-right: 5px;
/* 居中 */
text-align: center;
line-height: 34px;
}
.page ul li a:hover {
border: 1px solid #38f;
background-color: #f2f8ff;
}
.page .prev a, .page .next a {
width: 88px;
}
/* 4.点击后的a效果 */
.page .active {
width: 36px;
height: 36px;
line-height: 36px;
border: none;
font-weight: 700;
color: #000;
/* 不好: 依然是可以点击 */
/* cursor: initial; */
}
.page .active:hover {
border: none;
background-color: transparent;
}
</style>
</head>
<body>
<!-- .page>ul>(li{<上一页}>a[href=#])+(li{$}*10>a[href=#])+li{下一页>}>a[href=#] -->
<div class="page">
<ul>
<li class="prev"><a href="#"><上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a class="active">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="next"><a href="#">下一页></a></li>
</ul>
</div>
</body>
</html>
~~~
### 5.5CSS属性-visibility
**visibility，能控制元素的可见性，有2个常用值**
+ visible：显示元素
+ hidden：隐藏元素
**visibility: hidden; 和 display: none; 的区别**
+ visibility: hidden;
+ **虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置**
+ display: none;
+ **不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置**
### 5.6 CSS属性- overflow
**overflow用于控制内容溢出时的行为**
+ visible：溢出的内容照样可见
+ hidden：溢出的内容直接裁剪
+ scroll：溢出的内容被裁剪，但可以通过滚动机制查看
+ 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
+ auto：自动根据内容是否溢出来决定是否提供滚动机制
**还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向**
这两个属性可以决定水平或垂直方向是否有滚动条
浏览器的x和y轴是默认从左上角开始的
（建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持）
### 5.7 细节补充
==行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析显示为空格==
目前建议的解决方法
1.元素代码之间不要留空格
2.注释掉空格
3.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size
+ 此方法在Safari不适用
4.给元素加float
**==注意点==**
块级元素、inline-block元素
+ 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
+ 特殊情况，p元素不能包含其他块级元素
行内元素（比如a、span、strong等）
+ 一般情况下，只能包含行内元素
## 六. 盒子模型
### **==6.1 盒子==**
HTML中的每一个元素都可以看做是一个盒子
==**盒子模型（Box Mode)**==
HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性
+ 内容（content）
+ 盒子里面装的东西
+ 内边距（padding）
+ 盒子边缘和里面装的东西之间的间距
+ 边框（border）
+ 就是盒子的边框，边缘部分
+ 外边距（margin）
+ 盒子和其他盒子之间的间距
### 6.2 盒子内容相关CSS属性
width：宽度
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
+ 用户在缩小网页的时候会导致我们内容全挤在一块
+ 为了防止这种事,可以设置最小宽度,这样用户在进行缩小的时候
+ 会自动出来滚动条
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
height：高度
min-height：最小高度，无论内容多少，高度都大于或等于min-height
max-height：最大高度，无论内容多少，高度都小于或等于max-height
### 6.3 内边距相关CSS属性
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
padding：是padding-top、padding-right、padding-bottom、padding-left的简写属性
+ 按照顺时针方向设值：top、right、bottom、left
+ 如果缺少left, 那么left就使用right的值
+ 如果缺少bottom, 那么bottom就使用top的
~~~html
<style>
.box {
display: inline-block;
width: 500px;
background-color: skyblue;
/* 内边距 */
/* padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px; */
/* 上右下左 */
padding: 10px 20px 30px 40px;
/* 三个值: 上右下, 没有左, 左边跟随右边的值 */
/* padding: 10px 20px 30px; */
/* 两个值： 上和右， 没有下，跟随上，没有左，根据右 */
/* padding: 10px 20px; */
/* 一个值: 上下左右都使用同一个值 */
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
腾讯云副总裁、腾讯数据平台部总经理蒋杰表示：「腾讯致力于通过开源代码，与开发者共建开源生态、实现成果共享，已成为大数据领域开源最为全面的公司。在基金会的指导和开发者的共建下，Angel 完成了从单一的模型训练平台到全栈机器学习平台的技术跨越，这也与腾讯大数据批流融合、ABC 融合的未来发展方向紧密契合。毕业是 Angel 新的开始，未来我们将进一步开放 Angel 在图计算和联邦学习领域的核心能力。」
</div>
</body>
</html>
~~~
==补充==
div设置宽度后,在div里的文字超过了div的宽度是会自动换行的
但如果是一个字母超过了div宽度,这时浏览器认为这是一个单词,不会换行
**解决方法:**
1. 加上空格,让浏览器认为多个字母
2. css属性 `word-break:break-all`打断单词
### 6.4 外边距相关的CSS属性
**margin-left：左外边距**
**margin-right：右外边距**
**margin-top：上外边距**
**margin-bottom：下外边距**
**margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性**
~~~html
<style>
body {
/* margin: 0; */
}
div {
width: 100px;
height: 100px;
background-color: #f00;
display: inline-block;
}
/* 1.margin的上下 如果同时设置了两个值则会合并掉,并不会变成40px */
/* .box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 20px;
} */
/* 2.margin的左右 如果同时设置了两个值则会合并掉,并不会变成40px*/
.box1 {
margin-right: 20px;
}
.box2 {
margin-left: 20px;
}
/* 3.margin的值 */
.box {
/* 四个值: 上右下左 */
margin: 1 2 3 4;
/* 三个值: 上右下(左跟右) */
margin: 10px 20px 30px;
/* 两个值: 上右(下跟上)(左跟右) */
margin: 0 20px;
/* 一个值: 上下左右统一 */
margin: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
~~~
### 6.5 上下margin传递
==只有上下margin才会传递==
==margin-top传递(常用)==
+ 如果块级元素的**顶部线和父元素的顶部线重叠**，那么这个块级元素的margin-top值会传递给父元素
**这时我们给子元素设置margin-top,值会传递给父元素**
**我们想要的效果并没有达到,这是因为传递给了父元素**
==margin-bottom传递(较少使用)==
+ 如果块级元素的**底部线和父元素的底部线重叠**，并且父元素的**高度是auto**，那么这个块级元素的margin-bottom值会传递给父元素
**这个情况会比较少遇见,除了要满足底部线重叠,还必须父元素的高度是auto**。
**==如何防止出现传递问题？==**
+ 给父元素设置padding-top\padding-bottom
+ 这样就不满足重叠的条件了
+ 给父元素设置border
+ border会有1px的大小，就能不满足重叠条件
+ 触发BFC(**结界**): 设置overflow为auto/**hidden**
+ overflow有四个值,不设为visible即可
+ 剩下的三个属性都能触发结界,还不影响布局
+ **这个方法是最好的**
建议
+ margin一般是用来设置兄弟元素之间的间距
+ padding一般是用来设置父子元素之间的间距
+ 如果不知道怎么解决结界问题的话
+ 可以直接设置padding即可
### 6.6 上下margin的折叠
垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
==父子块级之间的折叠==
水平方向上的margin（margin-left、margin-right）永远不会collapse**
折叠后最终值的计算规则
+ 两个值进行比较，取较大的值
+ 相同就取一个值
如何防止margin collapse(折叠)？
+ 只设置其中一个元素的margin
==折叠带来的好处==
块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的
+ 比如连续段落之间的margin，恰好需要这种折叠效果
### 6.7 border的CSS属性
==边框宽度==
+ border-top-width、border-right-width、border-bottom-width、border-left-width
+ border-width是上面4个属性的简写属性
==边框颜色==
+ border-top-color、border-right-color、border-bottom-color、border-left-color
+ border-color是上面4个属性的简写属性
==边框样式==
+ border-top-style、border-right-style、border-bottom-style、border-left-style
+ border-style是上面4个属性的简写属性
**border-style常见取值**
==简写(常用):==
~~~css
/* 大小 样式 颜色 不区分顺序,最好还是按这个顺序来写*/
border:1px soild red;
~~~
==边框相关的属性简写==
**border-top、border-right、border-bottom、border-left**
**边框颜色、宽度、样式的编写顺序任意**
**border：统一设置4个方向的边框**
### 6.8 边框的形状
边框的形状可能是
+ 矩形、梯形、三角形等形状
形成三角形的条件是盒子的高宽为0,
**==边框妙用-实现三角形==**
transparent :设置为透明
transform:rotate(deg) 旋转多少度
### 6.9 行内非替换元素的注意点
以下属性对行内非替换元素不起作用
+ width、height、margin-top、margin-bottom
+ 行内非替换元素:`span`,`strong`...
+ 设置左右不会有问题,对上下边距会没有反应
以下属性对行内非替换元素的效果比较特殊
+ padding-top、padding-bottom、上下方向的border
+ 左右没问题
+ 设置padding上下会多出区域,但这个区域不占据空间
+ border上下也能生效,但是这个区域不占据空间
==解决方法==
设置父元素为`inline-block`
### 6.10 CSS属性- border-radius
圆角半径相关的属性有
+ 分为上左,上右,下左,下右
+ 一般只写一个值,也可以写两个值
+ 第1个值是水平半径
+ 第2个值是垂直半径（如果不设置，就跟随水平半径的值）
==border-radius是一个缩写属性==
斜线/前面是水平半径，后面是垂直半径
4个值的顺序是top-left、top-right、bottom-right、bottom-left（顺时针方向）
+ 如果bottom-left没设置，就跟随top-right
+ 如果bottom-right没设置，就跟随top-left
+ 如果top-right没设置，就跟随top-left
==border-radius大于或等于50%时，就会变成一个圆==
写上宽度的一般px即可
还可以设置百分比(设置圆形时经常使用)
+ 参考的是本身border+padding+width的全部宽度
### 6.11 CSS属性 - outline
outline表示元素的外轮廓
+ 不占用空间
+ 默认显示在border的外面
outline相关属性有
+ outline-width
+ outline-style：取值跟border的样式一样，比如solid、dotted等
+ outline-color
+ outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
~~~html
<style>
.box {
width: 100px;
height: 100px;
background-color: #f00;
/* border: 5px solid yellowgreen; */
/*缩写属性 大小 样式 颜色*/
outline: 5px solid yellowgreen;
}
span {
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<span>span元素</span><!--测试会不会占用空间用的-->
</body>
</html>
~~~
应用实例
+ 去除a元素、input元素的focus轮廓效果
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* CSS Reset */
a, input, textarea {
outline: none;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<input type="text">
</body>
</html>
~~~
==可以使用outline查看页面元素的构成==
使用border会导致布局乱掉
### 6.12 CSS属性- box-shadow
box-shadow属性可以设置一个或者多个阴影
+ 每个阴影用<shadow>表示
+ 多个阴影之间用逗号,隔开，从前到后叠加
+ <shadow>的常见格式如下
官方文档的使用教程解析
inset
+ 没加<>表示直接写上inset就行
?
+ 表示0个或多个
&&
+ 1.表示和,2.可以调换书写顺序
<length>{2,4}
+ 表示写上2到4个值
<color>?
+ 只能有一个color或者没有,直接写颜色即可
==取值意思==
第1个<length>：水平方向的偏移，正数往右偏移
第2个<length>：垂直方向的偏移，正数往下偏移
第3个<length>：模糊半径（blur radius）
第4个<length>：延伸距离(对四周进行一个延伸)
<color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
inset：外框阴影变成内框阴影
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #f00;
/* 可以只写两个值 */
box-shadow: orange -15px 5px 10px 5px inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
~~~
**练习**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #f5f5f5;
}
.box {
width: 200px;
height: 300px;
background-color: #fff;
border: 1px solid orange;
margin: 30px auto;
/* 方法一: 可以设置多个值,当我们想左右两边都有阴影时*/
/* box-shadow: -10px 10px 5px,
10px 10px 10px; */
/* 方法二: rgba最后是设置透明度 */
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, .2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
~~~
### 6.13 CSS属性 - text-shadow
text-shadow用法类似于box-shadow，用于给文字添加阴影效果
text-shadow同样适用于::first-line、::first-letter
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
font-size: 25px;
font-weight: 700;
/* text-shadow可以设置多个值,分行就行了 */
text-shadow: 5px 5px 5px red,
-5px 5px 5px green;
}
p {
width: 500px;
}
/* 伪元素选择器 第一行 */
p::first-line {
text-shadow: 2px 2px 2px orange;
}
/* 第一个字母 伪元素 */
p::first-letter {
font-size: 25px;
text-shadow: 2px 2px 2px purple;
}
</style>
</head>
<body>
<div class="box">你好啊, 李银河</div>
<p>
长期关注苹果公司动态的中国分析师郭明錤本月早些时候发布了一份报告，预测苹果将在2021年从高端手机型号中移除闪电接口。这将创造出一个无线版的苹果手机，郭明錤说这将有助于衍生出更昂贵的iPhone型号，提振苹果手机销量。
郭明錤的预测是否为变成现实还不确定，苹果公司拒绝对此发表评论。但是，如果这一预测被证实，这可能是苹果将彻底消灭闪电接口充电器的一个迹象。
苹果已经销售了适用于iPhone 8和后续版本手机的无线充电设备。但是目前还不清楚消费者是否真的需要一部没有任何接口、完全通过无线方式来连接或者充电的苹果手机。
</p>
</body>
</html>
~~~
### 6.14 CSS属性 - box-sizing
box-sizing用来设置盒子模型中宽高的行为
+ content-box
+ padding、border都布置在width、height外边
+ 在给盒子设置宽高的时候,只是决定他内容盒子的大小
+ padding和border有值需要另外计算
+ border-box
+ padding、border都布置在width、height里边
+ 设置宽高时把padding和border的值都算在里面
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
padding-bottom: 20px;
border-bottom: 20px solid purple;
/* 盒子的的计算是内容盒子+padding+border box-sizing 有两个取值*/
/* content-box: 含义是设置宽度和高度时只是指定内容的宽高,这时增加padding和border不计算在宽高中 这个是默认的 */
/* border-box: 含义是设置宽度和高度时是内容+内边距+边框的宽度,这时设置padding和border,是从宽度和高度中减去,例如上面是200px,增加宽高后内容box变成了160px */
/* 盒子的内减 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
<span>span元素</span>
</body>
</html>
~~~
#### box-sizing: content-box;
#### box-sizing: border-box;
#### 盒子模型
**w3c规定的标准盒子模型就是content-box**
**ie8以下给盒子设置宽高是默认加上padding和border的,就是border-box**
### 元素的水平居中显示-总结
在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
行内级元素、inline-block元素
+ 水平居中：在父元素中设置text-align: center
块级元素
+ 水平居中：margin: 0 auto
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
height: 200px;
background-color: #f00;
width: 600px;
/* 1.普通的文本 */
/* text-align: center; */
/* 2.行内元素 */
/* text-align: center; */
/* 3.图片: 行内替换元素 */
/* text-align: center; */
/* 4.inline-block的居中 */
/* text-align: center; */
text-align: center;
}
strong {
background-color: purple;
}
.ib {
display: inline-block;
width: 100px;
height: 100px;
background-color: orange;
}
.block {
background-color: yellowgreen;
width: 200px;
height: 100px;
/* margin: 0 auto; */
margin-left: auto;
margin-right: auto;
}
span {
text-shadow: 5px 5px;
}
</style>
</head>
<body>
<div class="box">
<!-- 1.普通文本 -->
<!-- div元素 -->
<!-- 2.行内元素 -->
<!-- <strong>strong元素</strong> -->
<!-- 3.图片: 行内替换元素 -->
<!-- <img src="../img/test_01.webp" alt=""> -->
<!-- 4.行内块级元素: inline-block -->
<!-- <span class="ib"></span> -->
<!-- 特殊: 5.块级元素 -->
<div class="block">哈哈哈</div>
<span>呵呵呵</span>
</div>
</body>
</html>
~~~
==总结:只有一种元素比较特殊,块级元素居中==
1. 如果块级元素没有设置宽高时,是占据一整行的,这时你让text-align虽然文字居中了,这样是没有意义的
2. 块级元素设置宽高时,text-align只能让元素相对于自己的宽高居中
3. 这时需要用到margin:0 auto.
4. 总结:当需要让块级元素居中时都是用margin:0 auto,这个是写在自身css里的
### margin 居中的原理
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
height: auto;
width: 500px;
background-color: #f00;
}
.inner {
width: 150px;
height: 100px;
background-color: #ff0;
/* 可以实现: 水平方向的*/
/*margin:0 auto是简写,拆分开来就是,*/
margin-left: auto;
margin-right: auto;
/* 实现不了垂直居中: 垂直居中的条件必须是 父元素高度必须auto
必须使用绝对定位,计算公式高度一半-盒子一半
*/
margin-top: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
~~~
## 七. 背景设置
### 7.1 CSS属性- background-image
background-image用于设置元素的背景图片
+ 会盖在(不是覆盖)background-color的上面
如果设置了多张图片
设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
+ 当图片发生错误的时候就会显示第二张
注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
### 7.2 CSS属性- background-repeat
### 7.3 CSS属性 - background-size
background-size用于设置背景图片的大小
+ auto：以背景图本身大小显示
+ cover：缩放背景图，以完全覆盖铺满元素
+ contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
+ <percentage>：百分比，相对于背景区（background positioning area）
+ length：具体的大小，比如100px
### 7.4 CSS属性 - background-position
background-position用于设置背景图片在水平、垂直方向上的具体位置
除了具体设置方向之外,水平方向还可以设值：left、center、right
垂直方向还可以设值：top、center、bottom
如果只设置了1个方向，另一个方向默认是center
+ 比如background-position: 80px; 等价于 background-position: 80px center;
### 7.5 CSS Sprite
什么是CSS Sprite
+ 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
+ 有人翻译为：CSS雪碧、CSS精灵
使用CSS Sprite的好处
+ 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
+ 减小图片总大小
+ 解决了图片命名的困扰，只需要针对一张集合的图片命名
Sprite图片制作（雪碧图、精灵图）
+ 方法1：Photoshop
+ 方法2：https://www.toptal.com/developers/css/sprite-generator
### **练习**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* reset.css */
p, ul, body, h5 {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
/* common.css */
.wrap {
width: 1000px;
margin: 0 auto;
}
.nav {
height: 30px;
background-color: #333;
color: #fff;
}
/* 具体的样式 */
li, h5, p {
display: inline-block;
/* float: left; */
vertical-align: middle;
}
.service ul li {
margin-left: 12px;
margin-right: 25px;
}
.service ul li p {
height: 42px;
line-height: 42px;
font-size: 18px;
color: #444;
font-weight: 700;
margin-left: 3px;
}
.service ul li h5 {
width: 36px;
height: 42px;
text-indent: -999px;
background-image: url("../img/jd_sprite_01.png");
}
.service ul li:nth-child(1) h5 {
background-position: 0 -192px;
}
.service ul li .kuai {
background-position: -41px -192px;
}
.service ul li .hao {
background-position: -82px -192px;
}
.service ul li .sheng {
background-position: -123px -192px;
}
</style>
</head>
<body>
<!-- 1.测试 -->
<div class="nav wrap">
<div class="left">左边的内容</div>
<div class="right">右边的内容</div>
</div>
<div class="header wrap">
</div>
<div class="footer wrap"></div>
<!-- 2.多快好省 -->
<div class="service wrap">
<ul>
<li>
<!-- 写上h5标签,是为了seo优化-->
<h5 class="duo">多</h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5 class="kuai">快</h5>
<p>多仓直发，极速配送</p>
</li>
<li>
<h5 class="hao">好</h5>
<p>正品行货，精致服务</p>
</li>
<li>
<h5 class="sheng">省</h5>
<p>天天低价，畅选无忧</p>
</li>
</ul>
</div>
</body>
</html>
~~~
练习2:
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
height: 400px;
/* 设置最小宽度,当屏幕缩小到小于1000px时自动跑出来滚动条 */
min-width: 1000px;
background-image: url("../img/mhxy.jpg");
/* 背景图片定外:水平方向永远保持居中,垂直方向让图片上移81px */
background-position: center -81px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
~~~
### 7.6 CSS属性- background-attachment
background-attachment可以设置以下3个值
+ scroll：背景图片跟随元素一起滚动（默认值）
+ 这里的滚动指的是随着box的滚动(浏览器), 图片背景一起滚动
+ local：背景图片跟随元素以及元素内容一起滚动
+ 会随着box内容的滚动, 背景一起滚动
+ fixed：背景图片相对于浏览器窗口固定
+ 背景是固定的, 不会随着box的滚动而滚动
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 500px;
background-image: url("../img/juren_01.jpg");
/* scroll: 随着box的滚动(浏览器), 背景一起滚动 */
/* local:会随着box内容的滚动, 背景一起滚动 */
/* background-attachment: local; */
/* fixed: 背景是固定的, 不会随着box的滚动而滚动 */
/* background-attachment: fixed; */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。
不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
</div>
<p>
这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。
不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
</p>
<p>
这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。
不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
</p>
<p>
这两大令人震惊的“意外”事件发生后，留给了业界及中外媒体悬而未决的疑问：到底是苹果、高通先和解，然后苹果抛弃了英特尔；还是英特尔自己先放弃，导致苹果酸着鼻子重新找高通？问题的答案或许已不再重要，但众所周知，是一颗5G基带芯片引发了他们的爱恨离散。
不过，苹果与高通和解的代价可能相当高昂。虽然双方都不愿意透露金额，但根据瑞银（UBS）分析师蒂莫西·阿库里（Timothy Arcuri）的估算，苹果将支付给高通50亿至60亿美元的“和解费”。并且苹果还将补足过去两年“分手期”中使用高通技术的专利费。
</p>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</body>
</html>
~~~
### 7.7 CSS属性- background
==background是一系列背景相关属性的简写属性，常用格式是==
+ image position/size repeat attachment color
+ background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
+ 其他属性也都可以省略，而且顺序任意
~~~html
<style>
.box {
background-color: #fff;
background-image: url();
background-repeat: no-repeat;
background-size: contain;
background-position: 0 0;
background-attachment: fixed;
/* background: ;
font: font-size/line-height font-family; */
/* background: red; */
/* background: url("../img/juren_01.jpg"); */
background: no-repeat red url("../img/juren_01.jpg");
}
</style>
</head>
<body>
<div class="box"></div>
</body>
~~~
### 7.8 background-image和img的选择
==利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？==
| | **img** | **background-image** |
| :--------------------: | :--------------: | :----------------------: |
| 性质 | HTML元素 | CSS样式 |
| 图片是否占用空间 | √ | × |
| 浏览器右键直接查看地址 | √ | × |
| 支持CSS Sprite | × | √ |
| 更有可能被搜索引擎收录 | √（结合alt属性） | × |
| 加载顺序 | 优先加载 | 等加载完HTML元素后再加载 |
==总结==
+ img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
+ background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息
### 7.9 CSS属性- cursor
==cursor可以设置鼠标指针（光标）在元素上面时的显示样式==
==cursor常见的设值有==
+ auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
+ default：由操作系统决定，一般就是一个小箭头
+ pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
+ text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
+ none：没有任何指针显示在元素上面
### 八. 定外
### 九. 浮动
