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;
  }
复制代码

效果图：