python前端HTML和CSS進階

知識點預習
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;
}