盒子模型

把html頁面的元素看作一個矩形的盒子，相當於一個承裝內容的容器。每個矩形都由四個部分組成：填充層(內容) ，內邊框(padding) ，邊框(border) ，外邊框(margin)組成。
box-sizing取值：

• content-box(預設值)----weight，height設定的是content的寬高

• border-box(IE盒模型)----weight，height設定的是元素寬高
  1.增加padding和border之後要想保證盒子元素的寬高不變, 系統會自動減去一部分內容的寬 和高度
  一旦將content-box改變為border-box，這會導致邊框以內的大小不會再改變，一旦改變padding屬性，只會引起填充層高和寬的變化。
  2.浮動
  浮動框不存在文件的普通流中，可以最自由的向左右兩端移動，知道外邊緣碰到寧一個框或者浮動框為止所有普通流中的塊框就像浮動框不存在一樣，其基本語法格式為： 選擇器{float：屬性}

  <style>
  	<!--屬性值 left(左）right(右) none(元素不浮動)-->    
     .logo{
          float: left;
          width: 33%;
          height: 60px;
  		line-height: 60px;
      }
     .creal{
        clear:both;
     }
  </style>
  	<div class=".logo">
     	<img src="../img/1.jpg" >
        <!--清除浮動-->
        <div class="clear"></div>
  	</div>
   
  

  浮動的目的：為了讓多個塊級元素在一行內顯示。
  3.定位
  利用position屬性可以方便的實現元素的定位。position屬性值的四種不同型別的定位：

  • static
    預設值，元素出現在在這次流中，沒有定位。
  • relative
    一般用於設定absolute定位的基準，或者是對某些元素進行微調。
  • absolute
    通常與relative組合使用，元素框從文件流完全刪除。
  • fixed
    元素框的表現類似於position設定為absolute，不過其包含快是視窗本身。

CSS三大特性

1.繼承性

設定父類的一些屬性子類也能繼承使用這就叫做繼承性。

2.摺疊行

當多個選擇器選擇同一個標籤並設定相同屬性時樣式會發生重疊的現象，這個時候元素所應用的元素樣式就會優先順序最高的選擇器所設定的樣式。

3.優先順序

就近原則：離元素越近，優先使用

外部連結樣式<內聯樣式<行內樣式

今天就給大家做到這裡，css做起網頁表面看得很多很複雜，其實大部分就是重複程式碼，多去練習相信你一定會更優秀。個人網站也快搭建完畢，裡面會分享一些傳智大學生活，還有技術專案感想報告，如果有啥想看的技術歡迎加qq：1732552078（詳聊）！下期開始寫Java基礎筆記，不足之處歡迎評論！！