css相关

水平垂直居中（flex布局和绝对定位的三个方法）

1. 使用flex布局

• 先给元素开启flex布局，然后通过align-items:center和justify-content:center 来设置容器的水平和垂直方向上居中，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

  .parent {
      display: flex;
      justify-content:center;
      align-items:center;
  }
  

2. 利用绝对定位

• 给父元素设置position:relative,子元素的position:absolute,然后先将元素通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况
• calc和定位的组合使用
  calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能,calc使元素居中的原理和负margin是一样的，calc 允许你基于当前的页面布局计算尺寸。在上面的简单计算中， 50% 是容器元素的中心点，但是如果只设置50%会使图片的左上角对齐div的中心位置。 我们需要把图片向左和向上各移动图片宽高的一半。计算公式为：
  top: calc(50% - (w / 2));
  left: calc(50% - (h / 2));

  .parent {
      position: relative;
  }
  .child {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;     /* 自身 height 的一半 */
      margin-left: -50px;    /* 自身 width 的一半 */
  }
  

3. 利用绝对定位

• 将子元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

  .parent {    
      position: relative;
  } 
  .child {   
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
  }
  

4. 利用绝对定位

• 还是利用绝对定位，给父元素设置position:relative,子元素的position:absolute,然后让子元素的四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

  .parent {
      position: relative;
  }
  
  .child {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  

两栏布局

1. 利用浮动

• 将左边元素宽度设置为固定宽度，并且设置向左浮动。再将右边元素的margin-left设置为左边元素的宽度，右边元素的宽度设置为auto，默认为auto，就会撑满整个父元素）。

2. 浮动结合BFC

• 左侧元素设置固定大小，向左浮动。右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，就可以实现两栏布局。

3. 利用flex布局

• 利用flex布局，将左边元素设置为固定宽度，将右边的元素设置为flex:1。

4. 利用绝对定位

• 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且设置为固定宽度,让左边元素的left值设置为0。将右边元素的margin-left值设置为左边元素的宽度，right值设置为0。

三栏布局（左右两栏宽度固定，中间自适应的布局）

1. 利用flex布局

• 左右两栏设置固定大小，中间一栏设置为flex:1。

2. 利用绝对定位

• 左右两栏设置为绝对定位，然后左右两边设置一个固定宽度，再给右边设置top: 0 right: 0,再将中间元素的margin-left 和 margin-ringht 设置为左右两边元素的宽度就行。

3. 利用浮动

• 左右两栏的宽度设置为固定大小，让它们向对应的方向浮动。然后给中间一栏设置左右两个方向的margin值（这种方式，中间一栏的设置必须放到最后）

4. 圣杯布局

• 利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，这样的话后面两列都被挤到了下一行，然后再将 margin 设置为负值并将其移动到上一行，再利用相对定位，定位到两边。（中间列需要优先渲染）

  .outer {
    height: 100px;
    padding-left: 100px;
    padding-right: 200px;
  }
  .left {
    position: relative;
    left: -100px;
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 100px;
    background: tomato;
  }
  .right {
    position: relative;
    left: 200px;
    float: right;
    margin-left: -200px;
    width: 200px;
    height: 100px;
    background: gold;
  }
  .center {
    float: left;
    width: 100%;
    height: 100px;
    background: lightgreen;
  }
  

5. 双飞翼布局

• 双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

  .outer {
    height: 100px;
  }
  .left {
    float: left;
    margin-left: -100%;
    width: 100px;
    height: 100px;
    background: tomato;
  }
  .right {
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 100px;
    background: gold;
  }
  .wrapper {
    float: left;
    width: 100%;
    height: 100px;
    background: lightgreen;
  }
  .center {
    margin-left: 100px;
    margin-right: 200px;
    height: 100px;
  }
  

position相关

1. 有哪些属性

• static： 默认值，没有定位，元素出现在正常的文档流中，会忽略 top, bottom, left, right 或者 z-index 声明，块级元素从上往下纵向排布，⾏级元素从左向右排列。
• absolute： 绝对定位，相对于父元素进行定位，如果没找到父元素，就以浏览器边界定位。元素的位置通过left、top、right、bottom属性进行规定。
• relative： 相对定位，相对于自身原来的位置进行定位，和其它元素没有关系。元素的位置通过left、top、right、bottom属性进行规定。
• fixed： 绝对定位，相对于屏幕窗口的位置来进行定位，元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。（它具有破坏性，会导致其他元素位置的变化。）
• inherit： 从父元素继承position属性的值。

2. 脱离文档流

• float，absolute ，fixed

文本元素水平/垂直居中

• text-align : justify
• 一个float:left，另一个float:right
• flex中的属性justify-content :space-between

flex相关

1. 概念

• flex弹性盒模型，可以为盒状模型提供最大的灵活性，是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

2. 常见属性

• 改变主轴方向: flex-direction: row|row-reverse|column|column-reverse
• 主轴对齐方式: justify-content: flex-start|flex-end|center|space-between|space-around
• 纵轴对齐方式: align-items: flex-start|flex-end|center|baseline(根据其他文字底线来设置对齐)|stretch(自由撑开高度，当设置高度后，不起作用，显示设置的高度)
• 是否多行显示: flex-wrap: wrap|nowrap|wrap-reverse
• 多根轴线的对齐方式：align-content: flex-start|flex-end|center|space-between|space-around|stretch 主要针对多行元素居中处理，中间没有间隙
• flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• 内容区换行：word-break:break-word

3. flex-grow，flex-shrink和flex-basis

• 弹性盒子的伸缩
  • 伸：flex-grow 后面加上相应的数字,是对应的比例,按比例划分主轴剩余的空间,和父级设置配合使用
  • 缩：flex-shrink: 当子元素本来宽度相同时，缩的使用和伸类似，当子元素本来宽度不相同时，要设置子元素宽度，然后再进行划分。
  • flex-basis 根据内容区来调整宽度，优先级高于width,也可以设置宽度，取代width。区别：只写了basis或者basis > width,代表元素的最小宽度，设置了width 并且basis小于width,则 basis < realwidth < width。

css选择器

1. 选择器优先级

选择器	格式	优先级权重
内联样式	在style中	1000
id选择器	#id	100
类选择器	#classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

2. 伪类选择器

• 伪元素：
  • 定义: 以两个冒号(::)开头，它可以将特殊效果添加到一些不存在的虚拟元素中，比如像::before和::after可以在内容之前或者之后创建一个不在文档树中的元素，给元素添加前缀、后缀。
  • 应用： 比如聊天时都会遇到带箭头的消息对话框，这个时候就可以通过伪元素来完成，给它在元素后面加上::after,然后content:" ",position:relative。
  • 注意： 创建 ::before和 ::after的元素时，必须要设置 content 属性，否则就不存在了。另外 position 也要设置成 relative 或 absolute ，否则布局可能会乱掉。
• 伪类：
  • 定义： 以一个冒号(:)开头，当某些已经存在的选择器的状态改变时，它可以用来向里面添加特殊的效果。
  • 分类：
    • 动态伪类：:visited、:focus、:hover等
    • 状态伪类：:disabled、:empty、:required 等
    • 结构伪类：:first-child、:nth-of-type等
    • 其他伪类：:target、:lang、:not()等
• 两者区别
  • 伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件，而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。

4. 元素可不可以继承

• 可以继承：
  • 字体系列属性---font： 比如font-size等。
  • 文本系列属性---text： 比如text-aligin、line-height、color、letter-spacing等。
  • 元素可见性： visibility控制元素显示隐藏等。
  • 列表布局属性---list-style等： 比如list-style-type、list-style-image等。
• 不可继承：
  • display：规定元素应该生成的框的类型。
  • 文本属性：
    • vertical-align：垂直文本对齐
    • text-decoration：规定添加到文本的装饰
    • text-shadow：文本阴影效果
    • white-space：空白符的处理
    • unicode-bidi：设置文本的方向
  • 盒子模型的属性： width、height、margin、border、padding。
  • 背景属性： background、background-color、background-image、background-repeat、background-position、background-attachment。
  • 定位属性： float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index。
  • 生成内容属性： content。

标准盒模型和怪异盒模型

1. 两者的区别：

• 它们两个的区别在于width和height包含的范围不同。
• 标准盒模型：
  • 它的width和height包含的范围就是content内容区。
• 怪异盒模型：
  • 它的width和height属性的包含范围有content、border和padding。width(最终宽度) = content + paddingX2 + borderX2;
• 触发： box-sizing:border-box;默认是content-box;

常见css布局单位（以下都为相对长度单位）

1. px（像素）

• 也叫作css像素，它是图像显示的基本单元，是一个抽象的概念。

2. em

• 概念： 是相对于其父元素的字体大小，默认是相对于浏览器的字体尺寸,为16px，1em = 16px。m最多取到小数点的后三位。
• 使用： 比如body里声明font-size:62.5%。就相当于全局声明了1em = 16px * 62.5% = 10px，之后可以把em当做px使用。与此同时，1em = 10px，如果在父容器里说明了font-size:20px,那么在子容器里的1em就等于20px。

3. rem

• rem是相对于根元素（html）的字体大小，em 会层层继承父元素的字体大小，很容易造成字体大小的混乱。所以以后用rem会更好。

4. rpx

• 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

4. 百分比 %

• 百分比的计算是相对一个基数的，这个基数与当前元素的包含块有关。比如，基于包含块的宽度来计算的属性：margin, padding, width,基于包含块的高度来计算的属性：top，bottom，height。

5. vw/vh

• vw,视窗宽度，1vw=视窗宽度的1%
• vh,视窗高度，1vh=视窗高度的1%
• 如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

浮动

1. 如何产生浮动（脱离文档流）

• 因为元素脱离了文档流，脱离文档流的话，是一个元素一旦浮动，就会脱离文档流，那么他的父元素也管不了他了，布局也会往前推进，所以才出现了父元素高度坍塌的现象。

2. 如何清除浮动

• 给父级也设置成浮动，但是这种办法，虽然清除了浮动，它的父级的父级也会受到影响，又需要解决更上一级的高度坍塌问题，有点像套娃。
• 触发父元素的BFC，给父级设置overflow:hidden，缺点是如果文本过长，而且包含过长英文时，就会出现英文文本被隐藏的情况;
• 给浮动的元素后面加一个空的div,div上设置clear：both，让它的左右两侧不允许浮动，这迫使了他往下移动，进而撑开了父级盒子的高度。(clear属性是在block上才生效，伪元素默认是内联元素，所以清除浮动时为元素的diaplay:block)
• 给父级设置对应的高度，让父元素定高 ，如果浮动元素是定宽的，那还好，如果是不定宽的，那这种方式就很不灵活了。
• 最优解就是，给父元素的伪元素加上clear:both 伪元素是不会被渲染出来的，也不存在有渲染负担。content: ' '; height: 0; display: block; clear: both;

BFC

1. 概念

BFC(块格式上下文)，是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，是一个块级元素，会在垂直方向一个接一个的排列。

2. 触发条件

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置定位： position值为absolute、fixed；
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow的值为hidden、auto、scroll，不是visible；

3. 布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

4. BFC的应用场景

• 解决块级元素垂直方向margin重叠。可以通过给第一个box外面再包裹一层容器，并触发它形成BFC，此时的两个box就不属于同一个BFC了，它们的布局互不干扰，所以这时候他们的垂直间距就是两者间距相加了。
• 解决高度塌陷问题。当内部元素使用float脱离了普通文档流，导致外层容器没办法撑起高度，这种情况就可以使用BFC来解决，可以直接为外层容器触发BFC。
• 清除浮动。使用浮动元素会脱离普通文档流，可以通过触发这个元素形成BFC来解决。

颜色渐变

1. background-image:渐变色,也可以添加多个颜色

• 线性渐变 linear-gradient:(方向、颜色、颜色)； linear-gradient(to top/0 deg, red green);
• 平铺的线性渐变 repeating-linear-gradient(方向、颜色、颜色);
• 外散渐变(径向渐变) radial-gradient(中心点、颜色、颜色);
• 平铺的外散渐变 repeating-radial-gradient(中心点、颜色、颜色);

动画相关

1.transition

• transition过渡的四个属性
  • transition: transition-property | transition-duration | transition-timing-function | transition-delay
  • transition-property: none|all|属性名称列表 。
  • transition-duration: 完成过渡效果的时间，多少秒或者毫秒。
  • transition-timing-function:规定效果的速度曲线 linear(不变的速度)|ease(慢到快)|ease-in(慢速开始)|ease-out(慢速结束)|ease-in-out(慢速开始和结束)|cubic-bezier(n,n,n,n)0-0的值。
  • transition-delay: 延迟多长时间过渡开始，多少秒或者毫秒, 还可以设置属性让它循环;或者逆着运行;或者一正一反运行;随时运动随时暂停;设置动画运行时的状态。

2.animation 可以实现多个状态的改变

• 格式

      @keyframe name{
                0%{                         
                    属性，属性，......              
                }                              
                ......                   
                100%{                       
                    属性，属性，......              
                }                               
                }
  
                from{
                   属性，属性，......
                }
                ......
                to{
                }
  

• 属性
  • animation:name 时间 速度曲线 延迟时间 动画播放次数(infinite) 是否轮流反向播放(alternate) 最后一帧状态
  • animation-fill-mode:设置动画结束后的状态
    none：默认值。不设置对象动画之外的状态
    forwards：设置对象状态为动画结束时的状态
    backwards：设置对象状态为动画开始时的状态
    both：设置对象状态为动画结束或开始的状态，结束时状态优先\
  • steps(n,start/end)属性是transition-timing-function 和 animation-timing-function的属性值 n:每一步骤动画分成几步完成 start:保留下一帧状态，直到这段动画结束 end:保留当前帧状态，直到这段动画结束

3. transform属性

• rotate(可以一次用多个)
  • rotate(n deg) rotate3d(x,y,z,n deg) rotateX(n deg) rotateY(n deg)(逆时针旋转) rotateZ(n deg)
• scale(大于1伸,小于1缩)
  • scale(x,y) scalx() scaley() scalez() scale3d()
  • scale伸缩的是此元素的变化坐标轴的刻度
  • scale可以进行叠加使用，在前一个基础上进行叠加运算
  • scale会对后面属性产生影响，不会消失，前面所有使用过的scale都会雁过留声
• skew(倾斜元素) 不但坐标轴倾斜,而且刻度被拉伸了
  • skew(n deg) skewx(n deg) skewy(n deg)
• translate(参照自身宽高度进行平移)
  • 定位时当不知道自身宽度，可以应用它，比如left:calc(50%); transform:translatex(-50%)
• perspective 与 translatez配合使用,表示眼睛距离屏幕的距离，可以叠加使用
  • perspective属性必须要设置在父级上
  • perspective-origin的默认值是center center 可以设置观看屏幕的角度，还可以设置三个尺寸，实现3d角度
  • 当translatez的值不超过perspective设置的值是，translatez越大，看到的图片越大
  • perspective功能函数也可以设置在自身上面，然后多个元素显示的结果一样，通过transform:perspective(n px)，最好设置在开头，放在后面有些浏览器不识别，设置这个属性后不能设置perspective-origin了。
  • transform-style:preserve-3d;

元素隐藏/显示

1. display相关

属性值	作用
none	元素不显示，并且会从文档流中移除。
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示。
list-item	像块类型元素一样显示，并添加样式列表标记。
table	此元素会作为块级表格来显示。
inherit	规定应该从父元素继承display属性的值。

2. 隐藏元素

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：会被渲染不会消失，元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0) ：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

3. 行元素和块元素区别

• 行元素：
  • 不可以设置元素宽高。
  • 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin。
  • 不会自动换行。
• 块级元素：

  • 可以设置元素宽高。

  • 设置margin和padding都有效。

  • 可以自动换行。

  • 多个块状，默认排列从上到下。