0. 一些注意点
如果想要让文字在父元素中垂直居中，只需要将父元素的
line-height设置得和height一样即可
文本修饰属性: text-decoration: none(去除了下划线)
div元素的特点：如果不设置width和height，并且还没有内容的话，该元素默认是不占任何位置的(height为0)
background-clip:将背景颜色设置到内容区，边框和内边距不再有背景颜色。
1. CSS举例
<!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-AU-Compatible" content="IE=Edge,chrome=1">
<title>CSS 简介</title>
<!--
第二种方式(将样式写到head中的style标签里):
然后通过css的选择器来选中元素并且为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
- 内部样式表更加方便对样式进行复用
- 问题:
只能对一个网页起作用，不能跨网页使用
-->
<!--<style>
p {
color: red;
font-size: 50;
}
</style>-->
<!--
第三种方式(外部样式表)(最佳使用方式):
- 可以将css样式表编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
- 外部样式表需要通过link标签进行引入
这意味着所有想使用该样式的网页都可以对其进行引用
式样式表可以在不同页面之间进行复用
- 将样式表编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
css 负责表现(层叠样式表)
使用css来修改元素的样式
第一种方式(内联样式，行内样式):
在标签内部，通过style属性来设置元素的样式
这种方式只能对一个标签生效
并且当样式发生变化时，我们必须要一个个修改，非常不利于维护
- 开发时绝对不要用这种方式
-->
<!--
<p style="color: red; font-size: 60px;">少小理解老大回</p>
<p style="color: blue; font-size: 60px;">乡音无改鬓毛衰</p>
-->
<p>儿童相见不相识；<br>笑问客从何处来。</p>
</body>
</html>
/*
这是css的注释方式
*/
p {
color: tomato;
font-size: 50;
}
2. css基础语法
/* 这是一个注释，不支持“//” 这种单行的形式*/
/*
选择器 {
声明块
}
通过选择器可以选中页面中的指定元素，比如 p 的作用是选中页面中所有的 p 元素。
大括号是声明块：由一个个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以“:”连接，以“;”结尾.
*/
关于选择器，有一个网站可以练习一下：http://flukeout.github.io/
3. 常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>常用选择器</title>
<style>
/*
将所有的段落设置为红色(字体)
元素选择器：
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{}、 div{}
p {
color:red;
}
*/
/*
id 选择器
作用：根据元素的id属性选中一个元素并设置属性
语法：#id{}
例子：#box{}、#red{}
#red {
color:red;
}
*/
/*
class 选择器
作用：根据元素的class属性选中一族元素
语法：.class{}
.blue{
color:blue;
}
可以同时为一个元素设置多个class，多个class之间适用空格隔开
*/
.blue {
color: blue;
}
/*
通配选择器，表示所有元素，有一个算一个：
*{}
*/
* {
color: tomato;
}
</style>
</head>
<body>
<h1 class="blue title1">回乡偶书</h1>
<p>少小离家老大回；</p>
<p>乡音无改鬓毛衰；</p>
<p id="red">儿童相见不相识；</p>
<p>笑问客从何处来。</p>
<p class="blue">落霞与孤鹜齐飞；</p>
<p class="blue">秋水共长天一色。</p>
</body>
</html>
4. 复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>复合选择器</title>
<style>
/*
将class为red的元素设置为红色
.red {
color: red;
}
*/
/*
将class为red的div元素字体大小设置为30px
交集选择器：选中同时符合多个选择器的元素
selector1selector2selector3...{}
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red {
font-size: 30px;
}
/* .a.b.c{} */
/*
选择器分组/并集选择器
同时选择多个选择器，只要符合任意一个选择器的元素都会被选中
selector1, selector2,...{}
*/
div, p {
color:brown
}
</style>
</head>
<body>
<div class="red">我是div元素</div>
<p class="red">我是p元素</p>
</body>
</html>
5. 关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>关系选择器</title>
<style>
/*
为div的子元素span设置一个字体颜色红色
子元素选择器，选中指定父元素的指定子元素
*/
div.box > span {
color:orange;
}
/*
后代元素选择器
选中指定元素的所有后代元素
*/
div span {
font-size: 30px;
}
/*
兄弟选择器
+ 选择下一个兄弟
- 语法：前一个 + 后一个
~ 选择下边的所有兄弟元素
- 语法：前一个
*/
div > span + p {
font-size: 60px;
}
div > span ~ .div_span_brother {
color:greenyellow;
}
</style>
</head>
<body>
<div class=box>
我是一个div元素
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div元素中的span元素</span>
</div>
<div>
<span>我是另一个div元素中的span元素</span>
<p>我是另一个div元素中的span元素的兄弟元素</p>
<p class="div_span_brother">brother2</p>
<p class="div_span_brother">brother3</p>
<p class="div_span_brother">brother4</p>
</div>
</body>
</html>
6. 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>属性选择器</title>
<style>
/*
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性名，且该属性名的属性值等于指定属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性值$=属性值]选择属性值以指定值结尾的元素
[属性值*=属性值]选择属性值中含有指定值的元素
*/
p[title] {
color:tomato;
}
p[title*=b] {
font-size:30px;
}
</style>
</head>
<body>
<h1>回乡偶书</h1>
<p title="abc">少小离家老大回；</p> <!--鼠标放上去会显示title中的文字-->
<p title="bc">乡音无改鬓毛衰；</p>
<p title="abcd">儿童相见不相识；</p>
<p title="efg">笑问客从何处来。</p>
<p>落霞与孤鹜齐飞；</p>
<p>秋水共长天一色。</p>
</body>
</html>
7. 伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>伪类</title>
<style>
/* 将ul里第一个li设置为红色 */
/*
伪类：不存在的类，特殊的类
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素
伪类一般使用:开头
- first-child 第一个子元素
- last-child 最后一个子元素
- nth-child() 选中第n个子元素
特殊值：
n 表示选中所有子元素
2n 或 even 表示选中所有的偶数为元素
2n+1 或 odd 选中奇数位的元素
以上这些伪类都是基于所有子元素进行排序的
:first-of-type
:last-of-type
:nth-of-type() 查找相同类型的子元素，序号基于所有同类型的子元素中进行排序
:not()：否定伪类，将符合条件的元素从选择器中排出
*/
ul>li:not(:nth-child(2)) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</body>
</html>
8. a元素的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>a元素的伪类</title>
<style>
/*
:link 用来标识没访问过得链接(正常的链接)
:visited 表示访问过的链接
这两个伪类仅适用于a
*/
a:link{
color:blue;
font-size: 30px;
}
a:visited{
color:red;
/*
font-size:40px;
由于隐私的原因，font-size属性在a类中不好使。
:visited 伪类只能改颜色
*/
}
/*
:hover表示鼠标移入的状态
*/
a:hover {
color:aqua;
font-size: 50px;
}
/*
:active表示鼠标点击
*/
a:active {
color:yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.qq.com">腾讯网</a>
</body>
</html>
9. 伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>伪元素</title>
<style>
/*
伪元素：表示页面中某一些特殊的并不真实存在的元素(特殊的位置)
伪元素使用“::”开头
::before 表示起始位置(不是第一个字符，而是第一个字符之前的位置)
::after 表示结束为止(不是最后一个字符，而是最后一个字符之后的位置)
::before和::after必须结合content属性来使用
- 在::before和::after中使用content添加的文本是无法被选中的
*/
p::first-letter {
font-size: 30px;
}
p::first-line {
background-color: yellow;
}
p::selection {
background-color: violet;
}
div::before{
content:"before";
color:red;
}
div::after{
content:"after";
color:violet;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perspiciatis obcaecati non laborum earum
dignissimos, consectetur, blanditiis voluptates recusandae ut error ipsam eius dolor eaque aperiam mollitia
maiores, rerum quis?</p>
<div>Hello world</div>
</body>
</html>
10. 样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>样式的继承</title>
<style>
/*
样式的继承：我们为一个元素设置的样式同时也会应用到其后代上。
继承的设计主要是为了方便开发
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
只需设置一遍，即可让所有元素均具备该样式。
并不是所有的样式都会被继承，比如背景和布局等相关的样式
想知道某个样式是否会被继承，只需要在zeal软件中搜索该样式，然后就会有张表格，里面的Inherited值为no则为不会被继承，yes则表示该样式会被继承
*/
p {
color: red;
}
div {
color: blue;
background-color: yellowgreen;
/*
从执行结果看，“我是div元素中的span元素”和 “我是div元素中的span元素中的em元素”
好像是继承了background-color属性，其实不然，原因是因为默认的background-color是透明的，因此div元素的背景色透过来了。
*/
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span元素</span>
</p>
<div>
我是div元素
<span>
我是div元素中的span元素
<em>我是div元素中的span元素中的em元素</em>
</span>
</div>
</body>
</html>
11. 选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>选择器的权重</title>
<style>
/*
样式冲突：
- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置了不同的值，此时就发生了样式冲突
发生样式冲突时，应用哪个样式由选择器的权重(优先级)决定
选择器的权重：
内联样式
id选择器
类选择器和伪类选择器
元素选择器
通配选择器
继承的样式
比较优先级时，需要将所有的选择器的优先级进行叠加计算，最后优先级越高，则越优先显示(分组选择器是单独计算的)
选择器越具体，优先级越高
如果优先级相同，则后定义的，覆盖先定义的
可以在某个样式的后边加上“!important”，则此时该样式会获取到最高的优先级，甚至超过内联样式(！！！慎用)
*/
div {
color: blue;
}
.red {
color: red;
}
#box1{
color:purple;
}
</style>
</head>
<body>
<div id="box1" class="red">我是一个div</div>
</body>
</html>
12. 长度单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>单位</title>
<style>
/*
px表示像素(物理概念)
百分比可以设置属性相对于其父元素的百分比
em是相对于自身font-size的像素来计算的
rem是相对于根元素的字体大小来计算的
*/
.box1 {
width: 200px;
height: 200px;
background-color: chocolate;
}
.box2 {
width: 50%;
height: 50%;
background-color: cyan;
}
.box3 {
font-size: 25px;
width: 10em;
height: 10em;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
13. 颜色单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>颜色单位</title>
<style>
/*
在html中，可以直接使用颜色名来表示颜色，但是这其实是很不方便的，因为很多颜色无法用名字表示
因此可以使用RGB值来表示颜色
RGB:
- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R：red、G：green、B：blue
- 每一种颜色的范围都在 0~255(0%~100%) 之间
RGBA:
- 就是在RGB的基础上增加了一个透明度(0~1)。
16进制的RGB值:
- 跟RGB差不多
- 语法 #RedGreenBlue
- 颜色浓度通过00~ff表示
- 如果颜色两两重复，可以简写(前提是三种颜色都是重复的)
例如：#aabbcc 可以简写成 #abc
HSL值:
H 色相(0~360)
S 饱和度(0%~100%)
L 亮度(0%~100%)
*/
.box1 {
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
background-color: #bbffaa;
background-color: hsl(0, 100%, 0%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
14. 布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>文档流(NormalFlow)</title>
<style>
.box1 {
width: 100px;
background-color: yellow;
}
.box2 {
width:100px;
background-color: red;
}
span {
background-color: #bbffaa;
}
</style>
</head>
<body>
<!--
文档流(normal flow)
- 网页是一个多层结构
- 通过css可以分别为每一层设置样式
- 作为用户来讲只能看到最上面的一层
- 这些层中，最底下的层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中排列的
- 对于我们来说，元素主要有两个状态
在文档中
不在文档中(脱离文档流)
- 元素在文档流中有什么特点：
- 块元素
在页面中独占一行
默认宽度是父元素的全部(会把父元素撑满)
默认高度被内容撑开
- 行内元素
行内元素不会独占页面的一行，只占自身大小
行内元素在页面中从左向右水平排列
如果一行之中不能容纳下，元素会自动换行，继续自左向右排列，和书写习惯一致
行内元素的默认宽度和高度都是被内容撑开
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
15. 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子模型</title>
<style>
.box1 {
/* content的大小由width和height设置 */
width: 200px;
height: 200px;
background-color: #bbffaa;
/*
border的设置需要最少三个样式
border的大小会影响整个box-model的大小
border-width
border-color
border-style
*/
border-width: 10px;
border-color: red;
border-style: dashed;
}
</style>
</head>
<body>
<!--
css将所有元素都设置为了一个个矩形
每一个盒子都有以下几个部分组成
- content：内容区
- padding：内边距
- border：边框
- margin：外边距
-->
<div class="box1"></div>
</body>
</html>
16.1 盒子模型之边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒模型之边框</title>
<style>
.box1 {
/* content的大小由width和height设置 */
width: 200px;
height: 200px;
background-color: #bbffaa;
/*
border的设置需要最少三个样式
border的大小会影响整个box-model的大小
border-width
border-color
border-style
*/
/*
border-width:
默认值一般为3px;
可以同时为四个边框设置宽度(空格隔开)
4个值: 上、右、下、左
3个值: 上、左右、下
2个值: 上下、左右
1个值: 上下左右
除了border-width还有一组border-xxx-width，用来单独指定某一个边框
*/
border-width: 30px;
/* border-width: 10px 20px 30px 40px; */
/*
border-color 用来指定四个边框的颜色，规则和 border-width 一样
border-color 如果不写，默认使用color，color的默认值为黑色。
*/
color:red;
/* border-color: orange red yellow green; */
/*
border-style 指定四个边框的样式，用法和 border-width 一致
border-style 的默认值是none，表示没有边框
*/
border-style: solid;
/* border 简写属性，并且没有顺序要求(空格隔开) */
/* 除了 border，还有border-xxx，用法类似 */
/* border:20px orange solid */
}
</style>
</head>
<body>
<!--
css将所有元素都设置为了一个个矩形
每一个盒子都有以下几个部分组成
- content：内容区
- padding：内边距
- border：边框
- margin：外边距
-->
<div class="box1"></div>
</body>
</html>
16.2 盒子模型之内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子模型之内边距</title>
<style>
.box1 {
width:200px;
height:200px;
background-color: #bbffaa;
border: 5px red solid;
/*
padding:内容区和边框之间的距离
- 背景颜色会延伸到内边距
padding的简写句法规则和border-width一致
一个盒子的可见区由内容区、内边距、边框共同决定，因此在计算盒子大小时，也需要将这三个区域加到一起。
*/
padding:100px 100px 100px 100px;
}
.inner {
width:100%;
height:100%;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner"></div>
</div>
</body>
</html>
16.3 盒子模型之外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子模型之外边距</title>
<style>
/*
外边距(margin)
- 外边距不会映像盒子可见框的大小
- 但是外边距会影响盒子的位置和实际的占用位置
一共有四个方向的外边距：
margin-top
margin-right 默认情况下设置margin-right不会产生任何效果
margin-bottom
margin-left
margin 也可以设置负值，其会向相反的方向移动。
margin 也可以简写
*/
.box1 {
width: 200px;
height:200px;
background-color: purple;
border: 10px red solid;
margin-top: 100px;
margin-bottom: -100px;
}
.box2 {
width:220px;
height:220px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
16.4 盒子的水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子的水平布局</title>
<style>
.outer {
width:800px;
height:200px;
border: 10px red solid;
}
.inner {
width:200px;
/* width:auto; */
height:200px;
background-color: #bbffaa;
margin-left:auto;
margin-right:auto;
/*
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
这个等式必须满足，如果相加的结果使得等式不成立，则称为过度约束，等式会自动调整
- 如果这七个值中没有auto的情况，则浏览器会自动调整margin-right的值，使等式满足。
- 这7个值里有3个值可以设置为auto
width
margin-left
margin-right
- 如果一个值为auto，则会自动调整auto那个值，以使等式成立
- 如果将width和一个外边距设置为auto，则width会调到最大，设置为auto的外边距自动设为0
- 如果将3个值都设置为auto，则width会自动调整为最大，则width设为最大，两个外边距自动设为0
- 如果将两个外边距设为auto，则这两个外边距会一样大
我们经常利用这个特点来使一个元素在其父元素中水平居中。
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
16.5 盒子的垂直布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子模型之垂直布局</title>
<style>
.outer {
height:200px;
background-color: #bbffaa;
/* 默认情况下，父元素高度被内容撑开 */
/*
使用overFlow设置父元素如何处理子元素溢出
可选值：
visible: 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden: 溢出的内容会被裁剪从而不可见
scroll: 生成两个滚动条，通过滚动条来查看完整的内容
auto: 根据需要生成滚动条
*/
overflow: scroll;
/*
单独处理水平/垂直方向上的溢出
overflow-x: ;
overflow-y: ;
*/
}
.inner {
width: 100px;
height: 400px;
background-color: purple;
margin-bottom: 100px;
/*
子元素是在父元素的内容区排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
16.6 外边距的折叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>外边距的折叠</title>
<style>
.box1, .box2 {
font-size: 100px;;
width:200px;
height:200px;
}
/*
垂直方向的相邻外边距重叠现象
- 兄弟元素间的相邻垂直外边距
- 二者都是正值会取二者之间的较大值
- 如果有一个是负值，则取二者之和(一般不会遇到)
- 两个都是负值，取绝对值较大者(一般不会遇到)
兄弟元素之间外边距的重叠，对于开发是有利的，不需要我们进行处理
- 父子元素之间的外边距重叠
- 子元素的外边距会传递给父元素
- 父子外边距的折叠会影响到页面的布局，必须要进行处理
当前没有完美的解决方案，完美的解决方案以后再说
*/
.box1 {
background-color: purple;
margin-bottom: 200px;;
}
.box2 {
margin-top: -100px;
background-color: sandybrown;
}
.box3 {
width:200px;
height:200px;
background-color: #bbffaa;
}
.box4 {
width:100px;
height:100px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
16.7 行内元素的盒模型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>行内元素的布局</title>
<style>
.s1 {
background-color: yellow;
/*
行内元素的盒模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向的padding不会影响页面布局，并且水平方向的padding不会折叠
- 行内元素可以设置border，但是垂直方向的border不会影响页面布局，并且水平方向的border不会折叠
- 行内元素可以设置margin，但是垂直方向的margin不会影响页面布局，并且水平方向的margin不会折叠
*/
/* width:100px;
height:100px;
padding: 100px;
border: 100px solid red;
margin:100px; */
}
.box1 {
width: 200px;
height: 200px;
background-color: #bbffaa;
}
a{
/*
display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块元素(既可以设置宽度和高度，又不会独占一行)
table 将元素设置为一个表格
none 元素不在页面中显示(用于隐藏某些元素)
visibility 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示(但是位置依旧保留)
*/
display: block;
visibility: visible;
width:100px;
height: 100px;
background-color: thistle;
}
</style>
</head>
<body>
<a href="javascript:;">超链接</a>
<span class="s1">我是span1</span>
<span class="s1">我是span2</span>
<div class="box1"></div>
</body>
</html>
16.8 默认样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>默认样式</title>
<style>
/*
通常情况下，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面布局
通常情况下编写网页必须清除浏览器的默认样式(主要是PC端)
*/
body {
margin: 0px;
}
p {
margin:0;
}
ul{
margin:0;
padding: 0;
list-style: none;/* 去除项目符号 */
padding-left: 20px;
}
.box1 {
width:100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
16.9 盒子的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子的尺寸</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/*
默认情况下，盒子的可见区域大小由内容区、内边框和边框共同决定
box-siziing 用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box width和height用来设置整个盒子的可见区域大小
width和height指的是content、padding、border总大小
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
16.10 轮廓、阴影和圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子的轮廓和圆角</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bbffaa;
border: 10px red solid;
/*
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
默认情况下，阴影在元素的正下方，和元素一样大
可以对其设置偏移量来显示
第1个值：水平偏移量，正值向右移动，负值向左移动
第2个值：垂直偏移量，正值向下移动，负值向上移动
第3个值，阴影的模糊半径
第4个值：阴影的颜色
*/
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
.box1:hover {
/*
outline 用来设置元素的轮廓线，用法和border一致
轮廓不会影响可见框的大小和位置，用的很少，一般用来设置鼠标移动效果
*/
outline: 10px blue solid;
}
.box2 {
width: 200px;
height:200px;
background-color: chocolate;
/*
border-radius 用来设置圆角
同时还有：
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
圆角设置圆的半径大小(只设置一个值)
还可以设置椭圆半径(设置两个值)
border-radius：
- 4个值：左上 右上 右下 左下
- 3个值：左上 右上/左下 右下
- 2个值：左上/右下 右上/左下
将元素设置为圆形：
border-radius: 50%;
*/
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<div class="box2"></div>
</body>
</html>
16.11 浮动1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>盒子的浮动</title>
<style>
.box1 {
/*
通过浮动，可以让一个元素向其父元素的左侧或者右侧移动
通过 float 属性来设置元素的移动
可选值：
- none 默认值，元素不移动
- left 元素向左移动
- right 元素向右移动
Note:
只要float的值不是none，就等于设置了浮动
只要元素设置了浮动，元素的水平布局等式不需要强制成立
元素设置了浮动以后，元素会完全从文档流中脱离，不再占用文档流的位置，所以下边的元素会自动向上移动
浮动的特点：
1. 浮动的元素会完全脱离文档流，不在占用文档流中的位置
2. 设置浮动以后，元素会向父元素的左侧或者右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或者向右移动不会超过它前面的其它元素
5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6. 如果一行无法容纳所有的浮动元素，则会自动换行
7. 浮动元素不会超过它前边的兄弟元素，最多最多和其平齐(这个所谓的前面，是指在html中声明的顺序)
*/
width:200px;
height: 200px;
background-color: chocolate;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
16.12 浮动2(以及脱离文档流的特点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>浮动的其他特点</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
width: 200px;
height: 200px;
background-color: chocolate;
/*
浮动元素不会盖住文字，文字会自动环绕在浮动元素周围
所以我们可以利用浮动来设置文字环绕图片的效果。
其实浮动机制设计之初就是为了达到文字环绕图片的效果
*/
float: left;
}
.box2 {
background-color: yellowgreen;
}
.box3 {
background-color: yellowgreen;
/*
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离以后，元素的一些特点也会发生变化
脱离文档流的特点(不单是浮动的特点，所有脱离文档流的行为都具有以下特点):
- 块元素：
1. 块元素不再独占页面的一行
2. width和height都被内容撑开
- 行内元素:
行内元素脱离文档流以后，特点和块元素一样
脱离文档流易后，不需要再区分行内元素和块元素
*/
float: left
}
.box4 {
background-color: red;
}
.s1 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<p>
观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色，受想行识亦复如是。舍利子，是诸法空相，不生不灭，不垢不净，不增不减。是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界乃至无意识界，无无明亦无无明尽，乃至无老死，亦无老死尽，无苦集灭道，无智亦无得。以无所得故，菩提萨埵；依般若波罗蜜多故，心无挂碍。无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。故说般若波罗蜜多咒，即说咒曰：揭谛揭谛，波罗揭谛，波罗僧揭谛，菩提萨婆诃。
</p> -->
<div class="box2"></div>
<span class="s1">我是一个span</span>
<div class="box3">Hello</div>
<div class="box4">Hello</div>
</body>
</html>
16.13 小练习(w3school导航条)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>W3School Navigation Bar</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/*
设置nav的大小
*/
.nav {
width: 1211px;
height: 48px;
background-color: #E8E7E3;
margin: 100px auto;
}
/* 设置av中的li浮动 */
.nav li {
/* 设置li向左浮动以使菜单横向排列 */
float: left;
/* 设置li的高度 */
height: 48px;
/* 文字在父元素中垂直居中 */
line-height: 48px;
}
.nav a {
/* 将 a 转换为块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #777777;
/* 设置字体大小 */
font-size: 18px;
/* */
padding: 0px 40px;
}
/* 设置鼠标划入的颜色改变 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Brower Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
17. 网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>网页布局</title>
<style>
header, main, footer{
width: 1000px;
margin: 0px auto;
}
header {
height: 150px;
background-color: silver;
}
main {
height: 600px;
/* background-color: skyblue; */
margin: 5px auto;
}
nav, article, aside {
height: 100%;
float: left;
}
nav {
width: 195px;
background-color: yellow;
}
article {
width: 600px;
background-color: orange;
margin: 0px 5px;
}
aside {
width: 195px;
background-color: orchid;
}
footer {
height: 150px;
background-color: darkcyan;
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 创建主体 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间的内容 -->
<article></article>
<!-- 右边的边框 -->
<aside></aside>
</main>
<!-- 创建底部 -->
<footer></footer>
</body>
</html>
18. 元素开启浮动所带来的高度塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>浮动带来的高度塌陷的问题</title>
<style>
.outer {
border: 3px red solid;
/*
BFC(block formatting context) 块级格式化环境
- BFC 是一个隐含的属性，可以为一个元素开启BFC
开启BFC后，该元素会变成一个独立的布局区域
开启BFC后的特点
- 开启BFC后的元素不会被浮动元素所覆盖
- 开启BFC后的元素，父元素和子元素外边距不会重叠
- 开启BFC后的元素，可以包含浮动的子元素
BFC是一个隐藏属性，无法直接开启，可以通过以下几种方式开启(这些方式都有副作用)：
- 设置元素的浮动(不推荐)
- 将元素设置为行内块元素(不推荐)
- 将元素的overflow属性设置为一个非visiable的值
- 常用的方式是伪元素设置overflow:hidden，以开启器BFC属性，使其可以包含浮动元素。
*/
overflow: auto;
}
.inner {
width: 100px;
height: 100px;
background-color: chocolate;
/*
高度塌陷的问题：
在浮动布局中，父元素的高度默认是被子元素撑开的。
当子元素浮动以后，其会完全脱离文档流，子元素从文档流中脱离
将无法撑起父元素的高度，导致父元素高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的问题，而且这个问题必须要进行处理。
*/
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div style="width:200px;height:200px;background-color:yellow"></div>
</body>
</html>
19. BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>BFC</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: silver;
/* float: left; */
overflow: hidden;
}
.box2 {
width: 200px;
height: 200px;
background-color: chocolate;
overflow: hidden;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<!-- <div class="box2"></div> -->
</body>
</html>
20. clear 清除元素浮动带来的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>clear</title>
<style>
div {
font-size: 50px;
}
.box1 {
width: 200px;
height: 200px;
background-color: silver;
/* float: left; */
float: left;
}
.box2 {
width: 400px;
height: 400px;
background-color: tomato;
float: right;
}
.box3 {
width: 200px;
height: 200px;
background-color: orange;
/*
由于box1的浮动，导致box3位置上移(文字本身自带环绕效果，不会被覆盖)
如果我们不希望某个元素因为其它元素的浮动影响而改变位置
我们可以通过clear属性来清除浮动元素对当前元素所产生的影响。
clear
- 作用：清除浮动元素对当前元素产生的影响。
- 可选值：
left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响
both: 清除两侧中最大影响的一侧
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距
以使其位置不受其它元素的影响。
*/
clear: right;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
21. 高度塌陷的最终解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>高度塌陷的最终解决方案</title>
<style>
.box1 {
border:10px red solid;
/* overflow: hidden; */
}
.box2 {
width: 100px;
height: 100px;
background-color: chocolate;
float:left;
}
.box3 {
clear:left;
}
/*
表现的问题，应该由负责表现的部分来解决
使用css添加伪元素，然后对该伪元素设置clear属性
由此可以完美解决高度塌陷的问题
*/
.box1::after {
display:block;
content:"";
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- 高度塌陷属于表现问题，不应该让结构来处理它，因此这种方式虽然看起来很完美，但是违反了某些约定俗成的规则 -->
<!-- <div class="box3"></div> -->
</div>
</body>
</html>
22. 外边距重叠的问题
第一种解决方案：本文第19节：BFC的源码中可见
第二种解决方案(多功能方案)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>clear解决外边距重叠的问题</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: tomato;
}
/* .box1::before {
display: inline;
display: block;
上面这两种方式都不能解决问题
content: '';
display: table;
} */
/* 下面这种方式可以同时解决高度塌陷和外边距重叠问题 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
.box2 {
width: 100px;
height: 100px;
background-color: silver;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
23. 定位
定位(position)是一种更高级的布局手段
通过定位，我们可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
- static 默认值，表示元素没有开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
- sticky 开启元素的粘纸定位
23.1 相对定位和绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>定位</title>
<style>
body {
font-size: 60px;
}
.box1 {
width: 200px;
height: 200px;
background-color: silver;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
相对定位：
1. 如果不设置偏移量，元素不会发生任何的变化
2. 相对的是元素自身在文档流中原来的位置
3. 会提升元素的层级
4. 不会使元素脱离文档流
5. 不会改变元素的性质，块还是块，行内还是行内
绝对定位：
1. 如果不设置偏移量，元素的位置不会发生变化(其他很多东西都变了)
2. 元素会从文档流中脱离
3. 会改变元素的性质，行内变成块，块的宽高会被内容撑开
4. 会使元素提升一个层级
5. 绝对定位元素使相对于其包含块进行定位的
包含块(containing block)：
通常情况下：包含块就是离当前元素最近的祖先块元素
绝对定位情况下：离它最近的开启了定位的祖先块元素
如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
偏移量(offset)：
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top 定位元素和定位位置上边的距离
right 定位元素和定位位置左侧的距离
bottom 定位元素和定位位置下边的距离(定位元素垂直方向的位置由top和bottom共同确定，一般只用几个就够了)
left 定位元素和定位位置右侧的距离(水平位置控制，同样只用一个即可)
*/
/* position: relative; */
position: absolute;
left: 0px;
top: 0px;
}
.box3 {
width: 200px;
height: 200px;
background-color: orange;
}
.box4 {
width: 400px;
height: 400px;
background-color: brown;
position: relative;
}
.box5 {
width: 300px;
height: 300px;
background-color: burlywood;
position: relative;
}
.s1 {
background-color: cyan;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
box4
<div class="box5">
box5
<span class="s1">
span1234567890
<div class="box2">2</div>
</span></div>
</div>
<div class="box3">3</div>
</body>
</html>
23.2 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>定位</title>
<style>
body {
font-size: 60px;
}
.box1 {
width: 200px;
height: 200px;
background-color: silver;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
固定定位也是一种绝对定位，所以其大部分特性跟绝对定位是一样的
唯一不同的是，固定定位是参照于浏览器的视口进行定位的
浏览器窗口的滚动条滚动时，它也不会动(参考hs网站两边的博彩广告)
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3 {
width: 200px;
height: 200px;
background-color: orange;
}
.box4 {
width: 400px;
height: 400px;
background-color: brown;
position: relative;
}
.box5 {
width: 300px;
height: 300px;
background-color: burlywood;
position: relative;
}
.s1 {
background-color: cyan;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
box4
<div class="box5">
box5
<span class="s1">
span1234567890
<div class="box2">2</div>
</span></div>
</div>
<div class="box3">3</div>
</body>
</html>
23.4 粘滞定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>W3School Navigation Bar</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
body {
height:3000px;
}
/*
设置nav的大小
*/
.nav {
width: 1211px;
height: 48px;
background-color: #E8E7E3;
margin: 100px auto;
/*
粘滞定位和相对定位的特点基本一致
不同的是，粘滞定位可以在元素到达某个位置时将其固定
这是新近出来的特性，兼容性不是很好。
*/
position: sticky;
top: 10px;
}
/* 设置av中的li浮动 */
.nav li {
/* 设置li向左浮动以使菜单横向排列 */
float: left;
/* 设置li的高度 */
height: 48px;
/* 文字在父元素中垂直居中 */
line-height: 48px;
}
.nav a {
/* 将 a 转换为块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #777777;
/* 设置字体大小 */
font-size: 18px;
/* */
padding: 0px 40px;
}
/* 设置鼠标划入的颜色改变 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Brower Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
23.5 绝对定位元素的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>绝对定位元素的布局</title>
<style>
.box1 {
width: 500px;
height: 500px;
background-color: #bbffaa;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
position: absolute;
/*
开启绝对定位以后的水平布局：
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区宽度
发生过度约束时：
如果9个值中没有auto，则自动调整right的值以使等式成立。
如果有auto，则自动调整auto的值以使等式满足
可以设置auto的值：margin、width、left、right
因为left和right默认是auto，所以如果不设置left和right，则会自动调整这两个值
垂直方向的等式也必须要满足
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 等于包含块的高度
*/
left: 0px;
right: 0px;
top: 0px;
bottom:0px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
23.6 元素的层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>元素的层级</title>
<style>
body {
font-size: 60px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
position: absolute;
top: 0px;
left: 0px;
/*
对于开启了定位的元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大的层级越高，越优先显示
如果元素的层级一样，优先显示靠下的元素
祖先的元素的层级再高也盖不住后代元素
*/
z-index: 1;
}
.box2 {
width: 200px;
height: 200px;
background-color: blueviolet;
position: absolute;
top: 100px;
left: 100px;
}
.box3 {
width: 200px;
height: 200px;
background-color: tomato;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
24. 字体
24.1 基础
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>字体</title>
<style>
/*
font-face 可以将服务器中的字体直接提供给用户去使用
注意：
加载速度
版权
字体格式
*/
@font-face {
font-family: 'xxx'; /*指定字体的名字*/
src: url(); /*指定服务器中字体的路径*/
}
p {
/*
字体相关样式：
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位:
em 相当于当前元素的一个font-size
rem 相当于根元素的一个font-size
font-family 字体族(字体的格式)
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
*/
font-size: 40px;
font-family: 'NSimSun';
/*font-family: 'xxx'; xxx是font-face中指定的font-family*/
}
</style>
</head>
<body>
<p>Hello, HTML, 今天天气真不错。</p>
</body>
</html>
24.2 图标字体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>图标字体</title>
<link rel="stylesheet" href="./fa/css/all.css">
<style>
li {
list-style: none;
}
li::before {
/*
通过伪元素设置图标
1. 找到要设置图标的元素通过before或after选中
2. 在content中设置字体的编码
3. 设置字体的样式
fab
font-family: 'Font Awesome 5 Brands';
fas
font-family: 'Font Awesome 5 Free';
font-weight:900;
*/
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
/* color: blue; */
margin: 10px;
}
</style>
</head>
<body>
<!--
图标字体(iconfont)
在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片本身大小比较大，并且非常不灵活
所以在使用图标时，我们还可以将图标设置为字体，然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的方式来使用图标
fontawesome使用步骤
1. 下载：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
2. 解压
3. 将css和webfonts移动到项目中
4. 将all.css引入到网页中
5. 使用图标字体
- 直接通过类名来使用图标字体(基本上只有fas和fab)
<i class="fas fa-bell"></i> 元素名是i还是span都无所谓
<i class="fab fa-accessible-icon"></i>
-->
<ul>
<li>锄禾日当午，</li>
<li>汗滴禾下土；</li>
<li>谁知盘中餐，</li>
<li>粒粒皆辛苦。</li>
</ul>
<!-- 通过类来使用图标字体 -->
<i class="fas fa-bell-slash"></i>
<!--
通过实体来使用图标字体
&#x图标编码；
-->
<span class="fas"></div></span>
</body>
</html>
24.3 阿里图标库
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>ali图标库</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
i.iconfont {
font-size: 100px;
}
p::before {
content:'\e6b3';
font-family: "iconfont";
font-size:100px;
}
</style>
</head>
<body>
<!--
https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1964660
另外，阿里的图标库管理是以项目为单位的，在网站上先添加购物车，然后添加到项目，再下载到本地
去掉demo，然后放入项目目录即可使用
fontawesome的使用方法类似
也是需要在网站上查询相应图标的类名或者相应代码
-->
<!-- 通过实体来使用图标 -->
<i class="iconfont"></i>
<!-- 通过类来使用图标 -->
<i class="iconfont iconincrease"></i>
<!-- 伪元素的使用方式 -->
<p></p>
</body>
</html>
24.4 行高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>行高</title>
<style>
div{
font-size:50px;
/*
行高(line height)：文字占有的实际高度
可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接指定一个整数，此时行高将会是字体size的倍数，默认值是1.33
字体框
- 字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度
行高会在字体框的上下平均分配
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中
*/
border:1px red solid;
}
</style>
</head>
<body>
<div>今天天气真不错</div>
</body>
</html>
24.5 字体的简写属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>font简写属性</title>
<style>
div {
/*
font 可以设置字体相关的所有属性
语法：font: bold italic 字体大小/行高 字体族
行高可以省略不写，如果不写会使用默认值，会覆盖font之前设置的行高值
font-weight 和 font-style不写也表示省略，取默认值
*/
font:50px/2 'NSimSun';
/*
font-weight 用来设置字体的加粗效果
可选值：
normal 默认值，不加粗
bold 加粗
100~900 一共九个级别(没什么用)
*/
font-weight: bold;
/*
font-style 字体的风格
normal 正常
italic 斜体
*/
}
</style>
</head>
<body>
<div>今天天气真不错，是吧？HTML</div>
</body>
</html>
24.6 文本的样——水平和垂直对齐
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>字体的样式</title>
<style>
div {
width: 500px;
border: 1px red solid;
/*
text-align 文本的对齐水平
可选值：
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
*/
/* text-align: justify; */
font-size: 50px;
}
span {
font-size: 20px;
border:1px blue solid;
/*
vertical-align 设置元素的垂直对齐方式
可选值：
baseline 默认值，基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
*/
vertical-align: middle;
}
p {
border: 1px red solid;
}
img {
/*
图片的默认对齐方式也是基线对齐，导致图片和边框之间有缝隙，可以根据需求设置成一个非基线对齐的方式即可消除这种缝隙
*/
vertical-align: bottom;
}
</style>
</head>
<body>
<div>今天<span>天气<span>真不错</span></span></div>
<!-- <div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus similique vel sint corrupti fugit officiis, animi atque labore! Quibusdam quas inventore, sapiente dolor nobis ad doloremque tempora. Quas, facilis. Facilis?
</div> -->
<p>
<img src="../html/sources/微信图片_20200710163028.jpg" alt="">
</p>
</body>
</html>
24.7 文本修饰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>文本修饰</title>
<style>
.box1 {
font-size: 50px;
font-family: 'NSimSun';
/*
text-decoration 设置文本修饰
可选值：
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
还可以指定一个颜色(第二个值)
还可以指定下划线的风格(第三个值)
*/
text-decoration: line-through red dotted;
}
</style>
</head>
<body>
<div class="box1">
今天天气真不错
</div>
</body>
</html>
24.8 设置显示区域不够时，末尾三个点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>文本修饰</title>
<style>
.box2 {
width:200px;
/*
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白
*/
white-space: nowrap; /*开启不换行*/
overflow: hidden; /*开启隐藏*/
text-overflow: ellipsis;/*设置省略号*/
}
</style>
</head>
<body>
<div class="box2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, cum repudiandae? Illo, mollitia. Sapiente expedita similique, iure nisi accusamus veniam temporibus quis impedit modi quasi quisquam sed. Non, magnam itaque.
</div>
</body>
</html>
25 背景
| 属性 | 作用 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景图片的重复方式 |
| background-position | 背景图片的位置 |
| background-size | 背景图片的尺寸 |
| background-origin | 背景图片偏移量计算的原点 |
| background-clip | 背景图片的范围 |
| background-attachment | 背景图片是否跟随元素移动 |
| background | 背景图片简写 |
25.1 背景图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>背景</title>
<style>
.box1 {
width: 500px;
height: 500px;
background-color: chocolate;
/*
background-image 设置背景图片
可以同时设置背景图片和背景颜色，此时背景颜色会成为背景图片的背景色
- 如果背景图片小于元素，则背景图片会自动在元素中平铺
- 如果背景图片大于元素，则背景图片将会无法完全显示
background-repeat 用来设置背景图片的重复方式
可选值：
repeat 默认值，背景会沿着x轴，y轴双方向重复
repeat-x
repeat-y
no-repeat
background-position 用来设置背景图片的位置
设置方式：
1. 通过 top bottom left right center等几个表示方位的词组成一个九宫格
使用方位词时，必须同时指定两个方位词如果只写一个，则第二个默认就是center
2. 通过指定偏移量来指定背景图片的位置
水平方向的偏移量和垂直方向的偏移量，单位是像素，可以是负值
*/
background-image: url("./img/2.jpg");
background-repeat: no-repeat;
background-position: -250px -250px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
25.2 设置背景范围
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>背景范围</title>
<style>
.box1 {
width: 500px;
height: 500px;
background-color: #bbffaa;
background-image: url("./img/2.jpg");
background-repeat: no-repeat;
/*
background-clip 设置背景图片的范围
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只会出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 设置背景图片偏移量计算的原点
可选值：
padding-box 默认值background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区开始计算
border-box 背景图片的圆点从边框处开始计算
background-size 设置背景图片的尺寸
第一个值表示宽度，第二个值表示高度
如果只写一个，则第二个值默认是auto
cover表示图片的比例不变的情况下将元素充满
contain 图片比例不变，将图片在元素中完整显示
*/
background-origin: 0px 0px;
background-clip: content-box;
/* background-size: auto 100%; */
background-size: cover;
border: 10px red double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
25.3 background简写语法
background是背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且没有顺序要求，也没有哪个属性是必须要写的。
.box1 {
background: img color position repeat;
}
/*
部分属性有顺序要求
size 必需写在 position 后面，并且用“/”分开，并且不能只写 size 不写 position
origin 和 clip 的值是一样的，origin 必须写在前面
*/
25.4 背景图片按需加载导致的闪烁问题
背景图片属于外部资源，在浏览器中按需加载，如果想要在一个元素中显示多张图片，然后在不同情况下显示不同的背景图片，这样会导致闪烁的问题，可以将多张图片组合成一张，然后在元素中通过设置background-position等属性来解决相应的问题。
这种技术在网页中的应用十分广泛，被称为CSS-Sprite，这种图被称为雪碧图。
25.5 渐变
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>渐变</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bbffaa;
/*
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
！！渐变是图片，需要通过background-image来设置
线性渐变：linear-gradient(red, yellow);(从上往下渐变)
如果想要从左往右渐变，可以这样写：background-image: linear-gradient(to right, red, yellow);
to right
to left
to bottom
to top
xxxdeg deg表示度数
turn 表示圈 例如：0.5turn
还可以复杂组合，例如：to top left
颜色也可以写不止一种，例如：red, yellow, green
默认情况下这些颜色平均分配，也可以手动分配颜色的渐变情况，写法为：
background-image: linear-gradient(red 50px, yellow 70px);这里的像素指定的是颜色的起始位置
平铺的线性渐变 repeating-linear-gradient
background-image: repeating-linear-gradient(red 50px, yellow 100px);
根据颜色之间指定的位置的差值计算渐变区域大小
*/
/* background-image: linear-gradient(red, yellow); */
/* background-image: linear-gradient(red 50px, yellow 70px); */
background-image: repeating-linear-gradient(red 50px, yellow 100px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
25.5.1 径向渐变
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>渐变</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bbffaa;
/*
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
！！渐变是图片，需要通过background-image来设置
线性渐变：linear-gradient(red, yellow);(从上往下渐变)
如果想要从左往右渐变，可以这样写：background-image: linear-gradient(to right, red, yellow);
to right
to left
to bottom
to top
xxxdeg deg表示度数
turn 表示圈 例如：0.5turn
还可以复杂组合，例如：to top left
颜色也可以写不止一种，例如：red, yellow, green
默认情况下这些颜色平均分配，也可以手动分配颜色的渐变情况，写法为：
background-image: linear-gradient(red 50px, yellow 70px);这里的像素指定的是颜色的起始位置
平铺的线性渐变 repeating-linear-gradient
background-image: repeating-linear-gradient(red 50px, yellow 100px);
根据颜色之间指定的位置的差值计算渐变区域大小
background-image: linear-gradient(大小 at 位置, 颜色 位置, 颜色 位置,...);
大小可选值：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置和偏移量一样:
top right bottom left，或者直接使用像素值
*/
/* background-image: linear-gradient(red, yellow); */
/* background-image: linear-gradient(red 50px, yellow 70px); */
background-image: repeating-linear-gradient(red 50px, yellow 100px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
26. 表格的样式
备注：td虽然不是块元素，但是它也不会跟其它元素公用一行，它只会跟td共占一行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>表格的样式</title>
<style>
table {
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing 指定边框之间的间距 */
/* border-spacing: 0px; */
/* border-collapse 设置边框的合并，设置它之后，border-spacing就失效了 */
border-collapse: collapse;
}
td {
border: 1px solid black;
/*
默认情况下元素在td中是垂直居中的，可以通过vertical-algin来修改
*/
vertical-align: middle;
text-align: center;
}
tr:nth-child(2n+1) {
background-color: #bbffaa;
}
tr:nth-child(2n) {
background-color: chocolate;
}
/*
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody，并且将所有的tr全都放到tbody中
tr不是table的子元素，因此无法通过table的子元素选择器选中tr
*/
.box1 {
width: 300px;
height: 300px;
background-color: orange;
display: table-cell;
vertical-align: middle;
}
.box2 {
width: 100px;
height: 100px;
background-color: greenyellow;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐三藏</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
27. 弹性容器的样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>flex弹性盒</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
ul {
width: 800px;
border: 10px red solid;
/* 将容器设置为弹性容器 */
display: flex;
/*
flex-direction 指定容器中弹性元素的排列方式
可选值
row 默认值，弹性元素在容器中水平排列(左向右) 主轴自左向右
row-recerse 弹性元素在容器中反向水平排列 主轴自右向左
column 弹性元素在容器中纵向排列(自上向下) 主轴自上向下
column 弹性元素在容器中反向纵向排列 主轴自下向上
主轴：
弹性元素的排列方向称为主轴
侧轴：
与主轴垂直方向的称为侧轴
*/
/* flex-direction:column; */
/*
flex-wrap 设置弹性容器是否自动换行
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
flex-flow direction 和 wrap 的简写属性
flex-flow: row wrap;
*/
flex-wrap: wrap;
/*
justify-content
- 如何分配主轴上的空白空间(主轴上的元素如何排列)
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素沿着主轴居中排列
space-around 空白分配到元素两侧
space-between 空白均匀分布到元素的单侧
space-evenly 空白分布到元素的单侧
*/
justify-content: flex-start;
/*
align-items 元素在辅轴上如何对齐
元素间的关系
可选值：
stretch 默认值。将同一行的元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 元素不会拉伸，沿着辅轴终边对其
center 元素不会拉神，居中对齐
baseline 基线对齐
*/
align-items: stretch;
/*
align-content 元素在辅轴上的空白分配方式
可选值和justify-content一致
*/
align-content: center;
/* align-self 用来覆盖当前弹性元素上的align-items */
align-self: stretch;
}
li {
width: 100px;
height: 100px;
background-color: orange;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
弹性元素的属性：
flex-grow 指定弹性元素的伸展系数，默认为0(不伸展)
当父元素有多余空间时，子元素该如何伸展
flex-grow 还能为每一个元素分别设置
*/
flex-grow: 1;
/*
flex-shrink 收缩系数
当父元素中的空间不足以容纳所有的子元素时。如何对子元素进行收缩
用法和flex-grow基本一致
*/
flex-shrink: 0;
}
li:nth-child(2) {
background-color: chocolate;
}
li:nth-child(3) {
background-color: darkcyan;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
28. 弹性元素的样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>flex弹性盒</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
ul {
width: 800px;
border: 10px red solid;
display: flex;
}
li {
width: 100px;
height: 100px;
background-color: orange;
font-size: 50px;
text-align: center;
line-height: 100px;
flex-grow: 1;
/*
flex-basis 指定元素在主轴上的基础长度
如果主轴是横向的，则该值指定的就是元素的宽度
如果主轴是纵向的，则该值指定的就是元素的高度
默认值是auto，参考元素自身的高度或宽度
如果传递了一个具体的数值，则以该值为准
*/
flex-basis: 100px;
/*
flex可以设置弹性元素的三个样式
flex 增长 缩减 基础
initial "flex: 0 1 auto"
auto "flex: 1 1auto"
none "flex: 0 0 auto" 弹性元素没有弹性
*/
flex: initial;
}
li:nth-child(1) {
background-color: orange;
order: 3;
}
li:nth-child(2) {
background-color: chocolate;
/*
order 决定弹性元素的排列顺序
order: 2;
*/
order: 2;
}
li:nth-child(3) {
background-color: darkcyan;
order: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
29. 移动端网页
29.1 视口大小设置
默认情况下，移动端的网页都会将视口设置为980像素(css像素)，几乎所有的手机都一样。
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页进行缩放，以完整显示网页。
所以基本大部分的pc端网页都可以在移动端正常浏览，但是往往不会有一个好的体验。
因此为了解决这个问题，大部分网站都会专门为移动端设计网页。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=100px">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1 {
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!--
移动端默认的视口大小是980px(css像素)
默认情况下，移动短的像素比就是 980/移动端宽度 (980/750)
如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比非常不好
会导致网页中的内容非常小
编写移动页面时，必须要确保有一个合理的像素比
1css像素对应2个物理像素甚至3个个物理像素
可以通过meta标签来设置视口大小
每一款移动设备设计时，都会有一个最佳的像素比，一般只要我们将像素比设置为该值即可达到最佳效果
因此最好加上下面的语句：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-->
<div class="box1"></div>
</body>
</html>
29.2 移动端网页的元素大小设置
因为不同移动设备的视口大小不相同，因此在编写移动端网页时，不能再直接指定像素了，需要使用一个新的单位“vw”。
vw 表示的是视口的宽度(viewport width)
100vw = 1个视口宽度
1vw = 1% 视口宽度
<!--
设计图的宽度
750px 1125px
以750px为例
使用vw作为单位：100vw
创建一个48px*35px大小的元素
100vw = 750(设计图的像素) 0.133... = 1px
6.4vw = 48px
4.667vw = 35px
-->
29. 移动端网页大小的vw适配
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>vw适配</title>
<style>
*{
margin: 0px;
padding: 0px;
}
html {
/*
网页中字体大小最小是12px/我在自己的电脑上看到的是9.6px，不能设置得比它还小
*/
font-size: 5.33333vw; /*0.133333的40倍*/
}
.box1 {
/*
rem
1rem 1html字体大小
*/
width: 18.75rem;
height: 0.875rem;
background-color: chocolate;
}
</style>
</head>
<body>
<!-- 48*35 -->
<div class="box1"></div>
</body>
</html>
30. 媒体查询
30.1 媒体查询的基本用法
<!DOCTYPE html>
<html lang="zh-CN">
<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,chrome=1">
<title>响应式布局</title>
<style>
/*
使用媒体查询：
语法：@media 查询规则{}
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
可以使用逗号连接多个媒体类型，这样它们之间就是或的关系
可以在媒体类型前添加一个only，表示只有
only的使用主要是为了件容易些老版本的浏览器
*/
/* @media all { */
@media print{
body{
background-color: chocolate;
}
}
</style>
</head>
<body>
<!--
响应式布局：
- 网页可以根据不同的设备或窗口呈现出不同的效果
- 使用响应式布局可以使一个网页适应所有的设备
- 响应式布局的关键就是媒体查询
- 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
-->
</body>
</html>
30.2 媒体查询的用法
<!DOCTYPE html>
<html lang="zh-CN">
<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,chrome=1">
<title>媒体类型</title>
<style>
/*
媒体特性：
width：视口宽度
height：视口高度
min-width：视口最小宽度(视口大于指定宽度时生效)
max-width：视口最大宽度(视口小于指定宽度时生效)
*/
/*
样式切换的分界点，我们成为断点
一般比较常用的断点：
<768 超小屏幕 max-width=768px
>768 小屏幕 min-width=768
>992 中型屏幕 min-width=992px
>1200 大屏幕 min-width=1200px
*/
/* @media (width:500px) {表示当宽度为500px时，样式生效的使用主要是为了件容易些老版本的 */
@media only screen and (min-width:500px),(max-width: 700px) {
/*
可以同时指定多个条件
, 连接的关系是或的关系
and 连接的关系是与的关系
*/
body {
background-color: chocolate;
}
}
</style>
</head>
<body>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
