標籤：npm 它的 協助 relative 通過 rip 高度 置中 red
安裝的軟體有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>
第一周總結
