css学习总结1

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;
}
}