CSS样式记录

CSS样式记录

记录一些个人遇到的花了很久才解决的CSS样式问题，长期更新

el-dialog内容居中

el-dialog是elementUI中的对话框，点击后弹出，如果对话框中有一些表单、文本、图片、视频等内容的话，默认是向左对齐的，官方也没给如何居中对齐的方案，只说了要自己写样式，提供下面两种方案：

方案一——设置el-dialog的内联样式，如下：

.el-dialog .el-dialog__body{
      display: flex;
      justify-content: center;
      align-items: center;
}

经测，这么写有的有效，有的无效，没搞明白是怎么回事，所以不建议这么写

方案二——为el-dialog添加自定义样式，如下：

首先是html的写法：

 <el-dialog :title="videoTitle" :visible.sync="isVideoShow" center width="60%" custom-class="details_class">
     <div>
         这是一段要居中的内容
     </div>
 </el-dialog>

css样式写法：

/deep/ .details_class .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    overflow: auto;
    background: url(../../assets/images/background2.png) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
}

css中主要就是一个流布局和两个居中，其他设置可写可不写，经测，这个有效

内容溢出的处理

很多项目在写全局样式的时候，会写一个overflow:hidden，它的作用是将超出页面部分的内容隐藏起来，这样即使一个页面放不下所有的内容，也不会出现下拉条。据说还有清除浮动、解决边框塌陷的作用。

有些页面需要有下拉条，只需要在当前页面下设置overflow:auto即可

body {
   /*显示竖直方向上的滚动条*/
    overflow-x: auto !important;
    /*显示水平方向上的滚动条*/
    overflow-y: auto !important;
    /*显示水平、竖直方向上的滚动条*/
    overflow: auto;
    /*隐藏滚动条*/
    overflow: hidden;
}

文本内容换行

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：

• normal：默认，忽略文本中所有的空白、换行符；只有文本存在 或文本达到框的约束时，文本才会换行
• nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
• pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 或文本中有换行符时，文本才会换行
• pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
• pre-line：会略文本中的空白符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行

如果遇到文本内容显示不全，很有可能就是设置了white-space:nowrap

屏幕适配相关

@media screen and (max-width: 1654px) {

    .footer-wrap .recommend-box .video-card-reco:nth-child(n+7),
    .wrap .recommend-box .video-card-reco:nth-child(n+7) {
        display: none;
    }
}

1. @media screen and (max-width: 1654px)表示在尺寸小于等于1654px的屏幕上，将下面的元素按要求进行设置
2. .footer-wrap .recommend-box .video-card-reco:nth-child(n+7)用空格隔开表示交集选择，即给所有选择器选中的标签中，相交的那部分设置属性
3. 并集选择用逗号隔开
4. .video-card-reco:nth-child(n+7)表示选择video-card-reco类选择器中第7个及以后的元素
5. display: none;表示隐藏此元素，将元素的显示设为无，即在网页中不占任何的位置，这个设置与visible:hidden作用差不多，但visibility: hidden是将元素隐藏，但是在网页中该占的位置还是占着