常用css样式
body背景图片(自适应屏幕大小)
20190122，再次使用之前的发现不行，总是提示invalid property value。后来发现是空格的问题，复制后background这一行每一个空格都要重新敲一遍，包括前面的四个空格！！！
html,body { height:100%; overflow:hidden;} /*body的高度和宽度为屏幕大小*
body{margin:0;padding:0; list-style:none;}
body{ background:url(./image/bd.jpg) no-repeat center fixed; background-size:100% 100%; }
button样式
用span+a标签实现按钮样式及点击触发事件功能
<span style="padding:10px 20px; margin-bottom:10px; background-color:#f9aa4c; border-radius:5px; text-align:center; color:#FFF; font-size:14px; "> <a style="color: #FFF;font-size:14px;" href="javascript:;" onclick="gotoInterview('{{id}}','{{mobile}}')">发送邀请</a> </span>
移动端开发一定要加上
<meta name="viewport" content="width=device-width, initial-scale=1">
计算屏幕高度
<script type="text/javascript"> autodivheight(); function autodivheight(){ //函数：获取尺寸 //获取浏览器窗口高度 var winHeight=0; if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取浏览器窗口高度 if (document.documentElement && document.documentElement.clientHeight) winHeight = document.documentElement.clientHeight; //DIV高度为浏览器窗口的高度 document.getElementById("chartcontent").style.height= (winHeight) +"px"; } window.οnresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度 </script>
白色透明蒙版,白色透明边框
background: rgba(255,255,255,.2);
border: 1px solid rgba(255,255,255,.3)
图表用蓝色框
/*填充半透明蓝色背景*/ background-color:rgba(1,41,126,0.4); /*蓝色边框*/ border:1px solid #2c6fcd; /*边框阴影 0x-offset 0y-offset 1.5vwblur type为inset内阴影*/ box-shadow: 0 0 1.5vw #1f69b9b9 inset;
边框带角图片
.bs-border { position: relative; border-radius: 3px; background-color:rgba(1,41,126,0.4); border:1px solid #2c6fcd; box-shadow: 0 0 1.5vw #1f69b9b9 inset; background: url(top-left.png) 2px 2px no-repeat, url(top-right.png) calc(100% - 2px) 2px no-repeat, url(bottom-left.png) 2px calc(100% - 2px) no-repeat, url(bottom-right.png) calc(100% - 2px) calc(100% - 2px) no-repeat; overflow: visible; }
渐变色分割线
.gradient-hr { border: none; height: 5px; background: linear-gradient(to right, transparent 0%, transparent 5px, #17b0d7 5px, #17b0d7 25%, transparent calc(100% - 5px), transparent 100%); } <hr class="gradient-hr">
背景图片距离右侧10px(登录框密码框右侧的小图标)
background:url(./image/user.png) no-repeat right 10px center;
将某个div放在底部
#bottom_div{ position: fixed; bottom: 0px; width: calc(100% - 30px); } <!--为了防止覆盖上一个div的内容,可以将上一个div的padding-bottom的值设为底部div的高度--> #pdsaomaPackList{ padding-bottom: 127px; }
元素的中心定位在父元素的中心点
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
用于将一个元素（通常是绝对或固定定位的元素）居中对齐于其父元素。
-
top: 50%;和left: 50%;：将元素的左上角定位到其父元素的正中心。这是通过将元素的顶部和左边距设置为父元素高度和宽度的50%来实现的。 -
transform: translate(-50%, -50%);：这行代码然后将元素向上和向左移动自身的50%。translate函数的-50%, -50%参数意味着元素在X轴（水平方向）和Y轴（垂直方向）上分别移动自己宽度和高度的50%。这种移动是相对于元素自身的尺寸，而不是其父元素。
组合使用这些属性，元素的中心点（而不是左上角）会被定位在其父元素的中心点。
让div在父容器中居中
第一种，要写死高度和宽度
width: 800px; height: 454px; position: absolute; /*父容器的position要为relative*/ left: 50%; top: 50%; margin-left: -400px; /*为div的width的一半*/ margin-top: -227px; /*为div的height的一半*/
第二种，不需要高度和宽度，但是不兼容IE7一下
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
第三种，用css3的transform和position配合
.parent{ position:relative; } .child{ position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50%,-50%); }
子DIV在父容器中垂直居中
margin: 0 auto; /*水平居中*/ position: relative; top: 50%; /*向下偏移父容器的50%*/ transform: translateY(-50%); /*向上偏移自身的50%*/
子DIV均分父容器
<div class="container"> <div class="childDiv"></div> <div class="childDiv"></div> <div class="childDiv"></div> </div> <!-- 浮动布局+百分比 --> <style> .container{ overflow: hidden; zoom:1; width:500px; height:200px; border:1px solid red; } .childDiv{ float:left; width:33.3%; height:100%; border:1px solid red; background:greenyellow; } </style> <!-- 行内元素+百分比 --> <style> .container{ font-size: 0; overflow: hidden; width:500px; height:200px; border:1px solid lightblue; } .childDiv{ display: inline-block; width: 33.3%; height:100%; border:1px solid gray; } </style> <!-- 父元素 display:table + 子元素 display:table-cell --> <style> .container{ width:500px; height:200px; display: table; border:1px solid lightblue; } .childDiv{ display: table-cell; border:1px solid gray; } </style> <!-- display:flex --> <style> .container{ width:500px; height:200px; display: flex; border:1px solid lightblue; } .childDiv{ flex:1; border:1px solid gray; } </style>
弹性布局flex
将一个元素定义为弹性容器（flex container），它使得容器内的子元素能够使用Flexbox布局。这意味着子元素（称为弹性项目，flex items）可以在容器内灵活地伸缩以最佳地填充空间。
- 将
display属性设置为flex可以启用一系列的Flexbox属性，例如justify-content、align-items和flex-direction，这些属性用于控制子div在主轴和交叉轴上的对齐、方向和顺序。 - 默认情况下，使用
display: flex的元素会让其子元素沿着水平方向排列，但你可以通过设置flex-direction属性来改变排列方向。
//在弹性盒子中的子元素的左右排列的 header{ //左右弹性布局 display: flex; height: 100%; // space-between第一个在首和最后一个在尾,中间元素均分 justify-content: space-between; // 垂直居中 align-items: center; }
flex垂直布局自适应剩余空间
<!DOCTYPE html> <html> <head> <style> .container { height: 40vh; /* 设置父容器高度为视口高度的40% */ display: flex; /* 使用flex布局 */ flex-direction: column; /* 子元素垂直排列 */ } .first-child { height: 200px; /* 第一个子元素高度设置为200px */ background-color: lightblue; /* 仅为了视觉效果 */ } .second-child { flex-grow: 1; /* 第二个子元素自适应剩余空间 */ background-color: lightcoral; /* 仅为了视觉效果 */ } </style> </head> <body> <div class="container"> <div class="first-child">固定高度200px</div> <div class="second-child">自适应剩余高度</div> </div> </body> </html>
子元素跟父元素的高度一致
.parent{ position: relative; } .inner-right { position: absolute; top: 0; right: 0; height: 100%; overflow: auto; }
CSS定位
【absolute：绝对定位】
默认参照浏览器左上角，配合TOP、RIGHT、BOTTOM、LEFT（以下简称TRBL）进行定位，具有以下属性：
（1）无TRBL的情况下，参照父级左上角；无父级，参照浏览器左上角；无父级元素，但存在文本，参照最后最后一个文字的右上角为原点但是不断开文字，覆盖与上方。
（2）如果设定TRBL，并且父级没有position属性（不论是absolute还是relative），都是默认以浏览器左上角开始定位，位置由TRBL决定。
（3）如果设定TRBL，并且父级有position属性（不论是absolute还是relative），默认以父级左上角为原点开始定位，位置由TRBL决定。
以上三点我们就可以总结出：若想使用absolute进行定位，那我们就要明确两点：
第一：设定TRBL
第二：父级设定position属性
【relative：相对定位】
默认参照父级原始点为原始点；如果无父级，以文本的上一个元素的底部为原始点，配合TRBL进行定位；当父级内有padding属性时，参照父级内容区的原始点进行定位。
（1）不存在TRBL，参照父级左上角；没有父级，参照浏览器左上角；没有父级元素，但是存在文本，则以文本的底部为原始点进行定位并将文字断开。
（2）设定TRBL，并且父级没有设定position属性，以父级左上角为原点进行定位
（3）设定TRBL，并且父级设定position属性，以父级左上角为原点进行定位，但是如果父级有padding属性，那么以内容区域的左上角为原点进行定位。
综上所述，relative均以父级左上角进行定位，但是受padding的影响。
CSS选择器
元素选择器、类选择器、ID选择器、
选择器分组：,分割
属性选择器：[]
组合选择器：元素.类选择器
后代选择器：空格
子元素选择器：>
相邻兄弟选择器：+
根据屏幕大小适应不同CSS
宽度在1366px像素以内的,字体大小用0.1rem显示
@media(max-width: 1366px){ #chart{ font-size: 0.1rem; } }
