
读css世界笔记
晓_枫
路漫漫其修远兮
展开
-
内容少时居中 内容多是左对齐
css.outer{ width: 50%; margin: 0 auto; text-align: center; } .inner{ display: inline-block; text-align: left; } p{ text-align: center; }html<div class="outer"&...原创 2018-05-27 12:11:18 · 722 阅读 · 0 评论 -
在未知宽高的父级中水平垂直居中
<div class="outer"> <div class="inner"></div> </div>第一种方法.outer{ height: 500px; width: 500px; border: solid 1px #000; position: relative;}.inner{ width: 100px; he...原创 2018-06-03 11:19:39 · 362 阅读 · 2 评论 -
正在加载... 动态效果实现
cssdot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden;}dot::before { display: block; content: '...\...原创 2018-05-29 22:07:04 · 4609 阅读 · 0 评论 -
css重置 input
input, textarea, img, video, object { box-sizing: border-box;}原创 2018-07-15 21:38:23 · 1147 阅读 · 0 评论 -
css 计数器
<style> .rest{ counter-reset: wo; //定义计数器名称 } .counter:before{ content: counters(wo,"-") ","; 显示累加的数字 counter-increment: wo; ...原创 2018-08-09 20:53:33 · 155 阅读 · 0 评论 -
让页面出现滚动条时 不发生晃动
html { overflow-y: scroll; /* for IE8 */}:root { overflow-y: auto; overflow-x: hidden;}:root body { position: absolute;}body { width: 100vw; overflow: hidden;}原创 2018-11-09 09:48:40 · 640 阅读 · 0 评论 -
谷歌浏览器滚动条设置
::-webkit-scrollbar { /* 血槽宽度 */ width: 8px; height: 8px;}::-webkit-scrollbar-thumb { /* 拖动条 */ background-color: rgba(0,0,0,.3); border-radius: 6px;}::-webkit-scrollbar-track { /* ...原创 2018-11-09 09:56:33 · 7027 阅读 · 2 评论