CSS布局-笔记

爱被打了一巴掌 2022-10-01 05:41 177阅读 0赞

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

1.  页面默认字体大小是16px
2.  文字装饰为空，取消下划线  
    `text-decoration: none`
3.  使la包裹住a,  
    `display: block`
4.  跟随爸爸的颜色；有些元素可以继承，有些不可以，color可以；  
    `color: inherit;`
5.  padding顺序是上右下左；  
    `padding: 20px 16px 20px 16px;`
6.  块级元素div高度由其内部文档流元素的高度总和决定；
7.  内联元素高度跟字体及字体设计师设置的参数有关；
8.  文档流：文档内元素的流动方向；内联元素从左往右流动，遇到宽度不够换行继续流动；块级元素每个块占一行，一次从上往下；
9.  border调试大法：`border:1px solid red;`
10. 内联元素很长时默认不会打断，添加`word-break:break-all;`可以将其打断；
11. `display:inline-block;`尽量不用这个，用float;
12. 字体基线对齐；
13. 字体有建议行高；
14. 深入了解，搜索“方应杭 CSS line height”;
15. height尽量不要写，会有bug；
16. `position: fixed;`脱离文档流；相对于屏幕；少用`width:100%;`
17. `max-width: 940px;`最大宽度可以自适应；
18. `margin-left: auto; margin-right: auto;`便可自动居中；
19. span里不能放地div,会出bug；span里加`display:block`就是div；
20. `position: absolute;`相对于祖先中的第一个`position: relative;`定位；
21. 搜索css tricks shape，图画参考；
22. iconfont工具网站；
23. 让简历里图标svg上下空出的空间相等；
24. `display:inline;`需要后续学习；
25. [content-box与border-box区别][content-box_border-box]
26. 太极图画法：

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

效果图：

转载于:https://juejin.im/post/5cbe108de51d456e2d69a793

[content-box_border-box]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fqq_27892551%2Farticle%2Fdetails%2F50522169