前端複習筆記5-css(前兩篇小結)

難點問題總結

行內標籤（不可置換元素）垂直方向的邊距問題

• a span label 這些是不可置換元素，不能添加垂直方向的邊距。
• input img 這些是可置換元素，可以添加垂直方向的邊距。

塊級標籤和行內標籤水平居中問題

• 1、塊級盒子內部只有文字 text-align沒一點毛病

• 2、塊級盒子內部是行內標籤，文字在行內標籤內部

• 3、塊級盒子內部是塊級標籤，兩個塊級標籤內部都有文字

• 4、塊級盒子居中的問題

  • 如果想讓塊級的盒子在塊級的盒子當中水平居中，
    對內部的塊級盒子用margin 0 auto
  • 如果想讓行內的盒子在塊級的盒子當中水平居中，
    對外部的塊級盒子用text-align：center;

• 5、單行文本在塊級盒子中心問題

  text-align:center
  line-height:盒子高度
  把這兩行要添加給外部的塊級盒子

• 6、多行文本在塊級盒子中心問題

  只能用padding-top，添加內邊距把內容區域往下擠。但是盒子的大小 會變大，我們要去精確還原盒子。

精確還原盒子問題（盒子設置了寬高）

• 如果盒子不設置寬高，會自動還原盒子；
• 外部盒子設置了寬400，內部盒子不設置寬，那麼內部盒子寬默認是 400，當給內部盒子添加左內邊距padding-left:100px；那麼這時候內部盒子 不需要精確還原，因爲沒有設置寬，盒子會自動減去相應的內容區域。
• 外部盒子設置了寬400，內部盒子也設置了寬400，當給內部盒子添加 左內邊距padding-left:100px；那麼內部盒子水平方向會加大100，造成內 容溢出，這會我們需要精確還原盒子，手動去減去相應大小的內容區域。

父子關係盒子的間距處理問題（垂直bug）

兄弟盒子的間距處理問題（垂直塌陷）（只會在標準文檔流當中出現）

背景圖片的設置

背景的綜合設置

background: red url(img/5.jpg) no-repeat 50px 100px/100% 100%;
綜合屬性設置：顏色 圖片路徑 重複方式 背景定位/背景大小
這幾個值，順序可以改變，但是定位和大小必須在一起。