外邊距折疊

• 在網(wǎng)頁中垂直方向相鄰的外邊距會發(fā)生外邊距折疊現(xiàn)象
• 兄弟元素

  • 兄弟元素間鄉(xiāng)里難點垂直外邊距會取最大值

    
    
    10.png
    
    
    外邊距詳細內(nèi)容.png
    
    
    設置下外邊距.png
    
    
    最大值.png
    
    
    ?相鄰的垂直外邊距.png

父子元素外邊距折疊

• 子元素的上外邊距會傳遞給父元素
• 子元素和父元素相鄰的下外邊距不會產(chǎn)生任何效果
  
  12.png
  
  
  11.png
  
  
  13.png
  
  
  box5設置尺寸.png
  
  Box4外邊距設置bottom，box5不會有任何動靜
• 在網(wǎng)頁中垂直方向相鄰的外邊距會發(fā)生折疊現(xiàn)象
• 兄弟元素外邊距折疊：
  • 兄弟元素間相鄰的垂直外邊距會取最大值
• 父子元素外邊距折疊
  • 子元素的上外邊距會傳遞給父元素
  • 子元素和父元素相鄰的下外邊距不會產(chǎn)生任何效果
• 兄弟元素間的外邊距折疊不需要處理，但是父子元素間的上外邊距折疊必須要處理

• 只有相鄰的才會折疊，讓他不折疊就不相鄰了，給父元素加個上外邊框

  
  
  14.png
  
  
  設置box3的border-top，把兩者的外邊距隔開.png

兄弟元素外邊距折疊

• 兄弟元素間相鄰的垂直外邊距會取最大值

行內(nèi)元素盒模型

• 兩個行內(nèi)之間有個縫隙，是換行導致的，把兩個行內(nèi)元素連起來就沒有了

• image.png

• 行內(nèi)元素不支持寬度和高度的設置，寬高都是由內(nèi)容決定的
  內(nèi)邊距

• 上下內(nèi)邊距生效了，沒有擠到別的元素，垂直方向內(nèi)邊距不會影響頁面布局

• image.png

  - 邊框

  • 行內(nèi)元素可以設置邊框，但是垂直方向的邊框不會影響頁面的布局

margin

• 水平方向外邊距生效，垂直方向外邊距不會影響頁面布局，不會擠到別的元素

padding

• 水平方向內(nèi)邊距生效，垂直方向外邊距不會影響頁面布局，不會擠到別的元素
• image.png

文檔流（normal flow）

• 網(wǎng)頁是一個多層的結(jié)構(gòu)，一層摞著一層

  • 能看到的只是網(wǎng)頁的最上層

  • 在網(wǎng)頁的最底層，最基礎的層被稱為文檔流

  • 元素創(chuàng)建后默認都在文檔流中排列

    • image.png

  • 元素在文檔流里的特點

    • 塊元素
      • 在文檔流中從上到下垂直排列，也就是所謂的獨占一行，如果離開了文檔流，塊元素就不會垂直排列
      • 元素默認寬度是auto，塊元素在文檔流中默認寬度是父元素的全部，嚴格來書盡量把父元素撐滿
      • 塊元素在文檔流中默認高度是被內(nèi)容撐開的

• 行內(nèi)元素

  • 行內(nèi)元素在文檔流中自左向右水平排列，如果一行中不足以容納所有的行內(nèi)元素，元素會換到第二行，繼續(xù)自左向右水平排列（和我們的書寫習慣是一致的）

    
    
    image.png

1.png

• 現(xiàn)在所看到的就是默認寬度和高度，行內(nèi)元素的默認寬度和高度都是被內(nèi)容撐開的， 同時也不能指定寬度和高度

  
  
  2.png
  
  
  寫個樣式.png
  
  
  3.png
  
  
  4.png
  
  
  創(chuàng)建一個span.png
  
  
  5.png
  
  
  6.png

默認樣式

• 可以通過引入重置樣式表，來清除默認樣式，重置樣式表就是一個專門用來清除默認樣式的樣式表
  
  7.png
  
  
  8.png
  
  有個縫隙
  
  9.png
  
  p和box有個距離
• 在網(wǎng)頁中，瀏覽器為了確保網(wǎng)頁在沒有CSS樣式的前提下也可以正常瀏覽
• 所以瀏覽器都會為元素設置一些默認的樣式
• 但是這些默認的樣式會影響到我們所編寫的樣式
  • 并且在不同的瀏覽器中，默認樣式也會有一些差異
  • 所以在編寫網(wǎng)頁前，我們都需要去除調(diào)瀏覽器的默認樣式
    • 先明確距離是誰的
    • HTML盒模型.png
      
      
      內(nèi)容區(qū).png
      
      
      默認樣式.png
      
      
      默認樣式2.png
      
      
      margin設置為0，就把默認的覆蓋了.png
      
      
      外邊距折疊.png
      
      
      image.png
      
      

      按住方向鍵可以修改

      
      
      去除項目符號.png
      
      
      去除所有樣式.png
• 這種是使用最方便的方式，有可能存在一些樣式?jīng)]有清楚徹底（用于臨時開發(fā)，或者移動端）
• 還可以通過引入重置樣式表，來清除默認樣式

  • 重置樣式表就是一個專門用來清除默認樣式的樣式表
    

    -
    重置樣式表.png

所有元素.png

重置樣式表2.png

• 重置樣式表有兩個版本
  • reset.CSS
    • 會直接將瀏覽器中所有默認樣式去除（這個用的多一些）
  • normalize.css
    • 并不是簡單去除樣式，而是去除那些不必要的，統(tǒng)一那些需要使用的

15.png

16.png

• 首先清除默認樣式

  
  
  17.png
• 先寫外邊的，再寫里面的

設置外部的容器

18.png

設置里邊的容器

二倍圖.png

19.png

image.png

image.png

image.png

image.png

image.png

京東左側(cè)菜單

• 一般情況用ul+li做

• 這個網(wǎng)頁結(jié)構(gòu)的編寫方式不是固定的，很靈活
  用nav+div的方式寫

  
  
  一個div.png

一個這個就是一個div.png

• 手機，運營商，數(shù)碼有三個超鏈接
• Item是項的意思
• 斜杠可以直接寫/，不過這樣不好，一般放到標簽里，比如寫個<span>/</span>，設置樣式的時候好設置
  
  line是線的意思.png
  
  
  先清除默認樣式.png
  
  把內(nèi)外邊距都去除掉
  沒有用ul，去掉列表前面的點就不用管了
  
  Div的寬度直接看網(wǎng)站的數(shù)據(jù).png
  
  
  li的 寬度190，高度25.png
  
  
  設置菜單項的大小.png
  
  這個時候整個外邊的容器就可以了
  
  字整體往右移動，用padding-left.png
  
  
  這個padding用標尺量出來的內(nèi)邊距18px，也可以直接看網(wǎng)站數(shù)據(jù).png
  
  
  設置一個左padding字就會往右走了.png
  
  為了保證總寬度190，因為設置了左內(nèi)邊距18，就要用190-18，總寬度就是172px
  設置hover的效果
  
  設置hover的效果.png
  
  設置菜單項中鏈接的樣式
  
  設置菜單項中鏈接的樣式.png
  
  設置超鏈接的鼠標移入效果
  修改字體顏色

Text-decoration：none（文本修飾）
作用是去除超鏈接下劃線

現(xiàn)在需要修改斜杠的效果
.item .line{ Font-size：12px；}這是修改線的大小

所有的行內(nèi)元素都放到一行里，這時候就近了，這種方式是最快的方式.png

設置外部容器的大小.png

所有菜單項加一起高度450，總高度是470，所以上下內(nèi)邊距各10像素
再調(diào)整就去掉背景顏色
先設置居中margin：50-auto；

背景顏色是白色背景，看不出來白色就給body設置背景顏色.png

京東右側(cè)列表

找網(wǎng)頁中的圖片方法，默認格式是webp.png

如果不想用這個格式，可以把這個.webp刪了.png

一個塊里放了三個圖片.png

這表示整個外層的容器.png

ul寫個名字，img-list是圖片列表的意思，名字隨意寫，寫語義化方便理解鍛煉單詞能力.png

image.png

這個類名比較簡單，起不起都行，最好還起一個，熟悉一下

圖片應該是可以點擊的超鏈接
這時候就有了第一個列表了，后面的直接復制粘貼

image.png

直接寫個div，里面放三個圖片也行，但是分成三塊，這種方式最好用塊元素布局，這樣處理起來比較簡單

圖片列表效果（素顏妝），這是剛剛定好結(jié)構(gòu)沒有寫樣式的樣子，

image.png

跟左側(cè)無序列表順序一樣，先清除默認樣式
先清除內(nèi)外邊距

image.png

去除項目符號.png

一般的順序先寫外邊再寫里邊，根據(jù)個人習慣，寫的方式不限.png

設置外部容器的大小.png

現(xiàn)在ul是這么大，因為沒有給ul設置寬度，ul的寬度默認是全屏的.png

先確定ul的寬度，可以用標尺測量,Ul的寬度190px.png

ul高度470px.png

設置好容器寬，高，顏色.png

ul在這里，因為現(xiàn)在ul的寬度小于圖片的寬度，導致ul看不清楚.png

這個在最后是要刪了的.png

現(xiàn)在設置里邊的容器,寬度是190，但是實際上圖片的寬度是380，這種圖片我們叫做二倍圖.png

現(xiàn)在很多高清屏或者手機屏，像素比較小，所以圖片在高清屏上可能就把圖片放大了，如果放1:1的圖片，圖片放到了就會導致圖片不清楚，所以常見的方案一般會設置一個比較大的圖片，這樣可以確保即使手機對網(wǎng)頁縮放兩倍，圖片也會確保比較高的清晰度，這個時候需要設置圖片的大小

圖片是li的子元素，所以可以寫成.item img{width:100%;}
讓圖片的寬度和父元素item的寬度是一樣的

打開效果，圖片就跟不寬了，圖片跟容器的寬度一致.png

圖片間的距離10px.png

等于這兩個地方都是10px.png

設置li的邊距.png

這個時候可以去掉ul的背景顏色.png

跟原圖差不多了.png

Margin：50px auto；往下拉一拉.png

最后一個li也有一個外邊距，在這能看見，但實際上沒有任何的影響.png

li的高度是被內(nèi)容撐開的，圖片多高，li就多高.png

圖片本身高度300，顯示出來是154，比實際高度多了4個像素，item的font-size：0就不會多出4個像素了.png

Div寫個box1， 樣式.box1{border:10px red soli:}

圖片和邊框沒有嚴格貼合，有縫隙.png

直接在.box1里面寫font-size：0，這個縫隙就沒了.png