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