实现自动隐藏scroll滚动条但不影响滚动功能
1 | /* box是要设置该属性的盒子 */ |
背景图片完全铺满
1 | .box { |
元素水平垂直居中
方法一 使用flex弹性盒子布局:
父元素添加 display: flex; justify-content: center; align-items: center
方法二 使用定位:
1.子元素添加绝对定位,给父元素添加相对定位(子绝父相)
2.子元素添加 top: 50%; left: 50%;
3.子元素添加 transform: translate(-50%, -50%)
方法三 使用定位+margin:
1.子绝父相
2.子元素添加 top: 0; right: 0; bottom: 0; left: 0
3.子元素添加 margin: auto;
css三角形
1 | #trian { |
文字溢出部分显示省略号
单行文字情况:
1 | #box{ |
多行文字情况:
1 | #box{ |
伪元素
伪元素特点:
伪元素可以帮助我们使用css创建新标签元素而无需使用html标签,从而简化html结构,新创建的这个元素在dom树中是找不到的,所以称为伪元素
伪元素选择器权重和标签选择器一样,都为1
相关属性设置:
选择符:::before, ::after
伪元素必须要有content属性
伪元素应用:
1.配合字体图标使用;
2.设置遮罩层;
3.清除浮动等
一个基本使用的例子:
1 | #box { |
css属性书写顺序
建议按照以下顺序书写属性:
1.布局定位属性:display/position/float/clear/visibility/overflow…(建议display第一个写)
2.自身属性:width/height/padding/border/margin/background…
3.文本属性:color/font/text-decoration/text-align/white-space/break-word…
4.其他属性:content/cursor/border-radius/box-shadow/background:linear-gradient…