web前端知識點太多_死記硬背Web前端知識點（三）
技術標籤：web前端知識點太多
CSS
- css引用
<!-- 推薦寫法 -->
<link rel="stylesheet" href="css/style.css" />
<!-- 不推薦寫法 -->
<style type="text/css">
@import url(style.css);
</style>- css padding屬性與margin屬性
大盒子用padding，小盒子用margin（優先使用padding）。
延伸：
margin屬性會合並邊距衝突問題
html
<div class="box-top">aa</div>
<div class="box-bottom">bb</div>css
.box-top {
margin-bottom:10px;
}
.box-bottom {
margin-top:10px;
}阻止合併方法
html
<div class="box-top">aa</div> <div class="clearfix"></div> <div class="box-bottom">bb</div>
css
.box-top {
float: left;
margin-bottom:10px;
}
.box-bottom {
float: left;
margin-top:10px;
}
.clearfix{
clear:both;
}- css font設定
一般網頁字型設定
大小：12px 、 14px
建議使用em單位。
行高：18px
優先使用無單位，無單位的會繼承後再計算，值是動態的，有單位的會算出來然後繼承，值是固定的。
顏色：#333333、#666666
字型顏色不要使用純黑色（#000000）。
配色祕要：永遠不要使用純黑 - 學UI網www.xueui.cn
html {
/* 推薦寫法 */
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
} Tahoma字型針對Windows平臺。
Helvetica針對MacOS平臺。
Arial通用性字型。
sans-serif針對Liunx平臺，其實是指無襯線字型。
中文網頁不設定字型，預設是宋體。
延伸：
微軟雅黑字型是有版權的，是微軟的，所以不建議使用該字型。
呼叫微軟雅黑字型是不會涉及版權的。
html {
/* 推薦寫法，使用英文 */
font-family: microsoft yahei;
/* 不推薦寫法 */
font-family: "微軟雅黑";
}使用微軟雅黑字型是涉及版權的。
@font-face {
font-family: yahei;
src: url(yahei.woff);
}- css font-style: oblique與 font-style: italic區別
font-style: oblique，將沒有斜體字進行傾斜。
font-style: italic，使用斜體的文字。
- css border：0與border：none區別
boder：0; 等價於 border-width: 0; 相容所有瀏覽器。
border：none; 等價於 border-style: none; boder: none;的渲染效果要比boder: 0;渲染效果要快些。
- css display與visibility隱藏效果區別
display:none; 瀏覽器不會分配該元素的空間，不佔文件流。
visibility:hidden; 瀏覽器會分配該元素的空間，佔文件流。
- css display: inline-block;有空格
原因：
inline-block屬性值在html中產生空白符（ ）。
解決方法：
html
<div class="wrap">
<div class="item-box">aa</div>
<div class="item-box">bb</div>
<div class="item-box">cc</div>
</div>1.css新增margin屬性。
.item-box{
display: inline-block;
width: 40px;
height: 40px;
margin-right: -5px;
background: #ff0000;
}2.父元素新增font-size:0;
.wrap{
font-size:0;
/* 禁用webkit瀏覽器字型限制 */
-webkit-text-size-adjust:none;
}
.item-box{
display: inline-block;
width: 40px;
height: 40px;
background: #ff0000;
}不建議使用元素標籤去掉閉合方式移除空格，原因瀏覽器會自動新增閉合標籤。
- css選擇器型別
通配選擇器
* （選擇所有標籤元素）
標籤選擇器
html （選擇<html>標籤元素）
id選擇器
#user （選擇id為user 元素）
id選擇器具有唯一性。
class選擇器
.user （選擇class為user的所有元素）
.user.text-blue （選擇class為user與text-blue的所有元素）
.user .text-blue （選擇class為user元素裡面選擇class為text-blue的所有元素）
關係選擇器
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 （設定在此物件後面的內容）
延伸：
選擇器優先順序（從高到低）id>class>html>* 。
css屬性值 !important是最高優先順序。
- css權重
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表型別選擇器和偽元素選擇器，如div p，權值為1。
如果有樣式之間衝突問題，一般行數在後面樣式的會覆蓋前面的行數樣式。
- css顏色程式碼
優先使用十六進位制顏色與RGB顏色（相容舊版本），其次使用RGBA 顏色值，HSL 顏色，HSLA 顏色（現代瀏覽器支援，支援透明）。
- css程式碼簡寫
顏色程式碼簡寫，paddin、margin、 font、border、background屬性簡寫成一行。
- 不要使用css表示式
影響瀏覽器效能，除非需要相容IE舊版本。
- css單位em與rem使用
一般應用在移動端，移動端父元素要設定一個定值。
html
<div class="wrap">
<div class="item-box">aa</div>
<div class="item-box">bb</div>
<div class="item-box">cc</div>
</div>css
.wrap {
font-size: 16px;
}
.item-box {
font-size: 1em;
}em是相對單位，擁有相對大小屬性，用於文字。
rem是css3的相對單位，擁有絕對大小與相對大小屬性，用於設定長寬度，間距等。
- css濾鏡
圖片利用css filter變色，達到圖片顏色切換效果。
- css剪下
利用css clip-path生成不同規則的圖案。
- css文字兩端對齊
html
<p>
My name is Yu-Root. My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.My name is Yu-Root.
</p>css
/* 文字段落 */
p {
width: 100px;
text-align: justify;
/* 相容IE，非IE瀏覽器可以不寫 */
text-justify: inter-ideograph;
word-wrap : break-word;
}- css min-width/min-height屬性與max-width/max-height屬性用法
PC web頁面使用max-width/max-height屬性，適配小螢幕裝置。
moblie web頁面使用min-width/min-height屬性，適配大螢幕裝置。
瀏覽器視窗縮放，頁面位置錯位設定min-width與min-height屬性。