css项目中总结

calc的用法

  width: calc(100% - 20px);    减号前后要拥有空格，width: calc(100%-20px);
calc(40% - 0.3rem);
width: calc( 80rem/ 50)

margin-right对于子和父都设置宽度的元素无效。
（因为dom流默认是从左到右的，只是看着无效，一旦同时使用margin-left和margin-right的话，就会知道有效了！！）

display：inline-block的子元素设置设置line-height无效？？

padding为啥影响border-radius

1.左右浮动的div一旦缩小页面div会掉下来

当页面足够宽时，两个浮动元素还可以共存在一行，一旦页面缩小，就会出现此现象。究其原因是因为父元素parent未设置宽度从而继承了body的宽度，即width:100%，页面呈现多宽，父元素就多宽。

我这里的解决方法是设置父元素parent的width属性大于两个子元素的宽度之和，这样浮动的子元素就只能一直在父元素中存在。

3.margin-right无效

浏览器默认从左向右渲染，所以元素是从左向右排列的，margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果
解决方案：
1、在CSS里设置：float：right，这时margin-right有用
2、它的右面有其他盒子

4.margin-top的父子margin共享问题

什么是margin共享？ 其实就是子元素的margin-top会传递给父元素。
具体来举个例子

根据定义我们可以知道了

同级的兄弟元素 和 嵌套的父子元素的父元素 在没有非空内容、Padding或Border分割的情况下就会出现这个情况。（什么情况？margin共享哦）

解决嵌套的父子元素margin共享办法

父级或子元素使用浮动或者绝对定位absolute（浮动或绝对定位不参与margin的折叠）
父级overflow:hidden;
父级设置padding（破坏非空白的折叠条件）
父级设置border（破坏非空白的折叠条件）

5.浮动不能和绝对定位同时使用，可以和相对定位使用

6…local-nav li [class^=“local-nav-icon”] {} //属性选择器注意要把li和后面的空格隔开。要不然不会生效！！！！

7.background记得写在background-siz下面

  background: url(../images/sprite.png) no-repeat -59px -194px;
  background-size: 104px auto;
  /* 记得写把backgorund-size写在background下面 */
  margin: 4px auto -1px ;

8.padding不会撑开盒子的情况

如果盒子本身没有指定宽度的情况下，那么padding不会撑开盒子的大小。

9.浮动的元素 不会压住标准流的文字定位元素会

10.vertcal-align的应用

1. 实现行内块和文字垂直居中对齐
2. 解决图片底侧的空白缝隙。

11.常见的布局技巧

1. margin负值的运用
   1. 让每个盒子margin 往左移动 -1px 刚好压住相邻盒子边框
   2. 鼠标经过某个的时候，提高当前盒子的层级即可（如果没有定位，则鼠经过添加加相对定位(保留位置)，如果有定位，则加 z-index）.
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. css三角强化

12.子元素不设置宽度的情况下，margin: 0 auto无效

13.行内元素的padding-top、padding-bottom无效

行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

14.text-align的是给父元素添加的，给子元素（行元素）添加无效。

15.使用elementui图标按钮调整宽高后图标不居中

调整宽高后，图标就不居中显示了，找到button的类，重新设置下padding，找到合适的值即可。

16.当前元素设置display:flex后，当前元素设置height:100%无效怎么办？

那是因为子元素的height计算优先于flex布局，那么Height参照值就会为0。在flex布局中不需要为子元素设置height:100%，flex布局会自动为子元素100%高度.
它的父级没有值，也就是你的100%没有告诉它是参照谁的100%。
比如你现在是0，那0的100%不就是0吗。
并且你的当前元素中，也没有内容，所以高度没有被撑开，
你填充内容就好了，或者给父级高度。

17.css边框太密使边框虚线长一点

    padding: 1em;
    border: 1px dashed transparent;
    background: linear-gradient(white, white) padding-box,
      repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.55em, white 0, white 0.75em);

18. 文字渐变 效果

   //background: linear-gradient(180deg, #03f7fc 0.1220703125%, #01afe9 100%);
   //-webkit-background-clip: text;
   //-webkit-text-fill-color: transparent;

---

难点效果

实现上面的边框（用border样式是达不到这个效果的）

  .content {
    height: 180px;
    margin: 20px;
    padding: 1em;
    border: 1px dashed transparent;
    background: linear-gradient(white, white) padding-box,
      repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.55em, white 0, white 0.75em);
  }

---

element-ui 中css总结

vue+element中upload上传文件是会闪一下的问题

使用el-upload组件上传图片，在回显图片、添加删除图片时均有闪动效果，解决该问题

解决办法：

/*去除upload组件过渡效果*/

/deep/ .el-upload-list__item {
    transition: none !important
}

el-table 的border-bottom无法消除：用下列代码

  ::v-deep .el-table--border::after,
  ::v-deep .el-table--group::after,
  ::v-deep .el-table__fixed-right::before,
  ::v-deep .el-table::before {
    background-color: transparent;
  }

el-input el-selsect 等改变高度后，右侧icon不居中

直接将.el-input__icon 的 height 和 line-height 设为相同的值即可

设置el-form的inline属性可以变为inline的form

页面出现滚动条的原因

• 大多时候是高度超出，但是这个引起高度超出的原因要找下
• 又是可能是横向宽度超出出现的滚动条，不一定是高度超出
• 某个元素的line-height太大的话，也可能引起滚动条

关于布局

1. display可以使它的子项目的子标签里的display统统变为block;
2. 父元素里的设置display:flex后;由于display布局是弹性布局，所以它的子元素里的即使为块元素标签，如果不设置宽度为100%，这些块元素也不会独占一行。

关于书写正确性

在写login页面时候，引入完成header组建后，我在section下创建了一个表单组件，但是由于拼写不注意，导致错写成from,然后我给这个表单添加背景色，margin值等都为生效。故而一直纠结。最后在火狐·浏览器的F12-布局-盒模型那里看到表单的display属性为inline。又想起表单组件是一个块级元素，忽地才知道是自己form拼写错误了，导致一直加不上css属性。。

flex布局再思考

使用flex布局时候，容器属性 display：flex；只对它的儿子元素有效。对它的孙子以及后代元素不会产生弹性布局效果。所以我们使用弹性布局时候，一定要先看清元素结构，选择设定好 那个元素为项目元素。

display: inline-block

对行级元素标签使用了 display: inline-block后，这些行内块元素在一行上显示，且能够设置宽度和高度。 但是他们的宽度和高度不会继承父元素的100%，是被内容所撑起来的，内容有多大，元素大小随之变化。

transtion标签里加上section可以写多个

overflow: hidden只有对在dom中存在的元素有效。

如果子元素脱离标准流后，父元素也要脱离标准流才使该属性有效

图片如何自定义宽高比

思路是通过设置父元素的高度为0，使用paadding撑大父元素的高度，（默认利用的是padding百分比其实是相对于元素自身的宽度来说的）

.img-content {
  width: 100%;
  position: relative; // 使用相对定位
  height: 0; // 高度设置为0，使用padding来设置高度
  overflow: hidden;
  padding-bottom: 70.88%; // 使用padding-top也可，使用padding来撑高容器，高度为宽度的 70.88%
  img {
    position: absolute; // 使用绝对定位
    width: 100%; // 宽高为容器的宽高
    height: 100%;//绝对定位百分比是相对于 padding-box计算的
    top: 0;
    left: 0;
  }
}

消除伪元素上动画对绝对定位的left和top值的影响

绝对定位的百分值会变化，是不是渲染中心啥的变化了。下图伪元素left和top为啥要写 0%

    .center-box {
      position: relative;
      width: 594px;
      height: 594px;
      margin: 0 auto;
      &::after {
        content: "";
        position: absolute;
        left: 0%;
        top: 0%;
        transform: translate(-50%, -50%);
        background-image: url('@/assets/map_bg.png');
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        animation: rotateZanimation 2s linear 0s infinite;
      }
    }

如果需要子元素为旋转动画，同时相对于父元素居中的话，需要把父元素写为flex布局 的居中原理，因为flex布局不会受animation的影响

  .yj-animation-box {
    width: 152px;
    height: 152px;
    background-image: url('@/assets/wp.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
      .yj-animation-wrapper {
	    width: 119px;
	    height: 121px;
	    background-image: url('@/assetsround.png');
	    background-size: 100% 100%;
	    animation: rotateZanimation 2s linear 0s infinite;
	  }
  }

如果还需要第二个子元素覆盖在动画上，只需要把子元素和动画锁在元素写为同级，同时写为绝对定位就好了
因为绝对定位的元素脱离了文档流，漂浮在空中，同时又受父元素的justify-content: center;align-items: center;所以会定位在父元素的中心，同时覆盖在上面那个兄弟元素上

unset

1. 如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，换句话说，这种情况下（继承属性）它的行为类似于inherit ；
2. 如果没有继承父级样式，则将该属性重新设置为初始值，这种情况下（非继承属性）类似于initial。

我们可以通过给input框设置 all: unset 可以去掉所有样式，变为普通的div

添加鼠标禁用效果

cursor: not-allowed; //是禁用的样式 一个圆圈中间一个斜杠
cursor: no-drop;