CSS-弹性布局-伪类选择器-复杂选择器

1.定位
1.堆叠顺序
一旦将元素变为已定位元素的话，元素们则有可能出现堆叠的效果。
如何改变堆叠顺序？
属性：z-index
取值：无单位的数字，数字越大越靠上。
注意：
1.父子元素间，z-index无效，永远都是子元素压在父元素上。
2.只有已定位元素才能使用z-index属性。
2.固定定位
1.什么是固定定位
将元素固定在页面中的某个位置，位置不会随着滚动条而发生改变，始终固定在可视化区域。
2.语法
position:fixed;
配合偏移属性使用
3.特点
1.固定定位的元素会变成块级元素
2.脱离文档流，不占页面空间
3.固定定位的元素永远都是相对于body去实现位置的初始化。
练习：
在网页的右下角固定一张图片，距离底部100px,距离右边50px,页面滚动时，图片不动。
=======================
CSS3高级
1.复杂选择器
1.兄弟选择器
兄弟元素：具备相同父元素的平级元素称之为兄弟元素。
ex:
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
1.相邻兄弟选择器
作用：获取紧紧挨在某元素后的兄弟元素
语法：选择器1+选择器2{}
2.通用兄弟选择器
作用：获取某元素后所有满足条件的兄弟元素
语法：选择器1~选择器2{}
练习：通过兄弟选择器设置以下样式
1.h3与div之间有30px的外边距；
2.从第二个div开始，每个div都有10px的上外边距。
<h3>静夜思</h3>
<div>窗前明月光</div>
<div>疑是地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
2.属性选择器
1.作用
允许通过元素的属性及其值匹配页面中的元素。
2.语法
1.基本语法
[attr]
作用：匹配页面中所有附带attr属性的元素
ex：
[id] 匹配页面中所有附带id属性的元素
[class] 匹配页面中所有附带class属性的元素
2.elem[attr]
elem:表示任意元素
attr:表示任意属性
作用：匹配页面中所有附带attr属性的elem元素
ex:
div[id] 匹配页面中所有附带id属性的div元素
3.[attr1][attr2]...
作用：匹配同时附带多个属性的元素
ex:
[id][class]匹配页面中同时附带id和class属性的元素。
4.[attr=value]
作用：匹配attr属性值为value的元素
ex:
[id="map"]匹配id属性为map的元素
[class="c1"]
3.伪类选择器
已学过的伪类：
链接伪类： :link , :visited
动态伪类： :hover , :active , :focus
1.目标伪类
作用：突出显示活动的HTML锚点元素，匹配被激活时的锚点。
语法：
选择器:target{...}
ex:
div:target{}
练习：
用目标伪类选择器完成如图所示效果
2.结构伪类
作用：通过元素的结构关系来匹配元素
1.:first-child
匹配的元素是属于其父元素的第一个子元素
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
ex:
p:first-child{}
2.:last-chlid
匹配的元素是属于其父元素中的最后一个子元素
ex:
p:last-child{}
练习：
创建一个4*4的表格，并填充内容
设置第一行数据的背景颜色为黄色
设置最后一行数据的背景颜色为红色
3.:nth-child(n)
匹配的元素是属于其父元素中第n个子元素
ex:
tr:nth-child(3)
练习：
将第二行中第3列的背景颜色设置为蓝色
4.:empty
匹配没有子元素的元素
5.:only-child
匹配的元素属于其父元素中的唯一的子元素。
3.否定伪类
将满足指定选择器的元素给排除在外
语法：
:not(selector){}
tr:not(:first-child){}
练习：
设置每行中除第一列以外的所有列，文字以加粗和斜体的方式显示。
4.伪元素选择器
1.:first-letter或::first-letter
作用：匹配某个元素的首字符
2.:first-line或::first-line
作用：匹配某个元素的首行
注意：首字符和首行样式冲突时，优先使用首字符的样式
3.::selection
作用：匹配被用户选取的内容
注意：只能修改本文颜色和背景颜色
练习：
创建一个div，id为d1,内容随意
1.将div中内容的首字符设置为加粗，红色，大小为20pt,右外边距15px
2.将div中首行文本设置为橙色，斜体
3.将用户选取的内容设置为红色背景黄色字体
2.内容生成
1.什么是内容生成
使用css动态的向某元素中插入一段内容
2.伪元素选择器
1.:before或::before
作用：匹配到某元素的内容区域之前
<p>(:before)锄禾日当午</p>
2.:after或::after
作用：匹配到某元素的内容区域之后
<p>汗滴禾下土(:after)</p>
3.属性
属性：content
作用：向匹配的位置处增加内容
取值：
1.字符串 用""引起来
2.url() 添加一张图片
练习：
<p>学而时习之，不亦说乎</p>
<p>有朋自远方来，不亦乐乎</p>

输入格式如下：
子曰：学而时习之，不亦说乎
-摘自《论语》
4.解决问题
1.外边距溢出
1.增加一个空table标记-显示为table
2.在父元素的第一个子元素位置处增加(:before)
选择器:before{
content:"";
display:table;
}
2.浮动给父元素高度带来的影响
解决问题：
选择器:after{
display:block;
content:"";
clear:both;
}
3.弹性布局
1.什么是弹性布局
弹性布局是一种布局方式，主要是解决某元素中"子元素"的布局方式，为布局提供最大的灵活性。
2.弹性布局的相关概念
1.弹性布局的容器
简称“容器”，要实现布局效果的父元素，称为容器。
2.弹性布局的项目
简称“项目”，要实现布局效果的子元素，称为项目
3.主轴
项目们排列方向的一根轴，就称为主轴
如果项目们按x轴排列，那么x轴就是主轴
如果项目们按y轴排列，那么y轴就是主轴
4.交叉轴
与主轴交叉的一根轴称为交叉轴
如果主轴是x轴，那么y轴就是交叉轴
如果主轴是y轴，那么x轴就是交叉轴
3.语法
1.flex的容器
将元素变为flex容器后，那么所有的子元素都将变成flex项目,都允许按照弹性布局的方式排列。
属性：display
取值：
1.flex 将块级元素变为容器
2.inline-flex 将行内元素变为容器
2.容器的属性
1.flex-direction
作用：指定容器的主轴及其排列方向
取值：
1.row 默认值，即主轴是x轴，起点在左端
2.row-reverse 主轴是x轴，起点在右端
3.column 主轴是y轴，起点在顶端
4.column-reverse 主轴是y轴，起点在底端

2.flex-wrap
作用：当一个主轴排列不下所有项目时，换行显示
取值：
1.nowrap 默认值，即空间不够时，也不换行，项目自动缩小。
2.wrap 换行显示
3.wrap-reverse 换行反转
3.flex-flow
作用：是flex-direction和flex-wrap的缩写形式
取值：
1.row nowrap 默认值
2.direction wrap
4.justify-content
作用：定义项目在主轴上的对齐方式
取值：
1.flex-start 在主轴的的起点对齐
2.flex-end 在主轴的终点对齐
3.center 在主轴上居中对齐
4.space-between 两端对齐
5.space-around 每个项目两端间距相同
5.align-items
作用：项目在交叉轴上的对齐方式
取值：
1.flex-start 交叉轴的起点对齐
2.flex-end 交叉轴的终点对齐
3.center 交叉轴的居中对齐
4.baseline 交叉轴的基线对齐
5.stretch 如果项目未设置尺寸，在交叉轴上占满所有空间。

课后作业：完成学子商城 楼层布局效果

1.定位
1.堆叠顺序
一旦将元素变为已定位元素的话，元素们则有可能出现堆叠的效果。
如何改变堆叠顺序？
属性：z-index
取值：无单位的数字，数字越大越靠上。
注意：
1.父子元素间，z-index无效，永远都是子元素压在父元素上。
2.只有已定位元素才能使用z-index属性。
2.固定定位
1.什么是固定定位
将元素固定在页面中的某个位置，位置不会随着滚动条而发生改变，始终固定在可视化区域。
2.语法
position:fixed;
配合偏移属性使用
3.特点
1.固定定位的元素会变成块级元素
2.脱离文档流，不占页面空间
3.固定定位的元素永远都是相对于body去实现位置的初始化。
练习：
在网页的右下角固定一张图片，距离底部100px,距离右边50px,页面滚动时，图片不动。
=======================
CSS3高级
1.复杂选择器
1.兄弟选择器
兄弟元素：具备相同父元素的平级元素称之为兄弟元素。
ex:
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
1.相邻兄弟选择器
作用：获取紧紧挨在某元素后的兄弟元素
语法：选择器1+选择器2{}
2.通用兄弟选择器
作用：获取某元素后所有满足条件的兄弟元素
语法：选择器1~选择器2{}
练习：通过兄弟选择器设置以下样式
1.h3与div之间有30px的外边距；
2.从第二个div开始，每个div都有10px的上外边距。
<h3>静夜思</h3>
<div>窗前明月光</div>
<div>疑是地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
2.属性选择器
1.作用
允许通过元素的属性及其值匹配页面中的元素。
2.语法
1.基本语法
[attr]
作用：匹配页面中所有附带attr属性的元素
ex：
[id] 匹配页面中所有附带id属性的元素
[class] 匹配页面中所有附带class属性的元素
2.elem[attr]
elem:表示任意元素
attr:表示任意属性
作用：匹配页面中所有附带attr属性的elem元素
ex:
div[id] 匹配页面中所有附带id属性的div元素
3.[attr1][attr2]...
作用：匹配同时附带多个属性的元素
ex:
[id][class]匹配页面中同时附带id和class属性的元素。
4.[attr=value]
作用：匹配attr属性值为value的元素
ex:
[id="map"]匹配id属性为map的元素
[class="c1"]
3.伪类选择器
已学过的伪类：
链接伪类： :link , :visited
动态伪类： :hover , :active , :focus
1.目标伪类
作用：突出显示活动的HTML锚点元素，匹配被激活时的锚点。
语法：
选择器:target{...}
ex:
div:target{}
练习：
用目标伪类选择器完成如图所示效果
2.结构伪类
作用：通过元素的结构关系来匹配元素
1.:first-child
匹配的元素是属于其父元素的第一个子元素
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
ex:
p:first-child{}
2.:last-chlid
匹配的元素是属于其父元素中的最后一个子元素
ex:
p:last-child{}
练习：
创建一个4*4的表格，并填充内容
设置第一行数据的背景颜色为黄色
设置最后一行数据的背景颜色为红色
3.:nth-child(n)
匹配的元素是属于其父元素中第n个子元素
ex:
tr:nth-child(3)
练习：
将第二行中第3列的背景颜色设置为蓝色
4.:empty
匹配没有子元素的元素
5.:only-child
匹配的元素属于其父元素中的唯一的子元素。
3.否定伪类
将满足指定选择器的元素给排除在外
语法：
:not(selector){}
tr:not(:first-child){}
练习：
设置每行中除第一列以外的所有列，文字以加粗和斜体的方式显示。
4.伪元素选择器
1.:first-letter或::first-letter
作用：匹配某个元素的首字符
2.:first-line或::first-line
作用：匹配某个元素的首行
注意：首字符和首行样式冲突时，优先使用首字符的样式
3.::selection
作用：匹配被用户选取的内容
注意：只能修改本文颜色和背景颜色
练习：
创建一个div，id为d1,内容随意
1.将div中内容的首字符设置为加粗，红色，大小为20pt,右外边距15px
2.将div中首行文本设置为橙色，斜体
3.将用户选取的内容设置为红色背景黄色字体
2.内容生成
1.什么是内容生成
使用css动态的向某元素中插入一段内容
2.伪元素选择器
1.:before或::before
作用：匹配到某元素的内容区域之前
<p>(:before)锄禾日当午</p>
2.:after或::after
作用：匹配到某元素的内容区域之后
<p>汗滴禾下土(:after)</p>
3.属性
属性：content
作用：向匹配的位置处增加内容
取值：
1.字符串 用""引起来
2.url() 添加一张图片
练习：
<p>学而时习之，不亦说乎</p>
<p>有朋自远方来，不亦乐乎</p>

输入格式如下：
子曰：学而时习之，不亦说乎
-摘自《论语》
4.解决问题
1.外边距溢出
1.增加一个空table标记-显示为table
2.在父元素的第一个子元素位置处增加(:before)
选择器:before{
content:"";
display:table;
}
2.浮动给父元素高度带来的影响
解决问题：
选择器:after{
display:block;
content:"";
clear:both;
}
3.弹性布局
1.什么是弹性布局
弹性布局是一种布局方式，主要是解决某元素中"子元素"的布局方式，为布局提供最大的灵活性。
2.弹性布局的相关概念
1.弹性布局的容器
简称“容器”，要实现布局效果的父元素，称为容器。
2.弹性布局的项目
简称“项目”，要实现布局效果的子元素，称为项目
3.主轴
项目们排列方向的一根轴，就称为主轴
如果项目们按x轴排列，那么x轴就是主轴
如果项目们按y轴排列，那么y轴就是主轴
4.交叉轴
与主轴交叉的一根轴称为交叉轴
如果主轴是x轴，那么y轴就是交叉轴
如果主轴是y轴，那么x轴就是交叉轴
3.语法
1.flex的容器
将元素变为flex容器后，那么所有的子元素都将变成flex项目,都允许按照弹性布局的方式排列。
属性：display
取值：
1.flex 将块级元素变为容器
2.inline-flex 将行内元素变为容器
2.容器的属性
1.flex-direction
作用：指定容器的主轴及其排列方向
取值：
1.row 默认值，即主轴是x轴，起点在左端
2.row-reverse 主轴是x轴，起点在右端
3.column 主轴是y轴，起点在顶端
4.column-reverse 主轴是y轴，起点在底端

2.flex-wrap
作用：当一个主轴排列不下所有项目时，换行显示
取值：
1.nowrap 默认值，即空间不够时，也不换行，项目自动缩小。
2.wrap 换行显示
3.wrap-reverse 换行反转
3.flex-flow
作用：是flex-direction和flex-wrap的缩写形式
取值：
1.row nowrap 默认值
2.direction wrap
4.justify-content
作用：定义项目在主轴上的对齐方式
取值：
1.flex-start 在主轴的的起点对齐
2.flex-end 在主轴的终点对齐
3.center 在主轴上居中对齐
4.space-between 两端对齐
5.space-around 每个项目两端间距相同
5.align-items
作用：项目在交叉轴上的对齐方式
取值：
1.flex-start 交叉轴的起点对齐
2.flex-end 交叉轴的终点对齐
3.center 交叉轴的居中对齐
4.baseline 交叉轴的基线对齐
5.stretch 如果项目未设置尺寸，在交叉轴上占满所有空间。