1. 添加CSS的四种方式
- 内联style 属性
- style 标签
- 外部文件css 例如：<link rel="stylesheet" href="./a.css" >
- @import url(./a.css) ;
2. 如何做横向导航栏
- 给所有子元素添加 float:left
- 给其父元素添加 clearfix 类
例如：
.clearfix:: after{
content: '';
display: block;
clear:both;
}
3.a 标签继承
a {
color : inherit ;
}
4. a 标签下划线取消的属性
a{
text-decoration: none;
}
5. 写类的样式时，若类的名称取得太简单，容易影响其他地方
要具体，例如：
.topNavBar .logo .card{
font-size:24px;
font-family: "Arial Black" ;
}
6. 公有的属性可以写在父类上，以减少代码量，通过继承 使子类拥有父类相同属性；
7. 两个span标签之间若存在间隙，不管多大的间隙，系统都默认给出一个空格的距离；
8. margin 和 padding 的区别：
margin ： 外边距
padding : 内边距
margin : 10px 20px 10px 20px ; 遵从 ：上 右 下 左
padding: 10px 20px 10px 20px; 遵从： 上 右 下 左
9. body 默认会有一个 8px margin 边框。
10. CSS全称： Cascading Style Sheet
11. 搜索好看的壁纸可以谷歌 wallhaven
12. 背景图如何放置
<div class="banner" style="background-image:url(./img/rs-cover.jpg)"></div>
13. 一个元素的高度是由什么决定的
高度由其内部文档流元素的高度总和决定
14. 文档流是什么：文档内元素的流动方向
15. 内联元素： 从左往右流动，
例如span标签
如果流动受到阻碍，则换行继续流
若内容是英文，长度很长，那么宽度不够时，不会换行。
若想让长英文换行，加一个css样式 element.style{
word-break:break-all;
}
16. 块级元素： 每一个块占一行，所有的块依次往下流动
不管元素长度多么短，都是占用一行的
若想让块级元素在一行，可以用float:left 父级元素加clearfix css达到目的
css 3 新出了一个属性：
div{
display:inline-block;
}
17. 如何调试css 给元素标签 加border --》简称 border 大法！！！
span{
border:1px solid red
}
18. 建议行高：每种字体的建议行高都不一样。
19. font-size :100px;
100指的是什么，指的是字的最高点距离字的最低点的大小。
20. 块级元素的行高由其内部文档流元素高度决定的
内联元素的高度跟字体与设计师设计的字体高度有关。比较难确定。
line-height 比 font-size 大点就正常行高 ,由 line-height 决定
若 font-size 很大 那就不好说了。玄学。
21. 最容易出现bug的 属性： height 情非得已千万写高度
22. 脱离文档流 相对于屏幕固定；
.topNavBar{
position :fixed;
top:0;
left:0;
}
23. 让背景图自适应，居中：
.banner{
height:515px;
background-image: url(./img/rs-cover.jpg);
background-position: center center;
backgroung-size: cover;
}
24. 给背景图加一个半透明效果：
.banner .mask {
height: 515px;
background-color: rgba(0,0,0,0.8);
}
25. 让卡片水平居中：
.userCard{
margin-left: auto;
margin-right: auto;
}
26. 内联元素不接受宽高，如何让他接受，加一个属性即可
span{
display:inline-block;
}
27. 考点：如何用css画一个三角形
div{
border:10px solid red;
width:0px;
height:0px;
border-top-color:black;
border-right-color:blue;
border-left-color:green;
border-top-width:0px;
}
div{
border: 100px solid transparent;
width: 0px;
height:0px;
border-left-color: #E6686A;
border-top-width:0px;
}
28. 如何把方的变为圆的 border-radius:50%;
div{
border: 4px solid red;
border-radius:50%;
}
