Fork me on GitHub

常用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;
      }
}

 

posted @   秋夜雨巷  阅读(185)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 一文读懂知识蒸馏
· 终于写完轮子一部分：tcp代理 了，记录一下
点击右上角即可分享
微信分享提示