CSS

最新推荐文章于 2024-04-30 19:24:04 发布

weixin_34408624

最新推荐文章于 2024-04-30 19:24:04 发布

阅读量47

点赞数

文章标签： python

原文链接：https://my.oschina.net/yezijun/blog/1609984

版权

2019独角兽企业重金招聘Python工程师标准>>>

文本

字体

//字体粗细 font-weight

.font{
font-weight: [normal| bold| bolder| lighter| inherit| 100-900]

}
//参数说明
//normal: 默认值定义标准的字符。
//bold: 定义粗体字符。
//bolder: 定义更粗字符。
//lighter: 定义更细字符。
//inherit: 继承父类字体粗细。
//400相当于正常字体normal，700相当于bold。
// 一般不建议使用数值类型的参数。

字间距

/* div设置css样式抬头缩进了20px */
.div{
  text-indent : 20px;
}

/* div设置css样式字间距为8px */
.div{
  letter-spacing: 8px;
}

行间距

/* 在CSS中设置行间距，格式如下： */

.div{
  line-height: 8px;
  
}

div 水平

#div1, #div2, #div3{
    display: inline-block;
}
//中间空隙可通过设置font-size: 0; 使其看不见.


//flex 弹性盒模型
#wrap{
    display: flex;
 justify-content: flex-start;
}

//排列方式flex-end|center|space-around(左右分布)|space-between(等间距) 然后:flex 默认是不会换行的
//flex-wrap属性可以换行

滚动条

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar 
{ 
    width: 16px; 
    height: 16px; 
    background-color: #F5F5F5; 
} 
   
/*定义滚动条轨道 内阴影+圆角*/ 
::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #F5F5F5; 
} 
   
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #555; 
}
/*
 ::-webkit-scrollbar 滚动条整体部分
 ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
 ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
 ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
 ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
*/

转载于:https://my.oschina.net/yezijun/blog/1609984