006-CSS-常见问题汇总

1、伪元素与伪类

伪元素：::before、::after 可以实现无交互的小图标等
伪类：:hover、:link 设置元素的hover效果等

2、偏门但好用的样式

3、文字溢出三个点展示

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

4、空白折叠问题

💡 Tips：ul > li 元素布局时，li 元素行内块，设置 li 25% 宽度，但 4 个 li 放不下问题；img 元素在 div 盒子底部有 3px 左右空白问题

对父元素设置 font-size: 0; 会去掉空白折叠，或者子元素编写时不换行。

5、文字的垂直居中

<div class="parent"><span class="text">hello everyone</span></div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  height: 50px;
  width: 500px;
}
.text {
  border: 1px solid #f00;
}

效果图如下：

6、 Vue项目中 在父组件中修改子组件样式

💡 Tips：/deep/、::deep

::v-deep .el-input__inner {
  /* 父页面用了 el-select 组件，修改 下拉框样式 */
}
/deep/ .el-input__inner {
  /* 父页面用了 el-select 组件，修改 下拉框样式 */
}

7、BFC 概念

💡 Tips：BFC 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用；
BFC产生：浮动、定位、display:inline-block;、flex、overflow:hidden;
应用：外边距合并问题、子元素浮动，父盒子高度塌陷问题、清除浮动、两栏布局；

7.1、兄弟元素外边距合并

解决方案：尽量只给一个元素设置 margin。

7.2、父子元素外边距塌陷

解决方案：给父元素设置 margin 保证外边距，给父元素设置 padding 保证内边距。

8、box-sizing

box-sizing 用于在合适的地方设置盒模型的宽高。

8.1、box-sizing: border-box

属性设置之后，设置宽高为整个盒子的最终宽高，实际内容区域宽高受padding、border的影响。

 box-sizing: border-box;
 width: 300px;
 height: 300px;
 padding: 20px;
 border: 1px solid #ccc;

8.2、box-sizing: content-box

box-sizing:content-box 为默认写法，设置宽高为盒模型内容宽高，padding、border都会改变盒子的最终宽高。

 box-sizing: content-box;
 width: 300px;
 height: 300px;
 padding: 20px;
 border: 1px solid #ccc;

8.3、box-sizing 的兼容写法

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

9、flex 布局

1. 父盒子定义：

   	display: flex;
       flex-direction: row;
       width: 1000px;
   

   左侧子盒子给固定宽度，右侧子盒子给 flex: 1；即可实现经典左右布局，右侧子盒子宽度自适应：

   	.flex-left-box {
           width: 400px;
       }
       .flex-right-box {
           flex: 1;
       }
   

   上下布局同理。
2. 实现行内块级元素左右布局：
   父盒子定义：

   	display: flex;
      	justify-content: space-between;
   

   给两个子盒子行内元素即可实现两个子盒子左右分布。
3. flex兼容性写法

   	display: -webkit-flex; /* Safari */
   	display: flex;
   

10、css3 – transform

	.transform {
       -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }

11、css3 – transition

	.transition {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }