知識(shí)點(diǎn)預(yù)習(xí)
1.列表2.選擇器
3.CSS的文本樣式屬性
4.元素溢出
5.盒子模型
6.margin負(fù)值技巧
7.垂直外邊距合并
8.margin-top塌陷問題

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁(yè)制作,對(duì)自上料攪拌車等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

01- 列表
無序列表 ul>li unorder list
清除列表前面的標(biāo)識(shí) list-sytle:none;
列表默認(rèn)有外邊框和內(nèi)邊距

02- CSS選擇器02

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

  /* 2. strong標(biāo)簽 重要的內(nèi)容  默認(rèn)加粗*/
  /* 并集選擇器 組選擇器 */
  span,strong{
     color:green; 
  }

  /* 3.偽類選擇器 '作用在標(biāo)簽身上 改變狀態(tài)'
  鼠標(biāo)懸浮: hover
  a:hover{
     color:orange; 
  }

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

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

CSS常用屬性

/* 1.文本對(duì)齊 left  center right*/
    text-align: left;

    /* 2.首行縮進(jìn)  默認(rèn)大小16px*/
    /* text-indent: 32px; */
    /* em 文字的倍數(shù) */
    text-indent: 2em;

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

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

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

元素溢出
overflow:
visible  默認(rèn) 超出可視 hidden  超出隱藏 裁剪  scroll          可滾動(dòng) 不推薦使用
auto  自動(dòng)

05- 盒子模型真實(shí)寬高

真實(shí)的寬 = 左邊框'border-left' + 右邊框'border-right' + 內(nèi)容寬'width' + 左邊內(nèi)邊距'padding-left' + 右邊內(nèi)邊距'padding-right';
真實(shí)的高 = 上邊框'border-top' + 下邊框'border-right' + 內(nèi)容高'height' + 頂部?jī)?nèi)邊距'padding-top' + 底部?jī)?nèi)邊距'padding-bottom';

margin-使用技巧

• margin-top:負(fù)值 合并邊框

垂直外邊距合并
垂直外邊距 取上邊元素的底部外邊距和下邊元素頂部外邊距的最大值來當(dāng)兩個(gè)元素得垂直間距,而不是累加

08- margin-top塌陷問題
當(dāng)設(shè)置子元素的margin-top時(shí),沒有作用到子元素自己身上,反而影響了父元素
解決塌陷問題的方式:
1.父元素設(shè)置邊框 border
2.父元素設(shè)置內(nèi)邊距 padding
3.設(shè)置元素溢出 overflow:hidden
4.通過偽元素

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