1. CSS 简介
CSS也叫做层叠样式表，它是一种定义样式结构如字体、颜色、位置等的语言，对 HTML 代码进行美化。
CSS 代码位置:
1. CSS样式代码可以独立一个文件存放，通过link标签链接使用。
2. 或者可以在HTML文件中head的style标签内部直接编写css代码
3. 在HTML文件中body的标签内部使用style属性来编写（不推荐）
CSS 语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
CSS 注释
CSS注释以/* 开始, 以 */ 结束
2. CSS 选择器
我们要对某一个标签进行修饰首先就得找到这个标签，需要用到CSS选择器。
标签选择器
标签选择器是大范围查找，直接通过标签名
示例:
p {
color: green;
}
示例中可以查找到所有的<P>标签并让其文本颜色改变
id 选择器
id 选择器可以为查找标有特定 id 的 HTML 标签，使用特殊符号 #
示例
#d1 {
color: orange;
}
示例中可以查找到id为d1的标签
class 选择器
class 选择器可以查找到同一类的标签，class 选择器有别于id选择器，class可以在多个元素中使用。
其使用的符号是 .
示例
.c1 {
color: greenyellow;
}
将所有含有c1这个class属性的标签字体颜色改为亮绿色
通用选择器
可以查找所有的标签（不常用），使用符号 *
示例
* {
color: blue;
}
将所有的标签的文本颜色改变
属性选择器
根据标签内部的属性名和属性值查找标签，关键符号是 []
1.方式1:直接通过属性名查找
[type] {
background-color: red;
}
2.方式2:属性名是type并且值是text的标签
[type='text'] {
background-color: red;
}
3.方式3:属性名是type并且值是text的div标签
div[type='text'] {
background-color: red;
}
组合选择器
选择器可以组合起来使用，假设此时代码为以下示例
示例
<div id="d1">d1
<div>d2
<span>s1</span>
</p>
<span>s2</span>
<span>s3</span>
<a>a2</a>
</div>
<a>a3</a>
<a>a4</a>
1. 若需要查找示例中id为d1的div标签内部下一级的<span>标签:
#d1 > span{
color: red;
}
使用的 > 符号，表示获取其下一级的指定标签
2. 若需要查找示例中id为d1的div标签内部下所有的<span>标签:
#d1 span{
color: red;
}
使用空格符号，表示获取其内部所有指定标签
3. 若查找示例中id为d1的div标签同级别下面紧挨着第一个a标签（示例中的a3）
#d1 + a{
color: red;
}
使用 + 符号获取单个毗邻的同级标签
4. 若查找示例中id为d1的div标签同级别下面紧挨着所有a标签（示例中的a3，a4）
#d1 ~ a{
color: red;
}
使用 ~ 符号获取所有毗邻的同级别标签
5. 若同时查找示例中id为d1的div标签内部的 a 标签和 span 标签
#d1 a, span{
color: red;
}
使用逗号隔开表示同时查找多个标签
伪类/伪元素选择器
CSS伪类和伪元素是用来添加一些选择器的特殊效果
伪类的语法：
selector:pseudo-class {property:value;}
selector：选择器
pseudo-class：伪类
{property:value;}：修饰的属性
伪元素的语法：
selector:pseudo-element {property:value;}
| 常见伪类/伪元素 | 示例 | 说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个 <p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个 <p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个 <p>元素之前插入内容 |
| :after | p:after | 在每个 <p>元素之后插入内容 |
anchor伪类
其包含了以下伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
anchor伪类和id选择器结合
代码示例
<style>
#a1:link {color:red;} /* 未访问的链接 */
#a1:visited {color:black;} /* 已访问的链接 */
#a1:hover {color:green;} /* 鼠标划过链接 */
#a1:active {color:yellow;} /* 已选中的链接 */
</style>
<a href="" id="a1">aaa</a>
anchor伪类和class选择器结合
<style>
.a1:link {color:red;} /* 未访问的链接 */
.a1:visited {color:black;} /* 已访问的链接 */
.a1:hover {color:green;} /* 鼠标划过链接 */
.a1:active {color:yellow;} /* 已选中的链接 */
</style>
<a href="" class="a1">aaa</a>
<a href="" class="a1">bbb</a>
:focus 伪类
:focus 用于一个输入字段获得焦点时选择的样式
与id选择器结合
代码示例
<style>
#i1:focus{
background: green;
}
</style>
<input type="text" id="i1" >
输入框获得鼠标焦点时执行的样式
与class选择器结合
代码示例
<style>
.i1:focus{
background: green;
}
</style>
<input type="text" class="i1" >
<input type="text" class="i1" >
:first-letter 伪类
:first-letter 可以用来指定元素第一个字母的样式
与id选择器结合
代码示例
<style>
#p1:first-letter{
background: green;
}
</style>
<p id="p1">aaa</p>
<p id="p1">bbb</p>
与class选择器结合
代码示例
<style>
.p1:first-letter{
background: green;
}
</style>
<p class="p1">aaa</p>
<p class="p1">bbb</p>
:before 伪类
:before 选择器可以使用content 属性向指定的元素前插入内容。（插入的内容不属于指定的元素）
与id选择器结合
代码示例
<style>
#p1:before{
background: green;
content: 'AA';
}
</style>
<p id="p1">aaa</p>
与class选择器结合
代码示例
<style>
.p1:before{
background: green;
content: 'AA';
}
</style>
<p class="p1">aaa</p>
:after 伪类
:after 选择器可以使用 content 属性向指定的元素后插入内容。（插入的内容不属于指定的元素）
与id选择器结合
代码示例
<style>
#p1:after {
background: green;
content: 'AA';
}
</style>
<p id="p1">aaa</p>
与class选择器结合
代码示例
<style>
.p1:after {
background: green;
content: 'AA';
}
</style>
<p class="p1">aaa</p>
选择器优先级
同个选择器
已知引入CSS代码有三种方式:
1. 创建CSS文件后使用link标签引入
2. 在head中的style标签内编写
3. 在body中的标签属性style内编写
当同一个选择器在不同地方引入，会按照什么优先级排列呢，可以通过下面的示例演示
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="1.css" type="text/css">
<style>
p{
color: green;
}
</style>
</head>
<body>
<p style="color: black">aaa</p>
</body>
1. 代码从上到下首先使用link标签引入CSS文件，然后在head中编写style标签，最后在标签内的style属
性编写。
2. 由于代码的执行顺序也是从上到下，所以此时文本的颜色是其标签内style的颜色。
3. 若是去掉标签 style 属性，那么执行的是head中的style。但是如果将link引入语句放在style标签后
那么执行的是外部CSS代码
'也就是说，同个选择器时，会根据距离的远近来选择执行CSS代码'
多个选择器
选择器有很多种，不同选择器之间也有优先级
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
* {
color: pink;
}
p {
color: green;
}
#p1 {
color: red;
}
.p2 {
color: blue;
}
</style>
</head>
<body>
<p id="p1" class="p2">aaa</p>
</body>
1. 在示例中同时对一个标签使用了4种查找方式，我们可以逐个实验，会发现优先级顺序是这样的：
id选择器 > 类选择器 > 标签选择器 > 通用选择器
2. 也就是说，描述的更精准的优先级高。
3. CSS 样式
字体样式
| 字体样式 | 说明 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
字体类型
在CSS中使用 font-family 属性来设置文本的字体类型
示例
p {
font-family: '宋体';
}
字体大小
使用 font-size 来改变文本大小
示例
p {
font-size: 20px;
}
单位需要使用 px
字体粗细
font-weight 可以设置字体的粗细，除了默认值以外还有bold、bolder、lighter 以及自定义粗细
属性值
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
自定义粗细为数字表示，不需要单位
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
#p1 {
font-weight: bold;
}
#p2 {
font-weight: bolder;
}
#p3 {
font-weight: 400;
}
#p4 {
font-weight: lighter;
}
</style>
</head>
<body>
<p id="p1">你好啊</p>
<p id="p2">你好啊</p>
<p id="p3">你好啊</p>
<p id="p4">你好啊</p>
</body>
font 属性
font 简写属性在一个声明中设置所有字体属性
可设置的属性是（按顺序）：
"font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
文本样式
| 文本样式 | 说明 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
文本颜色
文本颜色使用color属性来设置
方式1:
color: red;
方式2:
color: rgb(128, 128, 128);
方式3:
color: #4f4f4f;
文本对齐方式
text-align 属性规定元素中的文本的水平对齐方式
| 属性值 | 说明 |
|---|---|
| left | 把文本排列到左边。默认值 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
文本装饰
text-decoration 属性用来设置或删除文本的装饰，主要是用来删除链接的下划线。
| 属性值 | 说明 |
|---|---|
| none | 默认，使用此属性值为链接去除下划线 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义文本删除线 |
去除链接下划线
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="">aaa</a>
</body>
文本缩进
文本缩进使用的是 text-indent 属性，单位是 px 或者 em
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
#p1 {
text-indent: 2em;
}
</style>
</head>
<body>
<p id="p1">人活到极致，就是不愿意闲下来。 沈从文曾说：我一生最怕是闲，一闲就把生命的意义全失去了。他的学生汪曾祺曾在文章里这样描述沈从文：冬天屋里生不起火，用被子围起来，还是不停地写。
到了晚年，他也不愿闲下来，参考大量资料整理完成了《中国古代服饰研究》。
</p>
</body>
1. 在 text-indent 属性中，缩进大小的单位是 px、em
背景样式
| 背景样式 | 说明 |
|---|---|
| background | 简写背景样式 |
| background-color | 设定背景颜色 |
| background-image | 添加背景图片 |
| background-size | 指定背景图像的大小 |
| background-origin | 指定背景图像的相对位置 |
| background-clip | 从指定位置开始绘制 |
| background-repeat | 是否平铺重复 |
| background-position | 设置背景图像的开始位置。 |
| background-attachment | 设置背景图像是否随页面的其余部分滚动。 |
背景图片
除了单纯的颜色背景外还可以使用 background-image 设置图片当作背景，需要得到一个图片的地址。
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
body {
background-image= url("https://img1.baidu.com/it/u=1236516281,2832405130&fm=253&fmt=auto&app=138&f=JPG?w=200&h=200");
}
</style>
</head>
<body>
</body>
1. 此时背景图片就已经设定完成，但是会发现由于背景图片过于小，会在body中重复。
背景图片平铺
如果图片不够填充的时候默认会重复填充，可以通过 background-repeat 来设置平铺。
| 属性值 | 说明 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
背景图片位置
背景的位置由 background-position 定义。
| 属性值 | 说明 |
|---|---|
| left top | 左上 |
| left center | 中左 |
| left bottom | 左下 |
| right top | 右上 |
| right center | 中右 |
| right bottom | 右下 |
| center top | 中上 |
| center center | 正中间 |
| center bottom | 中下 |
以上方法若只规定了一个关键词，那么第二个值将是"center" | |
| x% y% | 分别表示 x 轴和 y 轴百分号坐标 |
| xpos ypos | 分别是代表 x 轴和 y 轴，但是单位是 px 或者其他 |
若使用 % 和 position 值的方式只规定了一个值，另一个值将是50%。并且俩种方式可以混合使用。 |
背景图片大小
背景图片大小使用 background-size 来控制
| 属性值 | 说明 |
|---|---|
| length | 第一个值设置宽度(px)，第二个值设置的高度(px)。若只有一个值，第二个是设置为 auto(自动) |
| percentage | 第一个值设置宽度(%)，第二个值设置的高度(%)。若只有一个值，第二个是设置为"auto(自动)" |
| cover | 保持图像纵横比并完全覆盖指定区域 |
| contain | 保持图像纵横比并尽可能覆盖指定区域 |
背景图片固定
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
| 属性值 | 说明 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
body {
background: url("https://img1.baidu.com/it/u=1236516281,2832405130&fm=253&fmt=auto&app=138&f=JPG?w=200&h=200");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: lift center;
}
</style>
</head>
<body>
background
在设置背景时需要多个属性配合，首先使用background-image属性添加背景图片，在设置图片大小位置以及不平铺和固定。所以可以写下一起整合起来，使用的方式是 background
背景缩写属性可以在一个声明中设置所有的背景属性。'各值之间用空格分隔，不分先后顺序'
可以设置的属性分别是：
background-color、background-position、background-size、background-repeat、
background-origin、background-clip、background-attachment 和 background-image。
透明度
透明度的方式可以有以下方式:
1. background-color:rgba(255,0,255,0.5)
RGBA方法的第4个参数可以对背景颜色的透明度进行调整
2. opacity 属性
opacity 属性可以对一个元素设置透明度级别，该属性值是从 0.0 （完全透明）到 1.0（完全不透明）
边框样式
边框属性可以设置一个元素边框的样式。
| 属性名 | 说明 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于设置指定边框宽度 |
| border-color | 简写属性，用于设置指定边框颜色 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
| border-radius | 设置圆角的边框。 |
| box-shadow | 边框阴影 |
边框类型
border-style 属性可以设置边框的类型
| 边框主要类型 | 说明 |
|---|---|
| none | 定义无边框。 |
| dashed | 定义虚线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| dotted | 定义点状边框。 |
在 border-style 中最多可以写 4 个值，最少 1 个
若只有 1 个值，代表全部边框样式一样
若有 2 个值，代表上下边框为第一个样式，左右边框为第二个样式
若有 3 个值，代表上边框为第一个样式，左右边框为第二个样式，下边框为第三个样式
有 4 个值时，分别代表 上、右、下、左 顺序的边框样式
边框宽度
border-width 属性设置元素的边框，代表顺序和 style 样式一样。
| 属性值 | 说明 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 自定义边框的宽度，单位 px |
边框圆角
border-radius 属性：设置一个元素的四个边框的曲度，顺序也是上右下左
| 属性值 | 说明 |
|---|---|
| length | 使用px或em单位定义曲度 |
| % | 使用%定义曲度。 |
定义一个圆（前提长度和宽度一样）
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
div {
height: 300px;
width: 300px;
border-style: solid;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
border
也就是说边框需要线条类型、粗细、颜色等等属性，单个列出会杂乱，可以使用 border 属性用于指定元素边框的样式、宽度和颜色
可以设置的属性分别（按顺序）：border-width, border-style 和 border-color。
若只设置一个值，其他值会设置成对应属性的初始值。
但是如果边框的样式未定义，它将不可见。这是因为样式默认为 none
示例
border:1px solid red; /* 设置边框大小为1px 颜色为红色的实线边框 */
box-shadow
该属性可以给元素设置阴影。
| 属性值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
可以直接使用简写方式: ' box-shadow: h-shadow v-shadow blur spread color inset;'
注意点: box-shadow 简写由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来组成；
如果不写，长度默认为 0；
当水平阴影值为负数时，阴影显示在左边。若为正数显示在右边；
当垂直阴影值为负数时，阴影显示在顶部。若为正数显示在底部；
4. Display、Visibility
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏元素
使用 display:none 或 visibility:hidden
两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元
素虽然被隐藏了，但仍然会影响布局。而 display:none 并不会占用布局空间
Display - 块和内联元素
HTML的元素可以分为行级标签、块级标签、行内块标签。
块级标签例如<h1>、<p>、<div>
行级标签例如<span>、<a>
使用display可以互相转换并拥有其特性
| display主要属性值 | 说明 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，并拥有块级元素特性。 |
| inline | 默认。此元素会被显示为行级元素，并拥有行级元素特性。 |
| inline-block | 行内块元素。 |
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</body>
1. 此时俩个div都是行级元素，会并显示在一行。显示成行级元素后不用加宽高
代码示例
<head>
<meta name="author" charset="UTF-8">
<title>标题</title>
<style>
span {
display: block;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<span>cccccccccccccccccccccccccccc</span>
<span>dddddddddddddddddddddddddddd</span>
</body>
1. 将俩个行级元素 span 变成块级元素，此时可以加上宽高。
5. 盒子模型
在HTML中所有的元素标签都可以看作一个盒子，类似于下面的图片（图片来自网络）
上图的名词代表的意思:
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
学习盒子模型可以将标签看成是一个个快递盒，content内容就是快递盒的内部物品
内部物品与盒子内部的距离就是 padding(内边距)
盒子的厚度就是 border(边框)
盒子与盒子之间的距离就是 margin(外边距)
代码示例
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#d1{
width: 500px;
height: 500px;
border: 3px solid red;
margin-left: 500px; /* 修改与网页之间的距离 */
}
#d2{
width: 200px;
height: 200px;
border: 3px solid green;
margin-bottom: 50px; /* 修改与俩个div框上下的距离 */
}
#d3{
width: 200px;
height: 200px;
border: 3px solid blue;
}
p{
border: 1px solid black;
padding-left: 80px; /* 修改文本框与文本内容之间的距离 */
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<p id="p1">内容1</p>
</div>
<div id="d3">
<p id="p2">内容2</p>
</div>
</div>
</body>
未添加边距属性和添加后的样子如下图所示
可以发现就算没有修改，div框和body之间也有空隙因为body标签默认自带8px的margin值，我们在编写页面
之前应该去掉
若需要将元素水平居中，可以使用 margin: 0 auto
6. 浮动
在网页中其实都是一个个div框排列，但是div框是一个块级元素，独占一行，那么就不能并列显示，这时可以使用浮动。
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
代码示例
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid red;
}
#d2 {
width: 200px;
height: 200px;
border: 3px solid green;
float: left; /* 向左浮动 */
}
#d3 {
width: 200px;
height: 200px;
border: 3px solid blue;
float: left; /* 向左浮动 */
}
p {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<p id="p1">内容1</p>
</div>
<div id="d3">
<p id="p2">内容2</p>
</div>
<p>内容3</p>
</div>
</body>
很明显虽然俩个div框已经向左浮动，但是本来在俩框下面的内容3却跑到了俩框的前面并且外面包裹俩div的
框大小也被改变。这是因为浮动会造成父标签塌陷，我们可以将塌陷的地方补充回去
浮动塌陷
解决浮动塌陷需要用到 clear 属性，clear属性指定段落的左侧或右侧不允许浮动的元素
| 属性值 | 说明 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
固定搭配
.clearfix:after {
content: '';
clear: both;
display: block;
}
定义一个类选择器，使用伪类 after 向指定的元素后插入内容。但不插入文本，只是设置不允许浮动和设置
为块级元素。
代码示例
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.clearfix:after {
content: '';
clear: both;
display: block;
}
body {
margin: 0;
}
#d1 {
border: 3px solid red;
}
#d2 {
width: 200px;
height: 200px;
border: 3px solid green;
float: left; /* 向左浮动 */
}
#d3 {
width: 200px;
height: 200px;
border: 3px solid blue;
float: left; /* 向左浮动 */
}
p {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div id="d2">
<p id="p1">内容1</p>
</div>
<div id="d3">
<p id="p2">内容2</p>
</div>
<p>内容3</p>
</div>
</body>
在前面的基础上使用了固定搭配
7. 溢出属性
我们在布局的时候会遇到内容超出其元素框的情况，使用 overflow 属性用于控制内容溢出元素框时显示的方式。
overflow 属性只工作于指定高度的块元素上
| 属性值 | 说明 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
代码示例一（隐藏文本）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 150px;
width: 150px;
border: 1px solid red;
overflow: visible;
/* overflow: hidden; */
/* overflow: auto; */
/* overflow: scroll; */
}
p{
margin: 0;
}
</style>
</head>
<body>
<div>
<p id="p1">人活到极致，就是不愿意闲下来。 沈从文曾说：我一生最怕是闲，一闲就把生命的意义全失去了。他的学生汪曾祺曾在文章里这样描述沈从文：冬天屋里生不起火，用被子围起来，还是不停地写。 到了晚年，他也不愿闲下来，参考大量资料整理完成了《中国古代服饰研究》。
</p>
</div>
</body>
1. 默认情况下示例中的文本框容纳不下这么多文本，可以依次试验不同的 overflow属性值来观察结果
代码示例二（圆形头像）
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#d1{
height: 150px;
width: 150px;
border: 1px blue solid;
border-radius: 50%;
overflow: hidden;
}
#d1 img{
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="https://img0.baidu.com/it/u=687984527,521022432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1084">
</div>
</body>
8. 定位
定位意思是指确定方位，确定或指出的地方。
在CSS中的定位相关的属性有以下:
| 属性名 | 说明 |
|---|---|
| position | 指定元素的定位类型 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| z-index | 设置元素的堆叠顺序 |
position
position属性指定一个元素的定位方法的类型
| position属性值 | 说明 |
|---|---|
| absolute | 生成绝对定位的元素，根据已经定位的(不包括 static 定位)父元素位置进行定位。若没有已定位的则相对于<html> |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。 |
| relative | 生成相对定位的元素，相对于其默认位置进行定位。 |
| static | 默认值。没有定位,不能对其进行操作 |
| sticky | 粘性定位，该定位基于用户滚动的位置。 |
'脱离文档流'：
绝对定位
固定定位
'不脱离文档流'：
相对定位
代码示例一（absolute、 relative）
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#d1{
height: 50px;
width: 200px;
background: green;
position: relative;
left: 280px;
}
#d2{
height: 100px;
width: 100px;
background: blue;
position: absolute;
left: 120px;
top: 60px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
1. 在示例中给绿色div框设置了相对定位，而蓝色div框设定绝对定位（基于绿色div）
代码示例二（fixed）
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#d1{
height: 100px;
width: 100px;
background: green;
position: fixed;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id="d1"></div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
此时的div框就被固定了，不管页面怎么滑动也不会改变位置，可以用在导航栏等等。
z-index
当有元素重叠的时候，可以设置 z-index 属性来指定一个元素的堆叠顺序
z-index 属性的值除了默认的 auto (堆叠顺序与父元素相同)，还可以使用数字来表示顺序。数字大的优先展示。
注意点:
'Z-index 仅能在脱离文档流的定位元素（即绝对定位、固定定位）上奏效'
'数字可以是负数'
'浮动元素不能设置 z-index 属性'
代码示例
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#d1{
height: 300px;
width: 300px;
background: green;
position: absolute;
z-index: 2;
}
#d2{
height: 300px;
width: 300px;
position: absolute;
top: 50px;
left: 70px;
background: pink;
z-index: 0;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
9. 光标形状
cursor属性定义了鼠标指针放在一个元素范围内时的光标形状
示例 <span style="cursor:progress">progress</span>
| 属性值 | 说明 |
|---|---|
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
1940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
