前端HTML+CSS学习（黑马程序员总结）
黑马程序员---前端学习笔记
目录
2.4 水平居中方法总结text-align: center
前瞻：基础认知：
1.1 基础认知：
1、网页组成
文字、图片、音频、视频、超链接
2、基础认知
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器（苹果浏览器）、Opera浏览器（欧朋浏览器）
注意：因为不同浏览器渲染引擎不同，解析的效果会存在差异
3、渲染引擎（浏览器内核）
定义：浏览器中专门对代码进行解析渲染的部分
浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
FireFox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink Blink其实是Webkit的分支
注意：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
4、Web标准三个构成：
HTML：负责结构（内容），页面元素和内容
CSS：负责表现，网页元素的外观和位置等页面样式（如颜色、大小等）
JavaScript:负责行为，网页模型的定义与页面交互
2.1 HTML
HTML（Hyper Text Markup Language)中文翻译为：超文本标记语言
1、HTML页面固定结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
2、开发工具
使用VS code快捷方式：
创建HTML5创建骨架结构：先输入“！”，后敲击Tab即可快速创建HTML骨架结构。
3、HTML语法规范
注释：
格式：<!-- -->
在VS Code中: 将光标定位到注释部分，使用Ctrl+/，同理，取消注释也是使用Ctrl+/。
标签：
格式：
| <strong> | 文字要变粗 | </strong> |
|---|---|---|
| 开始标签 | 包裹的内容 | 结束标签 |
结构说明：
1、标签由<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名。
2、常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
3、少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
标签之间的关系有：
父子关系：
eg:
<head> <title></title> </head>
兄弟关系：
eg:
<head></head>
<body></body>
4、基本标签
标题标签：
格式：<h1>标题名</h1>
vs code特性：
输入"h1"后，键入Tab。
使用“ctrl+D"快捷键可以快速选择附近相同单词。
段落标签：
格式：<p>段落内容</p>
vs code特性：
段落之间存在间隙，且独占一行。
可以使用查看菜单里面的自动换行来查看代码。
换行标签：
格式：
vs code特征：在文本内容中直接输入即可。
水平分割线：
格式：<hr>
vs code特征：在<body>等代码中直接输入即可。
文本格式化标签：
标签 强调突出 说明
b strong 加粗
u ins 下划线
i em 倾斜
s del 删除线
媒体标签：
图片标签格式：
<img src="" alt="" title="" width="" height="">
vs code特征：
单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置；
src指文件路径(URL)，eg-->"./1.jpg";
alt指替换文本，当src路径下文件不能显示的时候将显示alt属性的值。
title指当前标签的值，当鼠标定位到当前标签5秒左右会出现。
width或height指图片宽高，一般调整一个值即可。
音频标签：
音频标签格式：
提示：src指音频的路径，controls指显示播放的控件，autoplay指自动播放(部分浏览器不支持)，loop指循环播放.
视频标签：
视频标签格式（支持MP4、WebM、Ogg）格式文件：
file:///D:/APP/Typora/Typora/resources/app//window.html
提示：src指音频的路径,controls指显示播放的控件，autoplay指自动播放(谷歌浏览器中需配合muted实现禁音播放)，loop指循环播放.
链接标签：
链接标签格式：
eg：跳转到百度
提示：href指跳转地址，_target可取值 _self(默认值，在当前窗口中跳转---覆盖原网页) 或者 _blank(在新窗口中跳转---保留原网页) 当开发网站初期，我们还不知道跳转地址的时候，href的值书写#(空链接)
3.1 路径的介绍
绝对路径：
定义：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
eg：D:\day01\images\1.jpg
相对路径：
定义：从当前文件开始出发找目标文件的过程
分类：
1.同级别
eg："目标文件.jpg"与"./目标文件.jpg"
2.下级别
eg：“目标图片父目录/目标图片.jpg"
3.上机别
eg：“../目标文件.jpg”
4.1 标签
一、列表标签
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表
2.1 无序列表
场景：
在网页中表示一组无顺序之分的列表，如：新闻列表。
标签组成：
标签名 说明
ul 表示无序列表的整体，用于包裹标签
li 表示无序列表的每一项，用于包含每一行的内容
显示特点：
列表的每一项前默认显示原点标识
注意点：
ul标签中只允许包含li标签，li标签可以包含任意内容
3.1 有序列表
场景：
在网页中表示一组有顺序之分的列表，如：排行榜。
标签组成：
标签名 说明
ol 表示有序列表的整体，用于包裹标签
li 表示有序列表的每一项，用于包含每一行的内容
显示特点：
列表的每一项前默认显示序号标识
注意点：
ol 标签中只允许包含li标签，li标签可以包含任意内容
4 .1 自定义列表
场景：
在网页的底部导航中通常会使用自定义列表实现
标签组成：
标签名 说明
dl 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容
显示特点：
dd前会默认显示缩进效果
注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
二、表格标签
目标：能够使用表格相关标签和属性，实现网页中表格结构的搭建
1.1 表格的基本标签
场景：
在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：
标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容
注意点：
标签的嵌套关系：table > tr > td
2.1 表格的相关属性
场景：
设置表格基本展示效果
常见相关属性：
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度
注意点：
实际开发时针对于样式效果推荐用css设置
3.1 表格标题和表头单元格标签
场景：
在表格中表示整体大标题和一列小标题
其他标签：
标签名 名称 说明
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
4.1 表格的结构标签（了解）
场景：
让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部
注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
引申：
vs code鼠标选择多行后，使用tab键可以整体向后移动，鼠标选择多行后，使用shift+tab键可以整体向左移动。
5.1 合并单元格-思路
场景：将水平或垂直多个单元格合并成一个单元格
5.2 合并单元格-代码实现
合并单元格步骤：
1、明确合并哪几个单元格
2、通过左上原则，确定保留谁删除谁
上下合并-->只保留最上的，删除其他
左右合并-->只保留最左的，删除其他
3、给保留的单元格设置：跨行合并（rowspan)或者跨列合并(colspan)
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并
注意点：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨：thead、tbody、tfoot)
四、语义化标签
目标：能够认识开发中常用的没有语义布局标签（div、span）和 有语义的布局标签
学习路径：
1、没有语义的布局标签
2、有语义的布局标签（了解）
1.1 没有语义的布局标签-div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
2.1 有语义的布局标签（了解）
场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意点：
以上标签显示特点和div一致，但是比div多了不同的语义
五、字符实体
目标：能通过字符实体在网页中显示特殊符号
学习路径：
1、HTML中的空格合并现象
2、常见字符实体
2.常见的字符实体
场景：在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文
常见字符实体：
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | & nbsp; | |
| < | 小于号 | & lt; |
| > | 大于号 | & gt; |
| & | 和号 | & amp; |
| " | 引号 | & quout; |
| ' | 撇号 | & apos;(IE不支持) |
| ¢ | 分（cent) | & cent; |
| £ | 镑（pound) | & pound; |
| ¥ | 元（yen) | & yen; |
| € | 欧元（euro) | & euro; |
| § | 小节 | & sect; |
| © | 版权（copyright) | & copy; |
一：CSS基础认知
1.1 css的介绍
css:层叠样式表（Cascading style sheets)
css作用是什么？？
二、基础选择器
目标：理解选择器的作用，能够使用基础选择器在HTML中选择元素
学习路径：
1、标签选择器
2、类选择器
3、id选择器
4、通配符选择器
1.2 标签选择器
结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签
1.3 类选择器
结构：.类名{css属性名:属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
1.4 id选择器
结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有一个id属性
-
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
-
一个标签上只能有一个Id属性值
-
一个id选择器只能选中一个标签
-
-
1.5 通配符选择器
结构：*{css属性名:属性值；}
作用：找到页面中所有的标签，设置样式
注意点：
1. 开发中使用极少，只会在极特殊情况下才会用到
-
在基础班小页面中可能会用于去除默认的margin和padding(后续讲解)
三、字体和文本样式
目标：能够使用字体和文本相关样式修改元素外观样式
学习路径：
-
字体样式
-
字体大小：font-size
-
字体粗细：font-weight
-
字体样式：font-style
-
字体类型：font-family
-
字体类型：font属性连写
-
-
文本样式
-
文本缩进：text-indent
-
文本水平对齐方式：text-align
-
文本修饰：text-decoration
-
-
line-height行高
1.1 字体大小
属性名：font-size
取值：数字+px
注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
1.2 字体粗细
属性名：font-weight
取值：
关键字：
| 正常 | normal |
|---|---|
| 加粗 | bold |
纯数字：100~900的整百数：
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
注意点：
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多。
1.3 字体样式（是否倾斜）
属性名：font-style
取值：
正常（默认值)：normal
倾斜：italic
1.5 字体系列 font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4，... ，字体系列
具体字体：”Microsoft YaHei“、微软雅黑、黑体、宋体、楷体等... ...
字体系列：sans-serif、serif、monospace等... ...
渲染规则：
1.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认习题
注意点：
1.如果字体名称中存在多个单词，推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
1.4 常见字体系列（了解）
无衬线字体（sans-serif)
1. 特点：文字笔画粗细均匀，并且首尾无装饰
-
场景：网页中大多采用无衬线字体
-
常见该系列字体：黑体、Arial
-
衬线字体（serif)
1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰
-
场景：报刊书籍中应用广泛
-
常见该系列字体：宋体、Times New Roman
-
等宽字体（monospace)
1. 特点：每个字体或文字的宽度相等
-
场景：一般用于程序代码编写，有利于代码的阅读和编写
-
常见该系列字体：Consolas、fira code
-
1.6 样式的层叠问题
1.7 字体font相关属性的连写
属性名：font(复合属性)
取值：
font: style weight weight size family;
省略要求：
只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
2.1 文本缩进
属性名：text-indent
取值：
数字+px
数字+em（推荐：1em = 当前标签的font-size的大小）
2.2 文本水平对齐方式
属性名：text-align
取值：
| 属性名 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意点：
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
2.4 水平居中方法总结text-align: center
text-align : center能让那些元素水平居中？
1. 文本
-
span标签，a标签
-
input标签，img标签
-
注意点：
1. 如果需要让以上元素水平居中，text-align : center需要给以上元素的<u>父元素</u>设置
2.3 文本修饰
属性名：text-decoration
取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线（常用） |
注意点：
开发中会使用text-decoration : none;清除a标签默认的下划线
3.1 行高
作用：控制一行的上下行间距
属性名：line-height
取值：
数字+px
倍数（当前标签font-size的倍数）
应用：
-
让单行文本垂直居中可以设置line-height:文字父元素高度
-
网页精准布局时，会设置line-height:1 可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font: style weight size/line-height family;
拓展 颜色常见取值（了解）
属性名：
如：文字颜色：color
如：背景颜色：background-color
属性值：
| 颜色表示方式 | 表示含义 | 属性值 |
|---|---|---|
| 关键词 | 预定义的颜色名 | red、green、blue、yellow... ... |
| rgb表示法 | 红绿蓝三原色，每项取值范围：0~255 | rgb(255,255,255),rgb(255,0,0)... ... |
| rgba表示法 | 红绿蓝三原色+a表示透明度，取值范围是0~1 | rgba(255,255,255,0.5),rgba(255,255,0,0.3) |
| 十六进制表示法 | #开头，将数字转换成十六进制表示 | #000000、#ff0000、#e92322、简写：#000、#f00 |
拓展 标签水平居中方法总结 margin:0 auto
如果需要让div、p、h（大盒子）水平居中？
可以通过margin:0 auto;实现
注意点：
1.如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
2.margin:0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
二：CSS进阶学习
一、选择器进阶
目标：能够理解 复合选择器 的规则，并使用 复合选择器 在HTML中选择元素
学习路径：
-
复合选择器
-
并集选择器
-
交集选择器
-
hover伪类选择器
-
Emmet语法
1.1 后代选择器：空格
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：父选择器1 子选择器2{css}
结果：
在选择器1所找到标签的后代（儿子、孙子、重孙子... ...)中，找到满足选择器2的标签，设置样式
注意点：
-
后代包括：儿子、孙子、重孙子... ...
-
后代选择器中，选择器与选择器之间通过空格隔开
1.2 子代选择器：>
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{css}
结果：
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
1. 子代只包括：儿子
-
子代选择器中，选择器与选择器之间通过>隔开
2.1 并集选择器：，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{css}
结果：
找到 选择器1 和 选择器2 选中的标签，设置样式
注意点：
1. 并集选择器中的每组选择器之间通过，分隔
-
并集选择器中的每组选择器可以是基础选择器或者符合选择器
-
并集选择器中的每组选择器通常一行写一个，提高代码的可读性
3.1 交集选择器：紧挨着
作用：选中页面中，同时满足多个选择器的标签
选择器语法：选择器1 选择器2{css}
结果：
（既又原则）找到页面中 既 能被选择器1选中， 又 能被选择器2选中，设置样式
注意点：
1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
-
交集选择器中如果有标签选择器，标签选择器必须写在最前面
4.1 hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
注意点：
1. 伪类选择器选中的元素的某种状态
5.1 emmet语法
作用：通过简写语法，快速生成代码
语法：
类似于刚刚学习的选择器的写法
| 记忆 | 示例 | 效果 |
|---|---|---|
| 标签名 | div | <div></div> |
| 类选择器 | .red | <div class="red"></div> |
| id选择器 | #one | <div id="one"></div> |
| 交集选择器 | p.red#one | <p class="red" id="one"></p> |
| 子代选择器 | ul>li | <ul><li></li><ul> |
| 内部文件 | ul>li(我是li的内容) | <ul><li>我是li的内容</li></ul> |
| 创建多个 | ul>li*3 | <ul><li></li><li></li><li></li></ul> |
| 创建div同级标签 | div+p | |
| 创建父子级 | div>p | |
二、背景相关属性
1.1 背景颜色
属性名：background-color(bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制... ...
注意点：
背景颜色默认值是透明：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2.1 背景图片
属性名：background-image(bgi)
属性值：background-image:url('图片的路径');
注意点：
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
3.1 背景平铺
属性名：background-repeat(bgr)
属性值：
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向(x轴)平铺 |
| repeat-y | 沿着垂直方向(y轴)平铺 |
4.1 背景位置
属性名：background-position(bgp)
属性名：background-position:水平方向位置 水平方向位置；
属性值：
1.方向名词（最多只能表示9个位置）
水平方向--> left 、center、right
垂直方向--> top、center、bottom
2.数字+px(坐标)
坐标系:
原点（0,0）--> 盒子的左上角
x轴--> 水平向右
y轴--> 垂直向下
操作：
将图片左上角与坐标点重合即可
注意点：
方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
5.1 背景相关属性的连写形式
属性名：background(bg)
属性值：
单个属性值的合写，取值之间以空格隔开
书写顺序：
推荐：background : color image repeat position
省略问题：
可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
注意点：
如果需要设置单独的样式和连写
1. 要么把单独的样式写在连写的下面
-
要么把单独的样式写在连写的里面
6.1 （拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可（比较重要的图片实用img标签）
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片（不是很重要的图片适用div标签）
需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
三、元素的显示模式
目标：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换
学习路径：
-
块级元素
-
行内元素
-
行内块元素
-
元素显示模式转换
1.1 块级元素
显示特点：
1. 独占一行（一行只能显示一个）
-
宽度默认是父元素的宽度，高度默认由内容撑开
-
可以设置宽高
代表标签：
div、p、h系列、ul、dl、dt、dd、form、header、nav、footer... ...
2.1 行内元素
显示特点：
-
一行可以显示多个
-
宽度和高度默认由内容撑开
-
不可以设置宽高
-
（span)--- ---不换行；设置宽高不生效；尺寸和内容的大小相同
代表标签：
a、span、b、u、i、s、strong、ins、em、del... ...
3.1 行内块元素
显示特点：
1. 一行可以显示多个
-
可以设置宽高
代表标签：
input、textarea、button、select... ...
特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline
4.1 元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display:block | 转换成块级元素 | 较多 |
| display:inline-block | 转换成行内块元素 | 较多 |
| display:inline | 转换成行内元素 | 较多 |
拓展1：
HTML嵌套规范注意点
-
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等... ...
但是：p标签中不要嵌套div、p、h等块级元素
-
a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
四、css特性
目标：能够认识css的基础和层叠特性
学习路径：
-
继承性
-
层叠性
1.1 继承性的介绍
特性：子元素有默认基础父元素样式的特点（子承父业）
可以基础的常见属性（文字控制属性都可以继承）
-
color
-
font-style、font-weight、font-size、font-family
-
text-indent、text-align
-
line-height
-
... ...
注意点：
可以通过调试工具判断样式是否可以继承
2.1 层叠性的介绍
特性：
-
给同一个标签设置不同的样式-->此时杨海生会层叠叠加-->会共同作用在标签上
-
给同一个标签设置相同的样式-->此时杨海生会层叠覆盖-->最终写在最后的样式会生效
注意点：
-
当样式冲突是，只有当选择器优先级相同时，才能通过层叠性判断结果
3.1 优先级介绍
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important
注意点：
-
!important写在属性值的后面 ，分号的前面
-
!important不能提升继承的优先级，只要是继承优先级最低！
-
实际开发中不建议使用!important
<!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>Document</title>
<style>
#box{
/* id选择器 */
color: orange;
}
.box{
/* 类选择器 */
color: blue;
}
div{
/* 子标签继承 */
color: green !important;
}
body{
/*父标签*/
color: red;
}
</style>
</head>
<body>
<!--意义：当一个标签使用了多个悬着器，样式冲突的时候，到底谁生效-->
<div class="box" id="box" style="color:pink"><!--属性style是行内样式-->测试优先级</div>
</body>
</html>
3.2 权重叠加计算
场景：如果是复合选择器，此时需要通过权重重叠计算方法，判断最终哪个选择器优先级最高会生效
权重叠加公式：（每一级之间不存在进位）
比较规则：
-
先不交第一级数字，如果比较出来了，之后的统统不看
-
如果第一级数字仙童，此时再去比较第二级数字，如果比较出来了，之后的统统不看
-
... ...
-
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）
注意点：!important如果不是继承，则权重最高，天下第一！
<!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>Document</title>
<style>
/* (行内，id，类，标签) */
/* （0,1,0,1）*/
div #one{
color:orange;
}
/* （0,0,2,0） */
.father .son{
color: skyblue;
}
/* （0,0,1,1） */
.father p{
color: purple;
}
/* （0,0,0,2） */
div p{
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>
三、盒子模型
目标：能够认识 盒子模型的组成，能够掌握盒子模型 边框、内边距、外边距 的设置方法
学习路径：
-
盒子模型的介绍
-
内容区域的宽度和高度
-
边框（border)
-
内边框（padding)
-
外边框（margin)
1.1 盒子模型的介绍
-
盒子的概念
1.页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的 进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
2.盒子模型
CSS中规定每个盒子分别由：内容区域（content)、内边距区域(padding)、边框区域(border)、外边框区域(margin)构成，这就是盒子模型
3.记忆：可以联想现实中的包装盒
2.1 内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域的大小
属性：width / height
常见取值：数字+px
注意：
盒子尺寸 = width 或者 height +边框线
即：需要400 * 400 的盒子，那么width应该设置为380px，height应该设置为380px，因为另外还可能设置上下左右边框10px
3.1 边框（border) --- 连写形式
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border:10px solid red; （border : 像素 线条种类 线条颜色）
快捷键：bd+tab
注意：
| 参数名 | 参数值 |
|---|---|
| solid | 实线段 |
| dashed | 虚线段 |
| dotted | 点线段 |
3.2 边框（border) --- 单方向设置
场景：只给盒子的某个方向单独设置边框
属性名：border - 方位名词
属性值：连写的取值
注意：
| 方向 | 参数名 |
|---|---|
| 上 | border-top |
| 下 | border-bottom |
| 左 | border-left |
| 右 | border-right |
3.3 边框（border) --- 单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线 solid、虚线 dashed、点线 dotted |
| 边框颜色 | border-color | 颜色取值 |
（案例）新浪导航案例
需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
布局顺序：
-
从外往内，从上往下
-
从外到内：先宽高背景色，放内容，调节内容位置，控制文字粗细
每一个盒子的样式：
-
宽高
-
辅助的颜色背景
-
盒子模型的部分：border、padding、margin
-
其他样式：color、font-、text-、 ... ...
3.4 内边距
<!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>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的捏边距 */
padding: 50px;
/* padding属性可以当做复合属性使用，表示单独设置某个方向的 */
/* padding最多取4个值 */
/* 四值：上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值：上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两值：上下 左右 */
padding: 10px 80px;
}
/* 多值写法，永远都是从上开始顺时针转一圈，如果不够，看对面 */
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
4.3 盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实际黑色，上下左右20px的内边距，如何完成
盒子实际大小终极计算公式：
解决：当盒子被border和padding撑大后，如何满足需求？
<!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>Document</title>
<style>
div{
width: 240px;
height: 240px;
background-color: pink;
border:10px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
4.5 CSS3盒模型（自动内减）
需求：盒子尺寸300*300，背景粉色，边框10px实际黑色，上下左右20px的内边距，如何完成？
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
解决方法1：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
解决方法2：自动内减
操作：给盒子设置属性box-sizing:border-box;即可
优点:浏览器会自动计算多余大小，自动在内容中减去
5.1 外边距
<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 50px;/*外边距*/
margin-left: 100px;/*盒子左边边距*/
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
5.4 清楚默认的内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
-
比如：body标签默认有margin:8px
-
比如：p标签默认有上下的margin
-
比如：ul标签默认由上下的margin和padding-left
-
... ...
解决方法：
5.7 外边距折叠现象---1合并现象
场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
-
只给其中一个盒子设置margin即可
5.8 外边距折叠现象---2塌陷现象
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：
-
给父元素设置border-top或者 padding-top（分隔父子元素的margin-top)
-
给父元素设置overflow:hidden
-
转换成行内块元素
-
设置浮动
5.5 行内标签垂直位置修改
<!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>Document</title>
<style>
span{
line-height: 100px;
}
</style>
</head>
<body>
<!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top和bottom 不生效 -->
<span>span</span>
<span>span</span>
</body>
</html>
四、伪类选择器，伪元素，标准流，浮动
一、结构伪类选择器
目标：能够使用 结构伪类选择器 在HTML中定位元素
-
作用与优势：
-
作用：根据元素在HTML中的结构关系查找元素
-
优势：减少对于HTML中类的依赖，有利于保持代码整洁
-
场景：常用于查找父级选择器中的子元素
-
-
选择器
选择器 说明 E:first-child{} 匹配父元素中第一个子元素，并且是E元素 E:last-child{} 匹配父元素中最后一个子元素，并且是E元素 E:nth-childn(){} 匹配父元素中第n个子元素，并且是E元素 E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素
注意点：
-
n为0、 1 、2、 3、 4 、... ...
-
通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5 |
| 找到从第5个往后 | n+5 |
二、伪元素
目标：能够使用伪元素在网页中创建内容
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
-
元素：HTML设置的标签
-
伪元素：由CSS模拟出的标签效果
种类：
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最后添加一个伪元素 |
注意点：
-
必须设置content属性才能生效
-
伪元素默认是行内伪元素
<!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>Document</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.father::before{
/* content属性必须添加，否则伪元素不生效 */
content:"老鼠";
color:green;
width: 100px;
height: 100px;
background-color: blue;
/* 默认是行内元素，宽高不生效，所以切换显示方式为block */
display:block;
}
.father::after{
content: "大米";
}
</style>
</head>
<body>
<div class="father">爱</div>
</body>
</html>
三、标准流
目标：能够认识标准流的默认排布方式及其特点
标准流：又称文档流，是浏览器在渲染显示网页内容是默认采用的一套排版规则，规定 了应该以何种方式排列元素
常见标准流排版规则：
四、浮动
目标：能够认识使用 浮动的作用，了解 浮动的特点
学习路径：
-
浮动的作用
-
浮动的代码
-
浮动的特点
-
浮动的案例
1.1 浮动的作用
早期的作用：图文环绕
现在的作用：网页布局
3.1 浮动的特点
-
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
-
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
-
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
-
浮动元素有特殊的显示效果
-
一行可以显示多个
-
可以设置宽高
-
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
CSS书写顺序：浏览器执行效率更高
1. 浮动/display
-
盒子模型：margin border padding 宽度高度背景色
-
文字顺序
（案例）小米模块案例
需求：使用浮动，完成设计图中布局效果
五、清除浮动
1.1 清除浮动的介绍
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：
子元素浮动后脱标--->不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
2.1 清除浮动的方法---1直接设置父元素高度
特点：
-
优点：简单粗暴，方便
-
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
2.2 清除浮动的方法---2额外标签法
操作：
-
在父元素内容的最后添加一个块级元素
-
给添加的块级元素设置clear:both
.clearfix{
/*清除左右两侧浮动的影响*/
clear: both;
}
特点：
-
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
2.3 清除浮动的方法---3单伪元素清除法
操作：用伪元素替代了额外标签
1：基本写法
.clearfix::after{
content:'';
display:block;
clear:both;
}
2:补充写法
/*单伪元素清除浮动*/
.clearfix::after{
content: '';
/*伪元素添加的标签是行内，要求块*/
display: block;
clear: both;
/*伪类兼容性*//*补充代码：在网页中看不到伪元素*/
height: 0;
visibility: hidden;
}
特点：
-
优点：项目中使用，直接给标签加类即可清除浮动
2.5 清除浮动的方法---5给父元素设置overflow:hidden
操作：
-
直接给父元素设置overflow:hidden
特点：
-
优点：方便
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)