前端之css屬性設定等相關內容-53
阿新 • • 發佈：2020-09-17
1.字型屬性
1.1 font-weight：文字粗細
| 取值 | 描述 |
|---|---|
| normal | 預設值，標準粗細 |
| bord | 粗體 |
| border | 更粗 |
| lighter | 更細 |
| 100~900 | 設定具體粗細，400等同於normal，而700等同於bold |
| inherit | 繼承父元素字型的粗細值 |
1.2 font-style：文字風格
normal 正常，預設就是正常的
italic 傾斜
1.3 font-size：文字大小
fs：一般是12px或13px或14px
注意：
1、通過font-size設定文字大小一定要帶單位，即一定要寫px
2、如果設定成inherit表示繼承父元素的字型大小值。
1.4 font-family：文字字型
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
常見字型：
serif 襯線字型
sans-serif 非襯線字型
中文：宋體，微軟雅黑，黑體
注意：
1、設定的字型必須是使用者電腦裡已經安裝的字型，瀏覽器會使用它可識別的第一個值。
2、如果取值為中文，需要用單或雙引號擴起來
1.5 文字屬性簡寫
/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: 'serif','微軟雅黑';*/
font: bolder italic 50px 'serif','微軟雅黑';
1.6 color：文字顏色
| 取值 | 格式 | 描述 |
|---|---|---|
英文單詞 |
color：red; | 大多數顏色都有對應的英文單詞描述，但英文單詞終究有其侷限性:無法表示所有顏色 |
| rgb | color：rgb(255,0,0) | 什麼是三原色？ red，green，blue 什麼是畫素px？ 對於光學顯示器，一整個螢幕是有一個個點組成，每一個點稱為一個畫素 點，每個畫素點都是由一個三元色的發光元件組成，該元件可以發出三種顏 色，red，green，blue。 發光元件協調三種顏色發光的明亮度可以調節出其他顏色 格式：rgb(255,0,0); 引數1控制紅色顯示的亮度 引數2控制綠色顯示的亮度 引數3控制藍色色顯示的亮度數字的範圍0-255，0代表不發光，255代表發光，值越大越亮紅色：rgb(255,0,0) 綠色：rgb(0,255,0) 藍色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要讓紅色/綠色/藍色的值都一樣就是灰色，而且三個值越小，越偏 黑色，越大越偏白色 |
| rgba | color：rgba(255,0,0,0.1); | rgba到css3中才推出，比起rgb多了一個a，a代表透明度 a取值0-1，取值越小，越透明 |
| 十六進位制 | color: #FF0000; | #FFEE00 其中FF代表R，EE代表G，00代表B 只要十六進位制的顏色每兩位都是一樣的，那麼就可以簡寫為一個， 例如#F00 等同於#FF0000 |
2.文字屬性
2.1 text-align：規定元素中的文字的水平對齊方式。
| 值 | 描述 |
|---|---|
| left | 左邊對齊 預設值 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
2.2 text-decoration：文字裝飾
| 值 | 描述 |
|---|---|
| none | 預設。定義標準的文字，通常用來去掉a標籤的下劃線 |
| underline | 定義文字下的一條線。 |
| overline | 定義文字上的一條線。 |
| line-through | 定義穿過文字下的一條線。 |
| inherit | 繼承父元素的text-decoration屬性的值。 |
2.3 text-indent：首行縮排
#將段落的第一行縮排 32畫素,16px;=1em;
p {
text-indent: 32px;
}
2.4 line-height：行高
3.背景屬性
注意：沒有寬高的標籤，即便設定背景也無法顯示
| 屬性 | 描述 | 值 |
|---|---|---|
| background-color | 設定標籤的背景顏色的 |
background-color: red;``background-color: rgb(0,255,0);``background-color: rgba(0,255,0,0.1);``background-color: #00ffff; |
| background-image | 設定標籤的背景圖片 |
background-image: url("images/2.jpg");background-image: url("圖片網址");注意：如果圖片的大小沒有標籤的大小大，那麼會自動在水平和垂直方向平鋪和填充 |
| background-size | 設定標籤的背景圖片的寬、高 |
background-size: 300px 300px; background-size: 100% 100%; |
| background-repeat | 設定標籤的背景圖片的平鋪方式 |
background-repeat: repeat; #預設值，在垂直和水平方向都重複background-repeat: no-repeat; #不重複，背景圖片將僅顯示一次background-repeat: repeat-x; #背景圖片將在水平方向平鋪background-repeat: repeat-y; #背景圖片將在垂直方向平鋪應用：可以在服務端將一個大圖片截成小圖片，然後在客戶端基於平鋪屬性將小圖重複這樣使用者就以為是一張大圖，如此，既節省了流量提升了速度，又不影響使用者訪問例如很多網站的導航條都是用這種手法制作的 |
| background-attachment | 設定標籤的背景圖片在標籤中固定或隨著頁面滾動而滾動 |
background-attachment: scroll; #預設值，背景圖片會隨著滾動條的滾動而滾動background-attachment: fixed; #不會隨著滾動條的滾動而滾動 |
| background-position | 前端的座標系"：`` *-------------------->x軸 | | | | | | y軸 *圖片預設都是在盒子的左上角，background-position：屬性，就是專門用於控制背景圖片的位置 |
background-position：水平方向的值，垂直方向的值1、具體的方位名詞 *水平方向：left，center，right* *垂直方向：top，center，bottom* *如果只設置了一個關鍵詞，那麼第二個值就是"center"。*2、百分比`` ***第一個值是水平位置，第二個值是垂直位置。\* \*左上角是 0% 0%。右下角是 100% 100%。\* \*如果只設置了一個值，另一個值就是50%。 ***``3、具體的畫素（一定要加px單位）`` 例如：30px，50px等等 第一個值是水平位置，第二個值是垂直位置。 左上角是 0 0。單位是畫素 (0px 0px) 或任何其他的 CSS 單位。 如果只設置了一個值，另一個值就是50%。 可以混合使用%和position值。 |
| inherit | 設定從父元素繼承background屬性值 |
以上背景屬性的值均可以設定為inherit，代表從父元素繼承background屬性 |
| 背景縮寫 | body { background: red url(xx.png) no-repeat fixed center/300px 300px; } |
3.1 背景屬性縮寫
`body { background: red url(xx.png) no-repeat fixed center/300px 300px; }`
3.2 背景圖片和插入圖片的區別
#1、
背景圖片僅僅只是一個裝飾，不會佔用位置，
插入圖片會佔用位置
#2、
背景圖片有定位屬性，可以很方便地控制圖片的位置，
而插入圖片則不可以
#3、
插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片
想被搜尋引擎收錄，那麼推薦使用插入圖片
3.3 精靈圖
#1、什麼是CSS精靈圖（可以通過瀏覽器抓包分析：微博，京東都有精靈圖）
CSS精靈圖是一種影象合成技術
#2、CSS精靈圖的作用
一個電商網站可能有很多圖片，比如有10張圖片，這就要求客戶端發10次請求給服務端
但其實一次請求的頻寬就足夠容納10張圖片的大小
精靈圖的作用就是用來較少請求次數，以及降低伺服器處理壓力
#3、如何使用CSS精靈圖
CSS的精靈圖需要配合背景圖片和背景定位來使用
#4、強調：切圖需要用到frameworks軟體，可以知道每個圖片具體寬多少個畫素高多少個畫素，該軟體與ps屬於一個家族
在右面，圖層-》點陣圖-》出一把鎖固定住圖片
然後左側，有一個切片工具，框住圖片
4.1 什麼是CSS盒子模型？
HTML文件中的每個元素都被比喻成矩形盒子， 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如果把一個盒子比喻成一個壁掛相片，那麼
#外邊距margin ===== 一個相框與另外一個相框之間的距離
#邊框border ====== 邊框指的就是相框
#內邊距padding ===== 內容/相片與邊框的距離
#寬度width/高度height ===== 指定可以存放內容/相片的區域
提示：可以通過谷歌開發者工具檢視盒子的各部分屬性
#如圖所示：
4.2 盒子模型的寬度和高度
#1、內容的寬度和高度
通過標籤的width和height屬性設定
#2、元素/盒子模型的寬度和高度
寬度= 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度
高度= 。。。。
#3、元素/盒子模型空間的寬度和高度
寬度= 左外邊距 + 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度 + 右外邊距
高度= 。。。。
4.3 ！！！css顯示模式:塊級、行內、行內塊級
在HTML中HTML將所有標籤分為兩類，分別是容器級和文字級
在CSS中CSS也將所有標籤分為兩類，分別是容器級是塊級元素和行內元素
#1、HTML中容器級與文字級
容器級標籤：可以巢狀其他的所有標籤
div、h、ul>li、ol>li、dl>dt+dd
文字級標籤：只能巢狀文字、圖片、超連結
span、p、buis、strong、em、ins、del
#2、CSS中塊級與行內
塊級：塊級元素會獨佔一行，所有的容器類標籤都是塊級，文字標籤中的p標籤也是塊級
div、h、ul、ol、dl、li、dt、dd 還有標籤p
行內：行內元素不會獨佔一行，所有除了p標籤以外的文字標籤都是行內
span、buis、strong、em、ins、del
#3、塊級元素與行內元素的區別
1、塊級元素block
獨佔一行
可以設定寬高
若沒有設定寬度，那麼預設和父元素一樣寬（比如下例中的div的父元素是body，預設div的寬就是body的寬）
若設定寬高，那麼就按照設定的來顯示
2、行內元素inline
不會獨佔一行
不可以設定寬高
盒子寬高預設和內容一樣
3、行內塊級元素inline-block
不會獨佔一行
可以設定寬高
4.4 ！！！CSS顯示模式轉換
| 屬性 | 描述 | 值 |
|---|---|---|
display |
可以通過標籤的display屬性設定顯示模式 |
none HTML文件中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript程式碼使用block 塊級inline 行內inline-block 行內塊級 |
**display:"none"與visibility:hidden的區別：** |
visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。display:none: 可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。 |
4.5 div與span
佈局都是用塊級元素，而行內元素是控制內容顯示的。
1、div標籤
一般用於配合css完成網頁的基本佈局
2、span標籤
一般用於配合css修改網頁中的一些區域性資訊，比如一行文字我們只為一部分加顏色<p>我是<span>egon</span></p>
3、div和span有什麼區別？
div一般用於排版，而span一般用於區域性文字的樣式
1、站在HTML的角度：div是一個塊級元素、獨佔一行，而span是一個行內元素、不會單獨佔一行
2、站在CSS的角度：div是一個容器級標籤，而span是一個文字級標籤
5.盒子模型各部分詳解
5.1 border邊框
| 同時設定四條邊的邊框 | border:邊框的寬度 邊框的樣式 邊框的顏色 |
|---|---|
| 分別設定四條邊的邊框 | border-left:邊框的寬度 邊框的樣式 邊框的顏色border-top:邊框的寬度 邊框的樣式 邊框的顏色border-right:邊框的寬度 邊框的樣式 邊框的顏色border-bottom:邊框的寬度 邊框的樣式 邊框的顏色 |
| 分別指定寬度、格式、顏色 | 1、連寫：（分別設定四條邊的邊框）bord-width: 上 右 下 左border-style:上 右 下 左border-color：上 右 下 左2 、注意點： 1、這三個屬性時按照順時針，即上、右、下、左來賦值的 2、這三個屬性的取值省略時的規律 省略右面，右面默認同左邊 省略下部，下面預設跟上面一樣 只留一個，那麼其餘三邊都跟這一個一樣 |
瞭解非連寫 |
`border-left-width: ;border-left-style: ;border-left-color: #000;border-top-width: ;border-top-style: ;border-top-color: #000;border-right-width: ;border-right-style: ;border-right-color: #000;border-bottom-width: ;border-bottom-style: ;border-bottom-color: #000; |
| 邊框的樣式 | none 無邊框。 dotted 點狀虛線邊框。 dashed 矩形虛線邊框。 solid 實線邊框。 |
| border-radius | /* 單獨設定一個角：數值越大，弧度越大*/``border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;/* 縮寫設定 */border-radius: 20px;/* 所有角設定相同值 */border-radius: 20px 10px 10px 20px; /* 順時針順序：上左 上右 下左 下右*/``/* 百分比設定 */border-radius: 50%;/* 橢圓圓弧設定 */border-radius: 25%/50%; /* 前面一個值代表水平方向的半徑佔總寬度的，後面一個值代表垂直方向 */ |
5.2 padding內邊距：邊框與內容的距離就是內邊距
非連寫 | padding-top：20px；padding-right：20px；padding-bottom：20px；padding-left：20px； |
|---|---|
連寫 |
padding：上 右 下 左; |
| 注意 | 1 給標籤設定內邊距後，標籤內容佔有的寬度和高度會發生變化，設定padding之後標籤內容的寬高是在原寬高的基礎上加上padding值。如果不想改變實際大小，那就在用寬高減掉padding對應方向的值2 padding是新增給父級的，改變的是父級包含的內容的位置3 內邊距也會有背景顏色 |
5.3 外邊距：標籤與標籤之間的距離就是外邊距
非連寫 | margin-top：20px；margin-right：20px；margin-bottom：20px；margin-left：20px； |
|---|---|
連寫 |
margin：上 右 下 左; |
| 注意 | 1、外邊距的那一部分是沒有背景顏色的2、外邊距合併現象 *在預設佈局的水平方向上，預設兩個盒子的外邊距會疊加* 而在垂直方向上，預設情況下兩個盒子的外邊距是不會疊加的，會出現合併現象，誰的外邊距比較大，就聽誰的 |
5.4 內邊距vs外邊距
#1、在企業開發中，一般情況下如果需要控制巢狀關係盒子之間的距離
應該首先考慮padding
其次再考慮margin
margin本質上是用於控制兄弟直接的關係的，padding本質才是控制父子關係的關係
#2、如果兩個盒子是巢狀關係，那麼設定了裡面一個盒子頂部的外邊距，那麼外面一個盒子也會被頂下來
如果外面的盒子不想被遺棄頂下來，，那麼可以給外面的盒子設定一個邊框屬性
5.5 盒子居中與內容居中
內容居中
1、讓一行內容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;
2、讓多行內容在盒子中垂直居中（水平居中與單行內容一樣）
讓行高與盒子高度一樣，只能讓一行內容垂直居中，如果想讓多行內容垂直居中，
比如下面這種，想讓div中的多行內容垂直居中，一看div中的文字是兩行，每一行
的行高為20，加起來就是40，80-40=40，需要讓文字距離頂部pading為20，底部padding為20
*/
height: 80px;
line-height: 20px;
padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;
盒子居中
text-align center；只能讓盒子中儲存的文字、圖片水平居中
如果想讓盒子自己相對於父元素水平居中，需要用到
margin: 0 auto;
5.6 防止文字溢位word-break: break-all;
5.7 清除預設邊距
#1、為什麼要清空預設邊距（外邊距和內邊距）
瀏覽器會自動附加邊距，在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等
編寫程式碼之前的第一件事情就是清空預設的邊距
#2、如何清空預設的邊距
* {
margin: 0px;
padding: 0px;
}
#3、注意點：
萬用字元選擇器會找到（遍歷）當前介面中所有的標籤，所以效能不好，參考：https://yuilibrary.com/yui/docs/cssreset/
拷貝程式碼：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
可以檢視京東，bat主頁也是這麼做的，在企業開發中也應該像上面這麼寫