CSS
Baddyo
这个作者很懒,什么都没留下…
展开
-
同行块级元素等高
两个div在同一行,一高一矮,期望二者高度自适应内容,并且高度同为高者的高度。 解决方案:二者的父元素display:table;二者display:table-cell;并且不能有浮动。原创 2017-10-09 16:40:38 · 616 阅读 · 0 评论 -
多列布局的均匀分布
状况描述:想将多个span标签规划为每行四个的样式。 解决方案:计算每个span的宽、border、margin以及父容器的padding,加起来要恰好等于视口宽度。如果代码里span标签用回车换行分隔开,在页面上会体现出计划之外的间距,可给父容器添加一条font-size:0;每一行最后一个span的margin-right也要设为0。原创 2017-10-17 10:06:26 · 2045 阅读 · 0 评论 -
HTML页面<progress>标签的CSS自定义
progress { -webkit-appearance: none; width: 0.6rem; height: 0.16rem;}progress::-webkit-progress-bar{ background-color: #e7f1fb;}progress::-webkit-progress-value{ background-color:原创 2017-11-01 10:04:49 · 1740 阅读 · 0 评论 -
自定义checkbox的样式
状况描述:HTML自带的checkbox,样式不一定符合需求,但没有简单的CSS属性能将其修改。 解决方案:<!--HTML--><input type="checkbox" id="checker" /><label class="checkerLabel" for="checker">Checker</label>/*CSS*/input[type="checkbox"]{display原创 2017-10-10 10:25:17 · 411 阅读 · 0 评论 -
背景色渐变
header{ width:12.14rem; height: 0.62rem; background:-webkit-linear-gradient(left,#1C82FF,#2ACBFF);}原创 2017-10-31 15:22:03 · 313 阅读 · 0 评论 -
汉字段落保持左右边距相等
text-align:justify;原创 2017-11-08 11:33:19 · 367 阅读 · 0 评论 -
图片渐变遮罩效果
<div class="imgBox"> <img src="img/img.png" /></div>.imgBox{ background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));}.imgBox img{原创 2017-11-08 10:40:53 · 2059 阅读 · 1 评论 -
微信小程序API梳理
scroll-view 与<scroll-view>的子元素的类名无关。横向滚动,<scroll-view>的样式要加上white-space:nowrap,子元素为display:inline-block。 -原创 2017-11-07 09:30:32 · 336 阅读 · 0 评论 -
设置网页固定高度的注意事项
状况描述:想写一个页面,覆盖整个浏览器视窗,高度用JavaScript动态计算(window.innerHeight)。 注意:在用rem部署响应式布局的时候,JS获取到的高度值,在赋值给最外层容器时,单位应该是px,而不是rem,否则页面高度会缩短。原创 2017-10-20 14:45:44 · 1031 阅读 · 0 评论 -
解决table的border属性设置为0后tr不显示border
状况描述:将table的border属性设为0,可以去掉table自带的边框;而在CSS中给tr设置border是无效的。 解决方案:给table的样式加一条border-collapse:collapse;<!--HTML--><table> <tr> <td>1</td> <td>2</td> </tr></table>/*CSS*/tab原创 2017-10-11 10:23:09 · 3805 阅读 · 0 评论 -
页脚保持在底部
状况描述:当页面内容不足一页时,页脚在视口底部;当内容超过一页,页脚在页面末端。 解决方案:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ pa原创 2017-11-13 15:30:38 · 394 阅读 · 0 评论