CSS选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名 = 属性值] 选择含有指定属性和属性值的元素
[属性名 ^= 属性值] 选择属性值中以指定值开头的元素
[属性名 $= 属性值] 选择属性值中以指定值结尾的元素
[属性名 *= 属性值] 选择属性值中含有某个值的元素
*/
/* p[title] {
color: yellowgreen;
} */
/* p[title=firsesest] {
color: yellowgreen;
} */
/* p[title ^=se] {
color: yellowgreen;
} */
/* p[title $=six] {
color: yellowgreen;
} */
p[title *=se] {
color: yellowgreen;
}
</style>
</head>
<body>
<p title="firsesest">111111</p>
<p>222222</p>
<p title="secondsix">333333</p>
<p>444444</p>
<p title="five">555555</p>
<p title="sesesixsix">666666</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 将ul中的第一个li设置为红色 */
/* 伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊的状态
比如：第一个元素 、被点击的元素、鼠标移入的元素等
伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素
n 直接写n，表示第n个，范围为0- 正无穷
2n或even 表示选择偶数位的元素
2n+1或odd 表示选中奇数位的元素
以上这些伪类都是根据第一个子元素来进行排序的
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序的
:not() 否定伪类
--将符合条件的元素从选择器中去除
*/
/* ul>li:first-child {
color: red;
} */
/* ul中除了第三个li之外的其他的li都要变成红色 */
ul>li:not(:nth-of-type(3)) {
color: red;
}
/*
:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接
由于隐私的原因，visited这个伪类只能修改链接的颜色，一般不建议修改
*/
a:visited {
color: #bbffaa;
}
a:link {
color: #000000;
}
/* :hover 用来表示鼠标移入的状态 */
a:hover {
color: orange;
}
/* :active 表示鼠标点击的状态 */
a:active{
color: green;
}
</style>
</head>
<body>
<!-- <ul>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul> -->
<!--
1.没有访问过的链接
2.访问过的链接
-->
<a href="https:www.baidu.com">访问过的链接</a>
<br>
<br>
<a href="https:www.baidu123.com">未访问过的链接</a>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
p {
font-size: 20px;
}
/* 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始位置
::after 元素的最后位置
before和after必须结合content属性来使用
*/
/* 需求：首字母下沉 */
p::first-letter {
font-size: 50px;
}
/* 需求：第一行背景颜色为黄色 */
p::first-line {
background-color: yellow;
}
/* 需求：鼠标选中后背景颜色变为黄绿色 */
p::selection {
background-color: yellowgreen;
}
/* 需求：在div标签的Hello之前添加一些字符并修改颜色为红色 */
div::before {
content: 'hahaha';
color: red;
}
/* 需求：在div标签的最后位置之后添加一些字符并修改颜色为绿色 */
div::after {
content: '111111';
color: green;
}
</style>
</head>
<body>
<div>Hello Are You Ok?</div>
<p>
hahahha布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
</p>
</body>
</html>
样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式的继承</title>
<style>
/* 样式的继承
为一个元素设置的样式同时也会应用到它的后代元素中
继承只会发生在某个元素的后代元素上
继承是发生在祖先元素和后代元素之间的
继承的设计是为了方便我们的开发，
利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式。
但是，并不是所有的样式都会被继承
例如：背景相关的，布局相关等的这些样式都不会被继承
*/
p {
color: red;
}
div {
color: yellowgreen;
}
</style>
</head>
<body>
<!-- p元素内部不能放块级元素，可以放行内元素 -->
<p>
这是一个p元素啊 啊啊
<span>
p元素中的span啊啊啊
</span>
</p>
<span>p元素外部的span</span>
<div>
这是div元素啊
<span>
这是div元素中的span元素啊 啊
<em>
这是span元素中的em元素
</em>
</span>
</div>
</body>
</html>
选择器权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
div {
color: yellowgreen;
}
/* #box1 {
color: red;
} */
.div1 {
color: black;
}
* {
font-size: 50px;
}
div {
font-size: 20px;
}
/*
样式的冲突：
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值,此时就发生了样式的冲突
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
选择器的权重（从高到低）：
内联样式（行内样式） 1,0,0,0
ID选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器（*） 0,0,0,0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器是单独计算的（例如：div,p,span{}））
选择器的累加不会超过其最大的数量级，即 类选择器再高也不会超过ID 选择器
如果优先级计算后相等。此时则优先使用css样式中靠下的样式
可以在某一个样式的后边添加 !important ，则此时该样式会获得最高的优先级，甚至超过内联样式，但在开发中要慎用（甚至使用js都无法修改此样式）
*/
</style>
</head>
<body>
<div id="box1" class="div1">
hahahhahahdiv的啦啦啦啦
<span>这是div中的span元素</span>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片练习</title>
<style>
.box1 {
500px;
height: 500px;
/*
background-color:设置背景颜色
background-image:设置背景图片
可以同时设置背景颜色和背景图片，这样背景颜色将会成为图片的背景色
如果背景图片小于元素，则背景图片会自动在元素中平铺，将元素铺满
如果背景图片大于元素，将会有一部分背景无法完全显示
如果背景图片和元素一样大，则会正常显示
background-repeat:设置背景的重复方式
可选值：
repeat 默认值 背景会沿着x轴和y轴双向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 不重复
background-position:用来设置背景图片的位置
设置方式：
1.通过top、left、right、bottom、center等几个表示方位的词来设置背景图片的位置(实际上相当于是一个九宫格，通过其中的方位词设置位置)
使用方位词时必须要同时指定两个值，如果只写一个，则第二个默认就是center
2.通过偏移量来指定背景图片的位置
水平方向的偏移量 垂直方向的偏移量（第一个水平、第二个垂直方向）
background-clip:设置背景的范围
可选值：
border-box 默认值 背景会出现在边框的下边，边框下也会有背景
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin: 背景图片计算的偏移量的原点
可选值：
padding-box 默认值，background-position从内边距处开始计算
content-box 原点在内容区，背景图片的偏移量从内容区处开始计算
border-box 背景图片的偏移量从边框处开始计算
background-size: 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个值是auto，表示等比例缩放，可能出现显示不全或拉伸
cover 表示图片的比例不变,将元素铺满
contain 表示图片比例不变，将图片在元素中完整显示
background-attachment:设置背景图片是否跟随元素移动
可选值
scroll 默认值 背景图片会跟随元素移动
fixed 表示背景图片会固定在页面中，不会随元素移动
background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且没有顺序要求，也没有必须要写的属性
background: #bfa url("../img/000.jpg") center center/contain no-repeat
但是注意： background-size一定要写到 background-position的后面,并通过/来分割，不能单纯的使用size属性的值来设置样式，示例：center center/contain
background-clip和 background-origin的属性可选值值是一样的，但是此时 background-origin必须写在前面， background-clip在后面
*/
background-color: #bfa;
background-image: url("../img/000.jpg");
background-repeat: no-repeat;
background-size: 500px 500px;
background-attachment: fixed;
/* background-clip: border-box;
background-origin: padding-box; */
/* background-position: 100px 100px; */
/* background-position: right bottom; */
}
</style>
</head>
<body>
</body>
</html>
布局
块级元素盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素的盒子模型</title>
<style>
.box1 {
/*
内容区 （content），元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
*/
background: #aabbff;
200px;
height: 200px;
/*
边框（border）：边框属于盒子边缘，边框里属于盒子内部，出了边框就都是盒子的外部
边框的大小会影响整个盒子的大小
设置边框，需要至少设置三个样式，但width和color是有默认值的，border-style的默认值为none，如果不写则默认为none,即不显示
边框宽度：border-width，可以用来指定四个方向的边框的宽度（上、右、下、左）
四个值：上、右、下、左
三个值：上、左右、下
两个值：上下、左右
一个值：上下左右均为此值
默认值 ，一般都是三个像素，但建议都写，不同浏览器可能默认值不同
除了border-width还有一组border-xxx-width， 用来指定某一个边的宽度
xxx可以是top、right、bottom、left
边框颜色：border-color
如果省略不写，则默认使用color的值，如果没有指定color的值，color值的默认值为黑色
边框样式：border-style
solid:表示实线
dotted:点状虚线
dashed:虚线
double：双线，双线的宽度等于 border-width 的值。
none 默认值
简写属性：border
通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
*/
border: 10px #bdbdbd solid;
/*
内边距：(padding) 内容区和边框之间的距离是内边距，一共有四个方向的内边距
内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上
*/
padding: 50px;
/*
外边距（margin）外边距不会影响盒子可见框的大小，但外边距会影响盒子的位置，会影响到盒子实际占用空间
一共有四个方向的外边距
margin-top
上外边距，设置一个正值，元素会向下移动，设置负值，元素会向上移动，其余的外边距同理
但默认情况下设置margin-right不会产生任何效果
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距会移动元素自身，而设置下和右边距会移动其他的元素
*/
margin: 10px;
}
.inner {
100%;
height: 100%;
background: #bbffaa;
}
.box3 {
200px;
height: 200px;
background: orange;
}
.box4 {
100px;
height: 100px;
background: pink;
position: relative;
top: 100px;
}
</style>
</head>
<body>
<!--
盒模型、盒子模型、框模型（box model）
CSS将页面中所有的元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子之后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都是由以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
一个盒子的可见框的大小，由内容区、内边距 和边框共同决定
所以在计算盒子大小时，需要将这三个区域的大小加到一起
-->
<!--
元素的水平方向的布局
元素在其父元素中水平方向的位置由以下几个属性共同来决定
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的值，促使等式满足
这七个值中有三个值可以设置为auto
width width的值默认为auto，如果不写，则使用默认值
margin-left
margin-right
如果某个值为auto，则会自动调整为auto的那个值以使等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度为固定值，则会将为auto的两个外边距设置为相同的值，经常用来使该元素在其父元素中水平居中
-->
<!-- 子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
可以在父元素中使用overflow属性来设置父元素如何处理溢出的子元素
overflow
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出的内容将会被裁减不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条，不会生成多余的滚动条
overflow-x: 处理水平方向的溢出
overflow-y：处理垂直方向的溢出
-->
<!--
垂直方向外边距的重叠（折叠）
相邻的垂直方向的外边距会发生重叠现象
兄弟元素：
兄弟元素间的相邻垂直外边距会取两者中的较大的那个值（两者都是正值）
特殊情况，如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的值
兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理
父子元素：
父子元素间相邻的外边距，子元素的值会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须要进行处理
1. 可以给父元素设置外边框，但要注意边框也是有宽度和高度的，需要将父元素的高度减小边框的大小，子元素的外边距也要减去父元素的边框的大小,但这样比较麻烦（不推荐使用）
2. 可以通过子元素使用相对定位来解决
3. 可以通过为子元素开启BFC来解决
-->
<!-- <div class="box1">
<div class="inner"></div>
</div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
行内元素的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素的盒子模型</title>
<style>
.span1 {
/* 100px;
height: 100px; */
visibility: visible;
}
</style>
</head>
<body>
<!--
行内元素的盒子模型
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
行内元素可以设置border，但是垂直方向的border不会影响页面的布局
行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局
display:用来设置元素显示的类型
可选值：
inline:将元素设置为行内元素
block:将元素设置为块级元素
inline-block：将元素设置为行内块级元素
既可以设置宽度和高度，又不会独占一行（一般不建议使用）
table ： 将元素设置为一个表格
none:元素不在页面中显示
visibility 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，但是依然占据页面中的位置
-->
<span class="span1">
span元素的啊啊啊啊
</span>
</body>
</html>
浏览器的默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器的默认样式</title>
<!-- <link rel="stylesheet" href="./normalize.css"> -->
<!-- <link rel="stylesheet" href="./reset.css"> -->
<!--
重置样式表：专门用来对浏览器的样式进行重置的
reset.css:直接去除了浏览器的默认样式
normalize.css 对浏览器的默认样式进行了统一，所有的浏览器的样式都设置为一样的了、
二者一般不会同时使用
-->
<style>
/*
默认样式：
通常情况下，浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局，不同的浏览器的默认样式也不一定相同，通常情况下，编写网页时要去除浏览器的默认样式（主要是PC端页面）
list-style 简写属性在一个声明中设置所有的列表属性。
list-style:none; 去除列表的属性
*/
* {
margin: 0;
padding: 0;
}
.box1 {
200px;
height: 200px;
background: #bbffaa;
}
</style>
</head>
<body>
<div class="box1">
</div>
<p>这是一个段落啊 啊啊 啊</p>
<p>这是一个段落啊 啊啊 啊</p>
<p>这是一个段落啊 啊啊 啊</p>
<p>这是一个段落啊 啊啊 啊</p>
<ul>
<li>列表111</li>
<li>列表222</li>
<li>列表333</li>
<li>列表444</li>
<li>列表555</li>
</ul>
</body>
</html>
定位（position）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位练习</title>
<style type="text/css">
body {
font-size: 36px;
}
.box1 {
200px;
height: 200px;
background-color: #bfa;
}
.box2 {
200px;
height: 200px;
background-color: orange;
/*
定位（position）
定位是一种更加高级的布局手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
static: 默认值，元素是静止的，没有开启定位
relative:开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位
*/
position: relative;
left: 200px;
/* top: -200px; */
bottom: 200px
}
.box3 {
200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<script>
</script>
</body>
</html>
相对定位
/*
相对定位：当元素的position属性值设置为relative时则表示开启了元素的相对定位
相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量则元素不会发生任何变化
2.相对定位是参照元素在文档流中的位置（原来的位置）进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质，块还是块，行内还是行内
偏移量（offset）：
当元素开启了定位以后，可以通过偏移量来设置元素的位置
top -定位元素和定位位置的上边的距离
bottom -定位元素和定位位置的下边的距离
-定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下只会使用其中之一，
top值越大，定位元素越向下移动
bottom值越大，定位元素越向上移动
left -定位元素和定位位置的左边的距离
right -定位元素和定位位置的右边的距离
-定位元素水平方向的位置由left和right两个属性来控制，通常情况下只会使用其中之一，
left值越大，定位元素越向右移动
right值越大，定位元素越向左移动
*/
绝对定位
/*
绝对定位: 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量元素，则元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于包含块进行定位的
包含块（containing block）：
正常情况下：包含块就是离元素最近的祖先块元素
<span>是行内元素，不算包含块
绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素就是它的包含块，则相对于根元素（html元素，即当前页面，即页面左上角为原点（0,0））进行定位
html（根元素、初始包含块）
*/
固定定位
/*
固定定位：将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所有固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位
*/
粘滞定位
/*
粘滞定位
当元素的position属性设置为sticky时，表示元素开启了粘滞定位
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个元素时将其固定
*/
/*
粘滞定位兼容性不太好，使用需谨慎
*/
绝对定位的布局
/*
没有开启定位时的水平布局：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其包含块的内容区的宽度
开启了绝对定位以后的水平布局：
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含块的内容区的宽度
*/
JS滚轮事件
// 火狐浏览器中支持DOMMouseScroll事件 ev.detail 向上为负,向下为正
// 非火狐浏览器才支持onmousewheel事件 ev.wheelDelta 向上为正，向下为负
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_滚轮事件</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
200px;
height: 200px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="wrap"> </div>
</body>
<script>
window.onload = function () {
var wrapNode = document.querySelector("#wrap");
if (wrapNode.addEventListener) {
// 火狐浏览器中支持DOMMouseScroll事件
wrapNode.addEventListener("DOMMouseScroll", function (ev) {
ev = ev || event;
console.log(ev.detail);
// ev.detail 向上为负,向下为正
})
}
// 非火狐浏览器才支持onmousewheel事件
wrapNode.onmousewheel = function (ev) {
ev = ev || event;
console.log(ev.wheelDelta);
// ev.wheelDelta 向上为正，向下为负
}
}
</script>
</html>
滚轮事件练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚轮事件练习</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
100%;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
<script>
window.onload = function () {
var wrapNode = document.querySelector("#wrap");
if (wrapNode.addEventListener) {
// 火狐浏览器中支持DOMMouseScroll事件
wrapNode.addEventListener("DOMMouseScroll", fn)
}
// 非火狐浏览器才支持onmousewheel事件
wrapNode.onmousewheel = fn;
var dir = "";
function fn(ev) {
ev = ev || event;
if (ev.wheelDelta) {
dir = ev.wheelDelta > 0 ? "向上滚动" : "向下滚动";
}
if (ev.detail) {
dir = ev.detail > 0 ? "向下滚动" : "向上滚动";
}
switch (dir) {
case "向上滚动":
wrapNode.style.height = wrapNode.offsetHeight - 10 + "px"
break;
case "向下滚动":
wrapNode.style.height = wrapNode.offsetHeight + 10 + "px"
break;
}
// 禁止事件的默认行为
// 火狐浏览器,dom2
if (ev.preventDefault) {
ev.preventDefault();
}
// 非火狐浏览器 dom0
return false;
}
}
</script>
</html>
DOM相关api
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>parentNode</title>
<style>
#inner2 {
position: absolute;
}
#wrap {
position: relative;
}
</style>
</head>
<body id="body">
<div id="wrap">
wrap
<div id="inner1">
inner1
<div id="inner2">
inner2
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
js方面的兼容性问题
ev || event
鼠标滚轮 （火狐浏览器兼容性问题较大）
事件绑定
offsetParent
1.父级是否有定位（4种）
2.本身是否有定位（4种）
3.浏览器不一样（5大PC浏览器 + IE(6 7 8)）
共128种
IE7以上：
不论父级有没有定位，只要本身定位为fixed
==》 offsetParent:null（ie7以上（不是火狐） ）
==》 offsetParent:body（火狐）
本身定位不为fixed（IE7以上的浏览器包括火狐）
父级没有定位：
==》 offsetParent:body
父级有定位：
==》 offsetParent:定位父级
如果body和html之间的margin被清掉了。IE7以下与IE7以上的结论相同
IE7以下，如果当前元素的某个父级触发了haslayout,那么offsetParent就会指向到这个触发了layout特性的父节点上（最常见的触发haslayout的属性就是 overflow: hidden;）
### 注意点
1.分清parentNode和offsetParent的区别
parentNode：直接父级
parentNode表示直接父级，不论包含块是怎样，都表示的是当前元素的直接父级
offsetParent：类似于CSS的包含块
2.offsetParent的作用：
offsetLeft和offsetTop是参照于offsetParent的内边距边界的
3.dom里所有的元素都是有offsetLeft和offsetTop的，只要有offsetParent
*/
window.onload = function () {
var inner2 = document.querySelector("#inner2");
// parentNode表示直接父级，不论包含块是怎样，都表示的是当前元素的直接父级
console.log(inner2.parentNode.id);
}
</script>
</html>
offsetparent
// offsetLeft&offsetTop是所有元素共有的，只要有offsetParent
/*
IE7以上：
不论父级有没有定位，只要本身定位为fixed
==》 offsetParent:null（ie7以上（不是火狐） ）
==》 offsetParent:body（火狐）
本身定位不为fixed（IE7以上的浏览器包括火狐）
父级没有定位：
==》 offsetParent:body
父级有定位：
==》 offsetParent:定位父级
如果body和html之间的margin被清掉了。IE7以下与IE7以上的结论相同
IE7以下，如果当前元素的某个父级触发了haslayout,那么offsetParent就会指向到这个触发了layout特性的父节点上（最常见的触发haslayout的属性就是 overflow: hidden;）
*/
获取元素的绝对位置，相对位置和视口尺寸
// 获取元素在页面中的位置
// 绝对位置：到body的距离
// 相对位置：到视口的距离
// 可以通过element对象的getBoundingClientRect（）方法来获取元素的四个角的相对位置，返回值为一个对象，对象中的值为：height、width、left、top、right、bottom
// getBoundingClientRect+滚动条滚动时元素滚动的距离 -----》元素的绝对位置
// 代表元素border-box 的尺寸
// height
// width
// 代表元素左上角的相对位置
// left
// top
// 代表元素右下角的相对位置
// right
// bottom
// document.documentElement.clientWidth并不是根标签的可视区域，就是视口的大小
// document.documentElement.offsetWidth才是根标签的border-box的大小
/* 获取元素的绝对位置，相对位置和视口尺寸 */
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_获取元素的绝对位置</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
height: 100%;
}
#wrap {
position: absolute;
background: pink;
left: 200px;
top: 200px;
}
#inner1 {
position: absolute;
background: deeppink;
left: 150px;
top: 150px;
}
div {
200px;
height: 200px;
}
</style>
</head>
<body id="body">
<div id="wrap">
wrap
<div id="inner1">
inner1
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
// 获取元素在页面中的位置
// 绝对位置：到body的距离
// 相对位置：到视口的距离
// 可以通过element对象的getBoundingClientRect（）方法来获取元素的四个角的相对位置，返回值为一个对象，对象中的值为：height、width、left、top、right、bottom
// getBoundingClientRect+滚动条滚动时元素滚动的距离 -----》元素的绝对位置
// 代表元素border-box 的尺寸
// height
// width
// 代表元素左上角的相对位置
// left
// top
// 代表元素右下角的相对位置
// right
// bottom
var inner1 = document.querySelector("#inner1");
// point即为inner1的绝对位置
var point = getPointAb(inner1);
console.log(point);
// 如果存在border和margin存在会影响函数的取值
function getPointAb(node) {
// while循环叠加offsetParent的offsetLeft和offsetTop
var x = 0;
var y = 0;
while (node) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return { x: x, y: y };
}
// document.documentElement.clientWidth并不是根标签的可视区域，就是视口的大小
// document.documentElement.offsetWidth才是根标签的border-box的大小
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
}
</script>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档流</title>
<style>
.box1 {
100px;
background: #bbffaa;
}
.box2 {
100px;
background: #000000;
}
span {
background: #bdbdbd;
}
</style>
</head>
<body>
<!--
文档流（normal flow）
网页是一个多层的结构，一层摞着一层，通过css可以分别为每一层设置样式，作为用户只能看到最顶上的一层，这些层中，最底下的一层称为文档流。文档流是网页的基础。
我们所创建的元素默认都是在文档流中进行排列的。
对于我们来说，元素主要有两个状态：
--在文档流中
--不在文档流中（脱离文档流）
元素在文档流中的特点：
块元素：
--块元素会在页面中独占一行（自上向下垂直排列）
--默认宽度是父元素的全部（会把父元素撑满）
--默认高度是被内容撑开（子元素撑开）,元素有多少，高度就是多少
行内元素
--行内元素不会独占页面中的一行，只占自身的大小
--行内元素在页面中自左向右水平排列，如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列（和习惯的书写顺序一致）
--行内元素的默认宽度和默认高度都是被内容撑开
脱离文档流的特点：
块级元素：
1.块元素不在独占一行
2.脱离文档流后，块级元素的宽度和高度默认都会被内容撑开
行内元素：
行内元素脱离文档流后会变成块级元素，其特点和块级元素相同。
脱离文档流后，就不需要再区分块级元素和行内元素了。
-->
<div class="box1">div1</div>
<div class="box2">div2</div>
<span>
span1
</span>
<span>
span2
</span>
</body>
</html>
长度单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
.box1 {
/*
长度单位：
像素
屏幕（显示器）实际上是由一个个发光的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果就越清晰，所以同样的200px在不同的设备下显示的效果是不一样的。
百分比
-也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em
em是相对于元素的字体大小来计算的，是相对于自身的字体大小
1em = 1font-size
em会根据字体大小的改变而改变
rem
rem是相对于根元素（html）的字体大小来计算的
*/
200px;
height: 200px;
background: orange;
}
.box2 {
10em;
height: 10em;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
颜色（RGB、hsl）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
100px;
height: 100px;
/*
颜色单位：
在css中可以直接使用颜色名来设置各种颜色，例如red、yellow、green、blue等等
但是在css中直接使用颜色名是非常不方便的
RGB：
RGB是通过三种颜色的不同浓度来调配处不同的颜色，RGB为光的三原色。
R:red，G：green，B：blue
每一种颜色的范围在0-255（0% - 100%）之间。
语法：rgb(红色，绿色，蓝色)
rgb(0,0,0)为黑色
rgb(255,255,255)为白色
rgba:就是在RGB的基础上增加了一个a表示不透明度，1表示不透明，0表示全透明
需要四个值，前三个和rgb一样，第四个表示不透明度，取值在0-1之间
16进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过00-ff表示
如果颜色两位重复可以进行简写
#aabbcc ==>#abc
但#aabbcd 就不能使用简写
hsl值
H:色相（0-360）
S:饱和度 颜色浓度（0% - 100%）
L:；亮度颜色亮度（0% - 100%）
hsla值
a为不透明度，其余的同hsl值一样
*/
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
浮动
浮动的定义及其特点
/*
通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
float 可选值：
none: 默认值 ，不浮动
left：元素向左浮动
right：元素向右浮动
元素设置浮动以后，水平布局的等式便不需要强制成立了
元素设置浮动以后，会完全从文档流中脱离，不在占据文档流中的位置，所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.设置浮动后，元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.水平方向上，浮动元素向左或向右移动时，不会超过它前面的其他的浮动元素
5.如果浮动元素的上边是一个没有浮动的块级元素，则浮动元素将无法上移
6.在垂直方向上，浮动元素不会超过它前面的浮动的兄弟元素，最多是和它一样高
7.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以利用浮动来设置文字环绕图片的效果
8.元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流的特点：
块级元素：
1.块元素不在独占一行
2.脱离文档流后，块级元素的宽度和高度默认都会被内容撑开
行内元素：
行内元素脱离文档流后会变成块级元素，其特点和块级元素相同。
脱离文档流后，就不需要再区分块级元素和行内元素了。
*/
高度塌陷
/*
高度塌陷问题
在浮动的布局中，父元素的高度默认是被子元素撑开的。
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失，出现高度塌陷问题
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。高度塌陷问题是浮动布局中比较常见的一个问题，这个问题必须要进行处理。
*/
/*
BFC（Block Formatting Context）块级格式化环境
BFC是CSS中的一个隐含的属性，可以为一个阿匀速开启BFC，开启BFC的元素会变成一个独立的布局区域
元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素的外边距不会发生重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊的方式来开启元素的BFC(所有的开启BFC的方式都会有一些副作用)
1. 设置元素的浮动。（副作用：下方元素会自动上移）（不推荐使用）
2. 将元素设置为行内块元素。 （副作用：宽度没有了，而且行内块不适合作为外部的布局容器）（不推荐使用）
3. 将元素的overflow设置为一个非visible（非默认值）的值。（副作用较小，是一个临时的解决方式）
常用的方式，为元素设置 overflow: auto; 或overflow: hidden;来开启BFC,使其可以包含浮动元素
4. 也可以通过设置绝对定位为absolute或者固定定位fixed来解决高度塌陷问题，但是并不推荐，也会造成父元素的高度丢失问题
5. 为父元素添加一个空的div标签，设置div标签的样式为（clear:both;）但这样会添加一个多余的div元素，造成代码冗余
6. 完美的解决方案：父元素通过after伪类来解决问题
父元素::after{
content: '';
display: block;
clear: both;
}
*/
清除浮动clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clear</title>
<style>
div {
font-size: 50px;
}
.box1 {
200px;
height: 200px;
background: #bbffaa;
float: left;
}
.box2 {
400px;
height: 400px;
background: green;
float: right;
}
.box3 {
200px;
height: 200px;
background: orange;
clear: left;
}
/*
由于box1的浮动，导致box3位置上移，也就是说box3受到了box1浮动的影响，位置发生了改变
如果我们不希望某个元素因为其他元素浮动而受到影响而改变位置，可以通过设置clear属性来清除浮动元素对当前元素产生的影响
clear 作用：清除浮动元素对当前元素产生的影响
可选值：
left 清除左侧浮动元素对当前元素产生的影响
right 清除右侧浮动元素对当前元素产生的影响
both 清除两侧中最大影响的那一侧
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
*/
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
after伪类解决高度塌陷问题
/*
解决高度塌陷问题的最好的方式：
使用::after伪类，
子类元素设置浮动以后，父元素通过使用::after伪类来设置父元素的样式，
首先，通过content属性设置after后的字符为空，其次通过clear属性设置清除子元素的浮动的影响，最后设置父元素的after伪类为块级元素即可完美解决高度塌陷问题。
父元素::after {
content: '';
display: block;
clear: both;
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用after伪类来解决高度塌陷问题</title>
<style>
.box1 {
border: 1px #0556DF solid;
}
.box2 {
200px;
height: 200px;
background: pink;
float: left;
}
.box1::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clearfix</title>
<style>
.box1 {
200px;
height: 200px;
background: purple;
}
/* .box1::before {
content: '';
display: table;
} */
.box2 {
100px;
height: 100px;
background: #bbffaa;
margin-top: 100px;
}
/* 此样式可以同时解决外边距重叠问题和由于浮动导致的高度塌陷问题 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix" >
<div class="box2"></div>
</div>
</body>
</html>