第一週總結

 安裝的軟件有git、npm、node.js、firekeeper、sourcetree。
 開始上手用最原始的html和CSS來製做一個網站的首頁。如今總結一下：首先，總體佈局的思路要清晰，提早規劃好。其次，代碼要規範，好比{}前加空格，:後加空格，寫註釋能夠方便修改和他人理解。最後，細節必定要注意，好比圓角、陰影的大小、分隔線不能忘記、細小的間距也要量準確、元素是否應該對齊等。
1.我對position的兩個定位進一步的瞭解以下：relative是相對定位，相對設置它的元素自己正常定位，在文檔流中仍佔位置。 absolute是絕對定位，在文檔流中不佔位置即脫離了文檔流，只要父元素要設置position：relative；就相對於設置它的元素的父元素定位。
2.相同的樣式能夠用同一個類名。
3.如今知道一些僞元素的用處，像::before、::after能夠在元素以前或以後添加元素併爲它添加樣式。好比在文字前加個小圖標，也可用background-image。
4.還有僞類的理解，像:hover能夠實現鼠標浮上時改變其樣式。
5.除了ID選擇器和class選擇器外，知道像:last-child、:nth-typeof()等能夠幫助單獨對其父元素中某一個類來修改樣式。
6.圖片輪播能夠利用插件swiper製做，在製做分頁播放logo時，遇到了一個問題，設計稿中的先後箭頭是在logo兩邊且不遮擋logo，而我用插件製做後箭頭遮擋了logo。因爲輪播的塊設置了over-flow:hidden;因此箭頭直接用定位的方法會致使不見。後來師傅將輪播的塊外面又加了一個父元素塊並將其寬度改小，而後將在大塊外面的箭頭再定位就行了。
7.因爲屏幕的大小不定，不能給塊的寬度定具體的大小。能夠設置margin:0 auto;讓元素居中；也能夠用百分比適應不一樣屏幕大小。也能夠先定位到中間，再減去或加上必定數值。
position絕對定位來實現居中佈局。適用於塊級元素不給出寬高的狀況下(須要藉助transtrom的tanslateX方法)。
#parent{
    position: relative;
}
#child{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

8.通常咱們給的寬度和高度是元素不包含padding和margin的。
9.塊裏面有文字，能夠不給固定寬度和高度，經過自身大小或margin、padding讓其本身撐開。

 

 

10.讓元素浮動後會出現邊框不能撐開，margin設置值不起做用等問題。清除浮動的方法： 一 添加新元素並讓其clear:both; 二 僞類清除浮動:after（做用於清楚元素的父親） eg：.clear {     content: "";     display: block;     clear:both; } 三 給父級div定義overflow:auto;也可使用hidden。 11 z-index的值越大，就離咱們越近。就像東西，是能夠一層層疊加的，數字越大的疊在最上面。 12 rgba(0,0,0,.5) 爲半透明黑色。 13 box-sizing:border-box;這個我沒用過，可是仍是記下來吧，設置該屬性後width包含padding和border的值。 14 行內元素經過設置display:block;變成塊元素， 塊元素經過display：inline-block可使其不佔一整行。 text-algin: center;對行內元素起做用。 text-decoration：none；能夠去除a的下劃線。 15 三角形能夠經過border來設置，width: 0;  height: 0; border-left: 50px solid transparent;  border- right:50px solidtransparent； border-bottom：100px solid red； 16 <input>標籤type="text"默認有輪廓，用outline：none；去除。 17記得要寫成 <a href"javascript:"></a>