javascript
从零开始学_JavaScript_系列（16）——CSSlt;3gt;（文本、对齐、圆角、盒模型、背景）...
注意，有些CSS屬性對于低版本瀏覽器（典型的就是IE），可能不支持，所以在面向低版本瀏覽器的時候需要注意的說。
關于CSS屬性的兼容性檢測的網站：http://caniuse.com/
部分圖片來自網易云課堂，侵、私信、刪
（34）文字字體
①font-size：文字大小
②值有：length（具體值）、absolute-size（絕對值，用的少）、relative-size（相對值，用的少）、percentage（百分比）
length：如15px（15px大小），2em（相對父元素屬性的2倍大小）
percentage：如200%（類似2em，表示2倍大小）；
?
?
③font-family：文字類型
④值有：family-name（文字類型名）、generic-family（通用類型）
family-name：如
generic-family：如serif、sans-serif、cursive（草書）、fantasy（幻想體）、monospace（等寬字體）。
⑤當一行樣式，font-family的值同時有多個并列時，優先使用前面的，如果前面沒有該字體（例如是英文字體，不是中文字體），那么使用后面里靠前的。
也就是說，假如前面的中英文都包含，那么后面的是無效的（如果她是描述中文或者英文的話）；
?
?
⑥font-weight：字體加粗
值：normal（沒變化）、bold（加粗）、bolder（相對很少用）、lighter（很少用）。
值：100、200等一直到900，一般字體只支持400和900
?
?
⑦font-style：字體斜體
值：normal（正常）、italic（斜體，字體有斜體的話用這個，一般都用這個）、oblique（斜體，強制傾斜，字體不帶斜體的話也傾斜，一般不用）
?
?
⑧line-height：行距
值：normal（非固定值，瀏覽器決定，一般是1.1~1.2之間）、number（數值，例如1.1）、length（例如35px，或者3em，1em的大小是字體大小）、percentage（百分比，如150%）。
百分比和number之間的區別（即200%和2之間的區別）：百分比不受具體某一行（子標簽）的style的設置（統一使用，不針對某個而變化）；而number受具體某一行（某個子標簽的font-size）的影響（直接繼承）。
也就是說，假如父標簽里某一個子標簽的字體大小不同，number會實時變化，百分比什么時候都一樣。
?
?
⑨縮寫：font: [<font-style> || <font-weight> ] ? <font-size> [ /<line-height> ] ? <font-family>
簡單來說，line-height在具體值前應該加一個“/”。
注意：縮寫情況下font-size和font-family是必填項，必須都有，如果少了的話，則該屬性不起作用。
例子：font: italic bold 40px /200% fantasy;
表示斜體，加粗，字體大小40px，行距200%，字體幻想體。
?
?
⑩color：字體顏色
值：
文字（如red）、
六位寫法（如#ffffff 表示白色，也可以縮寫為三位寫法）、
rgb寫法（如rgb(0,0,0)表示黑色），
rgba寫法（在rgb寫法的基礎上，最后加一個參數表示透明度，如rgb(0,0,0,0.5)表示黑色，50%透明度，1表示不透明）
color:transparent 表示全透明
?
?
（36）文本修飾
①text-shadow：文字陰影
值：
none（無陰影）；
length（x軸偏移方向，y軸偏移方向，陰影模糊半徑(虛化)可省略，再加一個顏色可省略將自動用文字顏色）；
?
?
②text-decoration：下劃線
值：
none（不加線）；
underline（下劃線）；
overline（上劃線）；
line-throught（中線劃線）；
注：三種線可以同時存在，互不干擾，用空格隔開
?
?
?
（37）文本高級設置
①text-overflow：文字溢出時設置
clip：默認值
ellipsis：（溢出部分設置為三個點）
注意：text-overflow:ellipsis需要結合overflow:hidden和white-space:nowrap一起使用，表示不換行，并且溢出部分將自動隱藏，用“...”替代。
?
②cursor：定義鼠標形狀
值：
[<uri>,] 圖片
auto默認的，自動處理的
default鼠標光標，
none 消失
help 帶個問號的
pointer 手型
zoom-in? 放大鏡
zoom-out 縮小鏡
move 一個有四個方向的圖標
例子：
cursor:pointer; 指定為手型
cursor:url(xx.cur), pointer;指定為圖片，如果圖片失效則為pointer
這里指的是當鼠標移動到目標區域后的變化
?
③inherit：強制繼承
當css的某個屬性的參數為inherit時，強制繼承其為父元素的值。
原因是，有的css屬性，可能不繼承父元素的，例如border，那么在子元素中使用border:inherit，將強制子元素使用父元素的border屬性
?
?
?
（35）對齊方式
①text-align：值
left（左對齊）；
right（右對齊）；
center（居中）；
justify（兩端對齊）（需要超過一行，并且不對最后一行生效。漢字會改變間距，英文會對單詞之間的空格進行調整）；
?
②vertical-align：垂直對齊
值：
baseline（基線對齊）；
sub（下標）；
super（上標）；
top（對齊到當前行的最高點）；
text-top（文本的最高點）；
middle（垂直居中）；
buttom和text-buttom（和上面的對應）；
百分比：（參照行高line-height，參照物也是baseline為起點）；
length：（如10px，針對以baseline為起點，往上10px，也可以是負數，則往下）
?
③text-indent：首行縮進
值：
length（1em是1個文字大小，常用是2em；也可以是10px，表示縮進固定10px值一般不用。如果是個負值，則文字容器外移動，如果很大，則離開瀏覽器，可以用于SEO，不影響正常使用但可以對搜索引擎生效）；
percentage（百分比，指整個容器寬度，20%則縮進整個容器的20%的寬度）
?
④white-space：空格、換行、tab、是否自動換行
值：
normal：普通（瀏覽器決定），通常換行、tab、空格會被合并為一個空格，會自動換行；
nowrap：在normal的基礎上，不換行（如果一行寫不下，會超出）；
pre：換行保留，空格和tab會保留，不會自動換行（完整保留在代碼中的格式）；
pre-wrap：在pre的基礎上，允許自動換行。
pre-line：保留換行，空格、tab合并，允許自動換行。
如圖：
?
?
⑤word-wrap：單詞自動換行（但單詞會保持完整）
值：normal（不自動換行）、break-word（允許單詞自動換行）；
效果：假設本行放不下，那么放到下一行
?
⑥word-break：單詞自動換行（單詞不保持完整）
值：normal（不變）、keep-all（和normal類似）、break-all（允許任意兩個字母斷開）。
效果：假如本行放不下，本行放滿，剩下的字母放到下一行
?
?
?
（39）圓角（低版本IE不支持）
①border-radius：x方向半徑{1~4個} /y方向半徑{1~4個}
注意，x和y之間有“/”
這里的兩個參數，可以理解為x方向受影響的線段的長度和y方向受影響的線段長度
?
②方向：top-left等四個
?
③幾種情況假設：
<1>border-radius:10px;? 四個角的x、y都是10px
<2>border-radius:10px100px; 表示左上和右下的x、y都是10px，右上和左下的x、y都是100px；
<3>border-radius:10px/100px; 表示四個角的x偏移是10px，y偏移是100px
<4>border-radius:0px10px 20px 30px /100px 110px 120px 130px; 表示左上x偏移0，y偏移100px，右上10和110，右下20和120，左下30和130（順時針從左上開始）
<5>border-radius:50%; 四個角的偏移，都是50%的x和y（假設x=y，那么就是一個正圓）
?
?
?
（41）盒模型的尺寸
①box-sizing:
?
②值：content-box（默認，content/文本區）
border-box（指的是border的大小）
?
③影響：width和height的值影響的是哪個區域：
默認值：影響content區域
border-box：影響border區域
即在border-box的情況下，content區域的大小，需要width和height減去padding四個方向的值后，才能得到。
?
?
（42）盒陰影
①box-shadow
?
②值：none（默認，外陰影）、inset（內陰影）
?
③例如：
box-shadow:1px 2px 3px 4pxred;
第一個參數指水平偏移（左和右），正值往右，負值往左；
第二個參數指垂直偏移（上和下），正值往下，負值往上；
第三個參數指模糊半徑，往里和往外1.5px模糊（以偏移后，再加上第四個參數陰影大小之后的基線為基準線，即這個數據的情況下，x方向陰影最遠為1px+4px+3/2px）；
第四個參數指陰影大小，指的是偏移之后，陰影額外擴張的寬度（主要影響的是以偏移后的兩個基線，陰影的寬度增加）
第五個參數指陰影的顏色；
?
④內陰影：
box-shadow:inset 2px 2px 5px5px red;
盒內陰影，x軸往右偏移2px，y軸往下偏移2px，模糊半徑是5px（基于基準線，基準線定義同上），陰影大小為5px，陰影顏色為紅色；
?
⑤多陰影：
box-shadow:5px 2px 10px 10pxred,inset 5px 2px 10px 10px blue;
相當于內外都有陰影，具體不細說。
?
?
?
（43）輪廓線
①outline: 顏色樣式寬度;
也可以分開設置：outline-color等
?
②說明：繪制于元素周圍的一條線，位于邊框邊緣的外圍，可以起到突出元素的作用。但不會占據空間，也不一定是矩形。
?
③樣式：solid實線，dashed虛線，dotted點（方形）
?
④會壓到文字/圖像等之上。
?
?
（40）超出部分的處理
①overflow:
?
②值：visible? 顯示（默認）
hidden? 隱藏
scroll? 滾動（出現2個滾動條，并且無論內容多少都一直有）
auto 自動（比較少沒有滾動條，多的話有滾動條）
?
③單獨設置某一個方向的：overflow-x或者是overflow-y某一個方向的x和y軸對超出部分的處理
?
?
?
?
（45）背景顏色
①background-color:
?
②值：rgb，rgba，英文單詞，#加6位/3位表示法
?
③默認值是：transparent（透明）
?
?
?
（46）背景圖片
①background-image:url(地址)
?
②值：url(地址)
括號里可以有引號也可以沒引號
?
③可以加多個url屬性，中間以逗號分隔，于是兩種圖片都成為了背景圖片。并且前面的，將位于上面，后面的，將位于下面（被覆蓋）
?
④background-color將位于圖片之下（最下層）
?
?
?
（47）背景圖片平鋪
①background-repeat:
?
②值：
repeat-x? 只x軸方向平鋪
repeat-y? 只y軸方向平鋪
space?? 平鋪，在每張圖片之間留出一點空隙（正好能夠容下的最大值）
round?? 平鋪，伸縮（正好能夠容下，通過縮放的方式來容納下）
no-repeat?? 不平鋪（只出現一次）
?
③假設正常能容納3.5個圖片，space容納3個（留空），round容納3個或4個（確定是不留空，但具體是縮小還是放大，不知道如何確定）
?
④background-repeat:no-repeatrepeat;
第一個參數是x軸，第二個參數是y軸
?
⑤background-repeat:no-repeat,repeat;
注意有逗號分隔，第一個針對第一張圖片，第二個針對第二張圖片（針對有多個背景圖片時）
?
?
?
（48）背景圖片的滾動
①background-attachment
?
②值：
scroll? 默認值，當文本有滾動條時，背景圖片保持不變（不滾動）
local? 當文本滾動時，背景圖片跟著滾動
fixed? 很少用，參照物是整個窗口。
?
?
?
（49）背景圖片的位置
①background-position
?
②值：
兩個參數：
background-position:10px20px?? x軸（往右）偏移10px，y軸（往下）偏移20px
background-position:20%40%?? x軸偏移20%，y軸40%（圖片的x軸20%，y軸50%的那個點，位于整個容器x軸20%，y軸50%那個點，即兩個點重合后，圖片的位置），當50% 50%時，圖片居中
background-position:centercenter;?? 圖片居中
top相當于y軸0%，buttom相當于y軸100%
?
一個參數：
background-position:left? x軸靠左，y軸居中，相當于x軸0%，y軸50%（center）
描述的參數符合，另一個參數自動center
?
四個參數：
background-position:left10px top 20px;?? 圖片最左邊靠容器最左邊10px，圖片最上邊靠容器最上邊20px。
和上面的參照點不同
?
③只顯示圖片的某一部分：
假設圖標在相對于圖片左上角的x軸往右100px處，y軸0px處開始，那么這么寫：
background-position:-100px,0px;
于是，圖片只顯示圖標部分（即從圖片左上角往右100px處開始顯示）；
y軸方法同理
?
?
?
（50）線性漸變
①linear-gradient()? 這是background-image的參數
?
②括號里的值：
角度：（漸變方向，默認從上往下to buttom）to right buttom就是從左上往右下。也可以寫為0deg（0度，從下往上），45deg（順時針轉45度，注意，是以x軸和y軸的中間為中心——應該）；
漸變的顏色：第一個值默認為在0%的位置，最后一個值默認為100%的位置，中間值默認為平分后的位置，如red, blue, green這樣。也可以寫為red, blue 20%,green，那么藍色將位于20%位置，綠色位于100%位置
?
③例子：
background-image:linear-gradient(red, blue)
圖片從上往下，從紅色漸變到藍色
background-image:linear-gradient(to right top, red, blue)
從左下往右上，從紅色往藍色漸變
?
?
?
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的从零开始学_JavaScript_系列（16）——CSSlt;3gt;（文本、对齐、圆角、盒模型、背景）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring 文件上传功能
- 下一篇： Codeforces Round #35