之前遇到很多样式问题,现在从18年3月5日开始记录,但是很多样式问题是之前遇到的,也一并记录在3月5日.
(所有的CSS均为SCSS)
2018-03-05
1.字体两端对齐;
很多人会用text-align: justify这个属性,这个属性只能用于一整段文字.
想要用于不同的段落位于同一列的对齐,就无法通过text-align: justify实现,比如下图：
image
想要实现上图的两端对齐,可以使用 letter-spacing配合 **nbsp(空格转义符) **来实现,也可以使用 margin-right比如2个字
方法一:
letter-spacing:2px
月 嫂
结果实现
image
方法二:
至于三个字,可能需要用到 margin-right
letter-spacing: 0.5em;
margin-right: -0.5em;
image
推荐使用方法二.
2.自定义滚动条(只兼容IE和webkit)
Firefox隐藏滚动条 overflow:-moz-scrollbars-none
滚动条的css样式主要有三部分组成：
1、::-webkit-scrollbar 定义了滚动条整体的样式
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；
::-webkit-scrollbar {
width:10px;
height:10px;
//display: none!important; //隐藏滚动条
}
/*滑动轨道*/
::-webkit-scrollbar-track {
background:rgba(0,0,0,0.06);
}
/*滑块*/
::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.08);
&:hover {
background:rgba(0,0,0,0.15);
}
}
2018-03-14
渐变背景
因为我是用于微信web项目,所以只记录适应微信浏览器的css3
background:-webkit-gradient(linear,left bottom,right top,
color-stop(0%,rgba(75,191,251,1)),
color-stop(20%,rgba(75,191,231,1)),
color-stop(40%,rgba(75,191,210,1)),
color-stop(60%,rgba(75,191,210,1)),
color-stop(80%,rgba(75,191,230,1)),
color-stop(100%,rgba(75,191,250,1))
);
解释
linear（渐变类型）:线性渐变
left bottom,right top（渐变方向） :说明渐变从左下到左上
color-stop（渐变颜色分段数组）:一般用于分段渐变,比如上面的代码就是就是分了6段,每段渐变的颜色与上段不一致，如果只使用两种渐变色，则不需要此属性，直接在渐变方向后添加颜色即可。
2018-04-08
1.Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust:none;来解决。
2.超链接样式定义顺序
L-V-H-A
link、visited、hover、active。
a:link{}
a:visited{}
a:hover{}
a:active{}
3.样式初始化
因为浏览器的不同,所以不同浏览器的标签的默认值是不同的
**淘宝网的初始化代码(尽量不要用*)**
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td
{margin:0;padding:0; }
body,button,input,select,textarea
{font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1,h2,h3,h4,h5,h6
{font-size:100%; }
address,cite,dfn,em,var
{font-style:normal; }
code,kbd,pre,samp
{font-family:couriernew, courier, monospace; }
small
{font-size:12px; }
ul,ol
{list-style:none; }
a
{text-decoration:none; }
a:hover
{text-decoration:underline; }
sup
{vertical-align:text-top; }
sub
{vertical-align:text-bottom; }
legend
{color:#000; }
fieldset,img
{border:0; }
button,input,select,textarea
{font-size:100%; }
table
{border-collapse:collapse;border-spacing:0; }
# 2018.04.19
Chrome 和 Firefox 会出现
隐藏**input type = 'number'** 最右边出现的箭头控件
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance:none !important;margin:0;
}
input[type="number"]{
-moz-appearance: textfield;
}
