知識點預習
1.列表2.選擇器
3.CSS的文字樣式屬性
4.元素溢位
5.盒子模型
6.margin負值技巧
7.垂直外邊距合併
8.margin-top塌陷問題

01- 列表
無序列表 ul>li unorder list
清除列表前面的標識 list-sytle:none;
列表預設有外邊框和內邊距

02- CSS選擇器02

/* 1.ID選擇器  id是唯一的; 配合js來操作*/
   #three{
       color:blue;
   }

  /* 2. strong標籤 重要的內容  預設加粗*/
  /* 並集選擇器 組選擇器 */
  span,strong{
     color:green; 
  }

  /* 3.偽類選擇器 '作用在標籤身上 改變狀態'
  滑鼠懸浮: hover
  a:hover{
     color:orange; 
  }

   /* 偽元素  作用在元素'內容身上'*/
  a::before{
       content: "前面增加的內容";
  }

  a::after{
      content: "後面增加";
  }

CSS常用屬性

/* 1.文字對齊 left  center right*/
    text-align: left;

    /* 2.首行縮排  預設大小16px*/
    /* text-indent: 32px; */
    /* em 文字的倍數 */
    text-indent: 2em;

    /* 3.是否斜體   normal*/
    /* font-style: italic; */

    /* 4.是否加粗  normal*/
    font-weight: bold;
    font-size:10px;
    line-height: 20px;
    font-family: "microsoft yahei";

    /* 連寫  一定規則*/
        /* 加粗       斜體  字型大小/行高  字型 */
    font:normal italic 10px/20px "microsoft yahei";

元素溢位
overflow:
visible  預設 超出可視 hidden  超出隱藏 裁剪  scroll          可滾動 不推薦使用
auto  自動
 

05- 盒子模型真實寬高

真實的寬 = 左邊框'border-left' + 右邊框'border-right' + 內容寬'width' + 左邊內邊距'padding-left' + 右邊內邊距'padding-right';
真實的高 = 上邊框'border-top' + 下邊框'border-right' + 內容高'height' + 頂部內邊距'padding-top' + 底部內邊距'padding-bottom';

margin-使用技巧

• margin-top:負值 合併邊框

垂直外邊距合併
垂直外邊距 取上邊元素的底部外邊距和下邊元素頂部外邊距的最大值來當兩個元素得垂直間距,而不是累加

08- margin-top塌陷問題
當設定子元素的margin-top時,沒有作用到子元素自己身上,反而影響了父元素
解決塌陷問題的方式:
1.父元素設定邊框 border
2.父元素設定內邊距 padding
3.設定元素溢位 overflow:hidden
4.通過偽元素

.clearfix:before{
    content:"";
    display:table;
}