整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
過昨天分享的一些簡(jiǎn)單的屬性，接下來小編將繼續(xù)為大家分享一些相當(dāng)常用的屬性；
主要有包括指定字體、字體大小、字體加粗、字體樣式、大小寫以及綜合的font屬性；
1、指定字體，語法規(guī)范：font-family：value1，value2， 實(shí)例font-family："微軟雅黑"，"Arial"；這個(gè)屬性可以有很多個(gè)值并列存在，制定頁面中的文字字體，建議：一般網(wǎng)頁中，中文使用 微軟雅黑較多，英文使用 Arial
2、字體大小，語法規(guī)范及實(shí)例：font-size:12px； 建議：在實(shí)際開發(fā)的網(wǎng)頁中，默認(rèn)文本一般采用12px
3、字體加粗，相當(dāng)于 <b></b>，語法規(guī)范：font-weight:normal / bold / value；其中value取值：400至900 之間，400 相當(dāng)于 normal、900 相當(dāng)于 bold
4、字體樣式，相當(dāng)于<i></i>，語法規(guī)范：font-style：normal / italic；表示字體是否為斜體
5、小型大寫字母，語法規(guī)范：font-variant ： normal / small-caps;
6、字體綜合屬性font， font 為簡(jiǎn)寫屬性 ， 包含6個(gè)值：font : font-style font-variant font-weight font-size/line-height font-family；實(shí)例 font：bold 12px "microsoft yahei";
主要有包括文本顏色、文字水平排列方式、文本線條修飾、行高、首行文本縮進(jìn)以及文本陰影；
1、文本顏色，語法規(guī)范：color:value;實(shí)例color:red 表示網(wǎng)頁中的文字顏色為紅色
2、文字水平排列方式，語法規(guī)范：text-align : left/right/center 實(shí)例text-align:center 表示文字居中顯示
3、文本線條修飾，語法規(guī)范：text-decoration:none / underline ；取值 ： overline(上劃線) , line-through(刪除線)
4、行高即每行文本所占的高度是多少。一旦設(shè)定好后，該行文本將在該行內(nèi)垂直居中顯示。這個(gè)屬性有一個(gè)非常好用的地方，就是設(shè)置這個(gè)文字在垂直方面居中，要想文字垂直居中，那么就是設(shè)置這個(gè)文字的行高等于它所在容器的高度；
提問：如果在一個(gè)div中，有一行文本，要讓文本在div容器中垂直居中顯示 ？
解決：div中文本的 行高 要設(shè)置與 div的高度一致，這個(gè)比直接設(shè)置padding或者margin來的容易多了，不涉及具體核算padding或者margin值
不過也有一個(gè)缺陷，就是這個(gè)方法僅僅局限于一行數(shù)據(jù)，所以常用于一行的標(biāo)題類
5、首行文本縮進(jìn)，text-indent ： value ;value 表示的是縮進(jìn)的距離；實(shí)例text-index:24px 即表示首行縮進(jìn)2個(gè)字符
6、文本陰影，text-shadow ：h-shadow v-shadow blur color；
主要有包括處理空白、文本溢出；
1、處理空白，文本過長(zhǎng)，在容器內(nèi)顯示不下的時(shí)候，是否要換行
屬性 ：white-space：normal / nowrap ，norma即采用瀏覽器默認(rèn)設(shè)置 nowrap即不換行
2、文本溢出，溢出后的處理方式,若是想隱藏溢出的內(nèi)容，可以考慮使用該屬性。注意：該屬性必須與 overflow：hidden 聯(lián)用，屬性：text-overflow，取值：clip 即裁減，攔腰截?cái)?或者 ellipsis即通過 ... 來表示未顯示的內(nèi)容
主要有包括長(zhǎng)單詞換行、文本換行；
1、長(zhǎng)單詞換行，屬性為word-wrap :normal 即采用瀏覽器默認(rèn)形式不破壞單詞結(jié)構(gòu)（也是默認(rèn)值），break-word即破壞單詞的結(jié)構(gòu)
2、文本換行，屬性為word-break，取值：normal，break-all即破壞單詞結(jié)構(gòu)進(jìn)行換行，keep-all在半角狀態(tài)下的空格下進(jìn)行換行
主要分為2大塊表格常用樣式屬性、表格特有樣式屬性；
1、表格常用樣式屬性有：內(nèi)邊距 ： padding，尺寸：width 、height，文本、字體格式化屬性，背景屬性：顏色、圖片
邊框:border，文本垂直對(duì)齊：vertical-align : top / bottom / middle等一些基本屬性
2、表格特有樣式屬性
2.1邊框合并，屬性:border-collapse，取值可以有：separate即分離邊框(默認(rèn))、collapse即合并邊框
2.2邊框邊距，即table中的cellspacing屬性，使用這個(gè)屬性的前提是border-collapse 必須為 separate，屬性：border-spacing，它所有的取值：一個(gè)值：表示垂直和水平間距相等、兩個(gè)值：第一個(gè)值表示 水平間距，第二個(gè)值 垂直間距，兩個(gè)值 分開
2.3表格標(biāo)題位置，屬性為：caption-side，取值：top , bottom
2.4顯示規(guī)則，就是幫助瀏覽器如何顯示或布局一張表，屬性：table-layout，取值有：auto：列寬度由單元格內(nèi)容決定，默認(rèn)值，自動(dòng)表格布局，fixed：列寬度由表格和列的寬度的來決定，固定表格布局
自動(dòng)表格布局的特點(diǎn)如下：
a).單元格大小會(huì)適應(yīng)內(nèi)容大小
b).表格復(fù)雜是會(huì)比較慢
c).不確定列大小時(shí)
固定表格布局的特點(diǎn)如下：
a).表格、列的寬度取決于設(shè)置好的寬度
b).速度較快
c).浮動(dòng)定位
定位分類：普通流定位、浮動(dòng)定位、相對(duì)定位、絕對(duì)定位、固定定位，浮動(dòng)屬性、清除浮動(dòng)、以及浮動(dòng)引發(fā)的問題：
1、普通流定位(文檔流)，即網(wǎng)頁中默認(rèn)的定位方式
1.1塊級(jí)元素 ：從上到下
1.2行內(nèi)元素 ：從左到右
2、浮動(dòng)定位，就是將元素排除在普通流之外,元素在網(wǎng)頁上是不占用空間的。浮動(dòng)元素會(huì)放在包含框的左邊或右邊，但依然在包含框內(nèi)浮動(dòng)元素在浮動(dòng)時(shí)，可以向左或向右移動(dòng)直到碰到包含框或其他浮動(dòng)元素位置，浮動(dòng)定位的特點(diǎn)有：
2.1浮動(dòng)元素外邊緣不會(huì)超過父元素的邊框
2.2浮動(dòng)元素默認(rèn)不會(huì)重疊
2.3浮動(dòng)只能左右浮動(dòng)，不能上下浮動(dòng)
2.4所有元素設(shè)置為浮動(dòng)元素的話，默認(rèn)將轉(zhuǎn)換為塊級(jí)元素
3、浮動(dòng)屬性，屬性：float，取值有：none 即無浮動(dòng)(默認(rèn))、left即左浮動(dòng)、right即右浮動(dòng)
注意：在一個(gè)容器內(nèi)，如果有浮動(dòng)元素的話，那么盡可能的讓該容器中所有的元素都浮動(dòng)起來。如果有想在下一行內(nèi)顯示的內(nèi)容（不浮動(dòng)的）單獨(dú)使用容器來承裝。
4、清除浮動(dòng)，屬性：clear，取值：left/right/both
作用：清除浮動(dòng)所帶來的影響，定義了元素的哪個(gè)邊上不允許出現(xiàn)浮動(dòng)元素
5、浮動(dòng)引發(fā)的問題
包含框內(nèi)的元素被應(yīng)用了float之后，包含框的高度會(huì)發(fā)生變化（變?yōu)?）
解決方案有 overflow：hidden；
！！！最后小編還是建議大家，多多代碼，如果學(xué)的還不多的，也可以多多的模仿的代碼
網(wǎng)頁中除了可以輸入漢字、英文和其他語言外，還可以輸入一些特殊字符，如：?、￥、$、&等。
一般情況下，特殊符號(hào)的代碼由前綴“&”、字符名稱及后綴“；”組成。以下是一些常用的特殊字符代碼。
常用特殊字符標(biāo)簽
<!--舉個(gè)栗子！-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Doument</title>
</head>
<body>
<p>我啥也沒有我啥也沒有</p>
<p>我有一個(gè)空格 我有一個(gè)空格</p>
<p><我有一個(gè)小于號(hào)和一個(gè)大于號(hào)></p>
<p>&&</p>
<p>賜我￥100000000吧！</p>
<p>版權(quán)所有?web進(jìn)階樂園</p>
<p>注冊(cè)商標(biāo)：web進(jìn)階樂園?</p>
<p>商標(biāo)：web進(jìn)階樂園?</p>
<p>直角是90°</p>
<span>±</span>
<span>×</span>
<span>÷</span>
<p>22=4</p>
<p>23=8</p>
<p>"我有引號(hào)"</p>
</body>
</html>注意：一個(gè) “ ；”僅代表一個(gè)半角空格，多個(gè)空格則可以多次使用該代碼。
ord，我很熟悉。
可是每次在中文后加入英文，本希望中文和英文相親相愛，卻總會(huì)遇到各種莫名其妙的問題。
苦死寶寶了~
今天，就讓我們一起來盤點(diǎn)一下：在Word里中英文混排的那些坑吧。
就像下圖。
如果你使用兩端對(duì)齊，會(huì)發(fā)現(xiàn)各個(gè)漢字之間的距離太太太大了；
如果你使用左對(duì)齊，就會(huì)在中文漢字右側(cè)看到大片大片的空白，假如這句“中文+英文”句子前后還有其他句子，那就太太太丑啦。
怎么辦？
WPS文字：段落——換行和分頁——允許西文在單詞中間換行 Word：段落——中文版式——允許西文在單詞中間換行
這樣就好看了吧。
最常見的是英文空格由半角變成了全角，看起來極丑。
WPS文字：選中英文——拼音指南——更改大小寫——半角。
Word：選中英文——Aa——半角。
在Word中錄入中英文時(shí)，默認(rèn)二者字體相同。看起來中規(guī)中矩，并不好看。
在右鍵菜單中打開“字體”設(shè)置窗口，分別設(shè)置合適的中文和西文字體，這就可以讓我們看到如下的排版，是不是比上面單一字體要好看一些？
英文字母總是看起來偏小一點(diǎn)，直接修改字號(hào)，中文和英文會(huì)一起被修改了。想要保留中文的字體格式，單獨(dú)修改英文，就得按照下面的方法。
① 選中所有的文字，打開替換窗口，輸入“特殊格式”——“任意字母”。
② 打開字體格式窗口，設(shè)置西文字體和字號(hào)。
③ 全部替換即可。
至于應(yīng)該設(shè)置多大的字號(hào)，就請(qǐng)動(dòng)手試一試，或看看這份中英文字號(hào)對(duì)照表吧。
① Word中可以打開替換窗口，查找“[!^1-^127]”（不包含引號(hào)），選中“使用通配符”選項(xiàng)，在“替換為”設(shè)置相應(yīng)的字體格式。
② WPS文字中可以先修改所有的字體，然后再單獨(dú)修改西文字體。
尤其是要打印時(shí)，這樣相當(dāng)浪費(fèi)。一行行刪除英文后面的換行符好麻煩。選擇分欄，看起來也不好看。
① 將所有的文字轉(zhuǎn)成表格，分隔位置選擇“段落標(biāo)記”（當(dāng)然也可能是別的符號(hào)，具體問題具體分析哦）。
② 調(diào)整表格列框，取消所有的邊框，就會(huì)看到下圖的效果啦。
數(shù)字也屬于西文字體哦。
好了，你在使用Word中英文混排時(shí)，還遇到了哪些坑呢？留言一起聊聊吧。
本文由解晴新生原創(chuàng)，歡迎關(guān)注，帶你一起長(zhǎng)知識(shí)！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
