前端 CSS

选择器：

基础选择器：标签选择器 类选择器 id选择器 通配符选择器*{}  

复合选择器：交集选择器 并集选择器 后代选择器 子元素选择器 相邻选择器+

伪类选择器  

:link 未访问的链接

:visited 访问过的状态

:hover鼠标经过什么状态 

:active 点击

结构伪类选择器：p:nth-of-type()

占位符选择器：两个::   placeholder= “ ”

属性选择器：

        /* 以谁为开头 */

        [href^="http"] {

            font-size: 40px;

        }

        /* 以谁为结尾 */

        [href$="m"] {

            font-weight: 900;

        }

        /* 只要包含就行 */

        [href*="m"] {

            background-color: pink;

        }

伪元素选择器：p::first-letter 第一个字或者单词

              P::first-line  第一行

              P::selection  选中的文本

              P::before    p前面

              P::after      p后面

伪元素：

为什么叫伪元素：页面HTML结构中没有元素，但是页面中却真实存在的；

常用：做小图标引用

特点：

行内元素

content属性不能丢

div：hover：：before

伪元素只能用在双标签上；

继承性：

a标签可以继承字体不能继承颜色

H 不能正确的继承字体的大小

可以继承的 text-  line-  color  font-

优先级从小到大：

继承性/*  < 标签选择器 < 类选择器/伪类选择器 < id选择器 < 行内式 < ！important

标签的显示模式：

块级元素block：div ul li ol h p

宽度是浏览器的百分之百

独占一行

能设置宽高

行内元素inline：span a b strong 加粗 i em 倾斜 u ins 下划线  s del 删除线

一行可以显示多个

设置宽高不生效

内容决定他的实际大小

行内块元素 inline-block：input img td

一行有多个

可以设置宽高

盒模型四个部分：

边距 内边距  外边距 内容

字体样式属性：

font-size：字体大小

font-family：字体 宋体 微软雅黑

font-weight：字体粗细

font-style：字体风格italic斜体的字体样式 < oblique倾斜的字体样式

font综合设置：

顺序 style weight font family

可以省略 前两个

letter-spacing 字母/汉字之间的距离

word-spacing  字母与字母直接按的距离

text-shadow：文字阴影

水平位置 垂直位置 模糊程度 阴影颜色

透明的设置

rgba(255,0,0,.5)  后面那个范围0~1

opacity设置元素整体透明 会影响子元素

transparent 谁加谁透明 不影响其他元素

首行缩进

text-indent:2em

em一个字的宽度

Text-decoration:none

Text-decoration:underline 下划线

Text-decoration:overline 上划线

Text-decoration:line-through 穿过文本的线

行高：

顶线

中线

基线

底线

鼠标样式：cursor：default  小白

cursor：pointer  小手

cursor：move   移动

cursor：text    文本

cursor：not-allowed 禁止

外轮廓线：

Outline ：none/0  重点

Outline-style:dotted 点线  dashed 虚线

防拖拽文本域：

Textarea

Resize : none

三部曲：

White-space：norap;

Overflow :hidden;

Text-overflow:ellipsis;

Overflow:scroll  加滚动条

Overfiow:auto  哪边溢出哪边滚动

Display ： none

Display：  block

Visibility ：visible

Visibility ：hidden

背景图片：

Url

No repeat

repeatX

repeatY

位置

background-position:right bottom 水平 垂直

背景附着：

background-attachment：fixed 背景图片固定 scroll  背景图片随对象内容滚动

背景平铺：

Background-repeat：no-repeat   repeatX   repeatY

背景缩放：

background-size：contain 图片铺满

background-size：cover 铺满盒子

综合设置：

background：背景颜色 背景图片

多背景图片  逗号隔开  颜色写最后一个

线性渐变：

Background：-webkit-linear-gradient(deg , red, blue)

精灵图：

background-position: 水平 垂直

边框合并：

Border-collapse：collapse；

块级元素水平居中

元素需要设置宽高

margin : 0 auto;

外边距塌陷：

满足要求：父子关系 嵌套关系  垂直方向

给父元素加边框 border

给父元素加内边框 padding

给父元素加overflow：hidden；推荐

img{ vertical-align：bottom/middle}

box-sizing:content-box;内容区域大小不变 边框和内边距往外扩

box-sizing:border-box; 盒子大小不变 边框和内边距往里扩

盒子阴影：

box-shadow:水平 垂直 虚实 阴影大小  颜色  inset内阴影/外阴影默认

浮动：

浮动的元素不影响前面的标准流  但是影响后面的标准流

浮动会将元素 自动转换成类似行内块

浮动的元素在一行显示

浮动的元素 不会盖住文字

清除浮动：

1. 给父元素加高度height
2. 双伪元素

.clearfix::before,

.clearfix::after {

content: " ";

display: table;

}

.clearfix::after {

clear: both;

}

1. 给父元素加overflow

overflow：hidden

1. 额外标签法

给子元素加clear:both

标准流的子元素可以撑高父盒子

浮动的元素没有办法撑高父盒子

transition: all 1s

过渡效果  all 所有的变化  时间完成这个变化需要的时间

定位：

定位模式+边偏移

static 静态定位

相对定位：position :relative

针对自己原来的位置 元素不脱标

绝对定位：position：absolute

元素一定脱标  

父元素没有定位边偏移是针对浏览器的四个边   

父元素有定位取决于他的父亲

子绝父相

父元素：relative

子元素：absolute

相对定位的元素居中方式；

Position ： absolute

Left:50%

宽的负一半

堆叠顺序：

z-index: 默认值是0，值越大越往前

固定定位：

固定定位的元素只针对浏览器的可视窗口做边偏移，与父元素无关

固定定位的元素一定是脱标的

2D：

位移：

Transform : translate(X ,Y);

百分比计算方式 是针对元素自身的宽度100%

扩展定位居中：

Left:50%

Transform : translateX(-50%);

位移与margin之间的距离：

标准流的盒子

外边距会影响其他的盒子

位移不会影响其他盒子

旋转：

Transition:all  0.3 动画需要的时间

Transform-origin:left bottom  旋转点

Transform-origin:100px 100px 旋转点 根据自身的宽高

Transform-origin:50% 50%    旋转点 根据自身的宽高

谁::hover{

Transform：rotate（45deg）旋转多少度

}

缩放：

Transform-origin:left bottom  旋转点

Transform-origin:100px 100px 旋转点 根据自身的宽高

Transform-origin:50% 50%    旋转点 根据自身的宽高

谁::hover{

Transform：scale（2）

}

综合设置顺序：

Transform：位移-旋转-缩放

动画：

动画三要素：

1. 定义一个动画
2. 调用动画
3. 完成动画所需的时间
4. 动画对行内元素无效

Animation-name:move;

Animation-duration: 1s;

@keyframes move {

From{

transform: translates(0,0)

或者background-position: 0 0

}

To{

transform: translates(300px,0)

background-position: -1600px 0

}

}

序列：

@keyframes 名字 {

0%  transform ：translate（ ，）

50%

100%

}

动画的属性：

运动曲线   linear 匀速

animation-timing-function: linear;

动画推迟多久执行

animation-delay: 3s;

infinite 无限循环

animation-iteration-count: 2/infinite;

翻转

animation-direction: reverse ;

动画结束后，元素样式停留在100%

animation-fill-mode: forwards;

div:hover {

暂停和播放

animation-play-state: paused;暂停

}

综合设置：

animation : 三要素 linear/step(8)  infinite  forwards;

3D:

body{

视距  近大远小

Perspective:500px;

}

transform：translate3d(x,y,z)

旋转：

视距设置给body

3D空间必须加给元素的亲爸爸

Transform-style：preserve-3d;

Transform：rotateX（deg）

Transform：rotateY（deg）

Transform：rotateZ（deg）

谁参与谁1

transform：translate3d(0,0,0, 45deg)

缩放：

scale

XY生效Z不生效

移动端布局

flex布局：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

为移动端设计的

禁止缩放

特点：

没有块和行内块区分

默认不换行

父元素“容器”

子元素“项目”

容器的属性：

设置主轴方向： row横向 column 纵向

flex-direction:row;

flex-direction:column;

让子元素换行 可以保留子元素的宽高

flex-wrap：wrap

设置主轴上元素的排列方式

justify-content:  默认左flex-start   右flex-end  中间center

justify-content:  平分剩余空间space-around   先贴两边  在平分剩余空间space-between

综合设置：

flex-flow：column  nowrap

设置侧轴上元素的排列方式

单行  align-items：center  flex-end

多行  align-content：  flex-end   flex-center  flex-start

align-content:  平分剩余空间space-around   先贴两边  在平分剩余空间space-between

Display:flex

Flex:1

给子元素自己设

align-self: flex-end center

侧轴stretch拉伸 只加宽 没加高

order：-1  4跑到了最前面  排列位置

rem布局：

媒体查询

@media screen and (查询条件min-width: 980px){

}

@media screen and (查询条件min-width: 640px) and (查询条件max-width:970px){

}

最小宽从小值开始写

最大宽从大值开始写

资源引入：

不合理不用

rem+媒体布局

@color:

命名：数字不能开头  14font 错的  不能包含特殊字符  @font！ 错的

区分大小写

Color:@color

less里可以写嵌套关系  

如果不想在嵌套关系产生空格  就在前面加&

rem适配方案

1. 首先选择一套标准尺寸 750px
2. 把页面分成份数  15份  15rem  确定1rem的大小 = 750  / 15rem = 50px
3. 页面中的元素换算成rem 元素在750px设计图的实际大小  /  1rem的大小

引入其他文件

在index.less里引入

@import”common”

在.less里加@名字：15份   @num:15;

@media screen and (查询条件min-width: 980px){

html{

font-size: (320px  /  @num);

}

}

在index.less里加1rem=50px的大小

@basefont:50rem;

640px 的 @num：16份  1rem= 40px

@basefont:40rem

Font-size(12 / @basefont)

响应式布局bootstrap：

原理：

对于各类尺寸的设备，bootstrap设置的class前缀分别是什么？

超小设备：.col-xs

小型设备平板/电脑：.col-sm

中型台式电脑：.col-md

大型台式电脑： .col-lg-3 后面的是份数

布局容器：

link    ” ./bootstrap/css/bootstrap.min.css”

版心设置： <div class="container">123</div>

           <div class="container-fluid">123</div>

Bootstrap栅格系统的工作原理？

在各个档位下，控制子元素布局不同，将版心宽度均分为12份

row能去掉padding值   column不能 （不用它）

列偏移：

是划分好的子项进行的份数偏移

col-xs-offset-4 偏移几份

col-lg-push-  推

col-lg-pull-   拉

元素的隐藏：

<div class="three col-xs-2 hidden-md hidden-sm hidden-xs"></div>