DAY14css选择器和弹性布局

 

css3

​

CSS3并不是一门新语言，我们知道css是层叠样式表，是一种样式语言，是用来告诉浏览器如何渲染页面的。css3是css规范的最新版本

css层叠样式表
	1、css2.1版本常用
	2、css3是css第三个版本，并不是一个新的语言
	3、css3和之前的版本有什么区别
	+ 在原来的基础上新增一些好用的属性和选择器
	+ 圆角、阴影、动画、2D、3D、过渡、渐变、背景等等
	+ 布局方式，弹性盒布局flexbox，媒体查询（响应式）
	+ 新增了几个单位rem、vw等等

​

阴影

​

+text-shadow:5px 5px 5px #f66; 文字阴影(水平 垂直 模糊的程度 模糊颜色)

box-shadow：让盒子在显示的时候产生阴影

+box-shadow: 0px 0px 10px black inset;（inset内阴）

需要参与过渡的属性 all表示所有的属性*/
	transition-property:box-shadow, margin-top, background-color;
	transition-property: all;
	过渡时间
	transition-duration: .5s;
一起写	transition: all .5s;

​

属性选择器

​

属性选择器：减少对类名和id名称的依赖，可以通过标记自身的html属性选取元素 知识点：在程序语言里面^表示开头，$表示结尾，*表示所有的 input[value]{}

通过属性的属性值的开头内容选取元素 a[href^="h"]{}

通过属性的属性值的结尾内容选取元素

通过属性的属性值的任意内容选取元素*/
	a[href*="S"]{}

通过属性的属性值选取元素 最常用的*/
	/* input[type="text"]{}

*CSS3 选择器——伪类选择器**

（1）UI元素状态伪类

所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！

1 :enabled匹配所有用户界面（form表单）中处于可用状态(没有被禁用的)的元素。 2 :disabled匹配所有用户界面（form表单）中处于不可用状态（禁用）的E元素。 3 :checked匹配所有用户界面（form表单）中处于选中状态的元素。 4 ：:selection 可以让鼠标选中文字的时候，给其设置背景和文本颜色，不能设置其他的属性。

给选中的状态的表单设置样式 用的比较多，，，，例子
	/* input:checked{}

2）CSS3的:序列选择器

1.同级别的第几个 :first-child 选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签 :only-child 选中父元素中唯一的标签（比如有两个p标签，一个在div里面，一个随便在其他地方，使用这个选择器选中的是div中的p）

2.同类型的第几个 :first-of-type 选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 :only-of-type 选中父元素中唯一类型的某个标签

获取焦点选择器*/
	input:focus{}

否定选择器，给它自己设置了样式，除了它没有以外其他的标记都有*/
	input:not([type="text"]){}

​

层级（层次）选择器：

​

层级（层次）选择器：
	+ 包含选择器（后代）作用：只要是它的里面的元素样式能继承的都会起作用
	+ 子选择器 作用：样式只对子元素起作用，其他的后代元素不起作用
	+ 相邻兄弟选择器 作用：它只对它后面的第一个元素起作用
	css继承问题：
	+ 儿子继承父亲的一些东西（固定资产、存款、股票、基金等等）
	+ 子元素或者后代元素会继承父元素的一些属性
	注意点：
	+ 超链接不能继承父元素的文本颜色
	+ 当容器设置了边框，边框没有设置颜色时，当咱们设置了文本颜色属性，边框会以文本的颜色为颜色
	+ 当子元素没有设置宽度的时候，它的宽度会跟随容器，这是块级元素特性决定的

​

后代选择器也被称作包含选择器

：不管是子元素或者元素或者是孙元素或者是更深层次的关系，都将被选中​

div ul li{}li不管不管是子元素或者元素或者是孙元素或者是更深层次的关系，都将被选中

相邻兄弟选择器，只能选中它后面的那个标记，不能其他类型的标记给隔开*/
	/* div+p{
	background-color: yellow;

​

子元素选择器(E>F)

​

子元素选择器只能选择某元素的子元素

如选择ul下的所有子元素li。

ul>li{}

通用兄弟选择器，可以选中它后面的所有的标记，可以被其他类型的标记隔开*/
	div~p{}

:root 选择文档的根元素

​

浏览器私有前缀

​

浏览器私有前缀
	+ CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。因此每种内核的浏览器都只能识别带有自身私有前缀
	的CSS3属性
	+ 一个新的属性在刚刚出来时，或者在咱们测试（尝鲜）使用的时候它还没有成为标准的一部分，没有成为标准的一部分浏览器
	它是不支持的
	+ 为了这个属性发展和使用，制定属性的代表方和各个浏览器之间制定了一个规则，虽然没有成为标准根据这个规则让咱们先使用
	+ 各个浏览器对应的提出了一个私有前缀的概念，你要在我的浏览器里面执行这个属性那你把我们的前缀加上，浏览器就知道你是什么情况
	浏览器私有前缀有哪些
	+ -webkit- 谷歌
	+ -moz- 火狐 -moz-border-radius: 50%;
	+ -ms- IE
	+ -o- 欧朋

​

渐进增强和优雅降级

（补充）​

 

 

​

弹性盒布局flexbox

​

弹性盒布局（模式）
	1、名称，flexbox、弹性盒布局、伸缩布局盒模型
	2、弹性盒布局是css3新增的一种布局方式，让容器有能力去控制子元素，水平、垂直对齐方式、顺序
	大小、分配可用空间（自适应）等等
	3、怎么（使用）定义弹性盒？
	+ 使用display:flex;属性，把这个属性设置在容器（container父元素）上面
	+ 当咱们给容器设置了弹性盒布局后，里面的子元素默认排列方向横向（水平）的
	+ justify-content 水平对齐方式
	+ align-items 垂直对齐方式
	4、关于弹性盒的专业名称
	+ 把父元素叫做容器container，把子元素叫做项目（伸缩项目）item
	+ 把水平方向叫做主轴（row），把垂直方向叫做侧轴（column）

 

伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向

在实际的开发中，并不是所有的情况下子元素的排列方向都是横向排列的，有自上而下排列的

标准流中块级元素默认是自上而下排列的，但是不是弹性盒布局模式咱们使用不了弹性盒里面好用的属性

row：从左向右，默认值

row-reverse：与row相反，跟float:right;效果一样

column：从上到下

column-reverse：与column相反

 

 

​

主轴对齐 justify-content

​

2)主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式

flex-start：伸缩项目向一行的起始位置靠齐，默认值

flex-end：伸缩项目向一行的结束位置靠齐，把元素直接平移到右边

center：伸缩项目向一行的中间位置靠齐

space-between：伸缩项目会平均的分布在行里

space-around：伸缩项目会平均的分布在行里，两端保留一半的空间

space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等。存在兼容问题，有些低版本的浏览器不支持

 

3)侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式

flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边
​
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边
​
center：伸缩项目的外边距盒 在该行的侧轴上居中放置
​
baseline：伸缩项目根据伸缩项目的基线对齐
​
stretch：伸缩项目拉伸填充整个伸缩容器.

4)换行 flex-wrap

nowrap 不换行 默认值，不管超出还是不超出都不会换行
​
wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行
​
wrap-reverse 换行反向  主轴水平时，上下反向，主轴垂直时，左右反向

5)伸缩流方向属性与换行属性缩写形式 flex-flow

flex-flow：换行 伸缩方向; 两个值同时定义或者单独定义都生效，不分先后顺序

6)align-self（加在子元素上）：主要用来设置单独伸缩项目在侧轴的对齐方式。注意点：align-self可以覆盖align-items

flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；（元素位于容器的开头）
​
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（元素位于容器的结尾）
​
center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（元素位于容器的中间）
​
stretch：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）

7)堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 往往要与换行同时应用，没有换行就不存在多行的情况

flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）
​
flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）
​
center：各行向伸缩容器的中间位置堆叠；（居中没有行距）
​
space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配）
​
space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）

8)显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序

a、不定义order的伸缩项目会排到前面
​
b、order：1； 排第一   order：2； 排第二

9)flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分

flex:1;
​
flex:2;
​
...

10)flex-grow属性定义项目的放大比例，默认为0

即如 果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

11)flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

12)flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
​
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。不常用，还在不断变化中。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

三、弹性盒案例

1)支付宝

2)导航

3)自适应网页

4)表单

5)网页内容区域

...

三列布局
	1、需求：三列布局要求是三个元素，两边的元素宽度固定，中间元素的内容自适应
	2、实现：
	+ 使用display:flex;
	+ 使用flex或者flex-grow
	双飞翼或者圣杯布局
	1、需求：
	+ 要求是三个元素，两边的元素宽度固定，中间元素的内容自适应
	+ 要求中间的内容区域优先渲染（优先让浏览器解析---加载），在效果呈现的时候中间的内容依旧在中间
	2、实现：
	+ 使用display:flex;
	+ 使用order+flex