1.CSS简介
CSS（层叠样式表）也是一种标记语言，用于给HTML结构设置样式
层叠：一层层的添加样式
样式：文字大小、背景颜色、元素宽高等等
表：列表
2.行内样式
添加方式：
<h1 style="color:red;">
你好
</h1>
添加规则：名 + 值
尽可能不要使用这种样式，代码没有高亮、代码冗余、不能复用
【注】：CSS的大小写不敏感
3.内部样式
添加方式：在 head 标签当中添加 style 标签，并在 style 标签中给 body 中标签套属性
<head>
<style>
h1 {
color: red;
font-size: 60px;
}
h2 {
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<h1>
你好
</h1>
<h2>
你好
</h2>
</body>
缺点：
- 并没有实现结构与样式完全分离
- 多个HTML页面无法复用样式
4.外部样式
步骤：
- 创建文件
style.css文件 - HTML文件中引入
style.css文件 - 头部写
<link rel="stylesheet" href="style.css"/>
好处：
- 结构清晰
- 可以复用
- 触发浏览器的缓存机制
- 提高访问速度
5.样式表优先级
优先级：行内样式 > 内部样式 = 外部样式
当样式的内容发送冲突的时候，会按照优先级来进行选择，选择优先级更高的样式进行展示，如果优先级相同的话，则看谁后添加，后添加的样式优先进行展示
<style></style> 中不能添加标签等内容
6.语法规范
选择器：找到要添加样式的元素
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名:属性值
/* 选择器 + 声明块 */
h1 {
/* 属性名 : 属性值 */
color: green;
font-size: 40px;
}
7.代码风格
展开风格：开发推荐，便于维护和调试
紧凑风格：项目上线时推荐，可使用工具（webpack、vite）减少文件体积
8.基本选择器
基本选择器包括：
- 通配选择器
- 元素选择器
- Id选择器
- 类选择器
通配选择器：
作用：可以选中所有的HTML元素
语法：
* {
/* 属性名 : 属性值 */
color: green;
}
元素选择器：
作用：为页面中某个标签元素统一设置样式
语法：
h1 {
/* 属性名 : 属性值 */
color: green;
font-size: 40px;
}
备注：元素选择器无法实现差异化设置
Id选择器：
作用：为某一个指定的元素添加样式
语法：
/* #Id{ 属性名: 属性值} */
#id {
color: red;
}
类选择器：
作用：为页面中指定类名的元素统一设置样式
语法：
/* .类名{ 属性名: 属性值} */
.class {
color: red;
}
【注】：
- 元素的class属性值不带.
- class值，是我们自定义的，不能使用纯数字、不要使用中文、若是多个单词可以用
-进行链接 - 要是想要添加多个类，可以在第一个类后面添加另一个类名
<h1 class="Title passage">
</h1>
9.复合选择器
分类：
交集选择器、并集选择器
交集选择器：选中 同时符合 多个条件的元素
语法：选择器1选择器2选择器3选择器4......选择器n{}
/* 选择：类名为class的p元素，此写法非常多 */
p.class {
color: red;
}
/* 选择：类名包含class1和class2的元素 */
.class1.class2 {
color: blue;
}
注意：
- 有标签名，标签名必须写在前面
- id选择器、理论上可以作为交集的条件，但是实际应用当中几乎不用
- 交集选择器中不可能出现两个
元素选择器,因为一个元素不可能同时是p元素或者span元素 - 用的最多的交集选择器是：元素选择器配合类名选择器
并集选择器：选中多个选择器对应的元素
语法：选择器1,选择器2,选择器3......选择器n{}
.class1, #id1, .class2, .class3 {
color: red;
}
注意：
- 并集选择器，一般竖着写
- 任何形式的选择器，都可以作为并集选择器的一部分
- 并集选择器通常用于集体声明，可以缩小样式体积
10.HTML元素之间的关系
父元素：直接包裹某个元素的元素，就是该元素的父元素
如：div是h1和ul的父元素
<div>
<h1>
H1标题
</h1>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</div>
子元素：被父元素直接包含的元素
如：h1和ul是div的父元素
<div>
<h1>
H1标题
</h1>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</div>
祖先元素：父亲的父亲......，一直往外找，都是祖先
如：div是li的祖先元素
<div>
<h1>
H1标题
</h1>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
</div>
11.后代选择器
作用：选择指定元素中，符合要求的后代元素
用法：父元素 子元素{}，先写祖先，后写后代，选择器之间，用空格隔开
ul li {
color: red;
}
- 后代选择器，最终选择的是后代，选不到祖先
p标签当中不允许嵌套h标签- 儿子、孙子、重孙子，都算是后代
12.子代选择器
作用：选中指定元素中，符合要求的子元素（儿子元素）
写法：选择器1>选择器2>选择器3>......>选择器n{}
<style>
/* 选择div中的a标签 */
div > a {
color: red;
}
/* 选择div中的p标签中的a标签 */
div > p > a {
color: blue;
}
</style>
<div>
<a href="#">1</a>
<a href="#">2</a>
<p>
<a href="#">3</a>
</p>
</div>
注意：
- 子代选择器，最终选择的是子代，不是父级
- 只要是子元素、子子元素......，统称为子代元素
13.兄弟选择器
作用：选择 某个标签 后的 兄弟标签
分类：相邻兄弟选择器、通用兄弟选择器
写法：
<style>
/* 选择div后紧紧相邻的兄弟p元素 */
div + p {
color: red;
}
/* 选择div后所有的兄弟p元素 */
div ~ p {
color: red;
}
</style>
<body>
<div>
Div区域
</div>
<p>
P标签1
</p>
<p>
P标签2
</p>
<h6>
H6内容
</h6>
</body>
注意：两种兄弟选择器，选择的都 不包括自己
14.属性选择器
作用：选择具有某种属性的元素
写法：
/* 选择具有title属性的元素 */
[title] {
color: red;
}
/* 选择title属性等于label1的元素 */
[title='label1'] {
color: green;
}
/* 选择title属性以字母a开头的元素 */
[title^='a'] {
color: blue;
}
/* 选择title属性以b结尾的元素 */
[title$='b'] {
color: yellow;
}
/* 选择title属性包含c的元素 */
[title*='c'] {
color: purple;
}
15.伪类选择器
伪类：很像类，但是不是类，是元素特殊状态的一种描述
写法：
/* 选中的是没有访问过的a元素 */
a:link {
color: red;
}
/* 选中的是访问过的a元素 */
a:visited {
color: blue;
}
动态伪类：
a:link {
color: red;
}
a:visited {
color: blue;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover {
color: green;
}
/* 选中的是激活状态的a元素 */
a:active {
color: yellow;
}
/* 获取焦点的input元素 */
input:focus {
color: orange;
}
注意：
- a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
- a:active 必须被置于 a:hover 之后，才是有效的。
结构伪类：
语法：
<style>
/* 选中的是div的第一个儿子p元素（按照所有子元素、兄弟计算的） */
div > p:first-child {
color: red;
}
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 */
div p:first-child {
color: red
}
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 */
p:first-child {
color: red
}
</style>
<body>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
</body>
<style>
/* 选中的是div的第 3 个儿子p元素 */
div > p:nth-child(3) {
color: red
}
/* 如果这个n的数值为0，则谁都选不中 */
div > p:nth-child(0) {
color: red
}
/* 如果这个n的数值为空，则谁都中 */
div > p:nth-child() {
color: red
}
/* 如果这个n的数值为公式an+b，可以选中指定符合公式的选项 */
/* 如果这个n的数值为even、odd，可以选中奇偶数 */
div > p:nth-child(2*n) {
color: red
}
/* 内容的形式为 an+b ，如下可以选中前5个 */
div > p:nth-child(-n + 5) {
color: red
}
</style>
<body>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
</body>
关于n：
- 0或者不写：什么都选中
- n：选中所有的子元素
- 1~+∞：选中对应序号的子元素
- 2n或even：选中序号为偶数的子元素
- 2n+1或odd：选中序号为奇数的子元素
- -n+3：选中前3个
<style>
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的） */
div > p:first-of-type {
color: red;
}
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的） */
div > p:last-of-type {
color: red;
}
</style>
<body>
<span>干扰项</span>
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
</body>
<style>
/* 选择独生子 */
span:only-of-child {
color: red;
}
/* 选择同类型独生子 */
span:only-of-type {
color: red;
}
/* 选中的是一个没有内容的元素 */
div:empty {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<!-- 有两个标签，不是独生子 -->
<div>
<span>干扰项</span>
<p>P1</p>
</div>
<!-- 有两个span标签，不是独生子 -->
<div>
<span>干扰项</span>
<p>P1</p>
<p>P2</p>
<p>P3</p>
</div>
<div></div>
</body>
否定伪类：排除满足括号中条件的元素
<style>
/* 选中的是div的儿子p元素，但是排除类名为unchose的元素 */
div > p:not(.unchose) {
color: red
}
/* 选中的是div的儿子p元素，但是排除title属性值为“标题”开头的元素 */
div > p:not([title^="标题"]) {
color: red
}
/* 排除第一个子元素 */
div > p:not(:first-child) {
color: red
}
</style>
<body>
<div>
<p>1234</p>
<p>1234</p>
<p>1234</p>
<p>1234</p>
<p class='unchose' title="标题1">1234</p>
<p class='unchose' title="标题12">1234</p>
<p class='unchose' title="标题123">1234</p>
<p class='unchose' title="标题1234">1234</p>
<p class='unchose' title="我不是标题">1234</p>
</div>
</body>
UI伪类：
/* 复选框或者单选框 是否被选择 */
input:checked {
width: 100px;
height: 100px;
}
/* 将禁用的input框变黑 */
input:disabled {
background-color: green;
}
/* 选中的是可用的input元素 */
input:enabled {
background-color: red;
}
目标伪类：
<style>
div {
background-color: blue;
height: 300px;
}
div:target {
background-color: red
}
</style>
<body>
<!-- 当跳转某个链接的时候，对应的div就会改变颜色 -->
<a href="#one">1</a>
<a href="#two">1</a>
<a href="#three">1</a>
<a href="#four">1</a>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
</body>
语言伪类：根据指定的语言选择元素
<html lang="zh-CN">
<style>
div:lang(en) {
color: red
}
:lang(zh-CN) {
color: red
}
</style>
<body>
<div lang="en">Apple</div>
<div>苹果</div>
</body>
</html>
16.伪元素选择器
伪元素：很像元素，但不是元素，是元素中一些特殊位置
伪元素选择器：选中元素中的一些特殊位置
<style>
/* 选中的是div中的第一个文字 */
div::first-letter {
color: red;
font-size: 40px;
}
/* 选中的是div中的第一行文字 */
div::first-line {
background-color: green;
}
/* 选中的是鼠标选中的文字 */
div::selection {
background-color: green;
color: red;
}
/* input框的placeholder的样式 */
input::placeholder {
background-color: green;
color: red;
}
/* 选中的是p开头的位置，随后创建一个子元素*/
p::before {
content: "$"
}
/* 选中的是p末尾的位置，随后创建一个子元素*/
p::after {
content: ".00"
}
</style>
<div>
Lorem ipsum.
<input placeholder="请输入内容"/>
<p>198</p>
<p>298</p>
<p>398</p>
<p>498</p>
<p>598</p>
</div>
17.选择器优先级
原则：选择的范围越小，优先级越大
优先级计算公式：(a,b,c)，从左到右进行比较
- a：ID选择器
- b：类、伪类、属性 选择器的个数
- c：元素、伪元素 选择器的个数
!important > 行内样式 > Id选择器 > 类选择器 > 元素选择器 > 通配选择器
18.CSS三大特性
层叠性：如果样式发生了冲突，那就会按照选择器优先级进行样式的层叠
继承性：元素会自动拥有其父元素，或其上祖父元素的 某些属性
优先级：!important > 行内样式 > Id选择器 > 类选择器 > 元素选择器 > 通配选择器
19.像素
生活中可用的长度单位：cm、mm
20.颜色
表达方式一：颜色名，直接使用颜色对应的英文单词
表达方式二：rgb
.s1 {
/* 对应三原色：红绿蓝 */
color: rgb(0, 255, 128);
/* 紫罗兰色 */
color: rgb(138, 43, 226);
/* 调整百分比 */
color: rgb(100%, 0%, 0%);
/* rgba调整了透明度 */
color: rgba(0, 255, 0, 0.5);
}
表达方式三：HEX与HEXA
.s2 {
/* 对应三原色：红绿蓝 */
color: #00ff88;
color: #0f8;
/* rgba调整了透明度 */
color: #ff998866;
color: #f986;
}
表达方式四：HSL与HSLA
.s2 {
/* 对应:色相(0-360度)、饱和度、亮度 */
color: hsl(0deg, 100%, 100%);
}
.s3 {
color: hsl(30, 100%, 100%);
}
.s4 {
color: hsl(60, 100%, 100%);
}
.s5 {
color: hsla(90, 100%, 100%, 65.8%);
}
21.字体
常用的字体属性：
字体大小：
<haed>
<style>
/* 默认的文字大小为16px */
/* 当文字大小为0px的时候会消失 */
.style1 {
font-size: 40px;
}
.style2 {
font-size: 30px;
}
.style3 {
/* 字体最小数值为10px */
font-size: 3px;
}
.style4 {
/* 最好指认某个元素的字体大小就是多大 */
font-size: 16px;
}
</style>
</haed>
<body>
<div class="style1">div1</div>
<div class="style2">div2</div>
<div class="style3">div3</div>
<div class="style4">div4</div>
</body>
字体族：
<haed>
<style>
.style1 {
/* 衬线字体serif、非衬线字体sans-serif */
/* 当一个字体无法使用，就会直接跳到下一个字体进行显示 */
font-family: '宋体', '黑体', '楷体', '隶书';
}
.style2 {
font-family: '楷体';
}
.style3 {
font-family: '华文彩云';
}
.style4 {
font-family: '微软雅黑';
}
</style>
</haed>
<body>
<div class="style1">div1</div>
<div class="style2">div2</div>
<div class="style3">div3</div>
<div class="style4">div4</div>
</body>
字体风格：
<haed>
<style>
.style1 {
/* 默认值是normal */
font-style: normal;
}
.style2 {
/* 斜体，当字体当中本身就有斜体，就斜，不然就正常显示 */
font-style: italic;
}
.style3 {
/* 加粗 */
font-style: bold;
}
.style4 {
}
</style>
</haed>
<body>
<div class="style1">div1</div>
<div class="style2">div2</div>
<div class="style3">div3</div>
<div class="style4">div4</div>
</body>
字体粗细：
<haed>
<style>
.style1 {
/* bolder最大，如果不奏效，则和bold一样大小 */
font-weight: bolder;
}
.style2 {
/* 大小相当于100，200，300 */
font-weight: lighter;
}
.style3 {
/* 大小相当于400，500，600 */
font-weight: normal;
}
.style4 {
/* 大小相当于700，800，900 */
font-weight: bold;
}
</style>
</haed>
<body>
<div class="style1">div1</div>
<div class="style2">div2</div>
<div class="style3">div3</div>
<div class="style4">div4</div>
</body>
字体复合属性：
/*
编写规则：
字体大小、字体族必须写
字体族必须是最后一位
字体大小必须是最后两位
各个属性用空格隔开
*/
.ele {
font: bold italic 100px '楷体', sans-serif;
}
文字颜色：
.ele {
color: red
}
文本间距：
.ele {
letter-spacing: 10px;
word-spacing: 50px;
}
文本修饰符：
/* 上划线 虚线 */
.ele {
text-decoration: overline dotted green;
/* 删除线 波浪线 */
text-decoration: line-through wavy red;
/* 下划线 */
text-decoration: underline;
}
<del>删除线</del>
<ins></ins>
文本缩进：
.ele {
text-indent: 2em;
}
文本对齐：
.ele {
text-align: center;
text-align: left;
text-align: right;
}
22.行高
行高：行的高度
属性：
.ele {
/* 第一种写法：值为像素 */
line-height: 200px;
/* line-height 不能和 font-size 一样的大小 */
/* 第二种写法：值为normal */
line-height: normal;
/* 最常用 - 第三种写法：值为数值 */
line-height: 1.5;
/* 第四种写法：值为百分比 */
line-height: 150%;
}
备注：如果一行中都是文字，不会影响观感
应用场景：
- 调整多行文字间隔
- 单行文字的垂直居中
注意事项：
<style>
#d1 {
font-size: 40px;
background-color: skyblue;
/* 1.行高可以决定文字之间的垂直距离 */
/* 2.当行高趋近 0 的时候，多行文字都会叠在一起，背景色消失，文字顶部逐渐消失 */
/* 3.line-height 的值不能是 -1 ，如果是-1，则会转换成normal */
/* 4.行高是可以继承的 */
/* 5.line-height和height的关系：写了height，div高度就是height的值；没有设置height，div高度就是 height*行数 */
line-height: 60px;
}
span {
font-size: 100px;
/* 默认继承的line-height是 60px */
/* 需要调整line-height，或者设置父元素的line-height是1.5 */
line-height: 150px;
}
</style>
<body>
<div id="d1">This is d1 <br/> This is d2 <br/> This is <span> d3 </span><br/> This is d4</div>
</body>
23.文本垂直对齐
分类：
- 顶部对齐：无需任何属性，在垂直方向上，默认就是顶部对齐
- 居中：对于单行文字，让
height = line-height即可，多行使用vertical-align定位属性 - 底部对齐：(2 * height - font-size) -
突变量
用法：
<head>
<style>
div {
font-size: 40px;
height: 100px;
/* 上对齐可以不写 */
/* 垂直对齐 */
line-height: 100px;
/* 下对齐 */
line-height: (2 *height -font-size);
}
</style>
</head>
<body>
<div>This is one</div>
</body>
vertical-align：用于控制元素在父元素垂直方向上的对齐方式
- top：与父元素的顶部对齐
- bottom：与父元素底部对齐
- middle：使 元素的中部 与 父元素的基线加上父元素 x-height 的一半 对齐
24.列表
<head>
<style>
ul {
/* none让列表符号消失，squre是方块，upper-roman是罗马数字，decimal是数字 */
list-style-type: none;
/* inside让列表符号有参与感，outside让列表符号没有参与感 */
list-style-position: inside;
/* 双引号当中写图片路径，让图片当作列表符号 */
list-style-image: url("");
/* 复合属性 list-style，包括上述三个属性，且没有数量顺序的要求 */
}
</style>
</head>
<body>
<ul>
<li>《新闻1》</li>
<li>《新闻2》</li>
<li>《新闻3》</li>
<li>《新闻4》</li>
<li>《新闻5》</li>
<li>《新闻6》</li>
<li>《新闻7》</li>
<li>《新闻8》</li>
<li>《新闻9》</li>
<li>《新闻10》</li>
</ul>
</body>
25.边框
边框相关的属性，不仅仅是表格能用，其他元素都能用
<head>
<style>
table {
/*
border-width:2px;
border-color:red;
border-style:solid、 dashed、 dotted 、none、 double;
*/
border: 2px solid #cad;
}
td, th {
border: 2px solid #adc;
}
</style>
</head>
<body>
<table>
<caption>信息</caption>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
</tr>
</thead>
<tbody>
<tr>
<td>新1</td>
<td>20</td>
<td>男</td>
<td>推理</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
26.表格独有属性
<head>
<style>
table {
width: 500px;
border: 2px solid #cad;
/* 控制表格的列宽 */
table-layout: fixed;
/* 控制单元格间距 ≈ table标签中的cellspacing */
/* 当属性值为0的时候，边框会变粗，因为 堆叠(不是覆盖) 到了一起，变成了两根线 */
border-spacing: 2px;
/* 合并相邻的单元格，默认separate不合并 */
border-collapse: collapse;
/* 隐藏没有内容的单元格，默认值为show，不是覆盖到了一起的时候，是可以看见的 */
empty-cells: hide;
/* 设置表格标题的位置，值有top，bottom */
caption-side: top;
}
</style>
</head>
<body>
<table>
<caption>信息</caption>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
</tr>
</thead>
<tbody>
<tr>
<td>新1</td>
<td>20</td>
<td>男</td>
<td>推理</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
27.背景相关属性
<html>
<head>
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
/* 默认背景颜色：透明色 */
background-color: transparent;
/* 设置背景图片 */
background-image: url("./img.png");
/* 当背景图片的大小远小于盒子模型，记得让它不要平铺 */
/* 设置重复方式 */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
/* 设置背景图片的位置*/
background-position: left top;
background-position: center;
background-position: right bottom;
background-position: 10px 20px;
/* 复合属性 */
background:red url("./img.png") no-repeat 300px;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
28.鼠标相关属性
<html>
<head>
<style>
div{
/* cursor: pointer、move、wait、crosshair、help */
cursor: pointer;
}
</style>
</head>
<body>
<div>
鼠标属性<input type="text"/>
<a href="#">超链接</a>
</div>
</body>
</html>
29.常用长度单位
- 像素：px
- 字体：em（相当于当前元素的font-size的值 或者 其父元素的font-size的值）
- 字体：rem（相当于根元素的font-size的值）
- 百分比：%（取决于父元素的属性值）
30.元素的显示模式
块级元素（block）
特点：
- 在页面当中 独占一行，不会和任何元素共用一行，都是从上到下排列的
- 默认宽度：撑满父元素
- 默认高度：由内容撑开
- 可以通过
CSS设置宽高
行内元素（inline）
特点：
- 在页面当中 不独占一行
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 无法通过
CSS设置宽高
行内块元素（inline-block）
特点：
- 页面中 不独占一行
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 可以通过
CSS设置宽高
注意：元素早期只分为 行内元素、块级元素，区分标准是 是否独占一行，按照这种分类方式，行内块元素应该算作行内元素
31.各个元素的显示模式
块元素
- 主体结构标签：html、body（head不算）
- 排版标签：h1~h6、hr、p、pre、div
- 列表标签：ul、ol、li、dl、dt、dd
- 表格相关标签：table、tbody、thead、tfoot、tr、caption
- form与option
行内元素
- 文本标签：br、em、strong、sup、sub、del、ins
- a与label
行内块元素
- 图片：img
- 单元格：td、th
- 表单控件：input、textarea、select、button
- 框架标签：iframe
32.盒子模型的组成部分
- 外边距：margin
- 边框：border
- 内边距：padding
- 内容：content
<html>
<head>
<style>
div{
/* 内容区的宽 */
width:400px;
/* 内容区的高 */
height:400px;
/* 内边距，设置的背景颜色可以填充内容区域 */
padding:20px;
/* 边框，占据在边缘的上部，会撑开盒模型，该区域的底色是内容区的底色，颜色是自己设置的颜色 */
border:10px solid #adc;
/* 外边距，设置的宽度是外界的距离 */
font-size:20px;
background-color:#cad;
/* 设置最小宽度为600px */
min-width:600px;
/* 设置最大宽度为1000px */
max-width:1000px;
}
</style>
</head>
<body>
<div>
This is Box-Model
</div>
</body>
</html>
盒子的大小：content + 左右 padding + border
视口：浏览器的可视范围
一般在赋值的时候，只赋值给宽度，或者给范围，没有说既给了最大宽度、最小宽度还给宽度的这种说法
33.默认宽度
默认宽度：不设置width属性时，元素呈现出来的宽度
总宽度 = 父元素 content - 自身左右 margin
内容区的宽度 = 父元素 content - 自身左右 margin - 自身左右 border - 自身左右 padding
34.内边距
上下左右内边距：padding- ??? (top、bottom、left、right)
复合属性：一个值 四个方向一样、两个值 上下 左右、三个值 上 左右 下、四个值 上 右 下 左
padding的负值是无效的值
行内元素的内边距有说头，上下内边距 可能会不占空间不能完美设置 ，左右内边距没有问题
35.边框
上下左右边框：border - ???(top、left、right、bottom) - width、style、color
36.外边距
不参与盒子模型的大小，具体属性同内边距
【注意事项】：
子元素的margin作用效果，从父元素的content开始作用
<head>
<style>
.outer{
width:400px;
height:400px;
padding:50px;
background-color:skyblue;
}
.inner{
width:50px;
height:50px;
background-color:orange;
margin:30px;
}
</style>
</head>
<body>
<div class = "outer">
<div class = "inner">
</div>
</div>
</body>
上margin、左margin会影响自身位置 ，下margin、右margin会影响兄弟元素位置
<html>
<head>
<style>
.box{
width:200px;
height:200px;
}
.box1{
background-color:skyblue;
}
.box2{
background-color:orange;
/* 上margin、左margin会影响自身位置 */
/* 下margin、右margin会影响兄弟元素位置 */
/* 该处将box2向下移动30px */
margin-top:30px;
/* 该处将box3向下移动30px */
margin-bottom:30px;
}
.box3{
background-color:pink;
}
</style>
</head>
<body>
<div class = "box box1">1</div>
<div class = "box box2">2</div>
<div class = "box box3">3</div>
</body>
</html>
对于行内元素来说，左右的margin是可以完美设置的，上下的margin设置后是无效的
对于块级元素，可以将左右margin设置为auto，可以实现在父元素中水平居中的效果
margin的值可以是负值
【塌陷问题】：给父元素中第一个元素设置margin-top或者给父元素中最后一个元素设置margin-bottom的时候，父元素会抢走属性值
解决方法：
- 为父元素添加一个值不是0的border或者padding属性
- 为父元素添加overflow：hidden的属性
【margin合并问题】：margin-top和margin-bottom的属性值合并起来了
37.处理内容溢出
<html>
<head>
<style>
#root{
width:400px;
height:200px;
background-color:red;
/* 可选值：auto、scroll、hidden、visiable */
overflow:hidden;
/* 当使用overflow的时候，不要让overflow-x和overflow-y一个是hidden一个是visiable，会出问题 */
}
</style>
</head>
<body>
<div id="root">
Long Text * 10000
</div>
</body>
</html>
38.隐藏元素的两种方式
.d1{
visible:none;
display:none;
opacity:0;
}
39.样式的继承
能继承：字体属性、 文本属性（除了vertical-align）、文字颜色等
不能继承：边框、背景、内边距、外边距、宽高、溢出方式
40.元素的默认样式
- a元素：下划线、字体颜色、鼠标
- h元素：文字加粗、文字大小、上下外边距
- p元素：上下外边距
- ul和ol元素：左内边距
- body元素：8px外边距
优先级：元素的默认样式 > 继承的样式，如果要重置元素的默认样式，选择器一定要直接选择器到该元素
41.布局小技巧
水平垂直居中
<html>
<head>
<style>
.outer{
width:400px;
height:400px;
overflow:hidden;
/* 水平居中 */
/* 块元素水平居中，父元素添加 */
margin:0px auto;
/* 行内元素、行内块元素居中：父元素添加 */
text-align:center;
/* 垂直居中 */
/* 块元素：给子元素添加 */
margin-top:(父元素 content - 子元素 margin + content)/2;
/* 行内元素、行内块元素 */
height = line-height;
}
.inner{
width:200px;
height:100px;
/* 垂直居中 */
/* 块元素：给子元素添加 */
margin-top:(父元素 content - 子元素 margin + content)/2;
/* 行内元素、行内块元素 */
vertical-align:middle;
}
</style>
</head>
<body>
<div class = "outer">
<div class = "inner"></div>
</div>
</body>
</html>
文字水平垂直居中：
.textArea{
height:400px;
text-align:center;
line-height:400px;
}
42.元素之间空白问题
问题存在于：行内元素、行内块元素
解决办法：
- HTML中代码不换行（不推荐）
- 父元素之间，
font-size的大小设置为0，单独设置文字的元素的font-size
43.幽灵空白问题
问题存在于：行内块元素
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底层之间是有一定的距离的
解决方法：
- 设置一个
vertical-align属性，但是不能使用默认属性base-line - 没有文字的时候，可以使用
display:block，让它变成块元素 - 父元素之间，
font-size的大小设置为0，单独设置文字的元素的font-size
44.浮动
设计的初衷：让文字环绕图片
float属性值：left、right
文字设置float，可以
- 让某个元素飘起来，且让该元素覆盖在其他元素之上（脱离文档流）
- 当脱离文档流之后，它的宽高都是内容给撑开的，不过可以自己给设置宽高
- 不会独占一行，但是可以和其他元素共用一行
- 不会和margin合并，也不会margin塌陷，能给四个方向的margin和padding设置值
- 不会像行内块一样呗当作文本处理（没有行内块的空白问题）
【文档流】：元素默认的排列方式
设置float前：
设置float后：
浮动的影响：
- 父元素的高度塌陷，父元素没有高度了（脱离文档流）
- 兄弟元素会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响
解决浮动后的影响：
- 父元素单独的设置高度（不能解决兄弟元素之间的问题）
- 父元素设置float（兄弟元素的问题不能解决）
- 给父元素设置
overflow属性为hidden（会丢掉其他的元素） - 给某块级元素单独添加
clear:both，清除掉左右浮动（前面的元素必须是浮动元素，但是本身不能浮动） - 给浮动元素的父元素设置伪元素，通过伪元素清楚浮动
.father::after{
content:"";
display:block;
clear:both;
}
布局原则：设置浮动的时候，兄弟要么全浮动，要么都不浮动
45.定位
相对定位：relative
.box{
position:relative;
/* 距离左边 100px */
left:100px;
/* 距离右边 100px */
left:-100px;
right:100px;
/* 左右不能共用的 */
/* 距离顶部 200px */
top:200px;
}
【注意】：开启相对定位的元素并不会脱离文档流，显示层级比普通元素高，后写的会盖在先写的上面，可以和margin的属性叠加，绝大多数情况会和绝对定位使用
参考点：自己原来的位置
绝对定位：absolute
.box{
position:absolute;
/* 距离顶部0像素 */
top:0;
/* 距离顶部0像素 */
left:0;
}
当开启绝对定位的时候，就一定会脱离文档流，参考的是：（没有脱离文档流的父元素 / 脱离文档流的元素）
绝对定位最好不要加上margin的属性
参考点：包含块
什么是包含块:
- 没有脱离文档流的元素 包含块就是父元素
- 脱离文档流的元素 包含块是第一个拥有定位属性的祖先元素(如果祖先都没有定位,那就是整个页面)
使用场景：一个元素覆盖在另外一个元素上面
/* 代码含义：当鼠标进入outer的时候，box元素向左移动300px */
.outer{
position:relative;
}
.box{
top:100px;
left:100px;
position:absolute;
transition:1s all linear;
}
.outer:hover .box{
left:300px;
}
特点:
- 脱离文档流，会对后面的兄弟元素和父元素有影响
- left和right不能一起设置，top和bottom也是
- 绝对定位和浮动不能同时设置，否则浮动失效，定位起作用
- 无论什么元素(行内，行内块，块级)设置为绝对定位之后，都会变成定位元素
定位元素:默认宽高都被内容撑开，且能自由设置宽高
固定定位：fixed
.box{
position:fixed;
top:100px;
left:100px;
}
只要使用就直接去找视口
特点:
- 脱离文档流,会对后面的兄弟元素和父元素产生影响
- left和right不能一起设置，top和bottom也是
- 固定定位和浮动不能同时设置，如果设置的话，浮动失效
- 无论什么元素(行内，行内块，块级)设置为绝对定位之后，都会变成定位元素
黏性定位:
.title{
/* 当距离顶部有0px的时候,让title固定住 */
position:sticky;
top:0px;
}
特点:
- 不会脱离文档流
- 最常用的是top
- 粘性定位和浮动可以同时设置
- 可以通过margin设置位置
注意点:
定位可以越过padding
46.布局
重置默认样式的方法:
- 使用全局选择器
- 使用reset.css
- 使用Normalize.css
