CSS介绍

CSS是做什么的？

1.全名叫做层叠样式表，Cascading StyleSheet

2.对页面的布局、字体、颜色、背景等效果进行精确的控制

这是360导航的一个小片段



如果没有css呢？



HTML负责生产，CSS负责加工。

CSS3基础介绍

CSS有别于C，JAVA之类程序语言——没有算法，没有复杂的逻辑，因此，css看起来更像是一双手。每一行代码，都像是人手动去操控一次。比如，我希望这两个方块之间离的远一些，就把margin设置的大一些，产生的效果就像用手把他们扒拉开。

Css布局

先由常用的说起，padding,border,margin影响元素的高度和宽度，position影响元素的位置



这图就很直观了

Position分为static,relative,absolute,fixed，默认static



这个一般在页面中的位置是固定的，无论你如何滑动。position:fixed

相对定位position:relative,设置了这个属性的元素，可以说就是一个参照物。

绝对定位position:absolute,会找离它最近的相对定位祖先参照物进行定位

 

display模型

常用共五种，inline,inline-block,block,，flex以及none

Inline就是行内元素，无法设置高度和宽度，不换行，比如span

Block块级元素，可以设置高度和宽度，但他们会换行,div,p

Inline-block行内块级元素，不仅可以设置高度和宽度，也不换行

Flex弹性，自身和子元素能根据需要自动改变高宽

None隐藏，在页面上消失，不再占据空间，可以通过改变display属性再次现身



最上方的今天、明天、选择，用ul列表解决，在接触flex布局之前，我是这么做的


ul的样式

li的样式
Flex布局的话就是




FLEX例子

也许看起来差别不是很大，但这里有一个很关键的地方在于，flex布局不需要设置float。

何为float？

流动布局，Float出现的意义是为了解决文字环绕图片的效果。他会将元素从正常DOM流中抽出，会影响页面的正常布局，见div+float.html文件


左边有float:left


而我们还用他做的很多别的事，的确float能实现同样的效果，但这并不是他的本职工作。我们有很多更好的方法去代替他，就比如刚才的flex解决li横向居中等宽的效果。继续，下方的两段文字和一个输入框，需要注意的是左边的留白，看情况设置为固定或百分比。
那一串数字，我原先是用的固定大小的div嵌套实现的，代码是





 
用的是浮动，这十个小方块拉伸起来真的很丑，因此还是把它固定在屏幕中央。
你看，又做了浮动不该干的事，因为他用起来确实挺简单的。现在，换一种方式来实现





效果是一模一样的.

但后者是货真价实的占据那一块内容，而前者是假象，他其实是空占100px的空间。

这个和最上方那个列表都可以用inline-block来实现同样的效果。Float会抽空父元素的空间，极其影响页面布局，为此我们必须多设置一个本不需要设置的height。

DIV+FLOAT被抽空的演示

FlexBox

Container属性：

flex-direction: row | row-reverse | column | column-reverse;定义Flex项目在Flex容器中放置的方向，默认情况之下，Flex项目都尽可能在一行显示

flex-wrap: nowrap | wrap | wrap-reverse;让Flex项目多行显示

flex-flow: <‘flex-direction’> || <‘flex-wrap’>两个属性决定了伸缩容器的主轴与侧轴。

justify-content: flex-start | flex-end | center | space-between | space-around;用于在主轴上对齐伸缩项目



align-items: flex-start | flex-end | center | baseline | stretch;当前行的侧轴上进行对齐

 


align-content: flex-start | flex-end | center | space-between | space-around | stretch;用来调准伸缩行在伸缩容器里的对齐方式，仅有一行的flex不会有效果

 


order: <integer>;默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制Flex项目的顺序源。



子元素属性：flex-grow: <number>; /* default 0 */用来分配容器剩余空间，计算公式：

available_space(容器还剩的空间）=container_size(容器宽度)-flex_item_total(子元素宽度之和)

grow_unit(增长单位)=available_space/flex_grow_total(子元素增长因子之和)

flex-item-width(子元素计算得到的宽度)=flex-basis+grow-unit*flex-grow

 


子元素1宽度190，子元素2宽度160，子元素3宽度130

flex-shrink: <number>; /* default 1 */定义Flex项目的缩小比例，和flex-grow同理。可以将其理解为权重。

flex-basis: <length> | auto; /* default auto */

flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]简写形式

常见缩写形式的意义：

flex: initial=flex: 0 1 auto,flex: auto=flex: 1 1 auto,flex: none=flex: 0 0 auto

align-self: auto | flex-start | flex-end | center | baseline | stretch;用来在单独的伸缩项目上覆写默认的对齐方式，若伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果。



来试试网格布局，display:grid

网格布局详细介绍：

容器通过display:grid;定义成网格，并且使用grid-template-columns和grid-template-rows指定了列宽、列间距，行高和行间距等。而且当子元素在一行填不下时，就会自动换行.

grid-template-columns:repeat(6, (col) 100px (gutter) 10px); 

grid-template-columns: (col) 100px (gutter) 10px (col) 100px (gutter)

grid-column: col / span gutter 2; 

网格区域grid-area,组成网格区域的网格线顺序是row-start/column-start/row-end/column-end。每个网格线之间也是使用/来分隔。当某些单元格无法跨行跨咧时，设box-sizing:border-box;





 




效果完全一样，但是占了多余的空间，10px空白的高度。
网格布局1源码

那么，我强行把每个单元格的grid-area设置了一遍
网格布局2演示

响应式布局

媒体查询：@media all and (min-width: 800px) { ... }，@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型，(min-width:800px) 是包含媒体查询的表达式。单一条件下，可以省略关键词 all 和 and。and条件可叠加，landscape横向
@media (min-width:800px) and (max-width:1200px) { ... }宽度为 800 到 1200
@media (min-width:800px) or (orientation:portrait) { ... }宽度小于800或为纵向
当然，还有not。@media (not min-width:800px) { ... }当最小宽度不是 800 
only用来定义某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会读不了样式，因为其先读only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。media="only screen and (max-device-width:240px)"  另外还有使用逗号（，）被用来表示并列，
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" /> 
本例纯属借鉴flex+media

完美居中

具体看实例，纯手写哦若最后一个不居中，请copy源码至IE10或启用实验性网络平台功能

边框border

border:1px solid black;宽度，样式，颜色三个参数，简单有效。

border-radius:5px;圆角效果，参数越大，弧度越大。


20px

5px边框,20px圆角

dotted点

dashed虚

双线


再花哨一点的边框，就只有用border-image来实现了，以图片或渐变为边框。
边框会增加元素的宽度，可能会破坏之前的布局，所以我们有时会使用轮廓





outline:1px solid black;和border是同样的用法，但他不会影响页面的布局。
那如果我们要实现圆角呢？Outline-radius吗？不好意思，没有这个。
于是，脑洞大开，引入下一个概念，阴影shadow

阴影shadow

shadow有两种，text-shadow&box-shadow，为了接上文，这里先说box-shadow，盒阴影。
box-shadow: 0 0 0 30px red;X偏移，Y偏移，模糊半径，阴影扩展半径，颜色。
shadow和outline一样，不占元素的宽度，不影响布局，但他会覆盖周边元素
如何实现圆角？只需要加一句话border-radius:1px;





左是1px圆角，右是30px圆角，圆角的大小对阴影的成像有很大影响。


还是太low了





要知道，box-shadow是可以重叠的！！
 


这个小箭头就可以用box-shadow画出来，先将他放大再放大
 


代码如下：不断复制核心本身
 


 <input type="text">

点击这个输入框，闪烁的蓝边就是outline
text-shadow

text-shadow:5px 5px 5px  red;
text-shadow比box-shadow少一个阴影扩展半径的参数


有偏移

无偏移


多层叠加


阴刻


阳刻
 


模糊(字体设为透明，无偏移)


浮雕(原理同上，+黑白色叠加)
当然还有很多种效果，就不一一列举。虽然这些可以用字体库来实现，但如果只是几个字的话，用css在体积上会小很多很多。

渐变

 
-webkit-radial-gradient([<position> || <angle>,]?[<shape> ||<size>,]?[,<color-stop>]*);
Size:Closest(farthest)-side(corner)
Shape:ellipse,circle
Position:坐标值或关键字
要重复的话就-repeating-，涉及半径就不能加前缀
 













 
 


关于Size:Closest(farthest)-side(corner)的理解，在网上找到这个图之前，我一直没看懂，这真是张神图

 


 
线性渐变：

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)

<angle>：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。

CSS选择器

CSS能够对这么多元素分别赋予不同的效果，依托的就是强大的伪类选择器。

何为伪类？即页面上并不存在这个类，但我们依然可以对它进行样式添加。

比如p:not(.show获取到了class不为show的p元素

E:pseudo-class {property:value}

Link--visited--hover--active

":checked",":enabled",":disabled",counter-1中就用了:after和:checked两种

:nth选择器，:first-child,:last-child,:nth-child(),:nth-last-child(),:only-child,:empty

child/of-type

:nth-child(length);/*参数是具体数字*/

:nth-child(n);/*参数是n,n从0开始计算*/

:nth-child(n*length)/*n的倍数选择，n从0开始算*/

请注意了，这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

:nth-child(n+length);/*选择大于length后面的元素*/

:nth-child(-n+length)/*选择小于length前面的元素*/

:nth-child(n*length+1);/*表示隔几选一*/

nth选择器例子，请将JS区域的代码复制到css区域，即可看到效果

 

CSS计数器

三个步骤

1.counter-reset:name integer;重置计数器

2.counter-increment:name integer;计数器增加

3.Content:counter(name[,type]);计算

 DEMO1DEMO2

CSS混合模式

在Photoshop中图层的混合模式有近27种，但在CSS混合模式中，目前仅有16种：normalmultiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity。

mix-blend-mode和background-blend-mode的区别就在于后者是独立的

background-blend-mode可以与多个背景图分别匹配，形成更复杂的叠加效果。
在线演示有些问题，所以还是上图吧，具体那种属性是什么样子，亲身体验一把就清楚了

Box-reflect：就像是一面镜子，你可以选择镜像的生成方向和离本尊的间距

box-reflect：none | <direction> <offset>? <mask-box-image>?

 

过渡和动画

transition有四个属性，property,duration,timing-function,delay

变化的属性名称，持续时间，次数，延迟

-webkit-transition:width linear 2s 1s;延迟1秒后开始，宽度线性变化持续2秒

Transform转换：

translate(700px,150px)位移，rotate(360deg)旋转，scale(2)伸缩，skew(deg，deg)翻转

各种例子演示

其他

1.自动取色器，currentColor，就近取color的颜色，参见currentColor

鼠标悬停改变的是p字体的颜色，将内部span的背景色也一同改变了

2.CSS sprites，CSS精灵，指将页面上所有的背景图放到一张图上，通过background-position来进行精确定位，多张图片合并的字节要更小，而且能减少http请求，大大提高性能，也解决了命名上的的困扰。但是正因为他的坐标必须精确，导致他对屏幕的适应性很差。