當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

了解CSS核心精髓（一）

發布時間：2024/7/19 CSS 53 豆豆

生活随笔收集整理的這篇文章主要介紹了了解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（優先使用padding）。

4.網頁字體設置

默認字體：字體大小(僅供參考，12px或者14px)、行高(18px)（優先使用無單位，無單位的會繼承后再計算，值是動態的，有單位的會算出來然后繼承，值是固定的）、顏色（#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區別

? ? ? ??italic：使用斜體的文字。

? ? ? ? oblique：將沒有斜體字進行傾斜。

? ? ? ?字體要設置宋體，字體大小建議14px。

? ? ? ?字體顏色不要純黑色。

? ? ? ?字體盡可能用em。

5.css中border：0與border：none區別

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中的選擇器優先級

選擇器優先級：id>class>html>*

PS:內聯樣式于！important哪個優先級最高

? ? ?！important是最高的

11.css選擇器之間有無空格區別

如：.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顏色代碼選擇

優先使用十六進制顏色與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生成不同規則的圖案。（僅適用于chrome瀏覽器）

20.文本沒有對齊

如：默認 ? ? ? ? ? ? ? ?xxxxxxxx ? ? ? ? ? ? ? ? ? 對齊 ? ? ? ? ? ? ? ? ? ?xxxxxxxx ? ?

? ? ? ? ? ? ? ? ? ? ? ? xxxxxxxx ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?xxxxxxxxxx

? ? ? ? ? ? ? ? ? ? ? ? xxxxxxxxxx ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? xxxxxxx

中文排版:添加text-align:justify;text-justify:inter-ideograph;

英文排版:添加text-align:justify;

21.css性能優化

? ? css規則類越少越好。（盡量少的去對標簽進行選擇，而是用class）

? ? 如：(1) .nav {} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(2)?.nav{}

? ? ? ? ? ? ? ?.nav-li{} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??.nav li{}

? ? ? ? ? ? ? ?.nav-li-span{} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??.nav li span{}

???PS：瀏覽器查看css 規則是從右到左，如 .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:?absolute;

? ? ? ? ? ? ? 如：<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區別

Canvas是使用JavaScript程序繪圖(動態生成)。

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核心精髓（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。