CSS初体验
css的作用是给页面中的元素（标签）设置样式（颜色、大小、字体、位置等等）
ヾ(๑╹◡╹)ﾉ”咱们首先给P标签一点颜色看看~
特点：css的相关设置都放在 style 标签中，style是一个双标签，它放在head里面，title下面
结构：
<style>
选择器 {
属性名1: 属性值1;
属性名2: 属性值2;
...
}
</style>
示例:
<style>
p {
color: red;
font-size: 30px;
}
</style>
总结：css 是用来给页面上的结构添加样式的 (尺寸、颜色、位置等等)
CSS的相关属性
color：设置字体的颜色
font-size：设置字体的大小
background-color：设置背景(颜色)
width：设置宽度
height：设置高度
CSS概念
层叠样式表（Cascading style sheets）
作用： 给html标签设置样式 ( 给人穿衣服、化妆)
注意：
- 符号必须是英文状态下的
- 每一句样式键值对写完之后，必须记得加一个分号。
字体属性（font-）
字体大小
font-size：设置字体大小
font-size 设置字体的大小
取值如：font-size: 12px;
注意：在css大多数数值都需要添加单位
字体粗细
font-weight：字体的粗细
取值：
- 数字 : 正常(400)、粗(700)（没有单位）
- 关键字 : 正常(normal)、粗( bold )
字体风格
font-style：字体的样式
font-style 设置字体的风格(样式)
取值：
normal 显示标准的字体样式（默认）
italic 字体倾斜
字体类型
font-family：字体类型
注意：
- 一些冷门字体很多电脑里面默认没有安装，此时会显示不出来。实际工作中，默认都是一些主流字体如宋体、微软雅黑等等……
- 字体可以写多组，中间用逗号隔开（第一个不兼容会使用第二个，第二个不行会使用第三个）可以同时设置几个字体类型隶书，楷体（UI给咱们什么，就写什么~）
- 你们写字体的时候，都要加上引号
代码：
p {
/* 样式: 斜体 默认:正常 斜体*/
font-style: italic;
/* 粗细 默认 : 正常 粗体 */
font-weight: bold;
/* 字体大小 默认: 16px ; */
font-size: 116px;
/* 类型 默认: 微软雅黑; */
font-family: '隶书';
}
层叠性问题~
连写形式
font: 样式 粗细 大小 类型
font: font-style font-weight font-size font-family
font: italic bold 100px 宋体;
记忆 :
- 【样式、粗细、大小、家庭】 记住这八个字就行
- 稍微舒服==swsf
- 或者直接记 :
font: italic bold 40px '宋体';
省略：
- 可以省略前两个
font: 40px '微软雅黑';
注意点：
- 连写是注意是swsf这个顺序
- 【连写只能省略前两个】
- 给同一标签设置的相同的属性，写在下面的样式会覆盖上面的样式！！
- 推荐样式单独设置使用！！！（一般用的最多的是font-size）
开发人员调试
开发者调试工具：调试、查错、找BUG。程序员的必备装备~
打开方式：
右键 –> 查看网页源代码：”查看源码”
右键–>检查：”检查元素/打开控制台”
调试的作用：
- 修改属性值（点击属性值）
- 直接修改
- 鼠标滚轮
- 键盘的上下键
- 添加属性
- 在上一个属性值的分号之后点击一下，就可以添加样式
- 控制样式生效
- 点击每个属性前的小框，可以控制。
- 如果样式中有一个删除线，表示该样式不生效（失效）
- 查看是否生效
- 样式是否有删除线（一般都是被覆盖）
- 查看报错（原因）
- 属性值之后没有分号（没有分号会认为这一行没结束）
- 格式写的有问题（中文的标点）
- 属性名或属性值有错误
注意：
- 在基础班只关注elements这个面板，右侧的style就是当前标签对应的css样式
- 在调试工具中修改，仅仅是改变了当前页面的样式效果，刷新之后就没有了，需要添加到代码中才行
简单（基本）选择器
标签选择器、类选择器、ID选择器
选择器就是用来选中对应的标签的，然后给选中的标签加上对应的样式
标签选择器（标签名）
要求：四个标签都设置为红色
<p>我是p标签</p>
<p>我也是p标签</p>
<div>我是div</div>
<div>我也是div</div>
作用：根据指定的标签名，来设置指定的标签的样式
结构：
<style>
标签名(选择器) {
属性名1: 属性值1;
属性名2: 属性值2;
....
}
</style>
特点：
- 标签选择器会选中页面中所有符合标签名的标签
- 标签选择器不管嵌套关系多深，都能选择到
- 标签选择器不能只选择一个，而是会选中所有这一类标签
类选择器（.）
要求：满足下面的要求（做衣服）
/*没穿衣服的样子*/
<p>小红</p>
<p>小黄</p>
<p>小粉</p>
<div>我是一个想红的div</div>
/*穿好衣服的样子*/
<p class="red">小红</p>
<p class="yellow">小黄</p>
<p class="pink">小粉</p>
<div class="red">我是一个想红的div</div>
作用：根据指定的类名，来设置指定的标签的样式（穿衣服）
结构：
<style>
.类名(选择器) {
属性名1: 属性值1;
属性名2: 属性值2;
....
}
</style>
步骤：
- 声明自定义类名
.自定义类名 {属性1:值1;属性2: 值2;}（先做一件衣服） - 给对应的元素添加class类名属性 class=”自定义的类名” （把衣服给标签穿上）
效果：
- 所有拥有这个类名的这些标签都加上对应样式
- 可以给相同标签名的标签定义不同的样式（用的最多）
注意：
- 类名的命名方式：数字 字母 下划线 不能以数字开头！！
- 一个标签可以使用多个类选择器，每个类名之间以空格隔开 （覆盖问题-》层叠样式表）
- 一个类选择器，可以用在多个标签上（一种衣服可以很多人穿-》撞衫）
ID选择器(#)
要求：都设置不同的颜色，不用类选择器
<p id="red">天选之人-红果果</p>
<p id="green">天选之人-绿泡泡</p>
<div id="lowred">我也想变红</div>
作用：根据指定的id，来设置指定的标签的样式（专属装备）
结构：
<style>
#id名(选择器) {
属性名1: 属性值1;
属性名2: 属性值2;
....
}
</style>
步骤：
- 声明id
#自定义id名字 {属性1:值1;属性2:值2;}（做一件专属装备） - 给对应的元素添加属性 id=”自定义id” （调用id选择器，找到天选之人，给他穿上这件专属装备）
效果:
会将拥有这个id名的标签加上对应的属性
特点 :一对一
（一个标签只能用一个id选择器 ,一个页面上也只能用唯一的id）
注意点：
- id属性相当于标签的身份证号码
- 一个页面中的标签不能有相同的id，每一个标签的id都是唯一的！
- 一个标签上只能有一个id属性，并且唯一
- 一个id选择器只能选中一个标签
- id的命名规则和类名一样（规范）
id 主要不是为了设置css样式，而且为了后面的js使用
特别注解：
id和class的区别
id相当于身份证，不可重复，一个HTML标签只能绑定一个id属性
class相当于姓名，可以重复，一个HTML标签可以绑定多个class属性
id选择器和class选择器的区别？
- id选择器以#开头
- class选择器以.开头
实际开发情况
- 使用最多的是class选择器
- id一般情况下是给js使用的，所以除非特殊情况，否则不要用id去设置样式。
- 实际公司开发要注意代码的冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中
ヾ(๑╹◡╹)ﾉ”课堂练习小练习:
ヾ(๑╹◡╹)ﾉ”课堂练习小练习:
<p>我是p标签,我想变大，不想变红</p>
<p>我是p标签，我想变红，不想变大！！</p>
<div>我是div，我想变红，我想变大</div>
复杂（复合）选择器
通配符选择器（*）
需求 :把页面内所有的元素都设置一个颜色为red
<h1>标题</h1>
<div>小姐姐</div>
<p>小帅哥</p>
<h2>我是h2</h2>
<p>小可爱</p>
<span>大可爱</span>
作用： 会将页面上所有的标签都设置这个样式
代码：
<style>
* {
属性名: 属性值;
}
</style>
注意:
- 通配符会去页面上一个个的遍历页面所有的标签，然后给他们进行设置样式（效率低，不要滥用）
并集选择器（，）
需求：把div和p的设置红色（节省代码的方式）
<!-- 给div 和p标签设置red色 节省代码的方式 -->
<div class="red">小帅哥</div>
<p>小姐姐</p>
<p>小可爱</p>
<span id="biglovely">大可爱</span>
作用 : 将满足多个选择器类型的标签全部选择出来
代码 :
<style>
选择器,选择器 {
属性名1: 属性值1;
}
</style>
注意 :
- 并集选择器可以同时写很多的选择器 ，只要每个选择器之间以逗号隔开
- 并集选择器中的选择器，可以是标签选择器、类选择器、id选择器、等等……
交集选择器
需求：只让小可爱变红
<!-- 只让小可爱变红 其他的是默认的颜色 不能改变html中的代码 -->
<div class="red">小姐姐</div>
<p>小帅哥</p>
<p class ="red">小可爱</p>
作用： 从两个集合中选择他们相同的部分
既又原则
例如：p.box {} 既是p标签 又有box类名
代码：
选择器1选择器2 {
属性名1: 属性值1;
}
该标签既能被选择器1选中，又能被选择器2选中
注意：
- 两个选择器是紧密挨着的，中间不能有其他任何东西
- 如果交集选择器中标签选择器，标签选择器写在最开头
- 交集选择器可以同时写多个选择器
后代选择器（空格）
需求：完成下面的要求
<!-- 不准改下面的html结构 只让小姐姐变红-->
<div class="father">
<p>小姐姐</p>
</div>
<p>小可爱</p>
这个选择器开发挺常用的
作用 : 选中满足条件的后代元素（后代 : 儿子、孙子、重孙子……）
代码 :
<style>
.father p {
color: red;
}
</style>
选择器1 选择器2 {
属性名1: 属性值1;
....
}
步骤：
- 通过选择器1找到一堆标签
- 找到这一对标签的所有的后代标签
- 在这些后代标签中，找到满足选择器2的标签，给这些标签加上样式
子代选择器（>）
需求：完成下面的要求
<!-- 只让小可爱变红 其他的不变颜色 不准更改html的结构 -->
<div class="father">
<p>小可爱</p>
<div>
<p>小姐姐</p>
</div>
</div>
<p>大可爱</p>
作用 ：选中满足条件的直接子代元素 （子代 : 儿子）
代码 :
<style>
.father > p {
color: red;
}
</style>
选择器1 > 选择器2 {
属性名1: 属性值1;
....
}
注意：
- 只找的是自己的儿子辈
ヾ(๑╹◡╹)ﾉ”项目中的情况（时间不够留给作业）
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">
<div class="left">左侧侧导航栏</div>
<div class="right"><a href="#">登录</a></div>
</div>
在不修改以上代码的前提下，完成以下任务：
- 链接登录的颜色为红色，同时主导航栏里面的所有的链接改为粉色（简单）
- 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑（中等）
- 主导航栏里面的一级菜单链接文字颜色为绿色（难）
答案：
.right a {
color: red;
}
.nav a {
color: pink;
}
.nav,.sitenav {
font-size: 14px;
font-family: '微软雅黑';
}
.nav>ul>li>a {
color: green;
}
小注意：
- 基本选择器是必须熟练使用的
- 复合选择器需要配合项目多次使用才能熟练使用，第一次很难确定什么时候使用这是很正常的，之后的项目中跟着老师一起练即可
拓展的小细节
颜色的属性（知道即可）
颜色的取值可以是：
具体的颜色的英文单词：
yellow，pink，red，purple（常用的颜色单词要记住，案例中会经常使用）
rgb 表示法（三种颜色的比例）
r：red g：green b：blue
rgb（0,0,0）分别表示red、green、blue的比重，数值范围0~55
白？黑？红？绿？蓝？
rgba 表示法， 最后一个表示透明度 （0~1）
省略写法：rgba( 0, 0, 0, 0.5 ) —》 rgba( 0, 0, 0, .5 )
十六进制表示法 #CFCFCF
特点：
- 以#开头的十六进制
- 前两位代表红色，中间代表绿色，最后代表蓝色
- 不区分大小写
- 如果三组都是重复的，可以简写 #aabbcc=》#abc
之后会量颜色或者UI给你，不是自己肉眼看，所以直接拿来用就行。
注释
作用：可以让页面上的一段代码让他们失去作用，浏览器不解析他们（和html的注释差不多，就是格式不一样）
<!-- -->: html 中的注释, 不能嵌套
/* */: css 中的注释, 不能嵌套
注释快捷键：Ctrl + /
CSS的三种书写位置
内嵌（嵌入）样式表、行内样式表、外联（外部）样式表
内嵌样式
将css语句都写在style标签里面（写了很久了）
位置：
- head标签里面，title标签下面，style标签里面
作用范围：
- 当前页面
<style>
div {
color: red；
font-size：100px；
}
</style>
作用：
- 一般用在小demo或者小案例的时候用到，用的稍多
行内样式
将CSS样式直接写在标签本身上，以属性的形式存在
位置：
- 标签里面（双标签——》开始标签）
作用范围：
- 当前标签
<div style="color: red; font-size: 100px;">小可爱</div>
作用：
- 之后的学习的js操作的都是行内样式，用的较少，基础班最好别用
外联样式
单独创建一个后缀名为.css的文件，在html文件里面通过link标签引入css文件
步骤：
- 新建一个文件, 后缀叫 .css
- 在这个文件中直接通过 link 引入
位置：
- 新建一个新的css文件
- 在title下面引用
作用范围：
- 哪个页面引入，那个页面有效果
<link rel="stylesheet" href="路径" >
作用：
- 用的最多的一种，一般在项目中会用到。推荐使用
三种样式表总结
| 样式表 | 作用范围 | 存放位置 | 应用 |
|---|---|---|---|
| 内嵌样式 | 当前页面 | head里的title下面的style | 存放当前页面的样式 |
| 行内样式 | 只作用于当前标签 | 通过标签的style属性设置 | 只给一个标签使用（js） |
| 外联样式 | 所有页面都可以使用 | 在html文件中通过link引入 | 存放很多页面的公共样式 |
text- 文本相关属性
(*)text-indent：文本的缩进
设置文字的缩进,类似word中首行缩进
取值：
- px（像素）
- em（一个文字的大小）
注意：
- 单位是 em，1em代表一个文字的宽度 ，2em标签首行缩进两个字符。
text-align：文本的对齐方式
设置文字的对齐方式（水平居中）
取值：
left：设置
内容在盒子中 靠左center：设置
内容在盒子中 水平居中right：设置
内容在盒子中 靠右
注意：
能让哪些元素位置居中???
【文本、图片（行内块），span（行内）】
text-decoration：文本的修饰
设置文字的修饰（下划线、删除线等）
取值：
- none：没有任何装饰（去掉多余的样式）
- underline：下划线
- line-through：删除线
注意：
- 一般用的最多的是用text-decoration：none，取消a标签的默认下划线。
总结：strong、ins、em、del已经全部都css替换掉了
- strong——–》font的bold：加粗
- ins———》underline：下划线
- em——–》font的italic：斜体
- del——–》line-through：删除线
(*)让盒子水平居中
项目中会经常用到让盒子（div、p、h）水平居中
margin: 0 auto;
作用： 可以让盒子水平居中
条件：
- 有宽度的盒子（div、p、h），独占一行是div的效果，但是总体上来说不算居中。
区别：
margin:0 auto; 和text-align 的区别
- 一个是盒子本身居中
- 一个是盒子里的内容居中
ヾ(๑╹◡╹)ﾉ”改写昨天的新闻案例
CSS的三大特性
解释css的一些效果~
继承性
后代元素会继承祖先元素的一些样式（子承父业）
<div class="father">父亲
<div class="son">儿子</div>
</div>
开发者调试工具的使用！
有哪些样式属性可以继承（没说就是不能继承）：
- color：颜色
- font- 开头的：字体相关属性
- text- 开头的：文本相关属性
- line- 开头的：line-height
- 开发者调试工具中的computed
应用：可以省略自己的代码。比如 list-style：none； 一般给ul设置，此时可以利用继承性
注意（继承的失效）：
- a链接颜色不能通过继承设置，需要单独设置（a标签
有本身的样式）- a标签有默认的样式，要给a标签设置样式，需要单独选中后设置！
- h系列标签字体大小不能通过继承设置，需要单独设置（
有本身的样式） - div的高度不能继承，宽度默认有继承父元素的效果
- 元素如果
自身有CSS样式，那么该样式不予继承（独立）
以后敲代码别想着用继承就少写代码，该设置的代码一个别省（不要用css的继承性偷懒）
层叠性
浏览器解决样式冲突的特性
特点：后渲染的css样式会覆盖掉先渲染的css样式 （优先级相同的情况下）
层叠的属性不一样------》叠加
层叠的属性一样-------》覆盖（下面的生效）
例子：
<style>
.red {
color: green;
color: red;
}
/* 最终绿色起效果,因为.green后渲染 */
.green {
color:green;
}
</style>
<div class="green red">小姐姐</div>
优先级（重要）
给页面中的一个标签设置样式，可以通过多种方法~
当设置的样式层叠的时候，需要考虑优先级（权重）
优先级
不同的基础选择器有不同的优先级
继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
！important：无法提高继承的优先级（继承还是继承，优先级还是最低的），并且注意格式的问题
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
color: blue;
}
#box{
/* color: blueviolet; */
}
.box{
/* color: green; */
/* color: yellow !important; */
}
div{
/* color: antiquewhite; */
}
</style>
</head>
<body>
<!-- <div class="box" id="box" style="color:red">优先级</div> -->
<div class="box" id="box">优先级</div>
</body>
</html>
权重
当面对复合选择器的时候，需要考虑权重的计算
计算公式：
公式算法：（0,0,0,0）
- 第一个数字：行内样式的个数
- 第二个数字：ID选择器的个数
- 第三个数字：类选择器的个数
- 第四个数字：标签选择器的个数
注意：
从第一级开始比较，如果第一级大,，那么就大； 如果第一级一样， 那么就比第二级……
!important如果能选中对应的标签，则权重最高，天下第一！！
权重其实就是计算优先级的算法！！
计算的步骤
第一步 : 是不是能选择到该标签（继承------》pass掉） 第二步 : 使用公式（0,0,0,0）
补充一点：浏览器解析选择器的时候，实际是用右往左解析的，所以尽量少使用层级关系（涉及到算法的遍历）
例子：
不同的选择器选中同一个标签，选择器设置相同的样式，此时听谁的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*根据权重公式-显示红色*/
.father .son .grandson{
color: red;
}
.son .grandson{
color: green;
}
.grandson{
color: blue;
}
</style>
</head>
<body>
<div class="father">
父亲
<div class="son">
儿子
<div class="grandson">
孙子
</div>
</div>
</div>
</body>
</html>
(*)背景相关的属性（background）
背景颜色
设置标签的背景颜色
代码：background-color: red;
取值：
- 可以是之前介绍的几种~（前端只需要会写就行了，具体的值是UI设计好的）
背景图片
设置标签的背景为图片
代码：background-image: url(图片路径);
注意：
- 背景图片默认平铺
背景平铺
设置标签的背景图片是否平铺
代码：background-repeat: no-repeat；
取值：
- repeat：平铺 （默认值）
- no-repeat：不平铺
- repeat-x：水平平铺
- repeat-y：垂直平铺
背景位置
设置背景图片的位置
代码：background-position: 水平方向的位置（x） 垂直方向的位置（y）；
取值：
关键字
- 水平方向：left、center、right
- 垂直方向：top、center、bottom
像素：当前盒子的左上角为（0,0）原点，构建一个坐标系。第一值是X轴的位置，第二个值是Y轴的位置 交互的点就是图片左上角顶点开始显示的起始位置。
注意：
1、浏览器里面的坐标系X轴水平向右 Y轴垂直向下
2、注意顺序
背景的连写
背景属性相关的连写形式
代码：background: #fff url() no-repeat center center; （记住这个顺序）
注意：
background：背景
颜色背景图片地址 背景平铺背景位置;（推荐使用这个顺序！）省略：
background: color image repeat position; 省略 : color / image repeat position;（相当于background-color） 省略的特殊情况 当div（盒子）的大小和背景图片的尺寸一样的时候 当div（盒子）大小=背景图片的大小 可以只写 background:url(200.jpg); 相当于只写background-image注意写省略时候有覆盖的问题（省略写法，没写就是默认值，默认值也会覆盖！）
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
/* background-color: darkblue; */
/* background-image: url(./img/head.jpg); */
/* background-repeat: no-repeat; */
/* background-position: 10px 10px; */
/* background-position: center center; */
/* 连写 */
background: blueviolet url(./img/head.jpg) no-repeat center center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
*标签的三种显示方式（重要，必会！！）
看看div、p、span、a的效果~
div独占一行、宽度默认继承父盒子、高度由内容撑开
span一行显示多个、宽度和高度都是由内容撑开
块级元素
查看div的computed搜索：display
属性：display : block ;
特点：
- 独占一行一行、只能显示一个 （有时候就需要这种的，不算缺点）
- 默认宽度是父级标签的宽度
- 可设置宽和高（优点）
代表：
div、p、h系列（记住）
div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section
注意：p这种段落标签不要嵌套块级元素（惊天BUG）
行内元素
属性：display : inline；
特点：
- 一行可以显示多个 (优点)、不独占一行
- 宽度由内容决定，盒子大小完全是被内容撑开
- 无法设置宽高 (缺点)
代表：
span、a
a,span,b,u,s,i,strong,ins,del,em
行内块元素
行内元素演变成现在的行内块元素的
属性： display: inline-block ;
特点：
- 一行可以显示多个 (像是行内)
- 可以设置宽高 (像是块级)
代表： input、img、textarea、select、button
三种显示方式的转换
display: block;转成块级display: inline;转成行内display: inline-block;转成行内块
ヾ(๑╹◡╹)ﾉ”low导航（都是a标签 60*40）字体大小12px
链接伪类选择器(了解)
选择的元素的一种状态，并只是找到元素就没了
链接伪类选择器介绍
回顾a链接的特性
(1) a:link {
color: red;
font-size: 18px;
}
作用: 给a标签设置`没有被访问过`的样式
(2) a:visited {
color: blue;
}
作用: 给a标签设置`访问过`的样式
一般这个只设置 color, 其他属性会无效
(3) a:hover {
color: pink;
font-size: 20px;
}
作用: 给a标签设置 `鼠标悬停`的样式
(4) a:active {
color: green;
font-size: 30px;
// 背景颜色不能设
}
作用: 给a标签设置 ` 激活(点击中) `的状态
链接伪类选择器注意点
一般一起使用设置某个属性，都设置某一个属性
顺序固定
link visited hover active lvha => 看见lv包就hahover必须记住（可以加给其他元素），其他的几乎不用
居中方法小总结
让标签中的内容（文本、图片、span）水平居中
text-align:center
1.文本
2.行内块元素（input/img）
3.行内元素（span/a）
让标签中的内容（文本、图片、span）垂直居中
line-height：标签的高度；
1.文本
2.行内块元素（input/img）注意：`img需要加 vertical-align : middle（垂直对齐方式居中）`
3.行内元素（span/a）
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid;
text-align: center;
line-height: 300px;
margin: 0 auto;
}
.box img{
/*图片居中要加上这个*/
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<!-- heh -->
<!-- <input type="text"> -->
<!-- <span>111</span> -->
<img src="./img/head.jpg" alt="">
</div>
</body>
</html>
让盒子自身水平居中
适用于有宽度的盒子
盒子自身设置 margin:0 auto;
让盒子自身垂直居中
之后学习的定位
盒子模型
一种思维方式（万物皆盒子）
盒子模型的组成
盒子模型的四个组成部分
- content（内容/电脑）+padding（内边距/海绵）+border（边框/白色纸壳）+margin（外边距/盒子与盒子间的距离）
边框（border-边框-盒子的外纸壳）
属性：
- border-width: 边框的宽度（10px）；
- border-style: 边框的样式；
- solid : 实线 （用的最多）
- dashed : 虚线
- dotted : 点线
- border-color: 边框的颜色；
- 有颜色：red、#fff、rgb()等等
- 透明：transparent
连写：
border: 边框大小 边框样式 边框颜色;
border: 1px solid blue; // 不要记上面那个，就记这个即可 （用的最多）
快捷方式：bd+ + tab 以后使用，都用连写，基本不会单独写
方向：
单独设置盒子的一条边框
border-方位名词:边框大小 边框样式 边框颜色;
比如：
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框
补充：
细线表格
border-collapse:collapse；这样就不用写cellpadding和cellspacing了
使用开发者工具查看盒子模型（计算盒子的大小，初级计算公式）
<!-- 需求 : 盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 --> 注意： 1.css设置的height和width设置的是内容的宽高 2.添加边框会让盒子变大 解决： 在设置边框之后根据初级公式，把height和width手动减去多出的部分 （手动内减） 解决方案：盒子内容 380*380 , 背景绿色, 边框：10px 实线 黑色
ヾ(๑╹◡╹)ﾉ”写一个小盒子（由内容和边框组成）
——————————-
ヾ(๑╹◡╹)ﾉ”不low导航~
内边距（padding-内边距-盒子的泡沫）
盒子边框与内容之间的距离
取值：
一个值：控制整个上下左右
padding : 40px；上、右、下、左 的内边距都设置了 40 px的距离;
两个值：第一个控制上下 第二个控制左右
padding : 40px 80px上下 => 40px , 左右 => 80px
三个值：第一个控制的上 第二个控制的左右 第三个控制的下
padding : 40px 60px 80px;上 => 40px , 左右 => 60px , 下 => 80px
四个值：分别控制：上右下左
padding : 40px 60px 80px 100px;上 => 40px , 右 => 60px , 下 => 80px , 左 => 100px
记忆：顺时针，上右下左，没有找对面
单独设置（方向）：
padding-top
padding-right
padding-bottom
padding-left
*计算盒子的大小
盒子大小与内容大小的区别
- 盒子大小公式 :
<!-- 需求 :
盒子尺寸 300*300 , 背景粉色, 上下左右20px的padding(此时盒子大小是多少？？) 边框: 10px 实线 黑色
-->
// 左右相等
盒子宽度 = 内容宽度 + 2*padding + 2*border
// 左右不等
盒子宽度 = 内容宽度 + padding-left+padding-right + border-left
+ border-right ;
那盒子高度是多少？
- 盒子大小：边框、内边距、内容决定的
- 我们之前设置的width 和 height 都只是设置内容的大小
注意（不会撑大盒子的特殊情况）：
- 当一个大盒子包含一个小盒子，并且两个盒子都是块级元素，小盒子宽度继承父盒子，这时候给小盒子加padding-left，是不会改变小盒子大小的 （下面的都可以）
- padding-left（用的最多）
- padding-right
- border-left
- border-right
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 300px;
height: 300px;
background: deeppink;
}
.box2{
height: 200px;
background: deepskyblue;
/*此时小盒子不会被撑大,会自动内减*/
padding-left: 20px;
border-left: 10px solid;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
ヾ(๑╹◡╹)ﾉ”新浪导航（不low导航升级版）~
用之前的方法，当a标签的文字数量不确定时，页面会有问题。
普遍的方法应该使用padding
——————————
让浏览器自动内减（拓展css3）~
<!-- 需求 :
盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 padding:20px
-->
box-sizing：border-box；（自动内减，此时width和height就是当前盒子的实际大小）
ヾ(๑╹◡╹)ﾉ”新闻列表案例~
外边距（margin-外边距-盒子与盒子之间的距离）
盒子与盒子之间的距离（控制盒子的位置）
取值：
一个值：控制整个上下左右
margin : 40px；上、右、下、左 的内边距都设置了 40 px的距离;
两个值：第一个控制上下 第二个控制左右
margin : 40px 80px上下 => 40px , 左右 => 80px
三个值：第一个控制的上 第二个控制的左右 第三个控制的下
margin : 40px 60px 80px;上 => 40px , 左右 => 60px , 下 => 80px
四个值：分别控制：上右下左
margin : 40px 60px 80px 100px;上 => 40px , 右 => 60px , 下 => 80px , 左 => 100px
单独设置（方向）：
margin-top
margin-right
margin-bottom
margin-left
针对margin单方向的应用：
上下应用
- margin-top：能让盒子下移
- margin-bottom：能让下面的盒子往下移
左右应用（先转换成行内块）
- margin-left：能让盒子右移
- margin-right：能让右边的盒子往右移动
清除默认内外边距
很多标签默认带有margin和padding，在布局之前需要清除这些标签默认的margin和padding，留给自己设置。
比如：
(1) body 标签: 自带 margin: 8px; 的属性
(2) p 标签: 默认带有 margin: font-size 的值
(3) h 标签: 也默认带有 margin-top 和 margin-bottom
(4) ul标签: ul 标签默认带有上下的 margin, 和 padding-left
...
方法（清除页面中标签的默认padding和margin）：
* {
padding: 0;
margin: 0;
}
——————————
ヾ(๑╹◡╹)ﾉ”爱宠知识案例~
拓展
- 之后工作中，用什么软件测量都可以，顺手就行
- box-sizing：border-box；（自动内减，此时width和height就是当前盒子的实际大小）
*行高（line-height）
定义： 两行文本基线的距离，默认值为normal，可以撑起高度
应用：将行高设置等于容器的高度，可以让文本垂直居中
line-height:20px; /*控制的是文字与文字之间的上下距离*/
注意：
- 小技巧：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中
- 与text-align结合使用可以让单行文字在标签内部水平垂直居中
- 行高是可以继承的
行高的单位
取值：
具体的像素
em
根据当前标签的字体大小（font-size）为基数计算（没有手动设置，浏览器默认设置16px）
如果当前字体大小为16px，那么 2em=32px
百分号（%）
根据当前标签的字体大小（font-size）为基数计算
如果当前字体大小为16px，那么 200% = 32px
不带单位的数字（倍数）
根据当前标签的字体大小（font-size）为基数计算
如果当前字体大小为16px，那么 2 = 32px
补充： 谷歌浏览器默认字体大小 16px;
*行高与font的连写
字体连写里面还有行高（默认值：normal）
默认值为：normal，不同的文字效果不同，
完整版的font连写形式：
font: font-style font-weight font-size/line-height font-family
line-height 如果写在 font 连写前面，会被层叠掉 （连写的层叠现象）
/*line-height书写位置：*/
/*1. 写在font里 没毛病 */
font: italic bold 20px/200px '微软雅黑';
/*2. 写在font后面 没毛病*/
font: italic bold 20px '微软雅黑';
line-height: 200px;
/* 3. 写在font前面 会覆盖 */
line-height: 200px;
font: italic bold 20px '微软雅黑';
/*此时line-height为normal值*/
注意（项目中用到了line-height和font的连写）：
- 把line-height写在font连写的下面
- 把line-height写进font的连写里面！
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
height: 32px;
background: cornsilk;
border: 1px solid;
/* line-height: 200%; */
/* line-height: 32px; */
/* line-height: 2; */
/* line-height: 32px; */
/* font: italic bold 16px/32px '微软雅黑'; */
/* font: italic bold 16px '微软雅黑';
line-height: 32px; */
/* 这种情况会失效 */
/* line-height: 32px;
font: italic bold 16px '微软雅黑'; */
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
margin的两种特殊现象
*marign的合并现象
当两个盒子水平布局时，左右的margin会叠加；
当两个盒子垂直布局时，上下的marign会合并-》合并之后取两者的最大值为两个盒子之间的距离
// 盒子左右排序 没毛病
margin-left 和 margin-right 叠加
// 【盒子上下排序 有问题】
margin-top 和 margin-bottom 合并
// 总结 :
两个div上下排序, 在进行设置 margin-top 和 margin-bottom 的时候,两个margin会产生一个合并的现象, 合并的值以大的为准
解决方案： 避免就好了
记忆：margin 水平—>叠加 上下—>取大
*margin的塌陷现象（面试常考！）
嵌套 块元素垂直外边距的塌陷（父元素一起往下移动）
两个盒子为父子关系时候，父元素的marign和子元素的margin会合并，并且父元素会往下移动
如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移
解决方案：
- 给父盒子加一个边框
- 给父盒子加 padding-top
- 给父盒子设置属性 overflow: hidden => BFC;
- 给父盒子设置浮动
- 给父盒子设置为行内块
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
}
.box1{
background: deeppink;
display: inline-block;
margin-right: 10px;
}
.box2{
background: deepskyblue;
display: inline-block;
margin-left: 10px;
}
.box3{
background: green;
margin-bottom: 20px;
}
.box4{
background: yellow;
margin-top: 10px;
}
.box5{
background: blueviolet;
/* 塌陷的解决方案，下面选一种就行 */
/* border: 1px solid; */
/* padding-top: 1px; */
/* display: inline-block; */
/* overflow: hidden; */
/* float: left; */
}
.box6{
width: 100px;
height: 100px;
background: yellowgreen;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 合并1.水平maring会叠加 -->
<div class="box1 box"></div><div class="box2 box"></div>
<hr>
<!-- 合并2.上下maring会取最大的 -->
<div class="box3 box"></div>
<div class="box4 box"></div>
<hr>
<!-- 塌陷现象 -->
<div class="box5 box">
<div class="box6"></div>
</div>
</body>
</html>
浮动
浮动初体验
解决上下盒子 可以水平布局的问题
需求：在页面上有两个盒子，一个盒子靠着左边显示，一个盒子靠着右边显示
可以使用marign，但是浏览器宽度变化时，不能完成效果~
浮动的代码：
float: left;
float: right;
浮动的特点（了解）
重点在于使用
标准流：就是浏览器默认摆放盒子的顺序（从上往下、从左往右）
注意：
浮动的元素会脱离标准流（脱标）
- 飘起来了
- 在标准流中不占位置
如果一个元素按照正常的标准流来显示, 会在 html 中所属的位置占位, 后面的元素会紧跟着它, 但是浮动脱离了标准流, 将来在看到浮动的元素以后,就不能以正常的标准流来判断了 (浮动的元素在标准流中不占位置了)浮动以后的元素，会覆盖在标准流的元素之上
- 比标准流高出半个级别
浮动的规则：浮动找浮动，不浮动找不浮动
浮动的重点：浮动的元素只会影响下面的元素
- 本质：浮动的元素受到盒子边界的限制（块级元素独占一行）
浮动的元素会改变显示方式效果
浮动以后的元素当做是一种特殊的显示效果： 1、一行可以显示多个 2、并且可以设置宽高 总结: 浮动以后的元素的显示方式与行内块级元素类似，但是不能使用text-align：center居中（浮动本身就是让盒子左右排布的）
记忆 :
1. 浮动的元素会脱标 ==> 飘起来了（不占位置） ==> 比标准流高半个级别 ==> 类似行内块的特点
2. 浮动的元素会被盒子的边界限制住
浮动的案例
- 使用浮动完成页面的布局
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.head{
height: 50px;
background: pink;
}
.container{
width: 500px;
margin: 0 auto;
}
.container .top{
height: 50px;
background: yellow;
}
.container .aside{
width: 20%;
height: 200px;
background: #000;
float: left;
}
.container .section{
width: 80%;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="container">
<div class="top"></div>
<div class="aside"></div>
<div class="section"></div>
</div>
</body>
</html>
制作导航
注意：之前直接使用 a 标签 display：inline-block 制作导航是有问题的
- 导航与导航之间应该是列表关系，如果想要将这些关系通过 html 语义化表示出来，必须要用到 ul 标签
- 如果这些 a 标签不用其他的标签包裹起来，那么将来浏览器会将这些 a 标签中的文字，当做普通文本一起显示，SEO 在查看页面时，认为该页面在作弊，就是在进行关键字堆砌
所以, 导航必须要用 ul 和 li 将 a 标签包裹起来
*：项目开始前先初始化样式
ul:用于清除小圆点：list-style
li:用于浮动在水平方向布局：float：left
a：用于设置宽高（把li的大小撑起来）
注意a标签是行内元素，需要通过
1.转换显示方式（块级元素和行内块都行，但是不推荐使用行内块）；
2.float：left 也能起效果（浮动之后的元素可以设置宽高）
清除浮动（清除浮动的影响）
浮动带来的问题：浮动元素撑不开父级容器
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0，由于父盒子的高度为 0，下面的元素会自动补位，所以这个时候要进行浮动的清除
浮动: float: left; float: right;
清除浮动: clear: both;
额外标签法
不推荐，会产生一个多余的盒子
在浮动的盒子内部最后，再放一个块级标签，在这个标签内使用 clear：both；来清除浮动对页面的影响
注意： 一般情况不使用这种方式清除浮动，因为这种方式会在页面中添加额外的标签
使用 overflow 清除浮动
在某些特定场景下使用不了
找到浮动盒子的父元素, 再在父元素中添加一个属性 overflow: hidden; 清除父元素中子元素浮动对页面的影响
注意： 一般情况也不用这种方式，因为 overflow: hidden; 有一个特点，离开了这个元素所在的区域以后会被隐藏 （后面讲这个方法就懂了）
使用伪元素清除浮动
通过css实现，推荐！
伪元素： 在页面上不存在的元素，但是可以通过 css 添加上去（默认是行内元素）
种类：常见的就2种
::after(在...之后)
::before(在...之前)
为了和伪类的一个冒号区别，css3的时候推荐使用两个冒号（兼容还是要使用一个冒号）
注意：
- 伪元素由css渲染，不会增加html结构
- 每个元素都可以添加自己的伪元素
- 默认伪元素是行内元素，可以通过 display 修改
伪元素清除浮动完整代码：
.clearfix::after {
content: ""; //伪元素必须给这个content=''
display: block; // 必须块级才能清除
clear: both; // 核心代码
/*保证伪元素在页面中看不到*/
height:0;
line-height:0;
visibility:hidden;
}
设置高度
简单粗暴，但是不推荐，不利于后期维护
注意：问题? 给谁设置，浮动的父盒子 (height=0 的)
—————————-
浮动的意义
- 浮动最开始是做图文环绕（报纸的效果）
- 浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右
ヾ(๑╹◡╹)ﾉ”网页头部案例~
拓展
*关于行内的padding和margin使用
什么时候设置margin? 什么时候设置padding?
需要在`边框内部`留有空隙 => padding
需要在`边框外部`留有空隙 => margin
ヾ(๑╹◡╹)ﾉ”上面两个div，下面有个p标签~
块级元素和行内块元素使用 margin 和 padding-》没毛病，但是：
- 行内元素使用margin的left 和 right可以，top和bottom无效
- 行内元素使用padding的left和right可以，top和bottom无效
总结：
- 块级元素和行内块元素的margin和padding随便使用！没问题
- 行内元素的上下margin和上下padding会失效！！开发中不要使用！！
*浮动元素显示效果的注意点
浮动元素的特点之一为：浮动之后的元素有类似
行内块的显示效果
所以浮动元素不管前生是什么，浮动之后就变成了一个类似行内块的效果！不再有块级的特点：
以div为例：
- 块级元素特点1：水平居中使用margin:0 auto;
- 前生：块级元素：margin：0 auto；
- 浮动之后：margin：0 auto；不能居中（浮动本身就是到页面的一侧，并且浮动之后有行内块的效果）也不能使用text-align：center；居中
- 块级元素特点2：宽度继承
- 前生：块级元素：有继承父元素宽度的效果
- 浮动之后：不能继承父元素的宽度
记忆：浮动之后元素当做一个特殊的显示方式！
不能使用text-align；或者margin：0 auto；居中
宽度不能继承父元素
（一行显示多个，并且可以设置宽高）
不要乱用浮动，只有当遇到让盒子水平布局时才使用！！！
浮动的元素相当于父元素的内容，仍然在盒子的content部分中！
版心
宽度固定且水平居中的盒子
为什么要有版心?
因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束
版心的公共类的设定：
.w {
width: 1200px；
margin：0 auto；
}
<div class="w"></div>
特殊情况：
设计师会给你一张很大的图片 1920 * 1000 (是为了适应不同的屏幕)
但是版心只有1280
问：图片怎么处理
答：这个盒子不做约束 width:100%; 这个图片作为背景图片放到这个盒子里面
同时background-position:center 0;
综合项目：尚合
项目初始化
整个项目应该就是一个文件夹，文件夹中放项目中的所有资源（图片、html、css）
css在开始的时候可以把项目中常见的样式先写好，这个叫做样式的初始化！！！
/*-----------------------------项目样式的初始化--------------------------------------------*/
/*清除默认的marign和padding*/
* {
margin: 0;
padding: 0;
}
/*消除页面中li的小点*/
ul {
list-style: none;
}
/*消除a标签默认的下划线*/
a {
text-decoration: none;
}
/*版心的样式*/
/*版心就是宽度固定水平居中的盒子*/
.w {
width: 980px;
margin: 0 auto;
}
/*左浮动的类*/
.fl {
float: left;
}
/*右浮动的类*/
.fr {
float: right;
}
/*清除浮动的代码*/
.clearfix::after {
content: '';
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
/*为了在上面看到下面的标签 最后删掉*/
/*body {
height: 2000px;
}*/
尚合总结
- 给div设置宽高来简化间距的设置
定位
作用: 解决盒子与盒子之间的层叠问题
问题：现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半，怎么完成？？？
使用margin可以实现效果，但是并不好，定位可以专门解决这样的层叠问题
初体验：
position：absolute； 设置定位
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
position: absolute;
top: 100px;
left:100px;
}
方位属性：
水平和垂直方向各选一个使用即可，一般选取的原则是离那边近用哪个
- 水平方向：
- left：相对于左边框的距离
- right：相对于右边框的距离
- 垂直方向：
- top：相对于上边框的距离
- bottom：相对于下边框的距离
static：静态定位（默认型）（有争议的）
标准流中的元素默认都是静态定位
代码： position: static; （默认值）静态定位
静态定位是有一定争议的（有些人认为静态定位不算定位）
面试时候回答：三种定位方式，优先回答其他三个（相对、绝对、固定），如果四种再写静态定位
relative：相对定位（自恋型）
盒子相对于自己之前的位置定位移动（红绿蓝）
代码：position: relative； 相对定位
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
position: relative;
top:100px;
left:100px;
}
特点：
要配合方位属性使用，不然无法移动
相对于自己原来的位置进行偏移
设置了相对定位的元素在页面上占据了位置-》没有脱标
应用场景：
- 配合绝对定位组CP（子绝父相），用的最多
- 用于小范围的移动（比如让某个标签稍微往下移动几个像素）
absolute：绝对定位（拼爹型）
绝对定位相对于非静态定位的父元素进行定位移动
代码：position: absolute; 绝对定位
特点：
—————————–
需要配合方位属性移动使用
绝对定位相对谁移动？？
默认相对于浏览器进行移动，但是如果有父元素，则相对于有定位的父元素进行移动
判断方法：
- 没有父元素-》相对于浏览器进行移动
- 有父元素（判断父元素有没有定位（三种，非static））
- 父元素没有定位-》相对于浏览器进行移动
- 父元素有定位-》相对于有定位的父元素进行移动
绝对定位的元素在页面中不占位置-》脱标
应用场景：
子绝父相（子元素绝对定位、父元素相对定位），把子元素定位到父元素中的某个位置，用的最多！！！
子绝父相这个CP不会影响页面的布局-》举例说明
ヾ(๑╹◡╹)ﾉ”子绝父相定位居中案例
代码:
.father{
width: 400px;
height: 400px;
background-color: red;
margin-left: 100px;
margin-top: 100px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left:50%;
top:50%;
/* transform: translateX(-50%); */
transform:translate(-50%,-50%);
}
如果小盒子在大盒子（1）水平居中（2）水平垂直都居中
.father:600*400
.son:200*100
先 left：50%， 将子盒子在父盒子向右平移父盒子的一半
再设置 margin-left：-（子盒子自身宽高的一半）
注意：此时取值一定是负数-》 那么将来子盒子就可以水平居中了
优化：但是此时子盒子大小变化时就不再居中了，margin-left：-50%也是相对父元素的不行；
此时可以使用css3的新属性：
transform：translateX（-50%）沿着x轴的负方向移动自己的一半也能居中！如果x周和y周都沿轴的负方向移动自己的一半要设置：transform:translate(-50%,-50%);
ヾ(๑╹◡╹)ﾉ”课堂练习：网站头部hot图标
ヾ(๑╹◡╹)ﾉ”课堂练习：小米商品页半透明效果
—————————–
fixed：固定定位 （死心眼型）
盒子相对于浏览器进行定位移动
代码：position: fixed; 固定定位
特点：
配合方位属性一起使用
永远相对于浏览器进行移动
固定定位的元素也不在页面中占据位置-》脱标
注意的是：脱标后的元素和浮动脱标了一样，有类似于行内块元素的显示方式（宽度默认由内容撑开）
ヾ(๑╹◡╹)ﾉ”课堂练习：新浪网页
四种定位总结
| 是否脱标占有位置 | 定位模式 | 是否移动 | 移动位置基准 |
|---|---|---|---|
| 不脱标，正常模式 | 静态static | 不可以 | 正常模式 |
| 不脱标，占有位置 | 相对定位relative | 可以 | 相对自身位置移动 |
| 完全脱标，不占有位置 | 绝对定位absolute | 可以 | 相对于定位的父级移动位置 |
| 完全脱标，不占有位置 | 固定定位fixed | 可以 | 相对于浏览器移动位置 |
元素的层级问题（z-index）
可以通过z-index设置页面中
定位元素的层级关系，数值越大，层级越高
取值：整数
注意：
标准流、浮动、定位之间的层级关系
两个盒子之间的比较
三种层叠关系： 标准流 < 浮动 < 定位（相对、绝对、固定）定位之间的层叠问题：
三者的层叠关系相同，写在下面元素的覆盖上面的
可以手动设置定位元素的层级关系
如果需要手动设置定位的层级关系，可以通过z-index属性设置层级 z-index：数值; 数值越大 层级越高
vertical-align（垂直对齐方式）
让图片（行内块元素）和文字对齐，需要优先给行内块元素设置垂直对齐方式
问题： 图片和文字在一行中显示的问题（bottom）
如果文本与图片在同一行中显示，其实默认的效果是图片的底部和文字基线对齐的，此时就可能会影响页面的布局。
此时可以通过：
vertical-align: 可以设置文本与行内块（图片）的垂直对齐方式
取值：
- baseline：基线对齐(默认)
- top：顶部对齐
- middle：中线对齐
- bottom：底部对齐
使用行内块元素可能会出现的bug：
- 场景1 : 文本框（text）和表单按钮（button）无法对齐问题；（vertical-align: middle）
- 场景2 : input 和 img无法对齐的问题；(vertical-align: bottom)
- 场景3 : div里放一个文本框 ，此时文本框无法靠顶；(vertical-align: top)
- 场景4：div由img标签撑开，此时img标签下方有间隙（给img标签设置vertical-align即可）；
- 场景5 : 使用line-height让img标签垂直居中，需要给img标签单独设置vertical-align：middle
如果要让垂直布局的盒子变成水平布局，不推荐使用转换成行内块元素，推荐使用浮动完成效果。
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
border: 1px solid #000;
}
.box1 button{
border: 1px solid #000;
vertical-align: middle;
}
.box2 img{
vertical-align: bottom;
}
.box3{
height: 30px;
}
.box3 input{
vertical-align: top;
}
.box4 img{
vertical-align: bottom;
}
.box5{
padding: 20px;
text-align: center;
}
.box5 img{
width: 30px;
height: 30px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box box1">
石室诗士施氏，嗜狮<button>login</button>
</div>
<div class="box box2">
<input type="text"> <img src="./img/head.jpg" alt="">
</div>
<div class="box box3">
<input type="text">
</div>
<div class="box box4">
<img src="./img/head.jpg" alt="">
</div>
<div class="box box5">
<img src="./img/head.jpg" alt="">
</div>
</body>
</html>
overflow：溢出
设置盒子内容超出盒子大小时的展示效果
取值：
visible 超出不裁剪（默认值）
hidden 如果盒子中的内容超出盒子范围，就隐藏
scroll 显示滚动条
auto 根据具体的情况，判断是否要添加滚动条（不超出没有，超出有）
*元素的隐藏区别
隐藏元素的几种方式的区别（大小盒子嵌套）
overflow:hidden；（超出隐藏）
隐藏超出部分
visibility：hidden；（元素看不见）
隐藏元素，将元素看不见，但是在页面中还是占位置！！
display：none；（元素不存在）
隐藏元素，将元素看不见，但是在页面中不占位置！！
<div class="one">测试隐藏</div>
<div class="two"></div>
html 标签的嵌套规范（了解）
块级元素一般用于布局：比如div在页面的布局用的最多；
行内元素一般用于放文字：比如span、a标签里面一般放文字
标签之间是不能随意嵌套的，书写的时候应该有对应的规范：
注意点：
- 行内元素一般放文字或者行内元素，但是a标签之间不能互相嵌套（会被浏览器解析成两个a标签）；
- 块级元素相当于一个容器，里面可以放文字、行内元素、块级元素，但是p标签不能包含div标签（p标签会被拆分成两个p标签）
- p标签作为一个段落标签，只有文字才会组成段落，所以p标签里面一般只放文字，不要放块级元素！！！
拓展
属性选择器
通过标签的属性，找到对应的标签
用的最多的情况是找到input标签的不同形态
/* 找到页面中的文本框 */
input[ type = 'text' ] {
css样式;
}
/* 找到页面中的普通按钮 */
input[ type = 'button' ] {
css样式;
}
结构伪类选择器( -child系列)
如果现在想找到ul标签下面的第几个li标签的时候，除了使用class大法之外，还可以使用结构伪类选择器完成效果
E:first-child 匹配父元素的第一个子元素E
比如：li：first-child {css样式} 查找过程如下： 1、首先找到li 2、找li标签的父元素 3、找父元素第一个子元素 4、看这个子元素是不是li 1、是-》加样式 2、不是-》不加样式E:last-child 匹配父元素的最后一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E
针对于nth-child括号中可以写一个带n的式子，n的取值范围是0~正无穷的整数 所以： 1、找到所有的偶数：2n 2、找到所有的奇数：2n-1 / 2n+1 3、找到前12个：-n+12(12-n却不行？？？)
【案例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li:first-child{
color: red;
}
ul li:nth-child(3){
color: blue;
}
ul li:nth-child(2n){
color: yellow;
}
</style>
</head>
<body>
<ul>
<!-- <div>奸细如果是第一个，不会变红</div> -->
<li>我是第个1li</li>
<li>我是第个2li</li>
<li>我是第个3li</li>
<li>我是第个4li</li>
<li>我是第个5li</li>
</ul>
</body>
</html>