了解CSS核心精髓（一）
CSS
1.css外聯(lián)
正確寫(xiě)法：<link rel="stylesheet" href="css/style.css" />
? ? ? ? ? ? ? ? ??<style type="text/css">?@import url(xxx.css);?</style>
2.w3c盒子模型與IE盒子模型
W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE 盒子模型的范圍包括 margin、border、padding、content， content 部分包含了 border 和 padding。
3.padding與margin
大盒子用padding，小盒子用margin（優(yōu)先使用padding）。
4.網(wǎng)頁(yè)字體設(shè)置
默認(rèn)字體：字體大小(僅供參考，12px或者14px)、行高(18px)（優(yōu)先使用無(wú)單位，無(wú)單位的會(huì)繼承后再計(jì)算，值是動(dòng)態(tài)的，有單位的會(huì)算出來(lái)然后繼承，值是固定的）、顏色（#333或者#666,不要使用純黑色，UI設(shè)計(jì)的原因）。
正確寫(xiě)法： ? font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif; ? ?
? ? ? ? ? ? ? ? （適合pc與moblie,Tahoma針對(duì)windows平臺(tái)，Helvetica針對(duì)mac平臺(tái)，Arial通用性字體，sans-serif針對(duì)liunx平臺(tái)，其實(shí)是指無(wú)襯線字體?）。? ? ? ? ??
PS：微軟雅黑字體是有版權(quán)的，是微軟的，所以不建議使用該字體（看需求吧，不過(guò)這種字體比較像黑體，比較好看一些）。
? ? ? 調(diào)用微軟雅黑字體是不會(huì)涉及版權(quán)的，如：font-family：microsoft yahei；
? ? ? 使用微軟雅黑字體是涉及版權(quán)的，如：@font-face?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?font-family: yahei;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?src:?url(yahei.woff);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ?中文網(wǎng)頁(yè)不設(shè)置字體，默認(rèn)是宋體。
? ? ? ?建議設(shè)置字體使用英文，不使用中文。正確寫(xiě)法：body{font-family:"microsoft yahei";}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? body{font-family: "微軟雅黑";}
?
補(bǔ)充：font-style屬性?oblique 與 italic區(qū)別
? ? ? ??italic：使用斜體的文字。
? ? ? ? oblique：將沒(méi)有斜體字進(jìn)行傾斜。
? ? ? ?字體要設(shè)置宋體，字體大小建議14px。
? ? ? ?字體顏色不要純黑色。
? ? ? ?字體盡可能用em。
?
5.css中border：0與border：none區(qū)別
boder：0 ? ? ? ? ?------- ? border-width: 0; （border-width的簡(jiǎn)寫(xiě)）?
border：none ? ------- ? border-style: none; （border-style的簡(jiǎn)寫(xiě)）
PS：表面效果差不多，但如果配合多個(gè)css的樣式的話可能會(huì)有差異。
? ? ??boder：none的渲染效果要比boder：0渲染效果要快些。
? ? ??border:0 兼容所有瀏覽器。
6.display與visibility隱藏元素。
display:none;?瀏覽器不會(huì)分配該元素的空間，不占文檔流。
visibility:hidden;?瀏覽器會(huì)分配該元素的空間，占文檔流。
7.display-inline有空格
? ?(1)css添加負(fù)margin
? ?(2)html去掉閉合(不考慮IE兼容)
? ?<a?href="#!">aa
? ?<a?href="#!">bb
? ?<a?href="#!">cc
8.css中的居中方法
margin：0 auto; ?（ 需要居中的盒子加寬度值）。
text-align: center;
PS：移動(dòng)端使用Flexbox布局居中。
? ? ? ? PC端使用絕對(duì)布局居中。?
9.css選擇器類(lèi)型
通配選擇器
*? ? （選擇所有標(biāo)簽元素）
標(biāo)簽選擇器
html （選擇<html>標(biāo)簽元素）
id選擇器
#user （選擇id為user 元素）??
PS：id具有唯一性。
class選擇器
.user? ?（選擇class為user的所有元素）
關(guān)系選擇器
div,p? ?（選擇所有 <div> 元素和所有 <p> 元素）
div p? ?（選擇 <div> 元素內(nèi)部的所有 <p> 元素）
div>p? （選擇父元素為 <div> 元素的所有 <p> 元素）
div+p? （選擇緊接在 <div> 元素之后的所有 <p> 元素）
屬性選擇器
element[name="user"]?（選擇其?name?屬性值為user的element元素）
element[src^="https"]? （選擇其 src 屬性值以 "https" 開(kāi)頭的每個(gè)element元素）
偽類(lèi)選擇器 ?
element:hover?（設(shè)置在此元素的劃過(guò)）
element:first-child（設(shè)置在此元素出現(xiàn)第一個(gè)子元素）
偽類(lèi)對(duì)象選擇器 ?
element:before （設(shè)置在此對(duì)象前面的內(nèi)容）
element:after （設(shè)置在此對(duì)象后面的內(nèi)容）
10.css中的選擇器優(yōu)先級(jí)
選擇器優(yōu)先級(jí)：id>class>html>*
PS:內(nèi)聯(lián)樣式于！important哪個(gè)優(yōu)先級(jí)最高
? ? ?！important是最高的
11.css選擇器之間有無(wú)空格區(qū)別
如：.class1.class2 ? ? ? ? ? ? ? ? ? ? ? <div class="class1 class2"></div>
? ? ? .class1 .class2 ? ? ? ? ? ? ? ? ? ? ?<div class="class1"><div class="class2"></div></div>
12.css中的權(quán)重與css樣式的行數(shù)
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
第二等：代表ID選擇器，如：#content，權(quán)值為100。
第三等：代表類(lèi)，偽類(lèi)和屬性選擇器，如.content，權(quán)值為10。
第四等：代表類(lèi)型選擇器和偽元素選擇器，如div p，權(quán)值為1。
PS:樣式之間沖突問(wèn)題:一般行數(shù)在后面樣式的會(huì)覆蓋前面的行數(shù)樣式。
13.盒子并排排放思路或者是不同瀏覽器布局排放盒子掉位
參考bootstrap框架的盒子排放做法，大盒子使用margin負(fù)數(shù)，小盒子使用padding正數(shù)來(lái)對(duì)其每一個(gè)盒子。
14.css顏色代碼選擇
優(yōu)先使用十六進(jìn)制顏色與RGB顏色（兼容舊版本），其次使用RGBA 顏色值，HSL 顏色，HSLA 顏色（現(xiàn)代瀏覽器支持，支持透明）。
15.css代碼簡(jiǎn)寫(xiě)
顏色代碼簡(jiǎn)寫(xiě)，paddin、margin、?font、border、background屬性簡(jiǎn)寫(xiě)成一行。
16.不要使用css表達(dá)式
影響瀏覽器性能，除非需要兼容IE舊版本。
17.單位em與rem使用
一般應(yīng)用在移動(dòng)端，移動(dòng)端父元素要設(shè)置一個(gè)定值。
如：父元素body{font-size:16px;} ?
? ? ?子元素p{font-size:1em} ?
em是相對(duì)單位，擁有相對(duì)大小屬性，用于文字。
rem是css3的相對(duì)單位，擁有絕對(duì)大小與相對(duì)大小屬性，用于設(shè)置長(zhǎng)寬度，間距等。
18.css濾鏡
png圖片利用css?filter變色，達(dá)到圖片顏色切換效果。
19.css剪切
利用css?clip-path生成不同規(guī)則的圖案。（僅適用于chrome瀏覽器）
20.文本沒(méi)有對(duì)齊
如：默認(rèn) ? ? ? ? ? ? ? ?xxxxxxxx ? ? ? ? ? ? ? ? ? 對(duì)齊 ? ? ? ? ? ? ? ? ? ?xxxxxxxx ? ?
? ? ? ? ? ? ? ? ? ? ? ? xxxxxxxx ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?xxxxxxxxxx
? ? ? ? ? ? ? ? ? ? ? ? xxxxxxxxxx ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? xxxxxxx
中文排版:添加text-align:justify;text-justify:inter-ideograph;
英文排版:添加text-align:justify;
21.css性能優(yōu)化
? ? css規(guī)則類(lèi)越少越好。（盡量少的去對(duì)標(biāo)簽進(jìn)行選擇，而是用class）
? ? 如：(1) .nav {} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(2)?.nav{}
? ? ? ? ? ? ? ?.nav-li{} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??.nav li{}
? ? ? ? ? ? ? ?.nav-li-span{} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??.nav li span{}
???PS：瀏覽器查看css 規(guī)則是從右到左，如 .class1 .class2{}
? ? ? ? ?先找到class2，然后再找到class1。
? ? ? ? ?請(qǐng)不要誤認(rèn)(2)就是所謂的css模塊化。?
22.合并上下邊距問(wèn)題。
? ??<div style="width:100px; background:#930; height:100px; margin-bottom:10px;"></div>
? ? <div style="width:100px; background:#f30; height:100px; margin-top:10px;"></div>
解決方法：加float、display、position:?
? ? ? ? ? ? ? 如：<div style="width:100px; background:#930; height:100px; margin-bottom:10px;float:left;"></div>
? ? ? ? ? ? ? ? ? ? <div style="clear:both;">
? ? ? ? ? ? ? ? ? ??<div style="width:100px; background:#f30; height:100px; margin-top:10px;float:left;"></div>
?
23.左邊固定，右邊自適應(yīng)。
左邊固定寬度，右邊使用margin-left。
24.瀏覽器窗口縮放，頁(yè)面位置錯(cuò)位。
設(shè)置min-width與min-height，保證布局不錯(cuò)位。
25.svg與canvas區(qū)別
Canvas是使用JavaScript程序繪圖(動(dòng)態(tài)生成)。
SVG是可伸縮矢量圖形 (Scalable Vector Graphics)，使用XML文檔描述來(lái)繪圖。
26.min-width/min-height與max-width/max-height用法
PC?web頁(yè)面使用max-width/max-height屬性，適配小屏幕設(shè)備。
moblie?web頁(yè)面使用min-width/min-height屬性，適配大屏幕設(shè)備。
?
轉(zhuǎn)載于:https://www.cnblogs.com/Sroot/p/6830851.html
總結(jié)
以上是生活随笔為你收集整理的了解CSS核心精髓（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ftp服务器PDF文件在线查看
- 下一篇： CSS3-06 样式 5