css学习总结:
一、css3基础
css简介:
英文名全称:cascading style sheets
层叠样式表:web标准中的表现标准语言,表现标准语言在网页中主要对网页的信息进行控制,简单说就是如何修饰网页信息的显示样式
目前遵循的是W3C发布的CSS3.0
1998年5月2号由W3C正式推出的css2.0
二、引入方式
css有三种引入方式:
1、行内样式:使用style属性引入CSS样式。(实际写页面时不推荐使用)
2、内部样式表:在style标签中书写
3、外部样式表:扩展名为.css的样式表,有两种方式。
- 链接式:
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
- 导入式:
@import url("css文件路径");
- 两者之间的区别:链接式属于XHTML,优先加载CSS到页面;导入式属于CSS2.1,先加载HTML再加载CSS
优先级:行内>内部=外部,(后两者的根据就近原则)
link 和 @import的区别:
1、link是属于(xhtml)html /xhtml提供的一个标记,而@import是css提供的一种方式
2、link引入的文件,结构和样式可以同时被加载,import引入的文件先加载结构再加载样式
3、link没有兼容问题,而import老的版本的浏览器不支持
4、link可以被DOM控制,而import不能被DOM操作 — DOM — 就是JS提供给我们操作标记的方法
三、选择器的分组
CSS选择器分为
1.群组选择器 如:p, body, img, div{}
2.兄弟选择器 如:p + p { color:#f00; }
3.属性选择器 如: p[title] { color:#f00; }
4.包含(后代)选择器 如:body ul li{}
5.子元素选择器 如:div > p{}
6.ID选择器 如:#myDiv{}
7.类选择器 如:.class1{}
8.伪元素选择器 如:E:first-line,E:before
9.伪类选择器 如:E:first-child ,E:visited,E:focus,E:enabled
10.标签选择器 如:p { font-size:1em; }
子选择器和后代选择器的区别:
后代选择器的写法就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。
子选择器只对直接后代有影响的选择器,而对“孙子后代”以及多层后代不产生作用。
注意:在IE6中,只支持后代选择器,不支持子选择器
四、弹性盒布局(flexbox)
1、弹性盒布局介绍
1)弹性盒也叫伸缩布局盒模型
它是**css3引入的一种新的布局模式——flexbox**布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式,更便利于开发。
2)主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。flex容器会使子项目扩展来填充可用空间,或缩小他们以防止溢出容器。
3)专业术语解释
a、主轴-水平方向或者X轴
b、侧轴-垂直方向或者Y轴
c、伸缩容器(父元素)和伸缩项目(子元素)
2、弹性盒属性
1)伸缩流方向 flex-direction 主要用来创建主轴,定义伸缩项目在伸缩容器中的方向
row:从左向右
row-reverse:与row相反
column:从上到下
column-reverse:与column相反
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:换行 伸缩方向; 两个值同时定义或者单独定义都生效,不分先后顺序 (flex-wrap和flex-direction的简写形式)
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
五、媒体查询
作用:可以让我们根据设备的大小元素去设定不同的css样式,可以实现多设备兼容
条件判断:当满足条件的时候执行,不满足就不实行 为真(true) 为假(false)
媒体查询简单使用:
媒体是有类型的,手机端、pc端、打印机、投影、
all表示所有的媒体类型
@media all and(max-width:800px;){
div{}
}当小于宽度800时执行里面的代码
and关键字 :和 ()表达式:条件判断
only限定为某种设备 screen显示器、笔记本、移动设备
@media only screen and (max-width:800px){
div{
height: 300px;
background-color: deeppink;
font-size: 30px;
text-align: center;
}
}
not表示排除某种设备:在使用not关键字时要指定设置类型
@media not all and(max-width:800px;){}
竖屏orientation:portrait
@media screen and (orientation:portrait) {
div{
height: 200px;
background-color: yellow;
font-size: 30px;
text-align: center;
}
}
横屏orientation:landscape
@media screen and (orientation:landscape){
div{
height: 100px;
background-color: orange;
font-size: 20px;
text-align: right;
line-height: 100px;
}
}