css常用样式

已于 2023-12-25 14:22:59 修改
阅读量1.5k 收藏 9
点赞数
分类专栏： Vue 文章标签： css css3 html
于 2022-08-06 17:31:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Litt_White/article/details/125862950
版权

css常用样式

一、CSS常用选择器

深度选择器

<div class="box1">
  <div class="box2">
    <div class="box3" style="width:150px;"></div>
  </div>
</div>
<style>
.box1 >>> .box3{
  background: transparent;
  cursor:pointer;
}
</style>

:first-child 选择器（选择的是 : 前的标签 ）

<div class="div1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</div>
<style>
  .div1>li:first-child {
    background-color: yellow;
  }
</style>

:nth-child() 选择器

<div class="div1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</div>
<style>
  .div1>li:nth-child(2) {  // 获取第二个li标签
    background: #ff0000;
  }
  .div1> :nth-child(3) {  // 获取div下的第3个子元素
    background: pink;
  }
  div:nth-child(even) { // 获取偶数
	background-color: #ccc;
  }
  div:nth-child(odd) { // 获取奇数
	background-color: #ccc;
  }
</style>

:not(X)否定选择器：匹配不符合参数选择器X描述的元素。

https://blog.csdn.net/weixin_47077674/article/details/120151381

<div class="div1">
  <p class="p1">p1</p>
  <p class="p2">p2</p>
  <p class="p3">p3</p>
  <p class="p3">p3</p>
</div>
<div class="div2">
  <p class="p1">p1</p>
  <p class="p2">p2</p>
  <p class="p3">p3</p>
  <p class="p3">p3</p>
</div>

<style>
  .div1>.p3 {
    color: pink;
    background-color: #000;
  }

  .div1:not(.p3) {
    color: red;
    background-color: #fff;
  }
</style>

:is() 和:where()选择器（where优先级是0，is根据里面的标签优先级决定）

<div class="div1">
  <p>p1</p>
</div>
<div class="div2">
  <p>p2</p>
</div>

<style>
  :is(.div1, .div2) p {  /* 等效于：.div1>p,.div2>p {color: red;} */
    color: red;
  }
</style>

二、常用样式

1、水平垂直居中（元素）

（1）flex水平垂直居中

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
 .parent {
   width: 600px;
   height: 100px;
   display: flex;
   flex-direction: row; /* 主轴为水平方向，起点在左端(默认) */
   /* flex-direction: column;  主轴为垂直方向，起点在上沿  */ 

   /* 主轴元素对齐方式 */
   justify-content: center;                /* 主轴居中 */   
   /* justify-content: space-between;      均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
   /* justify-content: space-around;       均匀排列每个元素，每个元素周围分配相同的空间 */
   /* justify-content: space-evenly;      均匀排列每个元素，每个元素之间的间隔相等 */
   /* justify-content: start;              从行首开始排列 */
   /* justify-content: end;                从行尾开始排列 */
   /*justify-content: flex-start;          从行首起始位置开始排列 */
   /*justify-content: flex-end;            从行尾位置开始排列 */
   /*justify-content: left;                一个挨一个在对齐容器得左边缘 */
   /*justify-content: right;               元素以容器右边缘为基准，一个挨着一个对齐, */

   /* 交叉轴（另一条轴）对齐方式 */
   align-items: center; /* 单行 */
   align-content: center; /* 多行：space-between，space-around等 */

   /* 主轴是否换行 */
   flex-wrap: nowrap; /* (默认值) 不换行压缩宽度 */
   /* flex-wrap: wrap;   换行 */

   background-color: black;
 }
 .left,
 .right {
   width: 100px;
   height: 50px;
   background-color: #fff;
 }
</style>

（2）定位+margin 水平垂直居中

<div class="div1">
  <div class="center"></div>
</div>
<style>
  .div1 {
    background-color: #eee;
    width: 200px;
    height: 200px;
    position: relative;
  }
  .div1 .center {
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

（3）定位+transform 水平垂直居中

<div class="div3">
  <span class="center">元素宽高未知</span>
</div>
<style>
 .div3 {
   background-color: #eee;
   width: 200px;
   height: 200px;
   position: relative;
   margin-top: 20px;
 }
 .div3 .center {
   color: #fff;
   background-color: rgb(34, 71, 139);
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
</style>

（4）相对定位、绝对定位、固定定位、粘性定位

<div>
  absolute(绝对定位):
    （1）先看父元素（absolute或者relative），依次往上找，最后看文档主体（body）即浏览器。
    （2）脱离文档流的，即直接在标准流中删除，所以元素原来的位置会被占用。
</div>
<div>
  relative(相对定位):
    （1）相对于自己的正常位置进行定位，参考点是标签定位之前的位置，不是相对于父节点、同级节点或浏览器。
    （2）不会脱离文档流。
</div>
<div>
  fixed(固定定位):
    （1）相对于浏览器窗口进行定位。
    （2）会脱离文档流。
</div>
<div>
  sticky(粘性定位):
    （1）relative+fixed。
    （2）常用于表单的保存行固定，表单滚动，底下的操作固定。
</div>

（5）浮动无宽度-水平居中

<div class="box">
  <p style="background-color: pink">我是浮动的</p>
  <p style="background-color: skyblue">我也是居中的</p>
</div>
<style>
.box {
  float: left;
  position: relative;
  left: 50%;
}
p {
  float: left;
  position: relative;
  right: 50%;
}
</style>

2、元素阴影效果

<div class="a4"></div>
<style>
.a4 {
  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .9); /* 四周阴影*/
  /* 常规：box-shadow:水平位置(横向显示阴影) 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */ */
  /* box-shadow: 10px 10px 5px #888888; */
}
</style>

3、滚动和隐藏滚动条

<div class="a1">
 overflow属性实现横向纵向滚动条
</div>
<style>
  .a1 {
    width: 100px;
    height: 100px;
    background-color: #acffcb;
    overflow: scroll;  /* 滚动 */
    overflow: hidden;  /* 隐藏 */
    overflow-y: scroll;  /* y轴滚动 */
  }
  /* 隐藏overflow滚动条方法 */
  .a1::-webkit-scrollbar {
    display: none;
  }
</style>

4、图片和文字水平垂直居中

（1）图片和单行文字对齐（图片对齐）

<div class="div1">
  <img src="./ico-交地.png" alt="" class="ico1" />
  单行文本
</div>
<style>
 .div1 {
   display: flex; /* 水平 */
   align-items: center;
   justify-content: center;
   background-color: pink;
 }
 .ico1 {
   width: 40px;
   height: 40px;
   vertical-align: middle; /* 垂直对齐图像 */
 }
</style>

（2）图片和多行文字对齐（文本对齐）

<div class="div1">
  <img src="./ico-交地.png" alt="" class="ico1" />
  <div>
    <div>两行</div>
    <div>两行文字</div>
    <div>两行文字</div>
  </div>
</div>
<style>
 .div1 {
   display: flex; /* 水平 */
   align-items: center;
   justify-content: center;
   text-align: left; /* 文本的对齐方向：center,left,right */
   width: 200px;
   height: 200px;
   background: pink;
 }
 .ico1 {
   width: 40px;
   height: 40px;
   vertical-align: middle; /* 垂直 */
 }
</style>

5、文字超出隐藏

<div>设置文字超出溢出时显示省略号</div>
<style>
 div {
   width: 100px;
   height: 40px;
   line-height: 40px;
   background-color: pink;
   /* 隐藏 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   /* 多行隐藏 */
   /* display: -webkit-box;
   -webkit-line-clamp: [2, 3, 4]; //填写数字代表第几行省略
   -webkit-box-orient: vertical;
   overflow: hidden; */
 }
</style>

6、布局：左固定右适应、左右固定中适应

（1）左固定右适应（水平）

<div class="flexbox">
  <div class="leftbox"></div>
  <div class="rightbox"></div>
</div>
<style>
 .flexbox {
   display: flex;
   height: 300px;
   width: 700px;
 }
 .leftbox {
   width: 200px;
   background-color: #ffcccc;
 }
 .rightbox {
   flex: 1;
   width: 100%;
   background-color: skyblue;
 }
</style>

（2）左固定右适应（水平）

<div class="wrap">
  <aside id="left"></aside>
  <section id="main"></section>
  <aside id="right"></aside>
</div>
<style>
 .wrap {
   margin: 0 auto;
   width: 80%;
   height: 500px;
   display: flex;
 }
 #left {
   background: #ccffff;
   flex: 0 0 200px;
 }
 #right {
   background: #ccffff;
   flex: 0 0 100px;
 }
 #main {
   background: #ffcccc;
   flex: 1;
 }
</style>

（3）上下固定中适应（垂直）

<div class="wrap">
  <aside id="left"></aside>
  <section id="main">
    vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。1vw等于视口宽度（viewport
    width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport
    height）的百分之一。
  </section>
  <aside id="right"></aside>
</div>
<style>
 .wrap {
   margin: 0 auto;
   width: 80%;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 #left {
   background: #ccffff;
   flex: 0 0 100px;
 }
 #right {
   background: #ccffff;
   flex: 0 0 100px;
 }
 #main {
   background: #ffcccc;
   flex: 1;
 }
</style>

7、布局：头固定+内容滚动

（1）头尾固定+中间滚动

<div class="box">
 <div class="title">标题</div>
 <div class="list">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>...</li>
     <li>3</li>
   </ul>
 </div>
 <div class="footer">底部</div>
</div>
<style>
.title,
.footer {
  width: 100px;
  height: 60px;
  text-align: center;
  background-color: skyblue;
}
.list {
  width: 130px;
  height: calc(100vh - 60px - 60px);
  background-color: blue;
  overflow-y: scroll;
}
.list::-webkit-scrollbar {
  display: none;
}
</style>

（2）头部固定+table表头固定+table表格滚动

<div class="list">
  <div class="table-title">
    <table>
      <thead class="fixed-thead">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="scroll-table-content">
    <table>
      <tbody class="scroll-tbody">
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.list {
  height: 200px;
  width: 150px;
  background-color: pink;
  display: flex;
  flex-direction: column;
}

.scroll-table-content {
  background-color: green;
  flex: 1;
  overflow-y: scroll;
}

.scroll-table-content::-webkit-scrollbar {
  display: none;
}
</style>

8、网格布局（display: grid;）

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    display: grid;
    /* 行与列的间隙，不带（上下左右）四个边 */
    grid-gap: 10px;
    /* 带上四边，可以设置padding = grid-gap */
    padding: 10px;

    /* 控制列数，100px代表每列的宽度 */
    /* grid-template-columns: 100px 100px 100px; */
    /* grid-template-columns: 1fr 1fr 1fr; */    /* fr是整个宽度的占比，类似于flex：1 */
    /* grid-template-columns: repeat(6, 100px); */   /* repeat()指定列和行的方法，第一个参数是列数或行数，第二个是宽度或高度 */
    /* grid-template-columns: repeat(3, 33%); */
    grid-template-columns: repeat(6, 1fr);
    /* grid-template-columns: repeat(auto-fit, 100px); */   /* auto-fit：自适应数量 */
    /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 根据页面宽度自适应，宽度最小100px*/     /* minmax() 设置大于等于 min 且小于等于 max，最小是100px，最大是1fr */

    /* 控制行数，50px代表每行的高度 */
    /* grid-template-rows: 50px 50px; */
    /* grid-template-rows: repeat(2, 50px); */
    background-color: skyblue;
  }

  .item8 {
    /* grid-area：自定义网格的位置和大小 */
    /* grid-area：grid-row-start，grid-column-start，grid-row-end，grid-column-end */
    /* grid-area：行开始，列开始，几行结束，几列结束 */
    grid-area: 2 / 1 / span 2 / span 3;
  }

  .container div {
    text-align: center;
    line-height: 50px;
    border: 2px solid;
    background: #fff;
  }
</style>

9、文本对齐

（1）文字左右两端对齐

<div class="box1">测试文字</div>
<div class="box2">测试</div>

<style>
  .box1,
  .box2 {
    width: 200px;
    height: 50px;
  }
  .box1 {
    /* text-align: right/left/center/justify; */
    text-align: justify;
    background-color: skyblue;
  }
  .box2 {
    text-align: justify;
    background-color: pink;
  }
</style>

（2）文字换行的几种方式

p {
word-wrap: break-word;
}
p {
white-space: pre-wrap;
}
p {
overflow-wrap: break-word;
}

（3）有文字和数字情况下，数字自动再第二行

p {
word-break: break-all
}

10、背景色

<div class="box1">透明背景色</div>
<div class="box2">背景色缩写</div>
<div class="box3">设置背景图片大小</div>

<style>
  .box1 {
    background: transparent;
  }
  .box2 {
    /* background: 颜色，图片，重复，滚动，位置 */
    background:  #00ff00 url('smiley.gif') no-repeat fixed center;;
  }
  .box3 {
    /* background: 颜色，图片，重复，滚动，位置 */
    background-size:  #00ff00 url('smiley.gif') no-repeat fixed center;;
  }
</style>

11、CSS 修改盒子模式

普通的盒子模型我们设置border和padding都会将盒子撑大。
通过box-sizing:border-box;指定盒子模型改变计算盒子大小的方式。

box-sizing:border-box;：告诉浏览器，你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，

12、关于margin塌陷（合并）

导致边距塌陷的两种情况:

（1） 同级元素塌陷

两个同级元素，垂直排列。上面的盒子给了margin-bottom，下面的盒子给了margin-top。那么这两个边距将会重叠，按照大的值来计算。

<div class="father"></div>
<div class="son"></div>

<style lang="less">
.father {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin-bottom: 20px;
}
.son {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 30px;
}
</style>

在这里插入图片描述
解决办法：简单粗暴——不让这两个边距同时出现。

（2） 父子元素塌陷

两个父子元素，内部的子盒子给了margin-top，父元素也会受到影响，同时产生上边距，也就是父子重合（粘连）。

<div class="father">
  <div class="son"></div>
</div>

<style lang="less">
.father {
  width: 100px;
  height: 100px;
  background-color: pink;
}
.son {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-top: 30px;
}
</style>

在这里插入图片描述

（3）解决方案

（1）给父元素father添加一个border边框，比如：border: 1px solid transparent;
（2）给父元素添加一个overflow: hidden;（最常用）
（3）给父元素添加一个position: fixed;
（4）给父元素添加一个display: table;
（5）将子元素的margin改为父元素的padding
（6）给子元素son添加一个兄弟元素属性为content:“”;overflow: hidden;

13、width: 100%+padding超出布局的问题

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

<style lang="less">
.box {
  width: 100%;
  height: 300px;
  border: 1px solid blue;
  padding-left: 50px;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: pink;
}
</style>

在这里插入图片描述

解决方案：修改盒子模式为：box-sizing:border-box;。

13、行内元素设置margin和padding不生效(问题)

（1） 行内元素

特性：

  • 和相邻的内联元素在同一行
  • 宽度(width)、高度(height)、外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小
  • 内边距的top/bottom(padding-top/padding-bottom)说下不能改变，但实际测试是可以改变的

常见元素标签：

a , em , i , img , input , span ,

demo案例

<div class="box">
 <span class="box1">测试行内元素</span>
</div>

<style lang="less">
.box {
  width: 300px;
  height: 300px;
  border: 1px solid blue;
}
.box1 {
  display: inline;
  width: 100px; // 行内元素不生效
  height: 100px; // 行内元素不生效
  margin-top: 50px; // 行内元素不生效
  margin-bottom: 50px; // 行内元素不生效
  padding-top: 50px; // 生效
  padding-bottom: 50px; // 生效
  background-color: pink;
}
</style>

在这里插入图片描述

14、可以被继承的css属性

（1）字体系列属性

font、font-family、font-weight、font-size、font-style

（2）文本系列属性

color（颜色）、
line-height（行高）、
word-spacing（设置单词之间的间距）、
letter-spacing（设置字符之间的间距）、
text-transform（用于设置文本的大小写）、
uppercase（所有字符强制转为大写）、
lowercase（转小写）、
capitalize（首字符强制转为大写）、
text-indent（文本缩进）、
text-align（文本水平对齐）、
text-shadow（设置文本阴影）;

（3）光标属性

cursor

（4）元素可见性

visibility

15、字体属性、文本属性、背景属性、链接样式、轮廓属性

（1）字体属性

属性含义说明
font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
font简写

（2）文本属性

属性含义说明
color颜色
line-height行高
direction设置文本方向
vertical-align垂直对齐方式取值：top、middle、bottom可以用于图片和文字的对齐方式
text-align水平对齐方式取值：left、center、right
text-shadow设置文本阴影。
text-indent首行缩进
text-decoration文本修饰取值：underline、overline、line-through
text-transform字母大小写转换取值：lowercase、uppercase、capitalize首字母大写
text-overflow规定当文本溢出包含元素时发生的事情。
white-space空白的处理方式文本超出后是否换行，取值：nowrap不换行
letter-spacing字符间距
word-spacing单词间距只对英文有效

（3）背景属性

属性含义
background简写
background-color背景颜色
background-image背景图片
background-repeat背景图片的重复方式
background-position背景图片的显示位置
background-attachment背景图片是否跟随滚动
background-clip规定背景的绘制区域。
background-origin规定背景图片的定位区域。
background-size规定背景图片的尺寸。

（4）链接样式

<a href="https://www.baidu.com/">打开百度，你就知道！</a>

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

（5）轮廓样式

轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素

属性含义
outline在一个声明中设置所有的轮廓属性。
outline-color设置轮廓的颜色。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。
Litt_White
关注
专栏目录
CSS 常用样式
weixin_42647964的博客
07-19 85
文字三属性 颜色 color 作用：给文字添加颜色 属性名（key）：color 属性值（value）：颜色名、颜色值 颜色名： 使用颜色的英文单词表示颜色 颜色值： 颜色值指使用具体的颜色的数值表示，包括： rgb模式： 是根据红黄蓝三原色三原色进行混合而成的颜色模式 每个原色的取值范围是 0-255，一共 256 个数值，三个原色能混合出 1677W 多种颜色 书写方法：rgb（红，黄，蓝）【eg：rgb(119, 153, 51)】 十六进制模式 是 rgb 模式的一种简化写法，使用十六进制
css 常用公共样式 样式总结（持续更新）
09-27
本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先，让我们来谈谈`flex布局`。Flex布局，全称为 ...
CSS常用样式
@王某人
07-16 348
CSS常用样式 背景样式,文本样式，边框样式，列表样式，盒子模型
2024最强CSS基础知识大全（含代码）
最新发布
HTDiiii的博客
08-21 1299
CSS 什么是 CSS CSS(Cascading Style Sheets) 指层叠样式表，样式定义如何显示 HTML 的样式，样式通常存储在样式表中，把样式添加到 HTML5 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可以层叠为一。 什么地方可以写 css 行内样式，在标签内部通过 style 属性编写的 CSS 样式就是行内。 内嵌样式，一般在页面中的 head 标签内通过外部 css 标签 通过在页面中的 标签中使用 标签
常用的CSS样式
一路坎坷的小白
07-23 1041
介绍了一些基础的css样式
css 常用样式(分享)
09-24
在CSS（层叠样式表）中，样式是用于控制网页元素外观的关键工具。本文将深入探讨一些常用的CSS...熟练掌握这些常用样式，可以极大地提升你的网页设计能力。继续学习和实践，你将能够创建出更加美观且功能丰富的网页。
css_tricks：一些CSS技巧，一些CSS常用样式
02-05
这个名为"css_tricks"的资源包显然是一系列关于CSS技巧和常用样式的集合，旨在帮助开发者提升他们的CSS技能。下面我们将深入探讨一些可能包含在该压缩包中的关键知识点。 1. **选择器的使用**： - **基础选择器**...
CSS常用样式总结积累
06-08
这篇博客"CSS常用样式总结积累"是博主对CSS的一些核心概念和技术进行的归纳，旨在帮助读者理解和掌握CSS的基本用法。以下是对这些知识点的详细解释： 1. **选择器**: CSS选择器是匹配HTML元素的方式，如类选择器（`...
常用css样式
颜繁达(咸鱼一条)
01-30 460
样式制作模板 文字显示为两行, 超出部分显示省略号 overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 单行显示, 超出部分省略号 display: block; text-overflow: ellipsis; w...
常用CSS样式
qq_51593012的博客
07-19 3989
CSS(层叠样式表)在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
css样式表
weixin_30815469的博客
03-15 95
CSS样式表 1.样式复用，方便网站的后期维护； 2.实现页面的精确控制，实现精美复杂页面； 3布局定位； 4外观美化； 1 【三种使用CSS的方式】 1、行内样式表：直接在HTML开始标签中使用style=""的方式...
常见css样式
前端学习笔记
07-27 1249
通过最近几次对网页布局的经历，总结几个常见并且容易出错的的布局样式如下：
css常见样式
weixin_44018502的博客
12-08 201
去除scroll滚动条 1.小程序 class::-webkit-scrollbar { width: 0; height: 0; color: transparent; 2.网页 class::-webkit-scrollbar { display: none; textarea placeholder 居中 .address_text { height: 0.6r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值