CSS综合复习笔记 01
生活随笔
收集整理的這篇文章主要介紹了
CSS综合复习笔记 01
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.1開發前的準備工作 ? ? ? ? ? ?1、配置開發環境（常用前端開發工具） ? ? ? ? ? （1）sublime ? ? ? ? ? （2）webstorm ? ? ? ? ? （3）vscode ? ? ? ? ? （4）hbuilder ? ? ? ? ? （5）atom ? ? ? ?2、建立項目文件夾（為了將與項目相關的文件放在一起，便于管理和以后的維護） ? ? ? ? ? ? ? ? ?????包括與項目相關的一些文件 ? ? ? ? ? （1）主頁或是首頁（index.html、default.html） ? ? ? ? ? （2）css文件夾 ? ? （存放css文件） ? ? ? ? ? ? ? ? ? ? ?????公用樣式css文件的常用命名： ? ? ? ? ? ? ? ? ? ? ? ?? ?????[1] base.css ? ? ? ? ? ? ? ? ? ? ? ??????? [2] global.css ? ? ? ? ? （3）images文件夾 （用來放置網站中的所有的圖片） ? ? ? ? ? （4）js文件夾 ? ? ? ? ? （5）音頻或是視頻文件 ? ? ? ?3、樣式初始化 ? ? ? ? ?? ? ? ? ? ? 我們的結構中的標簽，都有默認的樣式，在各個瀏覽器中的顯示可能不盡相同。為了保證網站風格的統一，或是為了便于我們的開發或是維護，需要將所有的標簽原來的樣式清除，變成統一的樣式風格，以便于我們的網站布局。 ? ? ? ?4、分析網站構成 ? ? ? ? ? ? 做網站的時候，也有一個規范或是通例 ? ? ? ? ? （1）布局順序一般從上到下、從左到右。 ? ? ? ? ? （2）在寫頁面的時候，一般優先考慮標準流的元素，其次才使用考慮浮動或是定位。 ? ? ? ? ? （3）在標準流元素中，寬高是最穩定的，其次才使用padding，最后margin（有上下邊距合并，其他共享margin等問題）。 ? ? ? ? ? （4）標準流： ? ? ? ? ? ? ? ? ? div、p等塊級元素，獨占一行。span、a、img、input等行內元素，可以一行顯示多個，我們把這樣的顯示方式叫做標準流。Normal flow ? ? ? ? ? （5）我們網站結構中任何標簽，都可以開成是一個盒模型，都可以設置寬高，只是有的元素設置寬高，不起作用。 ? ?????5、頁面使用技術 ? ? ? ? ? ? （1）大頁面基本上使用了懶加載顯示。（每向下拉動一點，再依次向后臺請求數據加載并渲染頁面。）
? 1.2 Css樣式書寫位置 ? ? ? ? ? ?1、行內式 ? ? ? ? ? （1）直接卸載HTML標簽內 <div style="width:400px;height: 300px;"></div> ? ? ? ?2、內嵌式 ? ? ? ? ? （1）寫在同頁面的一對Style標簽內 <style>input{outline-style: none;}.shortcut{width:100px;} </style> ? ? ? 3、外鏈式 ? ? ? ? ? （1）從外部引入到當前的頁面當中，真正的實現了結構與樣式的相分離 <link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/index.css"/>
? 1.3 網站的快捷圖標 ? ? ? ? ? ?1、如何制作網站快捷圖標 ? ? ? ? ? www.bithug.net ? ? ? ?2、命名 ? ? ? ? ? favicon.ico（快捷圖標） ? ? ? ? ? --- 一般放項目文件夾的根目錄下 ? ? ? ? ?? ? ?? ?????-例： ? ?? ?????www.taobao.com/facicon.ico ? ? ? ?3、引用： ? ?? ????? （1）< link rel= "shortcut icon" href="favicon.ico" /> （2）< link rel= "shortcut icon" href="/favicon.ico" />
1.4 項目文件夾的跟目錄 ? ? ? ? ? ?1、打開項目文件夾的第一層，或是index.html所在的文件夾
? 1.5 火狐瀏覽器截圖 ? ?????（1）火狐瀏覽器頁面截圖功能，并可以保存完整頁面圖片到本地。 ? ? ? ? ? ? （如果沒有：瀏覽器設置中-選附加組件-擴展-頁面截圖-安裝） ?
? 1.7 版心 ? ? ? ? ? ?因為我們屏幕設備的分辨率不一樣，因此，顯示網站的風格有可能不一樣，為了提高用戶的體驗，將網站的顯示的風格統一起來，因此需要給網站設置一個版心。 ? ?? ??????概念： ? ? ? ? ? ?????所謂版心就是頁面的主要內容所在的區域，頁面正中的位置。 /*公共類*/ .w {/*版心 提取 */width: 1210px;margin: 0 auto; }
? 1.8 FW 快捷鍵 ? ? ? ? ? ? 1、 I ?： 滴管工具，吸取顏色 ? ? ? 2、 K ：切片工具，量取元素的寬度? ? ? ? ? 3、 Z ：放大鏡工具 ? ? ? 4、 V ：移動工具 ? ? ? 5、 A ?: ?指針工具，選取 ? ? ? 6、ctrl+ 滾輪放大 ?： 瀏覽器放大 ? ? ? 7、ctrl +0 ：瀏覽器恢復默認 ? ? ? ? ?? FW：按住z，然后按住ctrl，鼠標選擇需要放大的地方，放大看輔助線是否精確選中。 ? ? ? ?注意平時代碼中，行高一定要加上px單位。
? 1.9 、小標簽：一般起裝飾作用 ? ? ? ? 1、 I ?s em u del ins? ? ? ? ? ? --- 例： ? ? ? <i><s>◇</s></i> ? ??????? ??????i 相當于相框， s 相當于i高度一半 ? ?? ?????（2）下拉框右側的小三角形： ? ? ? ? ? ? ? ? [1] 特殊符號，菱形。（使用溢出隱藏） ? ? ? ? ?? ?????[2] ◇ ? /* i 的父元素 */ .shortcut_left{position: relative; } .shortcut_left i{width: 14px;height: 7px;/* 背景色用來調試查看元素位置 *//*background: red;*//*display: inline-block;*/position: absolute;top:12px;left: 65px;/* 將溢出的部分隱藏 */overflow: hidden; } .shortcut_left i s{font: 400 14px/30px consolas;position: absolute;top: -14px;left: 0; }
? ?? 1.10 Font 復合屬性 ? ? ? ? ? ?Font-weight: bold, ?// 約等于700 ? ? ?Font-size/行高 ? ? ? ?//字體的大小/行高? ? ? ?Font-family ? ? ? ? ? ?//字體的樣式 ? ? ?Font-style ? ? ? ?? ?????//字體風格
? 1.11 元素的實例化 ? ?? ?????給元素設置寬高之后，再給一個背景色或是邊框，讓此元素直觀的顯示出來，可以清晰的看出元素的狀態和位置。
? ?1.12 元素之間的轉換 ? ? ? ?????讓行內元素設置寬高之后起作用： ? ?? ?????1、轉換成塊級元素或是行內塊元素。 ? ?? ?????2、讓此元素擁有定位（絕對定位或是固定定位）。 ? ? ? ? ? 3、浮動也可以讓行內元素擁有寬高。 ? ? ?????? ? ? ?--- 例： ?
1.13 ?Webstorm 快捷鍵 ? ? ? ?? ? ?? ?????1、ctrl+alt+l ?????代碼格式化（讓代碼對齊） ? ? ? ? ? 2、ctrl+d ? ? ? ? ?復制當前行的代碼到下一行 ? ? ? ? ? 3、ctrl+x ? ? ? ?? 刪除當前行 ? ? ? ? ?? ? ? ? ? ? 4、快速生成標簽： ? ? ? ? ? ? ? ? ul>li*9>a[herf=#] ? ? ? ? +tab按鍵，快速生成： <ul><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li> </ul>
1.14 子絕父相 ? ? ? ? ? ? ? ? ? 1、子元素是絕對定位的時候，父元素是一個相對定位，那么，父級元素是給子元素設置范圍的作用。 ? ? ? ? 2、如果三個元素之間的嵌套的話，就不一定非得是子絕父相，子絕父絕爺相。 ? ? ? ? 3、定位，首先找離自己最近的父級元素進行的一個定位，如果父級元素沒有定位的話，默認是以瀏覽器或是文檔的左上角為準，如果父級元素有相對定位，或是絕對定位的時候，以父級元素的左上角為準。
1.15 權重的問題 ? ? ? ? ? ?標簽 ? ? < ? ? 類 ? ? < ? ? ?ID ? ? <?????行內 ? ? < ? ? !important ? ? ? ? ? ?1 ? ? ? ? ? ? ? 10 ? ? ? ? ?? 100 ? ? ? ? ? 1000 ? ? ? ? ? ? ? 無窮大 ? ? ? ? ? ? ? ?
? 1.2 Css樣式書寫位置 ? ? ? ? ? ?1、行內式 ? ? ? ? ? （1）直接卸載HTML標簽內 <div style="width:400px;height: 300px;"></div> ? ? ? ?2、內嵌式 ? ? ? ? ? （1）寫在同頁面的一對Style標簽內 <style>input{outline-style: none;}.shortcut{width:100px;} </style> ? ? ? 3、外鏈式 ? ? ? ? ? （1）從外部引入到當前的頁面當中，真正的實現了結構與樣式的相分離 <link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/index.css"/>
?
? ? ?4、導入式@? 1.3 網站的快捷圖標 ? ? ? ? ? ?1、如何制作網站快捷圖標 ? ? ? ? ? www.bithug.net ? ? ? ?2、命名 ? ? ? ? ? favicon.ico（快捷圖標） ? ? ? ? ? --- 一般放項目文件夾的根目錄下 ? ? ? ? ?? ? ?? ?????-例： ? ?? ?????www.taobao.com/facicon.ico ? ? ? ?3、引用： ? ?? ????? （1）< link rel= "shortcut icon" href="favicon.ico" /> （2）< link rel= "shortcut icon" href="/favicon.ico" />
?//如果favicon.ico在根目錄下，一定不要加/
? ? ? ?4、常用尺寸 ? ? ? ? ??一般16x16、32x32 ?1.4 項目文件夾的跟目錄 ? ? ? ? ? ?1、打開項目文件夾的第一層，或是index.html所在的文件夾
? 1.5 火狐瀏覽器截圖 ? ?????（1）火狐瀏覽器頁面截圖功能，并可以保存完整頁面圖片到本地。 ? ? ? ? ? ? （如果沒有：瀏覽器設置中-選附加組件-擴展-頁面截圖-安裝） ?
?
1.6 通欄 ? ? ?? 一般類名起名： .shortcut（div樣式） ? ? ?通欄：常用一般報紙、雜志 ? ? ? ? ? ?通欄就是鋪滿整個屏幕，寬度100%，而面積不到整個頁面的一半。? 1.7 版心 ? ? ? ? ? ?因為我們屏幕設備的分辨率不一樣，因此，顯示網站的風格有可能不一樣，為了提高用戶的體驗，將網站的顯示的風格統一起來，因此需要給網站設置一個版心。 ? ?? ??????概念： ? ? ? ? ? ?????所謂版心就是頁面的主要內容所在的區域，頁面正中的位置。 /*公共類*/ .w {/*版心 提取 */width: 1210px;margin: 0 auto; }
? 1.8 FW 快捷鍵 ? ? ? ? ? ? 1、 I ?： 滴管工具，吸取顏色 ? ? ? 2、 K ：切片工具，量取元素的寬度? ? ? ? ? 3、 Z ：放大鏡工具 ? ? ? 4、 V ：移動工具 ? ? ? 5、 A ?: ?指針工具，選取 ? ? ? 6、ctrl+ 滾輪放大 ?： 瀏覽器放大 ? ? ? 7、ctrl +0 ：瀏覽器恢復默認 ? ? ? ? ?? FW：按住z，然后按住ctrl，鼠標選擇需要放大的地方，放大看輔助線是否精確選中。 ? ? ? ?注意平時代碼中，行高一定要加上px單位。
? 1.9 、小標簽：一般起裝飾作用 ? ? ? ? 1、 I ?s em u del ins? ? ? ? ? ? --- 例： ? ? ? <i><s>◇</s></i> ? ??????? ??????i 相當于相框， s 相當于i高度一半 ? ?? ?????（2）下拉框右側的小三角形： ? ? ? ? ? ? ? ? [1] 特殊符號，菱形。（使用溢出隱藏） ? ? ? ? ?? ?????[2] ◇ ? /* i 的父元素 */ .shortcut_left{position: relative; } .shortcut_left i{width: 14px;height: 7px;/* 背景色用來調試查看元素位置 *//*background: red;*//*display: inline-block;*/position: absolute;top:12px;left: 65px;/* 將溢出的部分隱藏 */overflow: hidden; } .shortcut_left i s{font: 400 14px/30px consolas;position: absolute;top: -14px;left: 0; }
? ?? 1.10 Font 復合屬性 ? ? ? ? ? ?Font-weight: bold, ?// 約等于700 ? ? ?Font-size/行高 ? ? ? ?//字體的大小/行高? ? ? ?Font-family ? ? ? ? ? ?//字體的樣式 ? ? ?Font-style ? ? ? ?? ?????//字體風格
? 1.11 元素的實例化 ? ?? ?????給元素設置寬高之后，再給一個背景色或是邊框，讓此元素直觀的顯示出來，可以清晰的看出元素的狀態和位置。
? ?1.12 元素之間的轉換 ? ? ? ?????讓行內元素設置寬高之后起作用： ? ?? ?????1、轉換成塊級元素或是行內塊元素。 ? ?? ?????2、讓此元素擁有定位（絕對定位或是固定定位）。 ? ? ? ? ? 3、浮動也可以讓行內元素擁有寬高。 ? ? ?????? ? ? ?--- 例： ?
?
1.13 ?Webstorm 快捷鍵 ? ? ? ?? ? ?? ?????1、ctrl+alt+l ?????代碼格式化（讓代碼對齊） ? ? ? ? ? 2、ctrl+d ? ? ? ? ?復制當前行的代碼到下一行 ? ? ? ? ? 3、ctrl+x ? ? ? ?? 刪除當前行 ? ? ? ? ?? ? ? ? ? ? 4、快速生成標簽： ? ? ? ? ? ? ? ? ul>li*9>a[herf=#] ? ? ? ? +tab按鍵，快速生成： <ul><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li><li><a href="" herf="#"></a></li> </ul>
1.14 子絕父相 ? ? ? ? ? ? ? ? ? 1、子元素是絕對定位的時候，父元素是一個相對定位，那么，父級元素是給子元素設置范圍的作用。 ? ? ? ? 2、如果三個元素之間的嵌套的話，就不一定非得是子絕父相，子絕父絕爺相。 ? ? ? ? 3、定位，首先找離自己最近的父級元素進行的一個定位，如果父級元素沒有定位的話，默認是以瀏覽器或是文檔的左上角為準，如果父級元素有相對定位，或是絕對定位的時候，以父級元素的左上角為準。
1.15 權重的問題 ? ? ? ? ? ?標簽 ? ? < ? ? 類 ? ? < ? ? ?ID ? ? <?????行內 ? ? < ? ? !important ? ? ? ? ? ?1 ? ? ? ? ? ? ? 10 ? ? ? ? ?? 100 ? ? ? ? ? 1000 ? ? ? ? ? ? ? 無窮大 ? ? ? ? ? ? ? ?
轉載于:https://www.cnblogs.com/kaimi520/p/5699361.html
總結
以上是生活随笔為你收集整理的CSS综合复习笔记 01的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 读取cc2530节点的设备类型、协调器、
- 下一篇： 用户空间和内核空间通讯之【proc文件系