- Cascading Style sheets,层叠样式表;
- style属性，是内联样式，就是写在标签里的样式；
- 外部样式，用link标签的方式引入stylesheet
<link rel="stylesheet" href="./a.css">- 总结
- 内联style属性；
- style标签；
- 外部文件css link
- @import url(./b.css);
6. 布局问题，一定要背
给所有的子元素加上float:left;
给子元素的爸爸添加上名为clearfix的类；
.clearfix::after{
content: '';
display: block;
clear: both;
}
- 页面默认字体大小是16px
- 文字装饰为空，取消下划线
text-decoration: none - 使la包裹住a,
display: block - 跟随爸爸的颜色；有些元素可以继承，有些不可以，color可以；
color: inherit; - padding顺序是上右下左；
padding: 20px 16px 20px 16px; - 块级元素div高度由其内部文档流元素的高度总和决定；
- 内联元素高度跟字体及字体设计师设置的参数有关；
- 文档流：文档内元素的流动方向；内联元素从左往右流动，遇到宽度不够换行继续流动；块级元素每个块占一行，一次从上往下；
- border调试大法：
border:1px solid red; - 内联元素很长时默认不会打断，添加
word-break:break-all;可以将其打断； -
display:inline-block;尽量不用这个，用float; - 字体基线对齐；
- 字体有建议行高；
- 深入了解，搜索“方应杭 CSS line height”;
- height尽量不要写，会有bug；
-
position: fixed;脱离文档流；相对于屏幕；少用width:100%; -
max-width: 940px;最大宽度可以自适应； -
margin-left: auto; margin-right: auto;便可自动居中； - span里不能放地div,会出bug；span里加
display:block就是div； -
position: absolute;相对于祖先中的第一个position: relative;定位； - 搜索css tricks shape，图画参考；
- iconfont工具网站；
- 让简历里图标svg上下空出的空间相等；
-
display:inline;需要后续学习； - content-box与border-box区别
- 太极图画法：
.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;
}
效果图：
image
