CSS总结一

作者: 笨_不重要 | 来源:发表于2018-09-12 15:38 被阅读0次

css伪元素
CSS学习总结
2022-04-03
css reset 总结
2018-07-20
CSS总结一
CSS hack 原理
less总结
CSS样式表技巧总结
CSS教程汇总

一、背景图片占屏幕的全屏

body{
    width:100%;
    background: url(images/bg.jpg) no-repeat fixed;
    background-size: 100% 100%;
}

二、使用flex布局让文字垂直居中

1：html

<div class="content">
    <div class="left">
        <img src="common/images/brand6.jpg" alt="">
    </div>
    <div class="right">
        <p>使用flex布局让文字垂直居中使用flex布局让文字垂直居中使用flex布局让文字垂直居中使用flex布局让文字垂直居中使用flex布局让文字垂直居中使用flex布局让文字垂直居中</p>
    </div>
</div>

2：css

.content{display: flex;}
.left{float:left;width:30%;display: flex;flex-direction:column;justify-content:center;}
.right{float:left;width:60%;display: flex;flex-direction:column;justify-content:center;}
.right p{padding:2px 20px;margin:0;}

三、css分列多行

.ranking_screen ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top:1px solid #ECECEC;
    border-left:1px solid #ECECEC;
}
.ranking_screen li{
        display: flex;
        flex-direction: column; /*在父元素上的排列方向为垂直方向*/
        justify-content: center; //在父元素上的垂直对齐方式
        width:25%;
    text-align: center;
    border-bottom:1px solid #ECECEC;
    padding:0.2rem 0.1rem;
    border-right:1px solid #ECECEC;
    box-sizing: border-box; /*让border padding等都计算到宽度里面*/
}

父元素必须设置display:flex; flex-wrap: wrap;
如果子元素需要有border或者padding时需要加上box-sizing: border-box;
将border计算到宽度里面

四、文字超过行数就显示...

text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
 -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
 -webkit-line-clamp: 1; /** 显示的行数 **/
overflow: hidden;  /** 隐藏超出的内容 **/

五、移动端左右两列，左边一列固定，右边自适应

1：html

<div class="content">
    <div class="left"></div>
    <div class="right"></div>
 </div>

2：css

.content{
    display:flex;
    position:absolute;
    width:100%;
    overflow:hidden;
}
.left{
    flex:0 0  80px;
    width: 80px;
}

六、IE文档模式更改为标准模式

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

七、从主屏打开客显屏且全屏

1：从主屏跳转新窗口

//toolbar：工具栏 location：历史栏 status：状态栏 menubar：菜单栏 scrollbars：是否显示滚动条 titlebar：标题栏 resizable：改变窗口大小
window.open('/index.html','show','top=0,left=0,toolbar=no,height=0,width=0,location=no,status=no,menubar=no,scrollbars=no,titlebar=no,resizable=no');

2：在客显屏页面设置

window.onload = function(){
    var screenW = window.screen.width;//屏幕的宽
    var screenH = window.screen.height;//屏幕的高
    window.resizeTo(screenW+6, screenH+24); //窗口宽度高度调整为
    window.moveTo(1021,-24);//将窗口移动到客显的位置 (-24是因为浏览器自带的最上面那一栏去不掉所以往上便宜栏目的高度)
}
//bug  IE8浏览器上自带的蓝色边框去不掉