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 |