CSS:几种常用的CSS

伽蓝央央
90 阅读1分钟

风车.png CSS


辣椒.png 实现一条0.5px的线

<div class="line"></div>

.line{
  width: 500px;
  background: #0a0d16;
  height: 1px;
  transform: scaleY(0.5);
}

辣椒.png CSS实现宽度自适应宽高16:9的矩形

1655437479522.png

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{
  width: 500px;
}
.box{
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  background: pink;
}

辣椒.png 用纯css实现一个三角形

实现三角形的方式有很多，主要根据需要的三角形的形状进行选择。

用border实现

1655437898199.png

.triangle{
  width: 800px;
  display: flex;
}
.triangle-item{
  height: 0;
  width: 0;
  margin-right: 30px;
  border:30px solid transparent;
}
.top{
  border-top-color:pink
}
.left{
  border-left-color:pink
}
.bottom{
  border-bottom-color:pink
}
.right{
  border-right-color:pink
}

<div class="triangle">
  <div class="triangle-item top"></div>
  <div class="triangle-item left"></div>
  <div class="triangle-item bottom"></div>
  <div class="triangle-item right"></div>
</div>

辣椒.png 圣杯布局和双飞翼布局

这两种布局都是实现两边定宽，中间自适应的三栏布局。中间栏要放在文档流前面优先渲染

1677050607574.jpg

区别：
圣杯布局：布局设置了**padding-left** 和**padding-right**。左右布局使用相对定位**postion：relative**来实现和**margin-left**
双飞翼布局：双飞翼布局是早起淘宝对圣杯布局的一种优化，使用内部盒子，增加了一层结构来解决，左右盒子定位的问题。中间布局使用外部盒子的子div来实现，inner盒子左右用margin留出位置。

******圣杯布局*****
<body>
<div class="my-body">
  <div id="middle">这里的文字需要优先显示</div>
  <div id="left"></div>
  <div id="right"></div>
</div>
  <style>
    body{
      margin: 0;
    }
    .my-body{
      clear: both;
      padding: 0 180px;
    }
    #middle{
      float:left;
      width:100%;/*左栏上去到第一行*/
      height:500px;
      background:rosybrown;
    }
    #left{
      float:left;
      width:180px;
      height:500px;
      margin-left:-100%; /* 左边距为负的中间盒子的宽度 */
      background:#0c9;
      /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
      position:relative;
      left:-180px;
    }
    #right{
      float:left;
      width:180px;
      height:500px;
      margin-left:-180px;  /*其左边距为负的自己的宽度*/
      background: #becc00;
      /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
      position:relative;
      right:-180px;
    }
  </style>
</body>

******双飞翼布局*****
<body>
<div class="my-body">
  <div id="middle">
    <div class="inner">
      这里的文字需要优先显示
    </div>
  </div>
  <div id="left"></div>
  <div id="right"></div>
</div>
  <style>
    body{
      margin: 0;
    }
    .my-body{
      clear: both;
    }
    #middle{
      width:100%;
      float:left;
    }
    #middle .inner{
      height:500px;
      margin:0 180px;
      background:rosybrown;
    }
    #left{
      float:left;
      width:180px;
      height:500px;
      margin-left:-100%; /* 左边距为负的中间盒子的宽度 */
      background:#0c9;
    }
    #right{
      float:left;
      width:180px;
      height:500px;
      margin-left:-180px;  /*其左边距为负的自己的宽度*/
      background: #becc00;
    }
  </style>
</body>

辣椒.png 修改chrome记住密码后自动填充表单的黄色背景

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
   -webkit-text-fill-color: #000;
   -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
}

辣椒.png 让网页的的字体变细

//抗锯齿
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-rendering: optimizeLegibility
avatar
文章
阅读
粉丝