一、CSS简介
1.1什么是CSS?
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。
1.2CSS作用
用来设置网页中元素的样式。
1.3样式分类与语法
- 内联样式:将样式定义在元素的style属性中。
语法如下:
style = " 属性 : 值 ; 属性 : 值 ; ……"
案例演示:
<div style="background-color: orange; width: 500px; height: 200px;"> 一个div </div>
- 内部样式表:是将样式定义到HTML的
<head>
元素的子元素<style>
里,使用选择器来定位要设置样式的元素。
案例演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS内部样式表</title> <style> /* 为了让CSS可读性更强,你可以每行只描述一个属性: */ #d1 { background-color: orange; width: 500px; height: 200px; } </style> </head> <body> <div id="d1"> 一个div </div> </body> </html>
- 外部样式表:是将css代码编写到CSS文件中,文件的扩展名为.css,然后通过link标签将css文件引入到HTML文档中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内部样式表</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="d1">
一个div
</div>
</body>
</html>
二、选择器
2.1基本选择器
-
标签选择器
结构: 标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有的这类标签,设置样式
注意:
-
标签选择器选择的是一类标签,而不是单独的一个
-
标签选择器无论嵌套关系有多深,都能够找到对应的标签
<style> p{ color: red; } </style> <body> <p> 标签选择器 </p> </body>
-
类选择器
结构: .类名{css属性名:属性值;}
作用: 通过类名,找到页面中所有的带有这个类名的标签,设置样式
注意:
-
所有的标签上都有class属性,class属性的属性值成为类名(类似于起了一个名)
-
类名可以由数字,字母,下划线,中划线组成,但是不能以数字开头或者中划线开头
-
一个标签中可以同时有多个类名,类名之间用空格隔开
-
类名可以重复,一个类选择器可以同时选中多个标签
<style> .one{ color: red; } </style> <body> <div class="one"> 类选择器 </div> </body>
-
id选择器
结构: #id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意:
-
所有的标签上都有id属性
-
id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的
-
一个标签上只能有一个id属性值
-
一个id选择器只能选中一个标签
<style> #one{ color: red; } </style> <body> <div id="one"> id选择器 </div> </body>
-
通配符选择器
结构: *{css属性名:属性值}
作用:找到页面中所有的标签,然后设置样式
注意:
-
开发中应用极少,只有在特殊的情况下才会使用
-
在小页面中可能会用于去除页面中默认的margin和padding
<style> * { color: red; } </style> <body> <div> 通配符选择器 </div> </body>
2.2复合选择器
-
交集选择器
语法: 选择器1选择器2{css属性名:属性值}
作用:选中页面中同时满足多个选择器的标签,紧挨着的
结果:找到标签中既能被选择器1又能被选择器2选中的标签,设置样式
注意:
-
之间没有任何东西隔开,紧挨着的,
-
交集选择器中如果有标签选择器,标签选择器必须放在前面
<style> p.one{ color: red; } </style> <body> <p class="one"> 这个元素会被应用样式 </p> <p> 这个元素不会被应用样式 </p> </body>
-
并集选择器
语法: 选择器1,选择器2{css样式}
作用:同时选择多组标签,设置相同的样式
结果:找到选择器1和选择器2选中的标签,设置样式
注意: 选择器与选择器之间用逗号隔开 可以是基础选择器或者复合选择器 每组选择器通常一行写一个,提高代码的可读性
<style> p,div{ color: red; } </style> <body> <p> 这个元素会被应用样式 </p> <div> 这个元素也会被应用样式 </div> </body>
2.3关系选择器
语法 | 用法 | 备注 |
---|---|---|
父亲>儿子 | 儿子中的个别选择 | 选择器之间有大于号 |
祖先 后代 | 后代全部选择 | 选择器之间用空格隔开 |
兄+弟 | 哥哥的弟弟被选择(弟弟必须严格相邻哥哥) | 选择器之间用+隔开 |
兄~弟 | 哥哥的符合条件的所有弟弟被选择 | 选择器之间用波浪线隔开 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>关系选择器(兄弟、父子选择器)</title> <style> /* 父子选择 ,个别几个儿子*/ /* div>span { color: blue; font-size: 40px; } */ /* 祖先后代选择,全部 */ /* div span { color: red; } */ /* 必须相邻兄弟选择,是兄弟但不相邻,不选择 */ /* div+span { color: greenyellow; } */ /* 全兄弟选择 */ /* p~span { color: rgb(3, 110, 8); } */ p~* { color: orange; } </style> </head> <body> <div> 我是div <p> 我是div中的p <span>我是p中的span</span> </p> <div>我是div中的div</div> <span>我是div中的span1</span> <span>我是div中的span2</span> </div> <span>我是div之外的span1</span> <span>我是div之外的span2</span> </body> </html>
2.4 属性选择器
语法 | 用法 |
---|---|
[属性] | 选中含有指定属性的元素 |
[属性=属性值] | 选中含有指定属性和指定属性值的元素 |
[属性^=属性值] | 选中含有指定属性和指定属性值开头的元素 |
[属性$=属性值] | 选中含有指定属性和指定属性值结尾的元素 |
[属性*=属性值] | 选中指定属性名和含有指定属性值的元素 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 第一种方法:选择含有指定属性的元素。 语法:[属性名]{} */ /*选择属性名为title,设置字体颜色红色 */ [title] { color: red; } /* 第二种用法:选择含有指定属性及指定属性值的元素。 语法:[属性名=属性值]{} */ /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */ [title=ab] { color: green; } /* 第三种用法:选择含有指定属性及指定属性之开头的元素。 语法:[属性名^=属性值]{} */ /* 选择属性名为title和属性值以ab开头的元素,设置背景色黄色 */ [title^=ab] { background-color: yellow; } /* 第四种用法:选择含有指定属性及指定属性值结尾的元素。 语法:[属性名$=属性值] */ /* 选择属性名为title和属性值以ab结尾的元素,设置字体为30px */ [title$=ab] { font-size: 30px; } /* 第五种用法:选择含有指定属性,只要含有某个属性值的元素。 语法:[属性值*=属性名]{} */ /* 选择属性名为title和属性值含有c的元素,设置背景色为绿色 */ [title*=c] { background-color: green; } </style> </head> <body> <h1 title="a">《出塞》</h1> <h2 title="ab">唐·王昌龄</h2> <p title="abc">秦时明月汉时关,</p> <p title="abab">万里长征人未还。</p> <p title="c">但使龙城飞将在,</p> <p>不教胡马度阴山。</p> </body> </html
2.5伪类选择器
伪类:不存在的类,特殊的类
(1)伪类用来描述一个元素的特殊状态 比如:第一个子元素、被点击的元素、鼠标移入的元素...
(2)伪类一般情况下都是使用:开头
-
元素选择伪类选择器
:前有空格代表从子类开始数,无空格代表从所在级数开始。
:first-child 第一个子元素 :last-child 最后一个子元素 :nth-child(n) 选中第n个子元素 ,n的范围0到正无穷 even 或 2n 表示选中偶数位的元素 odd 或 2n+1 表示选中奇数位的元素 以上这些伪类都是根据所有的子元素进行选择 以下这些伪类都是在同类型元素中进行选择 :first-of-type :last-of-type :nth-of-type(n)
-
否定伪类选择器
:not() 括号里传入其他选择器,但是不支持复合选择器的传入
将符合选择器的元素排除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>否定伪类</title> <style> div :not(p:first-of-type):not(p:last-child) { color: red; } </style> </head> <body> <div> <p>文字</p><!-- 不变红 --> <p>文字</p><!-- 变红 --> <p>文字</p><!-- 变红 --> <p>文字</p><!-- 不变红 --> </div> </body> </html>
-
a链接的伪类
:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题,所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后,元素的状态
2.6伪元素选择器
虚假的元素,实际上是没有的,但是css为了设置一些样式,默认提供的,一般都用在段落标记中
p::first-letter 首字符 p::first-line 首行 p::selection 选中的 ::before 第一个字符之前 ::after 最后一个字符之后 before和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>伪元素选择器</title> <style> /* 需求一:让文章的首字母一直为字体为24px */ p::first-letter { font-size: 24px; } /* 需求二:让文章的第一行添加背景色灰色 */ /* p::first-line { background-color: #ccc; } */ /* 需求三:让选中的内容,字体为红色 */ /* p::selection { color: red; } */ /* 需求四:在元素开始的位置前+'你好' */ /* p::before { content: '你好'; color: red } */ </style> </head> <body> <p>hello</p> <p>world,我们要相信明天会更好。</p> </body> </html>
三、盒子模型
3.1盒子模型
每一个html元素都可以叫做盒模型。页面就是由一个个盒模型堆砌起来的。
这样的优点就是可以将元素放置在任何地方,可以通过调整宽和高来充满整个屏幕
在CSS中,盒模型(Box Modle)是用来对元素进行设计和布局的,由内到外包含实际内容区、内边距、边框、和外边距四个部分。
1)内容区Content
用来放置文本或者子元素。
2)内边距padding
即内容区与边框的距离。
3)边框border
围绕在内边距外的边框。
4)外边距margin
边框以外的区域。
3.2 内容区
-
content,盒模型的实际内容区。
-
该区域可以放入文本,以及子元素。
-
样式属性width,height,background-color就是对该区域进行设置的
3.3 内边距
padding,定义了内容区距离边框的这一片区域,该区域是透明的,没有颜色。包含上下左右的四个内边距。
-
padding-top: 上内边距
-
padding-right: 右内边距
-
padding-bottom:下内边距
-
padding-left: 左内边距
3.4 边框
元素的边框,在CSS中,通常由的这三个维度属性来控制。
-
边框宽度:border-width
-
边框颜色:border-color
-
边框样式:border-style
上下左右的边框单独设置宽,颜色,样式,属性如下:
上边框的宽,颜色,样式 border-top-width border-top-color border-top-style 下边框的宽,颜色,样式 border-bottom-width border-bottom-color border-bottom-style 左边框的宽,颜色,样式 border-left-width border-left-color border-left-style 右边框的宽,颜色,样式 border-right-width border-right-color border-right-style
边框的线条样式:
- none: 默认无边框 - dotted: 点虚线 - solid: 实线 - double 双线条 - dashed 虚线 - groove: 定义3D沟槽边框。效果取决于边框的颜色值 - ridge: 定义3D脊边框。效果取决于边框的颜色值 - inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 - outset: 定义一个3D突出边框。 效果取决于边框的颜色值
元素的可见大小,就是由边框+padding+content决定的。
3.5外边距
margin(外边距)属性定义元素周围的空间。作用一般是用来设置该元素所在网页的位置。也分为
margin-top :上外边距 margin-right :右外边距 margin-bottom :下外边距 margin-left :左外边距
3.6 盒子水平布局
元素在其父元素中水平方向的位置由以下几个属性共同决定
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的情况。width,margin-left,margin-right可以设置为auto.
如果某个值为auto,则会自动调整为auto的那个值以使等式成立 0 + 0 + 0 + auto + 0 + 0 + 0 = 800 宽的auto 则为 800 0 + 0 + 0 + auto + 0 + 0 + 200 = 800 宽的auto 则为 600 200 + 0 + 0 + auto + 0 + 0 + 200 = 800 宽的auto 则为 400 auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 左外边距的auto 则为 400 auto + 0 + 0 + 200 + 0 + 0 + auto = 800 左右外边距的auto = 300 - 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0 - 如果将三个值都设置为auto,则外边距都是0,宽度最大 - 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值
3.7 盒子垂直布局
垂直距离,相对来说,比较简单,没有水平距离复杂,只需要修改上下的外边距即可
注意: 元素的整个垂直大小, 要考虑上下外边距,边框的宽度,上下内边距,以及width。
如果发生了溢出,可以使用以下属性来设置, 注意,是在父元素里设置。
overflow: 可选值: visible: 默认值,表示可见 hidden : 将溢出的内容裁剪 scroll: 添加了上下和左右的滚动条设置 auto: 根据需求自动添加滚动条
3.8 外边距的折叠
针对于块元素来说,都是独占一行的,因此只涉及到垂直方向上的外边距的重叠(折叠),即两个元素的相邻外边距可以发生重叠现象。
兄弟元素
- 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值) - 特殊情况: 如果相邻的外边距一正一负,则取两者的和 如果相邻的外边距都是负值,则取两者中绝对值较大的 - 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理
父子元素
- 父子元素间相邻外边距,子元素的会传递给父元素(上外边距) - 父子外边距的折叠会影响到页面的布局,必须要进行处理 (只需要父元素添加border属性)
案例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #outer { border: 1px solid red; width: 800px; height: 500px; margin: 0 auto; } #d1 { border: 1px solid red; width: 300px; height: 300px; background-color: aqua; } #d2 { border: 5px solid blue; width: 200px; height: 200px; } #d2 { margin-top: 50px; } </style> </head> <body> <div id="outer"> <div id="d1"> <div id="d2"> 1 </div> </div> </div> </body> </html>
3.9 行内元素的盒模型
对于内联元素(行内元素)的盒模型来说。
- 行内元素不支持设置宽度和高度, 被内容数据撑起来的 - 行内元素可以设置padding,但是垂直方向padding无效 - 行内元素可以设置border,垂直方向的border无效 - 行内元素可以设置margin,垂直方向的margin无效
如果想要行内元素的宽,高或者垂直方向上的样式生效,可以使用display属性将行内元素的样式转为块元素的样式进行显示设置。
display属性的可选值如下:
-
none 隐藏, 不再占用原有的空间。
-
block 变成块元素的样式显示。(注意,并不是内联元素变成了快元素)
-
inline 变成行内元素的样式显示
-
inline-block 变成行内的块元素,同时具有了内联和块元素的样式特点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内元素的盒模型</title> <style> div{ border: 1px red solid; width: 400px; height: 400px; margin: 100px auto; } #s1{ width: 200px; height: 50px; border: 3px green solid; padding: 3px; margin: 5px; display: block; } div div{ display: inline; } </style> </head> <body> <div> <span id="s1">我是一只鹅</span><span id="s2">你也是一只鹅</span> <div>1</div><div>2</div> </div> </body> </html>
3.10 轮廓和圆角
outline 用来设置元素的轮廓线,用法和border一模一样
box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;
border-radius: 用来设置圆角 圆角设置的圆的半径大小
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
border-top-left-radius:50px 100px; */
border-radius 可以分别指定四个角的圆角
四个值: 左上 右上 右下 左下
三个值: 左上 右上/左下 右下
两个值: 左上/右下 右上/左下
border-radius: 20px / 40px; */
将元素设置为一个圆形
border-radius: 50%;
四、元素的浮动
4.1 浮动的简介
-
浮动的特点:
1、浮动元素会完全脱离文档流,不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动,
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高
-
简单总结:
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列,通过浮动可以制作一些水平方向的布局
4.2 浮动的其他特点
-浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果
比如: 哥哥元素设置浮动
弟弟元素里的文字会自动环绕哥哥,而不会被哥哥元素覆盖
- 元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生变化
脱离文档流的特点:
-- 块元素:
1、块元素不在独占页面的一行
2、脱离文档流以后,块元素的宽度和高度默认都被内容撑开
-- 行内元素:
行内元素脱离文档流以后,其特点和浮动的块元素特点一样
五、元素定位
5.1 相对定位
- 相对定位:
- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点:
1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块,行内还是行内
- 偏移量(offset)
- 当元素开启了定位以后,可以通过偏移量来设置元素的位置
top
- 定位元素和定位位置上边的距离
bottom
- 定位元素和定位位置下边的距离
- 定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一
- top值越大,定位元素越向下移动
- bottom值越大,定位元素越向上移动
left
- 定位元素和定位位置的左侧距离
right
- 定位元素和定位位置的右侧距离
- 定位元素水平方向的位置由left和right两个属性控制
通常情况下只会使用一个
- left越大元素越靠右
- right越大元素越靠左
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
元素定位的学习:
1. 定位是一个相对来说比较高级的页面布局属性
2. 可以使元素在页面的任意位置。
3. 属性名为position,
可选值有:
static: 静态的, 表示元素静止不动
relative: 相对的, 表示元素的相对定位
absolute: 绝对的, 表示元素的绝对定位
fixed: 固定的, 表示元素的固定定位
sticky: 粘滞的, 表示元素的粘滞定位
相对定位:
- 当position的属性值位relative时,就开启的元素的相对定位
- 相对定位的特点:
1. 如果设置了相对定位,没有改变偏移量,则元素不会移动
2. 相对的位置是元素所在文档流的位置。
3. 设置了相对定位的元素,不会脱离文档流
4. 设置了相对定位的元素提高了自己的层级
5. 设置了相对定位的元素,本身的性质不会改变, 块依旧是块元素,行内依旧是行内元素
偏移量(offset):
top:
指元素距离相对位置的顶端的偏移量
bottom:
指元素距离相对位置的低端的偏移量
left:
指元素距离相对位置的左边的偏移量
right
指元素距离相对位置的右边的偏移量
总结:
left的值越大, 越向右移动
top的值越大, 越向下移动
bottom的值越大 越向上移动
right的值越大, 越想左移动
*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2{
width: 200px;
height: 200px;
background-color:brown;
position: relative;
right: 50px;
}
.box3{
width: 200px;
height: 200px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
5.2 绝对定位
绝对定位
- 当元素的position属性值设置为absolute时,则开启了元素的绝对定位
- 绝对定位的特点:
1.开启绝对定位后,如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后,元素会从文档流中脱离
3.绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
包含块( containing block )
- 普通情况下(不涉及定位):
包含块就是离当前元素最近的祖先块元素
<div>
<div>
<div></div>
</div>
</div>
<div><span><em>hello</em></span></div>
- 绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素,
如果所有的祖先元素都没有开启相对定位则根元素就是它的包含块
- 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>Document</title>
<style>
/*
绝对定位的学习:
当position的值为absolute时,则该元素开启了绝对定位
开启绝对定位的元素有以下特点:
1. 如果设置了绝对定位,不改变偏移量,则该元素不会移动
2. 设置了绝对定位的元素会脱离文档流
3. 设置了绝对定位的元素的位置是相对于所在的包含块。
4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素, 此时所有的元素宽和高默认都是内容撑开的。
5. 设置了绝对定位的元素提高了层级。
包含块:
如果设置了绝对定位,那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。
如果所有的祖先块元素都没有设置定位,那么就是相对HTML这个根元素来说的。
最近的设置了相对定位的祖先块称之为包含块。
HTML:是所有元素的初始包含块。
*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2{
width: 200px;
height: 200px;
background-color:brown;
position: absolute;
left:100px;
top:100px;
}
.box3{
width: 300px;
height: 300px;
background-color:chartreuse;
}
.box4{
width: 300px;
height: 300px;
background-color:chocolate;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color:darkblue;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4
<div class="box5">5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
5.3 固定定位
- 将元素的position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
固定定位的学习:
当position的值设置为fixed时,就是开启了该元素的固定定位
固定定位的特点:
1. 固定定位也是一种绝对定位,特点和普通的绝对定位差不多
2. 固定定位的位置是相对于当前浏览器的视口(viewport)来说的
因此,固定定位的元素不会随着滚动条去滚动。
比较适合广告位的设置。
*/
.box1{
width: 200px;
height: 200px;
position: fixed;
background-color: blueviolet;
left: 100px;
top: 100px;
}
.box2{
width: 200px;
height: 2000px;
background-color:brown;
}
.box3{
width: 200px;
height: 200px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
5.4 粘滞定位
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致,
不同的是粘滞定位可以在元素到达某个位置时将其固定
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
粘滞定位的学习:
当position的值为sticky时,则开启的元素的粘滞定位
粘滞定位的特点:
1. 粘滞定位的特点和相对定位的特点差不多。
2. 粘滞定位的不同之处,在于当到达某一个固定位置时,粘住不动。
*/
.box1{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2{
width: 200px;
height: 200px;
background-color:brown;
position:sticky;
/* 当元素移动到距离视口顶端50px时,则被粘住,不动*/
top: 50px;
}
.box3{
width: 200px;
height: 2000px;
background-color:chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
5.5 绝对定位元素的布局
水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
- 当我们开启了绝对定位后:
水平方向的布局等式就需要添加left 和 right 两个值
此时规则和之前一样只是多添加了两个值:
当发生过度约束:
如果9个值中没有 auto 则自动调整right值以使等式满足
如果有auto,则自动调整auto的值以使等式满足
- 可设置auto的值
margin width left right
- 因为left 和 right的值默认是auto,所以如果不指定left和right
则等式不满足时,会自动调整这两个值
垂直方向布局的等式的也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包 含块的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
margin:0 auto;
width: 800px;
height: 800px;
background-color: darkturquoise;
position: relative;
}
/*
box2在box1里面,并开启了绝对定位, 如果想要box2布局到box1里,那么box1就需要开启相对定位
那么 就必须满足一个等式
水平方向上:两个偏移量+两个外边距+两个边框+两个内边距+本身的width = 父元素的width;
left+right+ margin+border+padding+width = 父元素的width;
垂直方向上:
两个偏移量+两个外边距+两个边框+两个内边距+本身的height = 父元素的height;
top+bottom+margin+border+padding+height = 父元素的height
如果在这个等式中,发生了过度约束, 也就是说所有的值加起来不等于父元素的width或者height
则会强制调整成满足的状态。
可以设置auto的值有以下几个:
left,right,margin(4个方向),width,height
-1. 如果都没有设置成auto, 则right强制变为auto
-2. left和right本身的默认值是auto。如果这两个值都没有设置,那么都被强制为auto值。
有使元素居中的效果。
*/
.box2{
width: 300px;
height: 300px;
background-color: deeppink;
position: absolute;
left:auto;
right: auto;
top: auto;
bottom: auto;
margin: 50px;
padding: 50px;
border: 50px solid black;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
5.6 元素的层级
对于开启了定位元素,可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数,值越大元素的层级越高
元素的层级越高越优先
如果元素的层级一样,则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
属性: z-index 是用来设置定位元素的层级的。
值越大,层级越高
兄弟元素:
z-index的值越大,层级越高
父子元素:
父元素的z-index的值再大,也不会覆盖子元素(也不会高过子元素的层级)
*/
.box1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
}
.box2{
width: 200px;
height: 200px;
background-color:pink;
position: absolute;
left:50px;
top: 50px;
z-index: 2;
}
.box3{
width: 100px;
height: 100px;
background-color:blue;
position: absolute;
left: 100px;
top:100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
</div>
</body>
</html>
六 动画
6.1 过渡
过渡(transition)
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果,提升用户的体验
transition-property: 指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡,则使用all关键字
大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration: 指定过渡效果的持续时间
时间单位:s 和 ms 1s = 1000ms
transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值:
ease 默认值,慢速开始,先加速,再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果
可以设置一个第二个值:
end , 在时间结束时执行过渡(默认值)
start , 在时间开始时执行过渡
transition-delay: 过渡效果的延迟,等待一段时间后在执行过渡
transition 可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟。
6.2 动画
动画
动画和过渡类似,都是可以实现一些动态的效果,
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤
@keyframes test{
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间
animation-delay
animation-timing-function: ease-in-out
animation-iteration-count
animation-direction
指定动画运行的方向
可选值:
normal 默认值 从 from 向 to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
animation-play-state: 设置动画的执行状态
可选值:
running 默认值 动画执行
paused 动画暂停
animation-fill-mode: 动画的填充模式
可选值:
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时,元素就会处于开始位置
both 结合了forwards 和 backwards
6.3 变形
变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移:
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
- 平移元素,百分比是相对于自身计算的
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,
距离越大,元素离人越近
z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果
必须要设置网页的视距
6.4 旋转
/*
通过旋转可以使元素沿着x y 或 z旋转指定的角度
rotateX()
rotateY()
rotateZ()
*/
/* transform: rotateZ(.25turn); */
/* transform: rotateY(180deg) translateZ(400px); */
/* transform: translateZ(400px) rotateY(180deg) ; */
transform: rotateY(180deg);
/* 是否显示元素的背面 */
backface-visibility: hidden;