之前遇到很多樣式問題,現(xiàn)在從18年3月5日開始記錄,但是很多樣式問題是之前遇到的,也一并記錄在3月5日.
(所有的CSS均為SCSS)
2018-03-05
1.字體兩端對(duì)齊;
很多人會(huì)用text-align: justify這個(gè)屬性,這個(gè)屬性只能用于一整段文字.
想要用于不同的段落位于同一列的對(duì)齊,就無法通過text-align: justify實(shí)現(xiàn),比如下圖：
想要實(shí)現(xiàn)上圖的兩端對(duì)齊,可以使用 letter-spacing配合 **nbsp(空格轉(zhuǎn)義符) **來實(shí)現(xiàn),也可以使用 margin-right比如2個(gè)字
方法一:
letter-spacing:2px
月 嫂
結(jié)果實(shí)現(xiàn)
方法二:
至于三個(gè)字,可能需要用到 margin-right
letter-spacing: 0.5em;
margin-right: -0.5em;
推薦使用方法二.
2.自定義滾動(dòng)條(只兼容IE和webkit)
Firefox隱藏滾動(dòng)條 overflow:-moz-scrollbars-none
滾動(dòng)條的css樣式主要有三部分組成：
1徽级、::-webkit-scrollbar 定義了滾動(dòng)條整體的樣式
2痛垛、::-webkit-scrollbar-thumb 滑塊部分盒件；
3、::-webkit-scrollbar-thumb 軌道部分皇筛；
::-webkit-scrollbar {
width:10px;
height:10px;
//display: none!important; //隱藏滾動(dòng)條
}
/*滑動(dòng)軌道*/
::-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
漸變背景
因?yàn)槲沂怯糜谖⑿舧eb項(xiàng)目,所以只記錄適應(yīng)微信瀏覽器的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（漸變顏色分段數(shù)組）:一般用于分段漸變,比如上面的代碼就是就是分了6段,每段漸變的顏色與上段不一致，如果只使用兩種漸變色坠七，則不需要此屬性水醋，直接在漸變方向后添加顏色即可。
2018-04-08
1.Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照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.樣式初始化
因?yàn)闉g覽器的不同,所以不同瀏覽器的標(biāo)簽的默認(rèn)值是不同的
**淘寶網(wǎng)的初始化代碼(盡量不要用*)**
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 會(huì)出現(xiàn)
隱藏**input type = 'number'** 最右邊出現(xiàn)的箭頭控件
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance:none !important;margin:0;
}
input[type="number"]{
-moz-appearance: textfield;
}
