2018-09-03CSS随笔

1. 添加CSS的四种方式

1. 内联style 属性
2. style 标签
3. 外部文件css 例如：<link rel="stylesheet" href="./a.css" >
4. @import url(./a.css) ;

2. 如何做横向导航栏

1. 给所有子元素添加 float:left
2. 给其父元素添加 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%;
}