CSS佈局-筆記

1. Cascading Style sheets,層疊樣式表;
2. style屬性，是內聯樣式，就是寫在標籤裏的樣式；
3. 外部樣式，用link標籤的方式引入stylesheet
4. <link rel="stylesheet" href="./a.css">
5. 總結

• 內聯style屬性；
• style標籤；
• 外部文件css link
• @import url(./b.css);

6. 佈局問題，必定要背

給全部的子元素加上float:left;
給子元素的爸爸添加上名爲clearfix的類；

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
複製代碼

7. 頁面默認字體大小是16px
8. 文字裝飾爲空，取消下劃線
   text-decoration: none
9. 使la包裹住a,
   display: block
10. 跟隨爸爸的顏色；有些元素能夠繼承，有些不能夠，color能夠；
    color: inherit;
11. padding順序是上右下左；
    padding: 20px 16px 20px 16px;
12. 塊級元素div高度由其內部文檔流元素的高度總和決定；
13. 內聯元素高度跟字體及字體設計師設置的參數有關；
14. 文檔流：文檔內元素的流動方向；內聯元素從左往右流動，遇到寬度不夠換行繼續流動；塊級元素每一個塊佔一行，一次從上往下；
15. border調試大法：border:1px solid red;
16. 內聯元素很長時默認不會打斷，添加word-break:break-all;能夠將其打斷；
17. display:inline-block;儘可能不用這個，用float;
18. 字體基線對齊；
19. 字體有建議行高；
20. 深刻了解，搜索「方應杭 CSS line height」;
21. height儘可能不要寫，會有bug；
22. position: fixed;脫離文檔流；相對於屏幕；少用width:100%;
23. max-width: 940px;最大寬度能夠自適應；
24. margin-left: auto; margin-right: auto;即可自動居中；
25. span裏不能放地div,會出bug；span里加display:block就是div；
26. position: absolute;相對於祖先中的第一個position: relative;定位；
27. 搜索css tricks shape，圖畫參考；
28. iconfont工具網站；
29. 讓簡歷裏圖標svg上下空出的空間相等；
30. display:inline;須要後續學習；
31. content-box與border-box區別
32. 太極圖畫法：

.yin-yang {
    
    width: 192px;
    box-sizing: content-box;
    height: 96px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 4px 4px 100px 4px;
    border-radius: 100%;
    position: relative;
  }
  .yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 36px solid red;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    box-sizing: content-box;
  }
  .yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 36px solid #eee;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    box-sizing: content-box;
  }
複製代碼

效果圖：