css第04天昨日復習

標簽的顯示模式有：塊、行內、行內塊

a標簽的鏈接偽類有：a:link沒有點擊過的(訪問過的)鏈接，a:visited點擊過的(訪問過的)鏈接a:hover鼠標經過的那個鏈接，a:active鼠標正在按下還沒有彈起鼠標的鏈接

背景位置的樣式可設置的樣式值有：方位名詞、精確單位、混合單位昨日復習

標簽的顯示模式有：塊、行內、行內塊

a標簽的鏈接偽類有：a:link沒有點擊過的(訪問過的)鏈接，a:visited點擊過的(訪問過的)鏈接a:hover鼠標經過的那個鏈接，a:active鼠標正在按下還沒有彈起鼠標的鏈接

背景位置的樣式可設置的樣式值有：方位名詞、精確單位、混合單位Contents目錄盒子模型綜合案例CSS的注釋

【掌握】盒子模型

【應用】綜合案例【應用】CSS的注釋目標TARGET一個標簽就是一個矩形盒子要點提示08-盒子模型導讀

掌握程度：應用08-盒子模型導讀視網頁布局的核心本質：就是利用CSS擺放盒子。要點提示09-看透網頁布局本質掌握程度：應用09-看透網頁布局本質視邊框、外邊距、內邊距、和內容要點提示10-盒子模型組成部分掌握程度：應用10-盒子模型組成部分答視1、盒子模型從外到內的順序是什么？從外到內：外邊距、邊框、內邊距、內容2、盒子的大小包括哪些？邊框、內邊距、內容10-盒子模型組成部分課堂問答答視課堂問答border:border-width||border-style||border-color;要點提示11-盒子模型邊框border掌握程度：應用11-盒子模型邊框border視邊框簡寫：border:1pxsolidred;邊框分開寫法：border-top:1pxsolidred;要點提示12-邊框的復合寫法掌握程度：應用12-邊框的復合寫法視練練習請書寫頁面，創建一個200*200px的盒子。設置邊框：上下邊框：20px實線；左右邊框：30px虛線；提示創建一個200px*200px的盒子使用邊框的分寫屬性，分別設置不同的邊框5分鐘12-邊框的復合寫法視練border-collapse:collapse;要點提示13-表格細線邊框掌握程度：應用13-表格細線邊框答視1、如何設置邊框折疊？border-collapse2、如果不折疊，邊框是多寬？如果不設置邊框折疊，則表格邊框是2px寬13-表格細線邊框課堂問答答視課堂問答邊框會額外增加盒子的實際大小。因此我們有兩種方案解決：測量盒子大小的時候,不量邊框。如果測量的時候包含了邊框,則需要width/height減去邊框寬度要點提示14-邊框會影響盒子實際大小掌握程度：應用14-邊框會影響盒子實際大小答視div{border:20pxsolidpink;width:120px;border-top:35pxsolidred;height:80px;}14-邊框會影響盒子實際大小課堂問答答視課堂問答請計算左側盒子的大小padding:上右下左;要點提示15-盒子模型內邊距padding掌握程度：應用15-盒子模型內邊距padding答視1、內邊距的作用？內邊距可以拉開標簽的內容和標簽邊緣的距離15-盒子模型內邊距padding課堂問答答視課堂問答padding:上右下左;注意：按照順序設置四邊，如果哪一邊未指明，則默認等于對邊的值;要點提示16-padding復合屬性掌握程度：應用16-padding復合屬性答視1、padding設置復合寫法時，依照的邊的順序是？上右下左2、設置復合寫法的時候，如果沒有設置4個值時，會產生什么結果？會按照“上右下左”的順序依次設置不同邊，沒被設置的邊會和對邊保持一致16-padding復合屬性課堂問答答視課堂問答內邊距撐大對盒子大小：如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。要點提示17-padding會影響盒子實際大小掌握程度：應用17-padding會影響盒子實際大小答視1、什么時候設置padding會撐大盒子的大小？如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子2、什么時候設置padding不會撐大盒子的大小？如何盒子本身沒有指定width/height屬性,則此時padding不會撐開盒子大小。17-padding會影響盒子實際大小課堂問答答視課堂問答padding可以間隔開文本內容和父盒子四邊的距離要點提示18-padding應用-新浪導航欄(上)掌握程度：應用18-padding應用-新浪導航欄(上)視設置樣式的時候要注意選擇器權重要點提示19-padding應用-新浪導航欄(下)掌握程度：應用19-padding應用-新浪導航欄(下)視練練習請編寫新浪導航欄頁面。提示background-color設置背景色必須要把a標簽轉化成行內塊標簽才能設置寬高text-decoration去除a標簽的下劃線10分鐘新浪導航欄視練通過padding把文本內容向右移動要點提示20-小米側邊欄修改掌握程度：應用20-小米側邊欄修改視練練習請編寫小米側邊欄頁面。提示使用padding設置文字和標簽四周的距離通過鏈接偽類設置鼠標經過的樣式10分鐘視練20-小米側邊欄修改padding不會撐開盒子的情況：如何盒子本身未指定width/height屬性,則padding不會撐開盒子大小。要點提示21-padding不會撐開盒子的情況掌握程度：應用21-padding不會撐開盒子的情況答視1、什么時候設置padding會撐大盒子的大小？如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子2、什么時候設置padding不會撐大盒子的大小？如何盒子本身沒有指定width/height屬性,則此時padding不會撐開盒子大小。21-padding不會撐開盒子的情況課堂問答答視課堂問答margin屬性用于設置外邊距，即控制盒子和盒子之間的距離。要點提示22-盒子模型外邊距margin掌握程度：應用22-盒子模型外邊距margin答視1、margin的作用是什么？margin的作用是拉開標簽之間的距離2、margin能不能撐大盒子？margin不被計算在標簽的大小里面22-盒子模型外邊距margin課堂問答答視課堂問答margin-left:auto;margin-right:auto;margin:auto;margin:0auto;要點提示23-外邊距典型應用-塊級盒子水平居中對齊掌握程度：應用23-外邊距典型應用-塊級盒子水平居中對齊答視1、如何讓一個塊級標簽在其父標簽中水平居中？如果一個塊級標簽沒有設置寬度，那么默認的寬度和父標簽保持一致，無居中的概念如果一個塊級標簽有設置寬度，可以通過設置左右外邊距為auto來讓當前標簽在父標簽中水平居中23-外邊距典型應用-塊級盒子水平居中對齊課堂問答答視課堂問答給行內元素和行內塊元素的父標簽設置text-align:center;要點提示24-行內元素和行內塊元素水平居中掌握程度：應用24-行內元素和行內塊元素水平居中答視1、能否通過設置左右外邊距為auto來讓行內元素、行內塊元素在父標簽中水平居中？只有有寬度的塊級標簽才可以通過設置左右外邊距為auto來讓其在父標簽中水平居中24-行內元素和行內塊元素水平居中課堂問答答視課堂問答解決方案：盡量只給一個盒子添加margin值。要點提示25-外邊距合并-相鄰塊元素垂直外邊距掌握程度：應用25-外邊距合并-相鄰塊元素垂直外邊距結視25-外邊距合并-相鄰塊元素垂直外邊距課堂問答視知識總結結解決方案：-可以為父元素定義上邊框。-可以為父元素定義上內邊距。-可以為父元素添加overflow:hidden。要點提示26-外邊距合并-嵌套塊元素塌陷掌握程度：應用26-外邊距合并-嵌套塊元素塌陷結視26-外邊距合并-嵌套塊元素塌陷課堂問答視知識總結結*{padding:0;/*清除內邊距*/margin:0;/*清除外邊距*/}要點提示27-清除內外邊距掌握程度：應用27-清除內外邊距答視為什么要清除內外邊距？因為部分標簽默認在瀏覽器中有內外邊距，不利于布局，所以需要清除所有標簽的內外邊距27-清除內外邊距課堂問答答視課堂問答Ctrl+R：可以打開標尺Ctrl+加號(+)可以放大視圖，Ctrl+減號(-)可以縮小視圖按住空格鍵，鼠標可以變成小手，拖動PS視圖Ctrl+D可以取消選區，或者在旁邊空白處點擊一下也可以取消選區要點提示28-ps的基本操作掌握程度：應用28-ps的基本操作結視28-ps的基本操作演擴課堂問答練視知識總結答結網頁布局過程：1.先準備好相關的網頁元素，網頁元素基本都是盒子Box。2.利用CSS設置好盒子樣式，然后擺放到相應位置。3.往盒子里面裝內容要點提示29-綜合案例-產品模塊布局分析掌握程度：應用29-綜合案例-產品模塊布局分析結視29-綜合案例-產品模塊布局分析課堂問答視知識總結結設置塊級標簽水平居中：margin-left:auto;margin-right:auto;margin:auto;margin:0auto;要點提示30-綜合案例-box布局掌握程度：應用30-綜合案例-box布局視答如何讓box盒子水平居中？.box{width:298px;height:415px;background-color:#fff;/*讓塊級的盒子水平居中對齊*/margin:100pxauto;}30-綜合案例-box布局課堂問答答視課堂問答img標簽是行內塊標簽，必須要設置width:100%要點提示31-綜合案例-圖片和段落制作掌握程度：應用31-綜合案例-圖片和段落制作視練練習請完成當前部分。提示box居中圖片的寬度為100%用外邊距拉開img標簽和p標簽的距離10分鐘視練31-綜合案例-圖片和段落制作要點提示32-綜合案例-評價和詳情制作掌握程度：應用32-綜合案例-評價和詳情制作視豎線制作：創建一個1px寬的盒子書寫“|”要點提示33-綜合案例-豎線細節制作掌握程度：應用33-綜合案例-豎線細節制作視練練習請完成頁面。提示通過display:inline-block來讓h4標簽和其他標簽顯示在一行通過外邊距拉開標簽之間的距離10分鐘視練33-綜合案例-豎線細節制作布局：從外向里、從上到下制作要點提示01-綜合案例-快報模塊布局分析掌握程度：應用01-綜合案例-快報模塊布局分析視使用行高等于高度來設置單行文本垂直居中使用border來設置邊框要點提示02-綜合案例-快報模塊頭部制作掌握程度：應用02-綜合案例-快報模塊頭部制作視練練習請編寫快報模塊標題。提示創建一個大盒子div.box包括所有內容，讓其水平居中在div.box中使用h3作為標題模塊在標題h3標簽中使用行高讓文本垂直居中為h3設置虛線底邊框為h3設置padding-left讓文本向右移動5分鐘02-綜合案例-快報模塊頭部制作視練使用盒子內部的padding-left來讓文字向右移動當一個塊級標簽沒有設置寬度的時候，設置內邊距不會撐大盒子要點提示03-綜合案例-快報模塊列表制作掌握程度：應用03-綜合案例-快報模塊列表制作視練要點提示34-pink老師解惑掌握程度：應用34-pink老師解惑視今日復習

盒子模型的組成部分：外邊距、邊框、內邊距、內容

把有寬度的塊級標簽水平居中：margin:0auto

padding：10px20px30px;四邊的內邊距分別是：上邊距10px、右邊距