1.css核心樣式

1.2 css常用樣式

1.2.1 字體屬性

• font-weight 文字粗細(xì)

  作用：設(shè)置文字是否加粗顯示

  屬性值：單詞類型和數(shù)字類型

  單詞類型：

  屬性值	說明
  normal	默認(rèn)值，定義標(biāo)準(zhǔn)文字
  bold	定義粗體文字 b,strong
  bolder	定義更粗的字體
  lighter	定義更細(xì)的字體

  數(shù)字類型：100-900 整百 400:normal 700:bold

• font-style 字體風(fēng)格

  作用：設(shè)置文字是否斜體顯示

  屬性值：單詞

  屬性值	說明
  normal	設(shè)置正規(guī)的字體，大多數(shù)標(biāo)簽的默認(rèn)值
  italic	設(shè)置斜體的文字，主要針對英文，要求英文以字體中的斜體樣式顯示
  ablique	設(shè)置傾斜的文字，只是將文字傾斜顯示，與字體無關(guān)

• line-height:行高

  作用：設(shè)置一行文字實際占有的高度，文字字號在行高是垂直居中的

  屬性值	說明
  px	設(shè)置行高的具體的像素值
  百分比	設(shè)置的本身字號像素值的百分比

• font 綜合寫法

  font: 字體 字號 行高 加粗 斜體

  注意：在進(jìn)行綜合書寫，必須有字號和字體參與，必須字號在前，字體在后，不能顛倒順序

  <style>
    p{
      /* 寫法1：字號 字體 */
      font:12px "宋體";
      /* 寫法2：字號/行高 字體*/
      font:12px/30px "宋體";
        /* 寫法3：粗細(xì) 風(fēng)格 字號/行高 字體*/
      font:bold italic 14px/20px "宋體"
    }
  </style>
  

1.2.1 文本屬性

• 水平對齊 text-align

  作用：設(shè)置文本水平方向的對齊，設(shè)置的是整體的

  屬性值	說明
  left	居左對齊 默認(rèn)
  center	居中對齊
  right	居右對齊

• text-decoration 文本修飾屬性

  作用：設(shè)置文本整體是否有線條的修飾效果

  一般用來去除<a>標(biāo)簽的默認(rèn)樣式

  屬性值	說明
  none	沒有修飾，默認(rèn)
  overline	上劃線
  line-through	中劃線，刪除線 <del>標(biāo)簽的默認(rèn)值
  underline	下劃線 <a>標(biāo)簽的默認(rèn)值

• 文本縮進(jìn) text-indent

  作用：設(shè)置段落首行是否進(jìn)行縮進(jìn)

  屬性值	說明
  px單位	表示首行縮進(jìn)多少像素
  em單位	首行縮進(jìn)幾個中文字符的位置
  百分比	縮進(jìn)文字所在標(biāo)簽的父級標(biāo)簽的width屬性值的百分比

  正負(fù)代表方向：正：右縮進(jìn)，負(fù)：左縮進(jìn)

1.3 盒子模型

盒子模型：width border padding margin height

書寫元素內(nèi)容區(qū)域： width height

盒子實體化區(qū)域：width height padding border

盒子實際占位的位置：width height paddign border margin

1.3.1 width

width:寬度

作用：設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度

注意：1.塊級元素的寬度默認(rèn)占據(jù)瀏覽器整行，行內(nèi)級元素的寬度由內(nèi)容撐開

2.body不需要設(shè)置寬度，寬度自適應(yīng)瀏覽器窗口的寬度

1.3.2 height

height:高度

作用：設(shè)置可以添加元素內(nèi)容區(qū)域的高度

屬性值與寬度的類似

注意：1.內(nèi)部元素的內(nèi)容自動撐開的高度，元素高度自適應(yīng)內(nèi)部內(nèi)容的高度

1.3.3 padding

padding：內(nèi)邊距

作用：設(shè)置元素的邊框內(nèi)部到寬高區(qū)域之間的距離

特點：可以加載背景，不能書寫嵌套的內(nèi)容

padding:復(fù)合屬性 可以分別書寫四個方向的屬性 上 右 下 左

三個值：上 右 下; 左同右

兩個值：上 右; 下同上 左同右

一個值：四個方向的值相同；

1.3.4 border

border：邊框

作用：設(shè)置內(nèi)邊距外面的邊界區(qū)域，作為盒子的實體化的最外層；

屬性值：寬度 線的形狀 顏色；

按照屬性值的類型劃分：

• 線寬 border-width

  作用：設(shè)置邊框線的寬度

  有四個方向的值

• 線型 border-style

  作用：設(shè)置變量的線條形狀

  屬性值	說明
  none	定義無邊框
  solid	定義實線
  dashed	定義虛線
  dotted	定義點線
  double	定義雙線
  groove	定義3D凹槽邊框 border-color
  ridge	定義3D壟狀邊框
  inset	定義3d內(nèi)容凹陷效果
  autset	定義23d內(nèi)容凸出效果

• 邊框顏色 border-color

  作用：設(shè)置邊框的顏色

根據(jù)邊框的方向劃分：

• border-top:設(shè)置上邊框
• border-right:設(shè)置右邊框
• border-bottom:設(shè)置下邊框
• border-left:設(shè)置右邊框

根據(jù)方向和類型劃分

border-方向-類型：如 border-top-width:10px;

1.3.5 margin

margin:外邊距

作用：設(shè)置盒子與盒子之間的距離

特點：不能渲染背景

屬性值：常用px為單位的數(shù)值

外邊距的設(shè)置方式與內(nèi)邊距設(shè)置差不多，參考內(nèi)邊距

1.3.6 盒子模型應(yīng)用

• 清除默認(rèn)樣式

  大部分標(biāo)簽會被瀏覽器加載默認(rèn)樣式，會對布局造成一些影響

  <style>
   blockquote,body,dd,dir,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,input,legend,menu,ol,optgroup,p,pre,tbody,td,textarea,tfoot,th,thead,ul{margin:0;padding:0}
  </style>
  

• 清除列表的默認(rèn)樣式

  <style>
    ul,ol{
      /*清除前面的默認(rèn)樣式 小點 */
      list-style:no ne;
    }
  </style>
  

• 清除a標(biāo)簽的默認(rèn)樣式

  <style>
    a{
      text-decoration: none;
      color: #ccc;
    }
  </style>
  

• 清除加粗效果

  <style>
    h1,h2,h3,h4,h5,h6,b,strong{
      font-weight:normal;
    }
  </style>
  

• 初始化一些標(biāo)簽

  <style>
    body {
      color: #333;
      font-size: 14px;
      font-family: Arial,"宋體";
    }
  </style>
  

1.3.7 height的應(yīng)用

height的應(yīng)用：

• 如果設(shè)置了高度，盒子占有的高度位置就確定死了，后面的同級元素會緊挨著加載

  overflow屬性

  設(shè)置了高度的盒子，如果盒子內(nèi)容加載的高度超過父級，會出現(xiàn)溢出效果。通過overflow屬性，進(jìn)行溢出部分的顯示效果

  屬性值	說明
  visible	默認(rèn)值，可見的可視的，溢出部分顯示
  hidden	溢出部分直接隱藏，隱藏超過邊框范圍的內(nèi)容
  scroll	隱藏的部分出現(xiàn)滾動條，可以拖動滾動條看到隱藏部分，多出的盒子高度的部分不顯示，無論有沒有溢出，水平和垂直方向都會出現(xiàn)滾動條
  auto	自動的，如果沒有溢出就正常顯示，如果有溢出，溢出的方向自動出現(xiàn)滾動條

• 如果不設(shè)置高度，會根據(jù)標(biāo)簽內(nèi)部高度自動撐開

  要求盒子高度必須自適應(yīng)內(nèi)部內(nèi)容的高度，或者設(shè)置height的屬性值是自動的

1.3.8 居中

文字水平居中：text-align:center;

文本的垂直居中：單行文本：利用行高，設(shè)置行高等于高度

多行文本：讓父元素高度自適應(yīng)，子盒子撐開父盒子，然后給父盒子設(shè)置內(nèi)邊距。

元素的垂直居中：讓父元素高度自適應(yīng)，子盒子撐開父盒子，然后給父盒子設(shè)置內(nèi)邊距。

元素水平居中：設(shè)置margin,水平方向的值設(shè)置為auto,auto只在水平方向有作用。垂直方向無效。

1.3.9 父子盒模型

<head>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
    .box1 {
        width: 1000px;
        height: 100px;
      border: 1px solid #f40;
    }
    .box1 p {
      width: 200px;
      height: 100px;
      margin-right: 10px;
      float: left;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <p></p> 
    <p></p> 
    <p></p> 
    <p></p> 
  </div>
</body>

特殊情況：盒模型自動內(nèi)減

父子盒模型，只有一個子元素且子元素是類似div標(biāo)簽必須占一行，不設(shè)置子元素的width屬性，子元素的width屬性值會自動加載父級元素的width.如果同時設(shè)置了子元素水平方向的border,padding,margin.會自動去縮減寬度的值

1.3.10 margin塌陷現(xiàn)象

在垂直方向如果有兩個元素的外邊距有相遇的，瀏覽器中加載的真正外邊距不是兩個間距的加和。而是兩個邊距中值比較大的，邊距值小的塌陷到了邊框值大的內(nèi)部。

解決：同級之間：只給一個元素設(shè)置，不要進(jìn)行拆分。

父子之間：可以父元素設(shè)置border和padding將邊距隔離開。常用的方法是父子盒子之間的距離不要子元素的margin去踹出來，給父元素設(shè)置padding

注意：水平方向沒有塌陷現(xiàn)象

1.4 標(biāo)準(zhǔn)文檔流

標(biāo)準(zhǔn)文檔流：元素排布布局的過程中，元素會默認(rèn)自動從左往右，從上往下流式排列方式，前面內(nèi)容發(fā)生了變化，后面的內(nèi)容位置也會隨著發(fā)生變化。

HTML就是一種標(biāo)準(zhǔn)文檔流文件。

HTML中的標(biāo)準(zhǔn)文檔流特點通過兩種方式體現(xiàn)：微觀現(xiàn)象，元素等級

元素等級：在標(biāo)準(zhǔn)流中，大部分元素是區(qū)分等級的，習(xí)慣將元素劃分為常見的加載級別：塊級元素，行內(nèi)元素，行內(nèi)塊元素

塊級元素

• 塊級元素可以設(shè)置寬高，在瀏覽器中正常加載
• 塊級元素必須獨占一行，不能在其他任何標(biāo)簽并排一行
• 塊級元素如果不設(shè)置寬度，會自動撐滿父級的width區(qū)域；高度不設(shè)置會被內(nèi)容自動撐開高度。

行內(nèi)元素

• 行內(nèi)元素不能正常加載寬度和高度屬性，其他的盒模型屬性雖然能設(shè)置，但是容易出現(xiàn)加載問題
• 行內(nèi)元素可以與其他的行內(nèi)或行內(nèi)塊元素并排一行顯示
• 行內(nèi)元素不論是否設(shè)置寬高，寬度和高度都只能被內(nèi)容自動撐開

行內(nèi)塊元素

• 行內(nèi)塊元素可以設(shè)置寬度和高度
• 行內(nèi)塊元素可以與其他的行內(nèi)或行內(nèi)塊并排一行顯示
• 行內(nèi)塊元素如果不設(shè)置寬高，要么以原始尺寸加載要么被內(nèi)容撐開
• 行內(nèi)塊依舊具有標(biāo)準(zhǔn)流的圍觀性質(zhì)，例如空白折疊現(xiàn)象

1.4.1 顯示模式 display

標(biāo)準(zhǔn)流中的元素有自己默認(rèn)的瀏覽器加載模式，但是加載模式不是一成不變的，后期可以通過display屬性更改一個標(biāo)簽的顯示模式。

屬性值：元素根據(jù)屬性值不同，可以加載對應(yīng)的元素等級的顯示模式的特點。

脫離標(biāo)準(zhǔn)流：display屬性更加的顯示模式?jīng)]有改變標(biāo)準(zhǔn)流的本質(zhì)。

標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法：浮動，絕對定位，固定定位

1.4.2 浮動

浮動時一種非常重要的布局屬性

屬性名：float 漂流 浮動的意思

屬性值：left 左浮動 right 右浮動

作用：讓元素脫離標(biāo)準(zhǔn)流，同一級的浮動的元素可以并排在一排顯示

1. 浮動元素脫離標(biāo)準(zhǔn)流：

   a.標(biāo)準(zhǔn)流文檔特點：區(qū)分行塊，塊級元素可以設(shè)置寬高，必須獨占一行；行內(nèi)元素不能設(shè)置寬高，可以并排一行

   b.浮動元素脫離了標(biāo)準(zhǔn)流的限制，具備行塊二象性?？梢栽O(shè)置寬高，可以并排一行，不會有空白折疊現(xiàn)象。如果元素不設(shè)置寬高，可以被元素自動撐開。

2. 浮動元素依次貼邊

   浮動屬性值：left right

   浮動方向設(shè)置不同，進(jìn)行布局時，加載位置方向不同

   如果父盒子的寬度足夠，會依次在浮動方向一行顯示，當(dāng)父盒子寬度不夠，后面的盒子會掉到下一行按照浮動方向排列。

3. 浮動的元素沒有margin塌陷

   margin塌陷現(xiàn)象的出現(xiàn)在標(biāo)準(zhǔn)流中，浮動元素已經(jīng)脫離標(biāo)準(zhǔn)流，不再出現(xiàn)margin塌陷現(xiàn)象

4. 浮動的元素讓出標(biāo)準(zhǔn)流位置

   元素浮動之后，脫離了標(biāo)準(zhǔn)流，會將原來占有的標(biāo)準(zhǔn)流位置讓給后面一個同級元素

   元素浮動后不再占據(jù)原來的位置，后面的元素會層疊上來。在低版本ie瀏覽器有兼容問題。如果沒有特殊需求，不允許一個元素浮動，一個元素不浮動。特殊情況：字圍現(xiàn)象；

5. 浮動元素存在的問題

   標(biāo)準(zhǔn)流中的元素，不設(shè)置高度的情況下，都能被內(nèi)部的標(biāo)準(zhǔn)流元素自動撐高。如果內(nèi)部子元素進(jìn)行了浮動，浮動的子元素是撐不高標(biāo)準(zhǔn)流父親的；

   父元素沒有高度，會影響后面元素的標(biāo)準(zhǔn)流位置，如果浮動子元素足夠高時，有可能影響到后面浮動元素的貼邊。

6. 清除浮動

   • clear:both;給父元素設(shè)置

   • 給標(biāo)準(zhǔn)流的父元素添加一個高度

   • 隔墻法 在兩個大盒子之間添加一個空的div標(biāo)簽，標(biāo)簽上帶有clear:both屬性

   • 偽類： :after 選中某個標(biāo)簽內(nèi)部的最后的位置 ，前面緊跟普通選擇器，一般給清除浮動的父盒子添加一個clearfix的類名

     .clearfix:after {
       content: "1";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
     }
     

   • 添加溢出隱藏 屬性 overflow:hidden

1.5 偽類選擇器

偽類不能單獨出現(xiàn)，必須和其他選擇器搭配使用

不給標(biāo)簽添加任何屬性，偽類名都是語法提前規(guī)定好的，偽類選擇器后面添加的樣式不一定立即加載到瀏覽器之上，只有用戶觸發(fā)了對應(yīng)的行為，偽類的樣式才會立即加載。

a標(biāo)簽的偽類

a標(biāo)簽可以根據(jù)用戶行為不同劃分四種狀態(tài)，用戶觸發(fā)對應(yīng)的行為，加載對應(yīng)的樣式。書寫順序一定不能顛倒

a:link {
  color:gray; /* 訪問前的狀態(tài) */
}
a:visited {
  color: cyan; /* 訪問后的狀態(tài) */
}
a:hover {
  color: red; /* 鼠標(biāo)懸停的狀態(tài) */
}
a:active {
    color: yellow; /* 鼠標(biāo)點擊的狀態(tài) */
}

1.6 背景屬性

1.6.1 背景顏色 background-color

作用：在盒子區(qū)域添加背景顏色的修飾

加載區(qū)域：在border及以內(nèi)加載背景顏色。

屬性名：顏色名，顏色值

1.6.2 背景圖片 background-image

作用：給盒子添加圖片的背景修飾

加載范圍：默認(rèn)加載到邊框以內(nèi)部分，后期如果圖片不重復(fù)加載，加載從border以內(nèi)開始。

屬性值：url(圖片路徑)

1.6.3 背景重復(fù) background-repeat

作用：設(shè)置添加的背景圖是否要在盒子中重復(fù)進(jìn)行加載。

1.6.4 背景定位 background-position

作用：主要用于設(shè)置不重復(fù)的圖片在背景區(qū)域的加載開始位置

屬性值：有三種寫法。單詞表示法，像素表示法，百分比表示法，無論哪種寫法，屬性值都有兩個，值之間用空格分隔。默認(rèn)位置是 0 0 .border以內(nèi)的左上角頂點為頂點。

第一個值表示 垂直方向

第二個值表示 水平方向

單詞表示法：center left right;

像素表示法：

.box{
  width: 100px;
  height: 100px;
  background-image: url("iamge/l.jpg");
  background-position: 0 -10px;
}

1.6.5 背景附著 background-attachment

作用：設(shè)置背景圖片是否隨著頁面或者盒子的滾動而滾動。

屬性值

1.6.6 background 連寫

body {
  /* 背景圖片 是否平鋪 背景位置 背景附著 背景顏色 */
  background: url('iamg.jpg') no-repeat center top scroll lightblue;
}

1.6.7 背景應(yīng)用

• 替換插入圖，如logo圖

  讓文字消失的方法：1.設(shè)置文學(xué)字號為0，有兼容性問題

  2.利用text-indent 和 overflow 解決

• padding區(qū)域背景圖

  .list {
    width: 300px;
    padding-left: 10px;
    margin: 10px;
    list-style: none;
    font: 16px/32px "微軟雅黑";
  }
  .list li {
    background: url("iamges/star.jpg") no-repeat left center;
    padding-left: 20px;
  }
  

• 精靈圖

  為了有效減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了css精靈技術(shù)(css Sprites css雪碧)

  css精靈：一種處理網(wǎng)頁背景圖像的方式。

  由很多小的背景圖合成大圖就叫做精靈圖。

  通過背景圖和背景定位，利用切圖工具選取需要的位置

  p {
    width: 80px;
    height: 20px;
    background: url("images/icons.png") no-repeat -146px -48px;
  }
  

1.7 C3背景屬性

1.7.1 背景半透明

顏色值新增：rgba a：alpha 0-1

1：完全顯示 0：透明

注意：背景半透明是盒子半透明，盒子里面的內(nèi)容不影響；

.box {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,.5);
}

應(yīng)用：1.字體，邊框 也可使用半透明

1.7.2 背景縮放 background-size

設(shè)置背景圖片的尺寸。

1.8 定位 position

作用：設(shè)置定位的元素，它需要根據(jù)某個參考元素發(fā)生位置偏移。

偏移量屬性：定位的元素想發(fā)生位置移動，必須搭配偏移量的使用

左右：left right

上下：top bottom

1.8.1 相對定位 relative

參考：標(biāo)簽加載的原始位置。

性質(zhì)：

1. 相對定位的元素沒有脫離標(biāo)準(zhǔn)流。占有原來的位置
2. 元素顯示效果上 原位留坑 形影分離

注意：

1. 偏移量屬性的值區(qū)分正負(fù)。正：與屬性名相反；負(fù)：與屬性名相同

2. 同一個方向上不能設(shè)置兩個偏移量，設(shè)置兩個，水平方向會加載left,垂直方向會加載top。

   建議：書寫時從水平和垂直方向各挑一個

3. 由于相對定位的參考元素是自身，left的正值等價于right的負(fù)值。top的正值等價于bottom的負(fù)值。

實際應(yīng)用：

1. 由于相對定位元素比較穩(wěn)定，未脫標(biāo)。后續(xù)可以選擇相對定位的元素應(yīng)用為絕對定位的參考元素 子絕父相。
2. 相對定位比較穩(wěn)定，可以在占有原始位置的情況下，對加載效果區(qū)域進(jìn)行位置微調(diào)，對文字進(jìn)行微調(diào)。

.p {
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  left:100px;
}

1.8.2 絕對定位 absolute

參考元素：參考的是距離最近的有定位的祖先元素，如果祖先元素沒有定位，參考body.

必須搭配偏移量屬性才會發(fā)生移動

性質(zhì)：

1. 絕對定位的元素會脫離標(biāo)準(zhǔn)流，不再占據(jù)原來的位置
2. 絕對定位的元素寬高不會失效。不設(shè)置寬高只能被內(nèi)容撐開。
3. 不用的參考元素以及不同的偏移量組合，導(dǎo)致定位元素參考點不同，具體位移效果不同
4. 由于參考點不同，left的負(fù)值不再等價于right的正值。top的負(fù)值不再等價于bottom的正值。

.box {
  width: 100px;
  height: 100px;
  position: relative;
}
.box .son{
  width: 50px;
  height:50px;
  position: absolute;
  left: 50px;
  top:50px;
}

1.8.3 固定定位 fixed

固定定位脫離標(biāo)準(zhǔn)流

參考元素：瀏覽器窗口

參考點：瀏覽器窗口的四個頂點，跟偏移量組合方向有關(guān)。

由于瀏覽器窗口的四個頂點不變，所以固定定位的元素也是始終不變的

性質(zhì)：脫離了標(biāo)準(zhǔn)流，可以設(shè)置寬高，根據(jù)偏移量屬性可以任意設(shè)置在瀏覽器窗口的位置。

.backtop {
  position:fixed;
  right: 100px;
  bottom: 100px;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  font: 18px/50px "微軟雅黑";
  color: #333;
  text-decoration: none;
}

1.8.4 定位的應(yīng)用

• 壓蓋效果

  .box {
    width: 440px;
    position: relative;
    border:5px solid red;
  }
  .box p {
    position: absolute;
    right: 50px;
    bottom:50px;
    width: 50px;
    height: 50px;
    background-color: pink;
  }
  

• 居中

  .box {
    width: 440px;
    position: relative;
    border:5px solid red;
  }
  .box p {
    width: 50px;
    height: 50px;
    background-color: pink;
    position: absolute;
    left: 50%;
    top:50px;
    margin-left: -25px;
  }
  
  

• 定位壓蓋順序 z-index

  默認(rèn)壓蓋順序。后寫的會壓蓋前面的。

  書寫代碼時，需要注意壓蓋效果。必須合理設(shè)置HTML的順序書寫。

  .box {
    width: 300px;
    height: 300px;
    background-color: blue;
  }
  .box1 {
    width: 100px;
    height: 100px;
    background-color:pink;
    position:fixed;
    top:0;
    left:0;
    z-index:4;
  }
  .box2 {
    width: 50px;
    height: 50px;
    background-color:green;
    position:absolute;
    top:0;
    left:0;
  }
  

  自定義壓蓋順序：z-index

  屬性值是數(shù)字。數(shù)字大的會壓蓋數(shù)字小的。如果屬性值相同，按照HTML的書寫順序壓蓋。

  z-index只要給定位的元素設(shè)置才會生效

  父子盒模型中，如果父子盒子都進(jìn)行了定位，與其他的父子級有壓蓋部分：

  父盒子：如果不設(shè)置z-index，后寫的壓蓋先寫的，如果設(shè)置了z-index屬性，值大的壓蓋值小的

  子級盒子：如果父級沒有設(shè)置z-index屬性，子級z-index大的會壓蓋小的；如果父級設(shè)置了z-index值，無論子級值多少，都是父級的值大的子級壓蓋父級值小的子級，俗稱“從父效應(yīng)”。