CSS基础
1.CSS简介
css全称:层叠样式表(Cascading Style Sheets)
css的作用:美化网页,让网页变得更好看
如何理解层叠样式表(css)?
网页是由标签层层嵌套形成的如外层的html标签嵌套body,
body再嵌套我们需要的内容标签.
层叠样式指的是很多上级标签的样式会自动继承到其下级标签,
除非下级标签定义了自己的样式.
<!-- 层叠样式继承的例子 -->
<div style="color:red">
hello
<div>
world
<div>
我爱css
</div>
</div>
</div>
效果如下:
虽然内层div没有定义样式,但继承了外层div样式,所以字体颜色仍然改变;
2.CSS书写位置
2.1 内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,
并且用style标签定义，其基本语法格式如下:
<style>
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
一个实例:
<style>
/*
.title是类选择器,即选择class是title的标签,
去修改该标签的样式
color:是样式属性,用来设置标签文本内容的颜色
*/
.title{
color: red;
}
</style>
2.2 外部样式表
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,
通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
如定义一个index.css文件:
.title{
color: red;
}
再定义一个HTML文件
<!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>Daocument</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="title">
hello
</div>
</body>
</html>
2.3 内联样式(行内样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下:
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”>
内容
</标签名>
注意:
内联样式相对于内部样式表和外部样式表来说用的较少,
因为其样式优先级较高,可能导致样式难以修改的问题,
因此建议少用内联样式,多用其他两种样式表!
如:
<div style="color:red">
hello
</div>
3.基础选择器
3.0 CSS选择器
css选择器:
我们修改网页样式一定是找到某一个或某一些标签进行样式的修改,
那么在css中如何找到这些标签呢,这个工作就是由我们的选择器来完成的,选择器的作用就是帮助我们找到需要的标签然后配合css样式属性去修改标签样式!
3.1 类选择器
类选择器:
根据类名选择标签
语法:
.类名{
css属性名:属性值
}
使用 .类名 可以找到所有具备这个类名的标签,
在类选择器 .title 后面的花括号里面可以设置样式
注意:
当类名过长时,建议用 - 连接,如class=“green-text”
.title1{
/* color是样式属性:文字颜色 */
color: blue;
/* font-size是样式属性:文字大小 */
font-size: 30px;
/* background-color是样式属性:背景颜色 */
background-color: skyblue;
}
<!--
用class属性给标签起一个类名,
css可以用类选择器找到该标签,
从而修改标签样式.
-->
<div class="title1">
hello
</div>
<div class="title2">
world
</div>
<div class="green-text">
刘备
</div>
3.1.1 多类名选择器
可以同时选择多个类选择器,下面看一个案例:
<style>
.red-text {
color: red;
}
.font30 {
/* 修改字体大小 */
font-size: 30px;
}
</style>
<div class="red-text font30">
hello
</div>
结果 hello 可以包含两个选择器中的式样
,即变成字体大小为30px,字体颜色为红色.
当不同的选择器中样式选项出现重复时,下面的选择器样式会覆盖上面选择器的样式.下面看一个案例:
</style>
.green-text {
color: green;
}
.blue-text {
color: blue;
}
</style>
<div class="green-text blue-text">
不俗即仙骨，多情乃佛心
</div>
可以看出最后文字的颜色变成了蓝色.
3.2 标签选择器
标签选择器,用标签名做选择器,可以将某一标签全部选择出来.如:
<style>
div{
color: red;
}
span{
color: blue;
}
</style>
标签选择器的优缺点:
优点:能够快速为页面中同类型的标签统一样式。
缺点:不能设计差异化样式,有时候会相互干扰.
总结:不是特别建议过多使用标签选择器,可以用类选择器替换标签选择器使用.
3.3 id 选择器
id选择器的使用:
语法: #id名{ } 如:
#title{
color: red;
}
注意:
使用id属性起一个id名
注意:id名必须唯一,这和class名有区别,
id可以理解成人的身份证号,
所有人的身份证号都不一样,
所有标签的id也必须不一样,这是规范!
4.复合选择器
4.1 交集选择器
交集选择器:
可以翻译成既是...又是...
语法:
选择器1选择器2
{
css属性名:属性值
}
注意:这里选择器1与选择器2之间不能有空隙
案例:
<style>
/* 选择类名既是box1又是box2的标签 */
.box1.box2{
color: red;
}
/*
选择标签名是p并且类名是box3的标签
*/
p.box3{
color: green;
}
</style>
</head>
<body>
<div class="box1 box2">hello</div>
<div class="box1">world</div>
<div class="box2">web</div>
<p class="box3">不俗即仙骨，多情乃佛心</p>
<p>飞雪连天射白鹿 笑书神侠倚碧鸳</p>
结果图示:
4.2 并集选择器
并集选择器:
可以翻译成...或...
语法:
选择器1,选择器2
{
css属性名:属性值
}
案例:
<style>
/*
选择类名是box1或者类名是box2的标签修改样式
*/
.box1,.box2{
color: red;
}
</style>
</head>
<body>
<div class="box1">hello</div>
<div class="box2">world</div>
<div class="box1 box2">你好</div>
</body>
结果图示:
可以看出三行字都改变了颜色
4.3 后代选择器
后代选择器:
选择一个标签的后代元素并设置样式
语法:
选择器1 后代元素的选择器(注意这里是以空格连接)
{
css属性名:属性值;
}
案例:
<style>
/*
选择类名是container的标签元素的后代元素,这个后代
元素的类名需要是title1
*/
.container .title1{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<div class="title1">hello111</div>
</div>
<div class="title2">world</div>
</div>
<div class="title1">hello222</div>
</body>
结果图示:
可以看出此时只有hello111改变了颜色,因为其位于container选择器的后代中;而hello222没有发生改变,因为其位于container选择器同级的位置.
4.4 子代选择器
子代选择器:
选择某个标签的儿子元素并设置样式
语法:
选择器1>儿子元素的选择器{
css属性名:属性值;
}
案例:
<style>
.outer>.inner1{
color: green;
}
</style>
<body>
<div class="outer">
<div class="inner1">儿子a</div>
<div>
<div class="inner1">孙子1</div>
<div>孙子2</div>
</div>
</div>
结果图示:
可以看出,儿子a 字体颜色改变,虽然孙子1的选择器也是inner1,但由于它是outer选择器的孙子,所以颜色不会改变.
4.5 兄弟选择器
4.5.1 相邻兄弟选择器
相邻兄弟选择器:
选择某个元素的一个相邻的兄弟元素并设置样式
语法:
选择器1+相邻的兄弟选择器{
css属性名:属性值
}
注意:
使用兄弟选择器的时候一定要保证+左右两边是兄弟关系
案例如下:
<style>
.box+li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li class="box">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
结果图示:
兄弟选择器使用 + 符号，将两个选择器连接在一起，例如 element1 + element2。
它会选择在同一父元素下，位于元素1之后的兄弟元素2，如果兄弟元素2符合选择器的条件。
但它不会选择在元素1之前的兄弟元素，只选择之后的一个。可以看出2的下一个兄弟元素3改变了颜色,而其上一个兄弟元素并未受到影响.
4.5.2 所有兄弟选择器
所有兄弟选择器:
选择某个标签的所有兄弟元素并设置样式
语法:
选择器~兄弟元素的选择器
{
css属性名:属性值;
}
/*
选择类名是box的标签,并且将这个标
签的所有兄弟元素文字颜色设置为红色
*/
<style>
.box~li{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="box">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
可以看到效果图中,1的所有兄弟元素颜色都变成了红色
4.6 伪类选择器
伪类选择器（pseudo-class selector）是一种用于CSS（层叠样式表）的选择器，它允许你选择HTML文档中不同状态或特定条件下的元素。伪类选择器通常以冒号（:）开头，后面跟着伪类的名称。伪类选择器的作用仍然是给标签样式,只不过这个类class是不存在于标签中的,所以叫伪类!!!
4.6.1 a标签的伪类选择器
a标签的伪类选择器用于选择处于特定状态的元素,
行为就像你在文档的某个部分上应用了一个类,
通常可以帮助你减少标记中多余的类,
伪类是以冒号开头的关键字.
a标签的伪类选择器:
link:未访问过
visited:已访问过
hover:鼠标移动到链接上(重点,用的很多)
active:选中链接时
注意:
a标签的伪类选择器,上下顺序不要变,
遵循link->visited->hover->active的顺序
记忆口诀:lvha(lv好)
一个问题: 为什么a的伪类需要按顺序写?
因为伪类的优先级是相同的,后出现的伪类样式会覆盖先出现的
例如:先active后hover
a:active {
color: skyblue;
}
a:hover {
color: orange;
}
鼠标选中a链接应该是skyblue色,但是选中链接时也触发了hover,
hover样式会覆盖active样式,结果选中链接变成了orange
4.6.2 hover鼠标悬浮
hover伪类选择器不仅仅可以用在标签选择器a后面, 还可以用在其他选择器后面,hover的作用是当鼠标悬浮在元素上修改元素的样式,使用hover我们可以写出很多好看的效果!
4.6.3 结构伪类选择器
注意:
结构选择器中n是从1开始的,即第一行是1,第二行是2…
first-child: 父元素的第一个子元素.
如果一个元素类名是text,并且这个元素是它的父元素的第一个子元素,那么就选中它.
.text:first-child{
color: red;
}
last-child: 父元素的最后一个子元素 .
如果一个元素类名是text,并且这个元素是它的父元素的最后一个子元素,
那么就选中它.
.text:last-child{
color: skyblue;
}
nth-child(n):
nth表示第n个,父元素的第n个元素
n可以写具体的数字,可以写odd奇数行,even偶数行,也可以写表达式2n-1,2n
/* 奇数行变为红色 */
.title:nth-child(odd){
color: red;
}
/* 偶数行变蓝色 */
.title:nth-child(2n){
color:blue
}
4.7 伪元素选择器
在DOM（文档对象模型）中，伪元素并不是真实的HTML标签，它们是CSS的一种选择器，用于向某些元素的特定部分应用样式。伪元素以双冒号（::）开头，常见的伪元素包括::before和::after。例如:
.div1::before表示在.div1这个标签体内容前面插入一个伪元素,内容content是字符串刘备
.div1::before{
content:'刘备';
border: 1px solid skyblue;
}
<div class="div1">
hello
</div>
效果图示:
伪元素特点:
1.伪元素几乎具备元素的所有属性,比如背景background,长宽width,height,边框border等;
2.伪元素是一个内联元素
注意:
伪元素一定要写content属性,否则生成不了伪元素.
4.8 选择器的优先级
问题引入:
同一个元素用id选择器设置为红色,
用类选择器设置为绿色,最终的颜色是红色还是绿色呢?
答:
我们测试一下发现是红色!为什么会这样?这是因为id选择器的优先级大于类选择器,因此样式使用的是id选择器中设置的样式!
选择器优先级大小顺序:
内联样式>id选择器>类选择器>标签选择器>通配符>继承
注意:
当两个选择器优先级相同时,写在style下面的选择器样式会覆盖上面的样式! 内联优先级最 高,写了内联其他所有选择器都会失效,
因此不是特别建议频繁使用内联样式!
5.CSS属性
5.1 通用属性
<div class="box">
hello
</div>
.box{
/* color用来设置文字颜色 */
color: green;
/* 设置背景颜色 */
background-color: red;
/* width和height设置元素宽高 */
width: 100px;
height: 100px;
}
效果图示:
5.2 字体样式
/* 文字颜色 */
color: red;
/* 字体大小 */
font-size: 18px;
/* 字体粗细 bold:加粗 */
font-weight: bold;
/* 元素宽度自适应文本内容 */
width: fit-content;
/* line-height:设置行高,可以设置文字的垂直居中.一般把line-height设置为你需要的元素高度就可以实现单行文字的垂直居中 */
line-height: 50px;
/* text-align:文本对齐方式 center水平居中 */
text-align: center;
/* 下划线 */
text-decoration: underline;
/* 中划线 */
text-decoration: line-through;
/* 去掉所有的线 */
text-decoration: none;
5.3 背景图片
<style>
.box{
/*
background-image:设置背景图片
url是个函数,参数是路径,路径可以加引号也可以不加
*/
background-image: url(./cx.png);
/* 设置元素的宽高 */
width: 500px;
height: 500px;
/* 设置图片的宽高 */
background-size: 100px 100px;
/*
background-repeat:图片默认会平铺满元素,
no-repeat关闭平铺,即只显示一张图片
*/
background-repeat: no-repeat;
/* 背景颜色 */
background-color: skyblue;
/* 设置图片位置 */
background-position:left 10px top 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
效果图示:
关于背景图片处理的一个练习:
给定两张图片,完成这样一个如图效果(草地背景图适应整个屏幕大小,展示小鸟图片)
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 100vh;
background-image: url(./images/bg.jpg);
background-size: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/bird.png">
</div>
</body>
这里补充一下vw,vh和%的区别
vw:
vw是view width的简写,
1vw表示浏览器窗口宽度的百分之一,
50vw表示浏览器窗口的一半,
100vw表示整个浏览器的宽度!
vh:
vh是view height的简写,
1vw表示浏览器窗口高度的百分之一,
50vw表示浏览器窗口高度的一半,
100vw表示整个浏览器的高度!
%和vw(vh)的区别:
%相对于父标签元素的比例;
vw(vh)是相对于浏览器窗口的比例;
5.4 文字处理
5.4.1 单行文字超出显示省略号
<style>
.text {
/* 设置宽度 */
width: 200px;
/* nowrap:不换行 */
white-space: nowrap;
/* ellipsis:超出元素宽度的文本使用省略号代替 */
text-overflow: ellipsis;
/* overflow:hidden 超出的文本隐藏 */
overflow: hidden;
background: skyblue;
/*
注意:
text-overflow: ellipsis和overflow:hidden一起用
才能起到超出文本显示省略号的作用
*/
}
</style>
</head>
<body>
<div class="text">
不俗即仙骨，多情乃佛心
慢品人间烟火色，闲关万事岁月长
飞雪连天射白鹿 笑书神侠倚碧鸳
</div>
</body>
效果图示:
5.4.2 多行文字超出显示省略号
<style>
.box {
background: skyblue;
width: 200px;
/* 文本超出时隐藏 */
overflow: hidden;
/* 开启-webkit-box布局 */
display: -webkit-box;
/* 布局方向竖直方向 */
-webkit-box-orient: vertical;
/* 显示几行 */
-webkit-line-clamp: 2;
}
</style>
</head>
<body>
<div class="box">
不俗即仙骨，多情乃佛心 飞雪连天射白鹿 笑书神侠倚碧鸳 慢品人间烟火色，闲关万事岁月长
</div>
</body>
效果图示:
6.盒子模型
6.1 盒子模型简介
高大的房屋是由一块块砖头堆砌而成的,
那么我们的网页是由什么组成的呢?有的同学会说是由div,p,span等元素组成,
确实是这样,html元素其实是一个个的矩形盒子, 网页是由许多盒子组成的,我们给这些元素盒子取了个名字,叫盒子模型.
其中Content是内容,Margin是外边距,Padding是内边距, Border是边框线;下面将逐个对它们进行讲解:
6.2 内容Content
注意:
默认情况下,我们设置的宽高是元素内容的宽高,而不是元素的宽高
如下:设置宽高为200px,边框宽度10px,
我们发现div元素的宽度是了220px,而不是200px,充分说明了width和height设置的是内容的宽高!
.box{
width: 200px;
height: 200px;
background: red;
/* 设置10px宽度的边框 */
border: 10px solid red;
}
6.3 边框Border
/* 边框的宽度 */
border-width: 2px;
/* 边框的颜色 */
border-color: red;
/*
边框样式:
solid:实线
dotted:点
dashed:短线 */
/* 边框简写:直接使用border可以设置边框的多个属性, 属性顺序没有要求 */
border: 2px solid red;
/* 使用border-方向 可以单独设置上下左右 四个方向的边框 */
border-bottom: 2px solid green;
border-top: 2px solid blue;
border-left: 2px solid orange;
border-right: 2px solid aqua;
/* 设置边框弧度 */
border-radius: 10px;
/* 边框弧度设置成50%,可以得到一个圆形 */
border-radius: 50%;
6.4 内边距Padding
.box{
width: 200px;
height: 200px;
background: skyblue;
border: 1px solid red;
/* 左内边距 */
padding-left: 20px;
/* 右内边距 */
padding-right: 20px;
/* 上内边距 */
padding-top: 20px;
/* 下内边距 */
padding-bottom: 20px;
/*
注意:
设置内边距后会使盒子容积变大,我们这时查看class是box的div,
会发现宽度显示242,242是由内容宽度+边框宽度+内边距求和得到的.
*/
/* padding简写: */
background: skyblue;
width: 50px;
/* 上下左右都是10 */
padding: 10px;
/* padding简写对应的边距:上,右,下,左(顺时针) */
/* padding: 20px 10px 30px 40px; */
/* padding简写对应的边距:上下,左右 */
padding: 20px 40px;
}
}
6.5 外边距Margin
/* 上外边距 */
margin-top: 10px;
/* 下外边距 */
margin-bottom: 20px;
/* 左外边距 */
margin-left: 30px;
/* 右外边距 */
margin-right: 40px;
/* 外边距简写:上,右,下,左(顺时针) */
/* margin: 10px 20px 30px 40px; */
/* 外边距简写:上下,左右 */
margin: 10px 20px;
/*
设置盒子水平居中:
条件:
1.需要块级元素
2.需要设置宽度
3.magin:auto */
.box {
width: 200px;
margin: auto;
}
7.元素类型
7.1 块级元素
块级元素:
每个块级元素都会独自占据一整行,
并且可以对其设置宽高等属性,
常见块级元素:常见的块元素有:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
其中div是最重要的块元素
块级元素的特点:
1.每个块级元素都会独占一行
2.高度,行高,外边距以及内边距都可以控制
3.宽度默认是容器的100%
7.2 行内元素
行内元素:
不会独占一行,和相邻行内元素在同一行显示,
不能设置宽高,
常见行内元素: <a>,<strong>,<button>,<span>, 其中span是比较常用的行内元素
行内元素特点:
1.不会独占一行,和相邻行内元素在同一行显示
2.不可以设置宽高
3.默认宽度是其本身内容的宽度
7.3 行内块元素
行内块元素:
在行内元素中有几个特殊的标签img,input
可以对它们设置宽高和对齐属性,我们称他们为行内块元素
行内块元素特点:
1.和相邻行内元素(行内块)在一行上显示,但是之间会有空白缝隙(可以将父元素的font-size设置为0解决这个问题).产生间隙的原因:行内元素之间的换行符会被转换为空白符,空白符占据一定宽度,所以元素之间就出现了空隙!
2.默认宽度就是它本身内容的宽度
3.高度,行高,外边距以及内边距都可以控制
常用的行内块级元素:img,input
7.4 元素类型切换
display属性可以将元素变为不同的类型;display主要有三种不同的值:
display:inline 将元素变为行内元素
display:inline-block 将元素变为行内块级元素
display:block 将元素变为块级元素
8.定位
定位属性position 可以设置定位方式
在了解定位方式之前,先简要了解一下什么是标准流布局与脱离标准流布局:
标准流布局:
在不使用css样式干预布局的情况下,html元素默认的布局方式,即块级元素会独占一行,
行内元素会在一行显示.在标准流布局中每个元素都会占据一个空间(坑位),一个元素一般不能占用另一个元素的空间!!!
脱离标准流布局(脱标):
元素脱离了标准流,自然在标准流中占据的空间就不存在了!!!
8.1 相对定位
relative: 相对定位
相对定位的元素,可以设置其在标准流中的位置,但是原来占据的空间仍然存在!!!
因此相对定位未脱离标准流.
定位常用的四个位置属性: left,right,top,bottom
8.2 绝对定位
absolute: 绝对定位
子元素相对于最近的已经定位的上级元素进行定位
注意:
1.子元素如果想相对于父元素定位,父元素一般要设置为相对定位relative,如果父元素没有 设置定位,那么子元素就会继续向上级寻找已经定位的元素,
一直找下去直到body;
2.绝对定位的元素会脱离标准流布局,它在标准流中的占据的位置不会保留!!!
子元素绝对定位记忆口诀:
父相子绝: 子元素绝对定位需要设置父元素相对定位
绝对定位中的盒子居中:
案例:定义两个div,最终效果是让小盒子在大盒子中居中显示.最初代码如下
<style>
.box {
background: skyblue;
width:200px;
height: 200px;
}
.box>.son{
width: 100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
效果图示:
想要达到预期效果,可分为两步:
第一步:利用绝对定位,让子div相对于父div移动到距离左边父元素宽的50%,以及距离上边父元素高的50% .代码如下:
.box {
position: relative;
background: skyblue;
width:200px;
height: 200px;
}
.box>.son{
position: absolute;
width: 100px;
height: 100px;
background: orange;
/*
距离左边父元素宽的50%
距离上边父元素高的50%
*/
left: 50%;
top: 50%;
}
此时效果如图:
第二步:利用transform属性再次对子div的位置进行改变(transform 是一种 CSS 属性，用于 对元素进行各种 2D 或 3D 变换，比如平移（移动）、缩放、旋转以及倾斜等。通过使 用 transform 属性，你可以改变元素在页面上的外观，而不会改变其文档布局)
代码如下:
.box>.son{
position: absolute;
width: 100px;
height: 100px;
background: orange;
/*
距离左边父元素宽的50%
距离上边父元素高的50%
*/
left: 50%;
top: 50%;
/*
将元素向左,向上移动自身宽高的一半距离
*/
transform: translate(-50%,-50%);
}
最终效果图示,即达到子div在父div中居中的效果:
8.3 固定定位
fixed: 固定定位
1.相对于浏览器窗口进行定位,不会随着滚动条滚动;
2.脱离标准流,它在标准流中的位置不会保留
3.固定定位和父元素无关
案例: 定义一个背景色为橙色,长和宽都为五十像素的矩形div,使它固定在距离距离浏览器窗口顶端60像素,左侧20像素的位置
<style>
.box {
background: skyblue;
width: 500px;
height: 1300px;
text-align: center;
}
.fix {
position: fixed;
top: 60px;
left: 20px;
width: 50px;
height: 50px;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<h1>1</h1>
<h1>2</h1>
<div class="fix"></div>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
</div>
</body>
初始效果如图:
当滚轮向下翻时,也会发现该div并未跟随其他元素一起移动;
总结: position: fixed 也会使元素脱离标准流布局。通过将元素定位为固定位置，它会相对于浏览器窗口进行定位，而不是相对于文档流中的其他元素。这意味着即使滚动页面，固定定位的元素也会保持在其固定的位置，不会随着页面的滚动而移动。
当你使用 position: fixed; 时，元素的位置不再受到文档中其他元素的影响。它不会影响其他元素的布局，也不会被其他元素所覆盖。这种特性使得固定定位经常用于创建固定的导航栏、悬浮按钮或其他始终可见的元素。
8.4 粘性定位
sticky: 粘性定位
是 CSS 定位属性的一种值，它允许元素在滚动到特定位置时变为固定定位，而在滚动超过特定位置时恢复其常规流定位。简而言之，它是相对于滚动容器的位置进行定位，当滚动到特定位置时会“粘”在屏幕上。
当元素被设置为 position: sticky; 时，它表现得像是 position: relative; 和 position: fixed; 的混合体。具体而言，元素在滚动容器中的位置是相对定位，直到它达到特定的阈值（比如滚动到特定位置）时，它会变为固定定位，保持在容器中的特定位置直到滚动容器滚动到特定位置后才会恢复为相对定位。
position: sticky; 可以用于创建在页面滚动时保持在视图中的元素，例如导航栏或表头。这使得用户始终能够看到重要的信息，而无需手动滚动回顶部。
注意:
1.必须指定top,bottom,left,right4个值之一;
2.父元素的高度不能低于sticky元素的高度;
案例:使粉色的div在随滚轮滚动到相应位置时固定在浏览器顶部
<style>
body{
height: 2000px;
width: 500px;
}
div{
height: 100px;
}
div:nth-child(1){
background:orange;
}
div:nth-child(2){
background:pink;
}
div:nth-child(3){
background: rgb(193, 203, 12);
}
div:nth-child(4){
background: green;
}
.two{
position: sticky;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
最初效果如下:
当浏览器滚轮向下滚动时可以发现,它"粘"在了浏览器顶部:
8.5 堆叠顺序
z-index 是 CSS 属性，用于控制元素在垂直堆叠顺序中的显示顺序。它定义了元素在三维空间中的堆叠顺序，决定了哪个元素出现在其他元素的上方。具有较高 z-index 值的元素将显示在具有较低 z-index 值的元素之上。
通常情况下，具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。如果两个元素具有相同的 z-index 值，则它们的堆叠顺序取决于它们在文档流中的先后顺序。
要使用 z-index 属性，首先需要将元素的 position 属性设置为 relative、absolute 或 fixed。只有这些值的元素才能具有堆叠顺序，并且 z-index 属性才能对其生效。
示例：
.element1 {
position: relative;
z-index: 2;
}
.element2 {
position: relative;
z-index: 1;
}
在这个例子中，element1 将显示在 element2 上方，因为它具有较高的 z-index 值。
9.元素的隐藏显示
9.1 display显示隐藏元素
display:
block:显示
none:隐藏
当display隐藏元素时,元素原来占据的位置不会被保留
9.2 visibility显示隐藏元素
visibility:
visible:显示
hidden:隐藏
当visibility隐藏元素时,元素原来占据的位置会被保留下来
10.浮动
10.1 浮动简介
标准流实际上就是一个网页内标签元素正常从上到下,
从左到右排列顺序的意思,比如块级元素会独占一行,
行内元素会按顺序依次前后排列,
按照这种大前提的布局排列之下绝对不会出现例外的情况叫做标准流布局. 标准流中想让div横向排列比较困难,我们可以使用浮动float属性,让div 脱离标准流漂浮到标准流文档上面,来实现多个div在同一行的功能.
float有两种属性值:
1.left：元素向左浮动。
2.right：元素向右浮动。
10.2 浮动元素的位置如何确定?
一旦元素设置为浮动,它就会脱离标准流,浮动元素的位置是这样确定的:
浮动元素的排列位置,跟上一个块级元素有关系,如果上一个块级元素有浮动,则浮动元素顶部会和上一个块级元素的顶部对齐;如果上一个块级元素是标准流,则浮动元素的顶部会和上一个块级元素的底部对齐
注意:
一般会对所有的兄弟元素设置浮动,这样它们就会在一行显示,
并且和第一个元素的顶部对齐.
10.3 浮动会导致的问题
子元素开启浮动之后,父元素的高度会变为0!
如设置一个宽度为500px,背景色为天蓝色的父div,在其内部设置两个横向移动的子div
<style>
.box{
background: skyblue;
width: 500px;
}
.item1{
width: 100px;
height: 50px;
background: red;
float: left;
}
.item2{
width: 200px;
height: 50px;
background: orange;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
</html>
效果图如下:
可以看出天蓝色背景图的父div消失了,检查一下尺寸
可以看出父div的高度变成了0,要解决这个问题,可以有三种方法.下面介绍三种方法.
10.2 清除浮动
方法一:
父元素设置overflow:hidden,开启BFC(“块级格式化上下文”（Block Formatting Context），它是 CSS 中一种页面渲染的模式，用于决定块级盒子的布局及浮动相互影响的范围。后面会讲)
.box{
background: skyblue;
width: 500px;
/* 第一种方法 */
/* overflow: hidden; */
}
方法二:
在浮动元素末尾添加一个空的块级元素,
并设置clear:both
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<!-- 第二种方法 -->
<!-- <div style="clear: both;"></div> -->
</div>
方法三:
使用after伪元素清除浮动,原理就是在浮动元素末尾
添加一个块级元素并设置clear:both
.box:after{
content:'';
display: block;
clear: both;
}
清除了浮动之后效果如图:
11.BFC
BFC是什么?
BFC（块级格式化上下文）是指 Web 页面中的一块渲染区域，用于决定块级盒子的布局及浮动相互影响的范围。指一个独立的隔离的容器,该容器里面的子元素不会对容器外元素产生影响.
BFC有什么特性?
1.BFC 内部的块级盒子会在垂直方向上一个接一个地放置。
2.BFC 区域不会与浮动元素重叠。
3.BFC 可以阻止外边距折叠。
如何创建BFC?
1.float 属性不为 none。
2.position 属性为 absolute 或 fixed.
3.display 属性为 inline-block、table-cell、table-caption、flex、grid 等。
4.overflow 属性不为 visible。
12.flex布局
12.1 flex布局概念
Flex 布局（弹性布局）是 CSS3 中提供的一种用于页面布局的模块化方法。它旨在提供一种更加有效的方式来对页面布局进行管理，使开发者能够更容易地创建灵活的、自适应的布局结构，适应不同屏幕尺寸和设备的需求。
Flex 布局允许你通过使用容器（Flex 容器）和其内部的子元素（Flex 项目）来创建复杂的布局结构。它具有以下特性：
-
容器和项目：使用 Flex 布局时，你需要创建一个 Flex 容器和它内部的 Flex 项目。容器中的每个直接子元素都成为了 Flex 项目。
-
主轴与交叉轴：Flex 布局定义了主轴和交叉轴。主轴是 Flex 项目排列的主要方向，而交叉轴则垂直于主轴。你可以通过设置
flex-direction属性来指定主轴的方向。 -
弹性缩放：Flex 布局允许项目根据可用空间自动调整大小，以填充容器的剩余空间或缩小以适应容器的限制。
采用 Flex 布局的元素,我们称为"容器".它的所有子元素自动成为容器成员.
容器存在两根轴主轴和侧轴,默认情况下主轴是水平的侧轴是垂直的,也就是说div的style中写了display:flex,这行代码 div里面的元素就会从左往右排列
容器属性:
0.display:flex,开启flex布局
1.flex-direction：控制主轴的方向有四个值
row 主轴水平 子元素从左往右排列
row-reverse 主轴水平 子元素从右往左排列
column 主轴竖直 子元素从上往下排列
column-reverse 主轴竖直 子元素从下往上排列
2.justify-content：控制主轴线上子元素的对齐方式 主要有6个值(这里我们用主轴是水平方向 来举例子)
center 子元素水平居中(用的多)
flex-start 子元素从左往右排列
flex-end 子元素从右往左排列
space-around 子元素距离左右间距相等是中间的一半
space-between 子元素左右紧贴(用的多 )
space-evenly 子元素等间隔分配(用的多)
3.align-items：侧轴线上子元素的对齐方式 主要有一个属性
center 子元素居中
4.flex-wrap:设置wrap表示自动换行
子元素属性:
flex：子元素宽占主轴剩余宽的份数
将所有子元素的flex值相加得到总份数,每个子元素的flex值除以总份数得到子元素占主轴剩余宽度的比例 ( 注意:这里主轴剩余的宽度=主轴总宽度-没有设置flex属性的子元素宽度)
12.2 flex布局的步骤
1.确定容器,给容器元素开启flex布局 display:flex
2.确定主轴方向以及子元素的排列方向 设置flex-direction
3.使用justify-content调整主轴上子元素对齐方式,使用align-items调整侧轴上子元素对齐方式.
12.3 flex容器属性演示
12.3.1 flex-direction
<style>
.box {
display: flex;
flex-direction: column-reverse;
height:500px;
width: 500px;
background: skyblue;
}
.box>div{
width: 100px;
height: 30px;
}
.box>div:nth-child(odd){
background-color: pink;
}
.box>div:nth-child(even){
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
flex-direction:row 子元素从左往右排 主轴水平
flex-direction:row-reverse 子元素从右往左排 主轴水平
flex-direction:column:子元素从上往下排 主轴竖直
flex-direction:column-reverse 子元素从下往上排 主轴竖直
12.3.2 justify-content
justify-content:center 居中
justify-content: flex-start 从主轴线开始的位置排列
justify-content: flex-end 从主轴线结束的位置排列
justify-content: space-between 左右两边的子元素会自动贴边,剩下的子元素会等间隔的排列
justify-content: space-evenly 所有子元素会等间隔的排列
justify-content: space-around 左右两边的子元素距离左右两边的长度是其他子元素之间间隔的一半
12.3.3 align-items
align-items: center 在侧轴方向上居中显示
12.3.3 flex-wrap
flex-wrap:wrap 当子元素的宽度超过容器的宽度时会自动换行
当容器宽度足够时,效果如下:
将容器宽度设置小一点,可以观察到子元素会自动换行
一个小问题:当我在对容器设置具体的高度的情况下,自动换行之后第二行与第一行之间会产生间距,如图:
原因:设置了外层 div 具体的高度会限制内部元素的布局，尤其是在 Flex 布局中。当你移除了外层 div 的具体高度时，内部的 Flex 容器可以根据其内部的元素自动调整高度，使得子元素能够按照设置的属性进行布局，从而消除了可能出现的间隙。所以在使用 Flex 布局时，尽量避免对容器设置固定的高度，除非你确切知道容器需要保持固定的高度
12.4 容器子元素属性演示
子元素属性:
flex: 设置子元素占据容器剩余宽度的份数
<style>
.box {
display: flex;
width:600px;
}
.box>div{
width: 70px;
height: 30px;
}
.box>div:nth-child(1){
flex: 1;
background-color: pink;
}
.box>div:nth-child(2){
flex: 2;
background-color:rgb(159, 6, 159);
}
.box>div:nth-child(3){
flex: 4;
background-color:orange;
}
.box>div:nth-child(4){
flex: 8;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果如图:
可以通过对子元素设置不同的flex属性值,来调整不同子元素尺寸比例
12.5文字居中显示
利用flex布局对文字进行居中显示
<style>
.box{
width: 200px;
height: 300px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
</body>
效果如图:
12.6 九宫格布局
<style>
.box{
width: 300px;
display: flex;
flex-wrap: wrap;
}
.box>div{
width: 100px;
height: 100px;
}
.box>:nth-child(odd){
background: pink
}
.box>:nth-child(even){
background: rgb(137, 30, 137)
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
