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