css中的计数器
counter-reset：name number
设置或重置一个计数器
-
name计数器名称 -
number计数器初始值,默认为0
参数：计数器名称
counter-increment： name number
-
name计数器名字 -
number每次的增量，默认为1
counter（name）/counters（name，"分隔符"）
显示计数结果
<style>
li{list-style:none;}
.father { padding-left: 20px; counter-reset: count; line-height: 1.6; color: #666; }
.son:before { content: counters(count, '-') '. ';
counter-increment: count;
font-family: arial black; }
</style>
</head>
<body>
<ul class="father">
<li class="son">我的爱好
<ul class="father">
<li class="son">爬山</li>
<li class="son">追剧</li>
<li class="son">旅游</li>
</ul>
</li>
<li class="son">我的偶像
<ul class="father">
<li class="son">王昱珩
<ul class="father">
<li class="son">最强大脑第二季选手</li>
<li class="son">最强大脑第五季水之队队长</li>
</ul>
</li>
<li class="son">胡歌</li>
<li class="son">陈默</li>
</ul>
</li>
<li class="son">web前端</li>
<li class="son">啦啦啦啦啦</li>
</ul>
box-sizing
可选参数：
-
border-box当设置边框或者内边距导致元素大小改变时，不期望所占有的空间变化（变异盒模型） -
content-box默认宽高基于文本盒子计算（计算宽高 ：盒子的边框+内边距+内容区）box-sizing: border-box; box-sizing: content-box;
appearance
属性允许您使元素看上去像标准的用户界面元素
-
none取消元素默认样式 -
normal正常呈现元素 -
icon作为一个小图片的呈现元素 -
window作为一个视口呈现元素 -
button作为一个按钮，呈现元素 -
menu作为一个用户选项设定呈现元素选择 -
field作为一个输入字段呈现元素-webkit-appearance: none; -moz-appearance: none; appearance: none;
网友评论