left hid 疊加 開始 修改 不包含 npm 適應 bottom

安裝的軟件有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>

第一周總結