CSS3

css的选择器：

p:after{ content:"台词：";}        //css选择器，在p标签之后添加内容

p:before{ content：”内容”}  //css选择器，在p标签之前添加内容

 

css常用属性：

z-index:1;      //定位叠放次序（z轴），数值越大，盒子越靠上，默认auto，可以负数

display:none;   //不显示元素，不占用空间，block：显示为块级元素

visibility:hidden;  //隐藏元素，占用控件，visibe显示元素

overflow:hidden;    //隐藏溢出内容，scroll:显示一条滚动条;auto:自动，超出时出现一条滚动条。

 

鼠标样式：

<li style="cursor: default;">默认样式，箭头</li>

<li style="cursor: pointer;">小手</li>

<li style="cursor: move;">移动</li>

<li style="cursor: text;">文本编辑</li>

<li style="cursor: no-drop;">禁止</li>

 

outline: none;  //取消表单的蓝色轮廓，参数为1也可以

resize:none;    //取消文本域的拖拽更改大小

vertical-align:middle;  //垂直对齐，仅用于行内块元素与行内元素有效，常用于图片或者表单和文字垂直对齐。

    baseline：默认，元素放在父元素的基线上。

    top：把元素的顶端与行中最高元素的顶端对齐

    middle:把元素放在父元素的中部。

    bottom:把元素的顶端与行中最低元素的顶端对齐。

注意：用以上三个属性可以解决图片在父元素内对齐方式的空白缝隙（提倡使用）

 

//单行文字省略号

white-space: nowrap;    //强制文字不换行，默认normal

overflow: hidden;       //隐藏超出元素部分

text-overflow: ellipsis;    //文字用省略号代替超出部分

 

/* 多行文本溢出显示省略号 */

overflow: hidden;

text-overflow: ellipsis;

/* 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 限制在一个块元素显示的文本的行数 */

-webkit-line-clamp: 2;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;

//注意，这种写法有兼容性问题，只支持webkit内核的浏览器

 

 

CSS属性书写顺序

建议遵循以下顺序：

1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）

2.自身属性：width/height/margin/padding/border/background

3.文本属性：color/font/text-decoration/text-align/ vertical-align/white-space/break-word

4.其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient..

 

css3新特性:

css3新增选择器：

1. 1.  属性选择器：

E[att]  选择具有att属性的E元素

E[att="val"]    选择具有att属性且属性值等于val的E元素

E[att^="val"]   匹配att属性且值以val开头的E元素

E[att$="val"]   匹配att属性且值以val结尾的E元素

E[att*="val"]   匹配att属性且值以val含有的E元素

 

1. 2.  结构选择器

E:first-child   //匹配父元素中第一个子元素E

E:last-child    //匹配父元素中最后一个子元素E

E:nth-child(n)      //匹配父元素中第n个子元素E,n可以是数字，关键字和公式，关键字：even偶数，odd奇数

    公式：字母n(只能写n)，

        n：从0开始，每次加1，表示每个属性；

        2n:偶数；2n+1:奇数；

        5n：5 10 15...；n+5：

        从第五个开始(包括五)到最后；

        -n+5 前五个...

E:first-fo-type     //指定类型E的第一个

E:last-fo-type      //指定类型E的最后一个

E:nth-of-type(n)    //指定类型的第n个，n的用法类似E:nth-child(n)

 

伪类选择器总结：

结构伪类选择器一般用于选择父级里面的第几个孩子

nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配

nth-of-type 对父元素里面指定子元素进行排序选择.先去匹配E,然后再根据E找第n个孩子

关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式

如果是无序列表,我们肯定用nth-child更多

类选择器、属性选择器、伪类选择器，权重为10。

 

 

css3属性：

border-radius: 50px;        //设置一个半径为50px圆形与矩形四角对比的圆角，可以添加四个值

box-shadow 10px,10px.10px.10px,rgba(0,0,0,.3);      //设置阴影,前面两个必须，水平与垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，inset将外部阴影改为内部阴影

box-shadow 10px,10px,10,rgba(0,0,0,.3);        //设置文字阴影，前面两个必须，水平与垂直阴影位置，模糊距离，阴影颜色，这个用的不是很多，了解即可。

Position:sticky     //粘性定位，类似于固定定位，但是占有原先的位置，当页面滑动到下面才开始固定。IE不支持

box-sizing：content-box；  //标准模型，默认

box-sizing：border-box；  //怪异盒模型，将边框的位置算在内容里面

filter: blur(5px);          //filter 函数;用于模糊或颜色偏移效果，bluer()：模糊函数,数值越大，越模糊

width: calc(100% - 30px);   //设置属性宽度永远比父元素小30px，calc();函数，可以计算+ - * /

background-size: contain;   //单位:长度 |百分比Icover Icontain;

　　cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

　　contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

 

服务器字体的调用：

@font-face{ 
font-family:webFont;
src:url(src/webFont.ttf);
}
h1{ font-family:webFont;}

矢量图的调用：

1.去阿里巴巴矢量图标库下载图标 https://iconfont.cn

2.通过<link rel="stylesheet" type="text/css" href="解压的的路径/iconfont.css"/>导入矢量图

3.使用字体编码（如：&#xe646;）使用

4.可以添加iconfont的class名，然后复写.iconfont可以对矢量图进行更改。

过渡属性（Transition）

transition-timing-function:linear 匀速变换

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。宽高，背景颜色都可以，全部属性用all
transition-duration 定义过渡效果花费的时间。单位秒/s
transition-timing-function 规定过渡效果的运动曲线。ease：默认,逐渐慢下来，可以省略；linear：匀速；ease-in:加速；ease-out：减速；ease-in-out：先加速后减速。

transition-delay 规定过渡效果何时开始。默认为0s，可以省略

2D效果

transform字面上就是变形，改变的意思。
在CSS3中transform主要的包括以下几种：旋转rotate、扭曲skew、缩放scale、和移动translate以及巨型变形matrix；none:表示不进行变换。

 

transform:rotate(30deg); 旋转30度

transform:translate(100px,20px); X移动100px，Y移动20px.
transform:translateX(100px); X移动100px
transform:translateY(20px); Y移动20px.

transform:scaleX(2); 水平方向（X轴）缩放2
transform:scaleY(2); 垂直方向（Y轴）缩放2
transform:scale(2,1.5); 水平和垂直方向同时缩放（X轴和Y轴同时缩放）
注意：都以中心位置为中心点，缩放基数为1，大于1放大，小于1缩小。

transform:skewX(30deg); 水平扭曲变形30度。
transform:skewY(10deg); 垂直扭曲变形10度。
transform:skewXY(30deg,10deg); 水平和垂直同时扭曲30度，10度。

 

transform-origin: 50% 50%;  //设置旋转的中心点，默认元素的中心点（50% 50%），可以加方向名词（如：top,bottom,left,right,center）

例：transform-origin: right bottom;     //设置中心点在右下角

 

2D综合写法

注意：

1.同时使用多个转换，格式为：transform:translate() rotate() scale()...等

2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

3.当我们同时有位移的其他属性的时候，记得要将位移放到最前

 

 

 

3D效果

transform 向元素应用 2D 或 3D 转换。

transform:translateX(100px);    //仅仅在x轴移动

transform:translateY(100px);    //仅仅在y轴移动

transform:translateZ(100px);    //仅仅在z轴移动(注意：tanslateZ一般用px单位)

transform:translate3d(x,y,z);   //其中x、y、z分别指要移动的轴的方向距离

 

perspective 规定 3D 元素的透视效果。透视就是视距，眼睛到屏幕的距离，视距越小，图像越大，透视写在被观察元素的父盒子上面的， translateZ;是往z轴上移动。
perspective:none; 取值为none或者不设置没有3D空间
perspective:800px ~ 2000px; 一般的取值范围，越小效果就越大

 

rotate3d 3d旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

语法：

    transform:rotateX(45deg):沿着x轴正方向旋转45度

    transform:rotateY(45deg):沿着y轴正方向旋转45度

    transform:rotateZ(45deg):沿着z轴正方向旋转45度

    transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解） xyz代表旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。

例如：transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg

    transform:rotate3d(1,1,0,45deg)就是沿着x与y的对角线旋转45deg

 

 

说明：1.对于元素旋转的方向的判断为一个左手准则

    手的手拇指指向x轴的正方向。

    其余手指的弯曲方向就是该元素沿着x轴的方向

    拇指向下，手的手拇指指向y轴的正方向。

    其余手指的弯曲方向就是该元素沿着y轴的方向

2.由于z轴是眼睛到屏幕距离的轴，所以旋转效果与2d的旋转相似

 

 

transform-style 规定被嵌套元素如何在 3D 空间中显示。

transform-style:flat 子元素将不会保留其3D位置
transform-style:preserve-3d; 子元素将保留其3D位置

 

transform-origin:x-axis y-axis;

更改中心点，值可以是百分值，em,px，X可以是：left,center,right，length, %;Y可以是：top,center,bottom.

 

backface-visibility 定义元素在不面对屏幕时是否可见。

backface-visibility:visible 默认值，表示反面可见
backface-visibility:hidden 表示反面不可见

 

perspective-origin 规定 3D 元素的底部位置。定义了观察者的视角相对于显示元素的位置，理解为自己以什么视角去观察元素，给父元素定义，影响子元素

参数取值：

x-axis：left、center、right、length、%

y-axis：top、center、bottom、length、%

例如：perspective-origin:left top;　　//元素效果为从左上角观察，显示出右下角

 了解即可，不常用。

 

 

动画

div{ainmation:aa;}

@keyframes aa{
　　from{}
　　50%{}
　　to{}
}

@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。

格式：animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

例如：animation: move 5s linear infinite;   //名称/完成时间/运动曲线/无限重复播放

animation-name 规定 @keyframes 动画的名称。（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。（必须的）
animation-timing-function 规定动画的速度曲线。默认是 "ease"。

liner：匀速；ease：默认，低速开始，加快，在结束前变慢；ease-in：动画低速开始；ease-out动画低速结束；ease-in-out:动画低速开始和结束；steps() 指定了时间函数中的间隔数量(步长)
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1，还有infinte
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal",alternate逆播放。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"，还有paused。
animation-fill-mode 规定动画结束后的状态，保持forwards；回到起始backwards（默认）。

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新的浏览器无须添加。

-moz-：代表firefox浏览器私有属性

-ms-：代表ie浏览器私有前缀

-webkit-：代表safari、chrome私有前缀

-o-：代表opera私有属性

 

推荐写法：

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

 

 

弹性盒
主轴(main axis):伸缩容器的主轴，主要沿着这条轴进行排列布局，不一定是水平的，主要取决于”justify-content“属性

主轴起点（main-start）和终点（main-end） 主轴尺寸（main size）

侧轴(cross axis)：垂直于主轴称为侧轴 方向取决于主轴方向

侧轴起点（cross-start）和终点（cross-end） 侧轴尺寸（cross size）

display:flex 将对象作为弹性伸缩盒显示。

display:inline-flex 将对象作为内联(行内)块级弹性伸缩盒显示。

设置主轴起点和终点：

flex-direction:row 默认位置，主轴横向，从左往右。

flex-direction:row-reverse;主轴方向走，起点在右侧，终点在左侧。

flex-direction:column;主轴纵向，从上往下。

flex-direction:column-reverse;主轴反向，从下往上。

设置和检索伸缩盒子元素超出父容器是否换行：

flex-wrap:nowrap 子元素超出父容器不换行。

flex-wrap:wrap 超出自动换行。

flex-wrap:wrap-reverse 反转wrap排列。


设置或检索弹性盒子元素在主轴方向的对齐方式。

justify-content:flex-start 行起始位置对齐。

justify-content:flex-end 行结束位置对齐。

justify-content:center 行中间位置对齐。

justify-content:space-between 盒子元素平均分布在行内。

justify-content:space-around 弹性盒子元素平均分布在行里，两端保留子元素于子元素之间间距大小的一半。

设置或检索弹性盒子元素在侧轴方向的对齐方式。

align-items:flex-start 弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。

align-items:flex-end 弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴结束边界。

align-items:center 弹性盒子元素在该行的侧轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

align-items:baseline 将文字对齐；

align-items:stretch 如果未设置宽高，那么将元素默认拉伸为父元素高度（默认值）。

设置各行的对齐(类似于justify-content)

align-content:flex-start 各行向弹性盒容器的起始位置堆叠。

align-content:flex-end 各行向弹性盒容器的结束位置堆叠。

align-content:center 各行向弹性盒容器的中间位置堆叠。

align-content:space-between 各行在弹性盒容器中平均分布。

align-content:space-around 各行在弹性盒容器中平均分布，两端保留子元素与间间距大小的一半。

align-content:stretch 各行将会伸展以占用剩余的空间(默认值)。

flex-grow:<number>(default 0); 根据弹性盒子元素设置作为比率分配空间，<number>用数值定义，不允许负值，默认值是0，没有拥有分配空间权力。

flex-shrink:<number>(default 1); 分配超出的空间，默认值为1，如果没有定义该属性，将会自动按照默认值1在所有因子加起来计算比率来进行空间收缩。为0不收缩

设置或检索弹性盒伸缩基准值
flex-basis:<length>; 用长度来定义宽度，负值 
flex-basis:auto; 无特定宽度值，取决于其他属性值
flex-basis:50%; 百分比来定义宽度，不允许负值。

 

 

复合属性：

flex:1; 用于合并指定flex-grow和flex-shrink和flex-basis属性，默认值为0 1 auto。缩写为1：1 1 0；auto：1 1 auto；nome：0 0 auto。

【flex-grow】：定义弹性盒子元素的扩展比率。
【flex-shrink】：定义弹性盒子元素的收缩比率。
【flex-basis】：定义弹性盒子元素的默认基准值。


order:1 更改盒模型对象的子元素出现的顺序，数值最小在前面，可以为负数。

align-self

说明：用于设置弹性元素自身在侧轴方向上的对齐方式。(注意，他和上面的语句区别在于，用于单个定义某元素)
auto：如果align-self的值为’auto'，则其计算值为元素的父元素的‘align-items'值，如果其没有父元素，则计算值为stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/ max-width/height'属性的限制。

 

媒体查询

@media screen and(min-width:1024px){} 当屏幕小于1024px，发生的事

语法一：
@media mediatype and|not|only(media feature){
CSS-Code;
}

语法二：
针对不同的媒体使用不同stylesheets

<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">

media query语法格式中支持设备如下：

all 适用于所有的设备
aural适用于语音和音频合成器
braille 适用于触觉反馈设备
embossed 适用于凸点文字（盲文）和刷设备
handheld 适用于小型或者手提设备
print适用于打印机
projection 适用于投影图像，如幻灯片
sceen 适用于计算机显示器（最常用的一个）
tty适用于使用固定间距字符格的设备如电传打字机和终端
tv适用于电视类设备

 

适配移动端布局使用rem单位，使用时只需要给HTML根标签设一个值，然后给其他元素设rem值，在进行调整时，rem单位会参考HTML的值。